body {
    background-color: white;
    color: white;
    font-family: Arial, sans-serif;
    margin: 0; /* Add this to remove any default margin */
    overflow: hidden; /* Add this to prevent scrollbars */
}

#toolbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    padding: 10px;
    text-align: center;
    z-index: 10;
}

#lens-diagram-container {
    width: 99vw;
    height: calc(100vh - 50px); /* Adjust for toolbar height */
    position: relative;
    background: radial-gradient(circle, grey 1px, transparent 1px);
    background-size: 20px 20px;
    margin: 0 auto; /* Center the container horizontally */
    display: block; /* Ensure the container is treated as a block-level element */
}

button, select {
    margin: 5px;
    padding: 10px;
    color: white;
    background-color: #333;
    border: none;
    cursor: pointer;
}

button:hover, select:hover {
    background-color: #555;
}

.optical-element {
    position: absolute;
    cursor: move;
    touch-action: none;
    transition: filter 0.1s;
}

.optical-element:hover {
    filter: brightness(1.2)
}

.clear {
    background-color: #6495ED;
}

.reflective {
    background-color: silver;
}

.opaque {
    background-color: black;
}

.window {
    width: 20px;
    height: 80px;
    clip-path: polygon(100% 100, 100% 100%, 100% 100%, 100 100%);
}

.flat-mirror {
    width: 20px;
    height: 80px;
    clip-path: polygon(100% 100, 100% 100%, 100% 100%, 100 100%);
}

.stop {
    width: 20px;
    height: 80px;
    clip-path: polygon(100% 100, 100% 100%, 100% 100%, 100 100%);
}

.concave-lens {
    width: 100px;
    height: 80px;
    clip-path: path('M 0 0 Q 10 40 0 80 L 20 80 Q 10 40 20 0 Z');
}

.convex-lens {
    width: 20px;
    height: 80px;
    clip-path: ellipse(50% 50% at 50% 50%);
}

.concave-mirror {
    width: 100px;
    height: 80px;
    clip-path: path('M 0 0 Q 20 40 0 80 L 20 80 L 20 0 Z');
}

.convex-mirror {
    width: 100px;
    height: 80px;
    clip-path: path('M 20 0 Q 0 40 20 80 L 30 80 L 30 0 L 20 0 Z');
}

.ray {
    background-color: yellow;
}