body {
    margin: 0;
    padding: 0;
    background-color: #000000;
}

#viewer-container {
    height: 100vh; /* Full viewport height */
    width: 100vw; /* Full viewport width */
    position: relative;
    overflow: hidden; /* Clips any overflow */
}

#controls {
    position: fixed;
    top: 0; /* Moved to the top */
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    background-color: #00000000; /* Transparent */
    z-index: 10; /* Stays above the Three.js canvas */
}

button {
    font-family: 'Interphases', sans-serif;
    padding: 5px 10px; /* Smaller padding */
    font-size: 12px; /* Smaller font size */
    border: none;
    cursor: pointer;
    margin: 0 5px; /* Horizontal margins */
    color: rgb(0, 0, 0);
    font-weight: bold;
}

/* Three.js buttons: yellow */
#scn1-btn, #sphere-btn {
    background-color: #e5ff00;
}

#scn1-btn:hover, #sphere-btn:hover {
    background-color: #ffd700; /* Darker yellow on hover */
}

/* Spline button: blue */
#spline-btn {
    background-color: #007bff;
}

#spline-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* HTML embed buttons: red */
#iframe1-btn, #iframe2-btn, #iframe3-btn, #iframe4-btn {
    background-color: #ff0000;
}

#iframe1-btn:hover, #iframe2-btn:hover, #iframe3-btn:hover, #iframe4-btn:hover {
    background-color: #cc0000; /* Darker red on hover */
}

/* Style for the transition overlay */
.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 10 columns */
    grid-template-rows: repeat(10, 1fr);    /* 10 rows */
    z-index: 20; /* Higher z-index to cover controls */
    pointer-events: none; /* Allow clicks to pass through if needed */
}

.square {
    background-color: black;
    opacity: 0; /* Start invisible */
    transition: opacity 0.1s linear; /* Smooth any opacity changes */
}

.square.appear {
    animation: appear 0.1s linear forwards;
}

.square.disappear {
    animation: disappear 0.1s linear forwards;
}

@keyframes appear {
    to {
        opacity: 1; /* Squares become fully opaque */
    }
}

@keyframes disappear {
    from {
        opacity: 1; /* Start from fully opaque */
    }
    to {
        opacity: 0; /* Fade out */
    }
}

/* Load the custom font */
@font-face {
    font-family: 'Interphases'; /* Name you’ll use to reference it */
    src: url('fonts/Interphases.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}