body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: black;
    overflow-y: auto;
    min-height: 100vh;
}

html {
    margin: 0;
    padding: 0;
    background-color:black;
}

h1{
    margin: 20px;
    font-size: 35px;
}
#page-wrapper {
    position: relative;
    padding-top: 80vh;

     min-height: 100vh;  /* add this */
}

#fluid-simulator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    pointer-events: none;
    z-index: 0;
}
canvas {
    display: block;
    margin: 0;
    z-index: 0;
    pointer-events: none;
    width: 100%;

        
}
::-webkit-scrollbar {
    width: 10px;
    position: fixed;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: gray; /* Use a vibrant accent color (e.g., Bandcamp pink/teal) */
    color: #ffffff;            /* High contrast text */
    font-weight: bold;
    padding: 12px 24px;        /* Generous hitting area */
    border: none;
    border-radius: 50px;       /* Pill-shaped */
    cursor: pointer;          /* Forces the "hand" icon on hover */
    box-shadow: 0 4px 15px rgba(255, 0, 85, 0.3); /* Soft glowing shadow */
    transition: all 0.2s ease; /* Smooth animation for hover states */
}

.most-important-link:hover {
    transform: translateY(-2px); /* Lifts up slightly */
    /* box-shadow: 0 6px 20px white; Shadow deepens */
    font-family: monospace;
}

/* Tactile feedback when clicked */
.most-important-link:active {
    transform: translateY(1px);  /* Sinks down when clicked */
}

#title{
    text-align: center;
    color: white;
    z-index: 2;
    font-family: monospace;

    align-items: center;
    width: 100%;

    display: flex;
    flex-direction: column;
    text-align: center;  /* Ensures inline text/buttons are centered */

}

.most-important-link {
    background-color: #629aa9; /* Use a vibrant accent color (e.g., Bandcamp pink/teal) */
    color: #ffffff;            /* High contrast text */
    font-weight: bold;
    padding: 12px 24px;     
    margin: 40px;
    font-size: 30px;
    font-family: monospace;
    border: none;
    border-radius: 10px;       
    cursor: pointer;          
    transition: all 0.2s ease; 
    animation: slight-bounce 2s infinite ease-in-out;
}




.hyperlink {
    background: none;       
    border: none;            
    cursor: pointer;        
    padding: 40px 20px;
    color: white;
    font-size: 20px;
    font-family: monospace;
}

.hyperlink:hover  {
    opacity: 0.7;            
}

.hyperlink  {
    opacity: 0.9;            
}

#footer{
    text-align: center;
    color: white;
    z-index: 2;
    font-family: monospace;
    font-size: 15px;
    padding-top: 40px;
    padding-bottom: 80px;
}

.slider {
    width: 200px; /* Increase this number to make them longer */
    cursor: pointer;
    accent-color: #ff0077; /* Set this to your fluid's color */

}

.slider:hover {
    background: rgba(255, 255, 255, 0.3);
}


.slider-label{
    font-family: monospace;
    color: white;
    font-size: 20px;
    z-index: 2;
}

.slider-set {
    display: flex;
    flex-direction: column; /* Stack vertically */
    align-items: left;    /* Center label under slider */
                 /* Space between slider and label */
}

.controls-container{
    gap: 40px;
    position: relative;
    z-index: 2;
    left: 10px;
    bottom: 10px;
    display: none;      

}

.checkbox-container{

    font-family: monospace;
    color: white;
    opacity:0.4;
    padding: 10px;
    font-size: 20px;
    z-index: 2;
    
}
#menu-button{
    display: none;
    color: white;
    background-color: black;
    top: 10px;
    left: 10px;
    position: fixed;
    height: 40px;
    width: 40px;
}   

.bottom-sheet{
    display: none;
}

.text-content{
    display: block;
}
html {
    overflow: hidden;   /* kill the outer one */
}

body {
    overflow-y: auto;   /* only body scrolls */
    height: 100vh;      /* give it a defined height to scroll within */
}

#cover-art {
    width: 80%;          /* shrinks/grows with the box */
    height: auto;        /* maintains aspect ratio */
    max-width: 400px;    /* won't get too huge on wide screens */
    margin: 40px auto;   /* centers it */
    display: block;
}
.hyperlink-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* two equal columns */
    width: 100%;
}
.hyperlink-grid button:last-child {
    grid-column: 1 / -1;   /* spans both columns */
}

.interactive-wrapper {
    display: flex;
    align-items: center;  /* Vertically aligns checkbox and sliders */
    gap: 20px;            /* Spacing between the checkbox and the slider group */
    position: relative;
    z-index: 5;          /* Keeps it above the fluid simulation canvas */
    padding: 10px;
}
#home-page-content {
    border: 2px solid rgba(255, 255, 255, 0.3);  
    position: relative;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.75);
    max-width: 600px;
    width: 90%;
    margin: 0px auto 10px;   /* top, left/right, bottom */
    padding: 40px;
    box-sizing: border-box;
}

#site-header h1{
    color: white;
    font-family: monospace;
    top: 10px;
    left: 10px;
    z-index: 2;
    position: absolute;
    margin:0;
    padding:0;

}

#scroll-hint {
    display: none; /*used to be flex */
    flex-direction: column;
    gap: 4px;
    opacity: 0.4;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    position: fixed;
    margin:0;
    padding:0;

}

#scroll-hint p {
    margin: 0;
    padding: 0;
    color: white;
    font-family: monospace;
    font-size: 12px;
}

#scroll-hint p {

    animation: cascade 1.2s infinite;
    color: white;
    opacity:0.5;
    font-family: monospace;
    font-size: 20px;
}

#scroll-hint span:nth-child(2) { animation-delay: 0.2s; }
#scroll-hint span:nth-child(3) { animation-delay: 0.4s; }


@keyframes cascade {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.7; }
}


/* Mobile: Screen is narrow OR the device uses touch */
@media (max-width: 768px) {
    .checkbox-container{
        display: none;
    }

    #scroll-hint{
        display:none;
    }
    .controls-container { /*desktop*/
        display: none;
        position: fixed;
        flex-direction: column; /* Stack sliders for thumb access */
        gap: 30px; 
        top: unset;
        left: 0;
        right: 0;
        bottom: 0;
        padding-bottom: 60px;
        width: 100%;
    }

    .slider{
        width: 90vw;
    }
    .slider-set {
        align-items: center;
    }

    #controls-container.open {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .text-content.open{
        display: none;
    }

    #menu-button{
        display: block;
        position: absolute;
        font-size: 30px;
        z-index: 5;
    }
    ::-webkit-scrollbar {

        display: none;
    }
    h1{
        font-size: 20px;
    }



    p{
        font-size: 18px;
    }

    body {
        overflow-x: hidden;
        scrollbar-width: none; /* Firefox */
    }
}