/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Root Variables for Colors */
:root {
    /* PURPLE TONES */
    --purple-light: #72009F;
    --purple-mid: #5B007F;
    --purple-dark: #470063;
    --purple-darker: #310044;
    --purple-darkest: #13001B;

    /* GREEN TONES */
    --green-light: #00B917;
    --green-mid: #009512;
    --green-dark: #00730E;
    --green-darker: #00500A;
    --green-darkest: #002004;

    /* BLUE TONES */
    --blue-light: #5478a8;
    --blue-mid: #3a5493;
    --blue-dark: #283b75;
    --blue-darker: #14295b;
    --blue-darkest: #061640;

    /* YELLOW TONES */
    --yellow-light: #e6d32f;
    --yellow-mid: #c3aa16;
    --yellow-dark: #9e8503;
    --yellow-darker: #7b6800;
    --yellow-darkest: #554800;

    /* RED TONES */
    --red-light: #EF0C00;
    --red-mid: #C00A00;
    --red-dark: #950700;
    --red-darker: #670500;
    --red-darkest: #290200;
}

/* General Body and HTML Styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    /* background-color: var(--blue-darkest);  */
    color: white; /* Text Color */
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

body::after {
    content: "";
    display: block;
    height: 100px;
}

#background-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--blue-darkest);
    z-index: -2;
}
#lavaCanvas {
    z-index: -1;
}
#lavaCanvas {
    --background-color: var(--blue-darkest);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    display: block;
}

/* Heading Style */
h1 {
    margin-top: 20px;
    font-size: 2em;
    text-align: center;
    color: white; /* Text Color */
    letter-spacing: 2px;
    animation: fadeIn 1s ease forwards;
}

.play-button-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 30px 0 0 0;
    width: 100%;
    padding-left: 450px;
    box-sizing: border-box;
}

/* Custom Play Button */
.custom-play-button {
    width: 57.5px;
    height: 42.5px;
    color: var(--purple-lightest); /* Updated Background Color */
    background-color: var(--purple-mid); /* Updated Background Color */
    border: 2px solid var(--purple-lightest); /* Updated Background Color */
    border-radius: 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.25em;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-play-button:hover {
    background-color: var(--purple-light);
    transform: scale(1.15);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.custom-play-button:active {
    background-color: var(--purple-darker);
    transform: scale(0.95);
}

/* Scrub Bar Control Styling */
.scrub-control {
    display: none;
    background-color: var(--purple-darker);
    border: 5px solid var(--purple-lightest);
    width: 400px;
    padding-left: 450px;
    height: 12.5px;
    position: relative;
    overflow: hidden;
    --indicator-position-scrub: 0%;
    margin-top: -40px;
}

.scrub-control::before {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 15px;
    width: 25%;
    height: calc(100% + 20px);
    top: 50%;
    left: var(--indicator-position-scrub, 0%);
    transform: translate(-50%, -50%);
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
}

.home-button {
    position: fixed; /* Ensures the button stays stationary relative to the viewport */
    top: 20px; /* Distance from the top of the viewport */
    left: 20px; /* Distance from the left of the viewport */
    background-color: var(--purple-mid); /* Slightly darker shade */
    color: white; /* Text color */
    padding: 7px; /* Inner spacing for the button */
    font-size: 27px; /* Font size of the button's text */
    text-decoration: none; /* Remove underline from text */
    border-radius: 50%; /* Make the button circular */
    cursor: pointer; /* Change cursor to pointer on hover */
    z-index: 1000; /* Ensure it stays above all other elements */
    display: flex; /* Center text/icon inside the button */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    width: 40px; /* Fixed width */
    height: 40px; /* Fixed height */
}

.home-button:hover {
    background-color: var(--purple-light);
}

/* Play Button Delays */
#play-button-fitmk { animation-delay: 0.2s; }
#play-button-mashup { animation-delay: 0.5s; }
#play-button-anxiety { animation-delay: 0.8s; }
#play-button-matthew { animation-delay: 1.1s; }
#play-button-okay { animation-delay: 1.3s; }
#play-button-sad { animation-delay: 1.5s; }
#play-button-spiderverse { animation-delay: 1.7s; }

/* Video Player */
.video-player {
    margin-top: 20px;
    border: none;
    border-radius: 8px;
    background-color: var(--purple-darkest);
    max-width: 900px;
    width: 100%;
}

/* Fade-In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDelayed {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#toggle-image {
    width: 60vw;
    max-width: 600px;
    display: block;
    margin: 40px auto 80px auto; /* Adds more space below */
    cursor: pointer;
}