/* Basic */

    a:visited {
        color: inherit; /* Ensures the visited state does not change color */
    }

    html {
        scroll-behavior: smooth; /* Enables smooth scrolling */
    }

    html, body {
        height: 100%;  /* Ensure the body and html elements stretch full height of the viewport */
        margin: 0;     /* Remove default margin */
        padding: 0;    /* Remove default padding */
    }

    body {
        overflow-x: hidden; /* Hide horizontal overflow */
        background-color: #1A1E28;
        font-family: 'Anonymous Pro', monospace; 
        color: white; /* Default text color */
        position: relative;
    }

    .main-container {
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Hides anything outside */
        position: relative; /* Ensures blobs position relative to this */
    }


    #loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #1A1E28; /* Change to match your background */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }
    
    .loader-container {
        position: relative; /* To position the circle and logo relative to this container */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .loader-container .circle {
        position: absolute; /* This allows the circle to overlap with the logo */
        z-index: 1; /* Ensure the circle is under the logo */
    }
    
    .loader-container .logo {
        z-index: 2; /* Ensure the logo is on top of the circle */
        margin-top: 15px;
        margin-right: 8px;
    }
    
    .main-container {
        display: none;
    }

    #intro #h1-wrapper,
    #intro h2,
    #intro p,
    #intro .icons,
    #main-wrapper #arrow {
        opacity: 0;
        transition: opacity 1s ease;
    }
    
    .intro-fade-in {
        /* Don't set opacity here; JS handles final opacity */
    }
    
    /* Fonts */

        .sassy-frass-regular {
            font-family: 'Sassy Frass', cursive;
        }

        @font-face {
            font-family: 'Saturday August';
            src: url('../fonts/SaturdayAugust.ttf') format('truetype'),
                url('../fonts/SaturdayAugust.woff2') format('woff2'),
                url('../fonts/SaturdayAugust.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        .saturday-august-regular {
            font-family: 'Saturday August', sans-serif;
        }

        .anonymous-pro-font {
            font-family: 'Anonymous Pro', monospace;
        }



/* Framing */


    /* Navigation Bar */

        nav {
            position: fixed;
            top: 0;
            right: 0;
            background-color: transparent; /* Clear background */
            padding: 20px;
            z-index: 100;
        }

        /* Style the navigation list */
        nav ul {
            list-style: none; /* Remove default list styling */
            margin: 0;
            padding: 0;
            display: flex; /* Align list items horizontally */
        }

        nav ul li {
            margin: 0 35px; /* Space between list items */
        }

        nav a {
            color: white;
            text-decoration: none;
            font-family: 'Anonymous Pro', monospace;
            font-size: 21px;
            transition: color 0.3s ease;
        }

        /* Add hover effect for navigation links */
        nav a:hover {
            color: #A8A8A8; /* Change to a lighter gray when hovered */
        }


        /* Reset Button Styles */
        button.menu-toggle {
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            cursor: pointer;
            position: fixed;
            top: 15px;
            right: 20px;
            z-index: 10;
            width: 35px; /* Match the image width */
            height: 35px; /* Match the image height */
        }

        /* Hide Hamburger Button by Default */
        .menu-toggle img {
            display: none;
            width: 100%; /* Make it fill the button */
            height: 100%;
            z-index: 0; /* Ensure it is below the invisible layer */
        }

        /* Hamburger Menu: When Screen is Smaller than 768px */
        @media (max-width: 1000px) {
            nav ul {
                display: none; /* Hide menu */
                flex-direction: column;
                position: absolute;
                top: 0px;
                right: 20px;
                background: rgba(17, 23, 31, 0.827);
                width: 200px;
                border-radius: 8px;
                text-align: center;
                padding: 10px 0;
            }

            nav {
                top: 50px;
            }

            nav ul li {
                margin: 10px 0;
            }

            /* Show Hamburger Menu */
            .menu-toggle img{
                display: block;
            }

            /* Show menu when active */
            nav.active ul {
                display: flex;
            }
        }

        header .gradient-overlay {
            position: fixed;
            top: 0;
            left: 0px;
            width: 100%;
            height: 70px; /* Adjust height of the gradient overlay */
            background: linear-gradient(to bottom, #1A1E28 25%, #1A1E2800 98%);
            pointer-events: none; /* Ensure the overlay does not interfere with user interactions */
            z-index: 8;
        }


    /* Scrollbar Details */

        /* Firefox */
        * {
        scrollbar-width: thin; /* Thin scrollbar */
        scrollbar-color: rgba(156, 165, 178, .5) #1A1E28; /* Thumb color and track color */
        }

        /* Chrome, Edge, and Safari */
        *::-webkit-scrollbar {
        width: 12px; /* Width of the scrollbar */
        }

        *::-webkit-scrollbar-track {
        background: #1A1E28; /* Track background color */
        }

        *::-webkit-scrollbar-thumb {
        background: rgba(156, 165, 178, 1); /* Background color of the scrollbar thumb */
        border-radius: 10px; /* Rounded corners */
        border: 3px solid #ffffff; /* Border around the scrollbar thumb */
        }


        *::-webkit-scrollbar-thumb:hover {
        background: rgba(156, 165, 178, .5); /* Darker color for thumb on hover */
        }

        /* Watermark styling */
        .watermark {
            position: fixed; /* Keeps it in the top corner */
            top: 10px;       /* Adjust for perfect placement */
            left: 10px;      /* Adjust as needed */
            font-size: 50px; /* Adjust size to your liking */
            color: white; /* Subtle, semi-transparent white */
            z-index: 1001;  /* Place it above most content */
        }



/* Startup Page - Main */

    /* Icons */        
  
        .icons {
            width: 159px;
            height: 47px;
            display: flex;
            position: absolute;
            left: -22px;
            grid-row: 4;
            margin: 0px;
            padding-top: 8px;
            opacity: 60%;

        }

        .icons img {
            width: 37px;
            height: 37px;
            padding-left: 20px;
            z-index: 6;
        }

        
    /* Arrow */        

        .main-wrapper .arrow{
            cursor: pointer; /* Changes the cursor to a hand when hovering */
            justify-self: center; /* Aligns the whole container to the right */
            position: relative;
            grid-column: 1 / 3;
            grid-row: 1;
            margin-left: 100px;
            margin-top: 550px;
            z-index: 5;
            opacity: 30%;
            scale: 35%;
        }

        .arrow svg path {
            stroke-dasharray: 150; /* Match this to the path length */
            stroke-dashoffset: 0;  /* Fully visible by default */
            transition: none;      /* No initial transition */
        }

        /* Hover effect to draw the path again */

        .arrow:hover svg path {
            animation: draw-arrow 1.5s forwards;
        }

        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }
        
        .arrow.bounce {
            animation: bounce 0.5s ease-in-out;
        }

        /* Keyframes to animate drawing */
        @keyframes draw-arrow {
            from {
                stroke-dashoffset: 150; /* Start from hidden */
            }
            to {
                stroke-dashoffset: 0;   /* End with the full arrow visible */
            }
        }

        a {
            text-decoration: none; /* Removes the underline from the link */
        }

    
    /* Container - Holds Startup Main Area */

        main {
            display: grid;
            grid-template-columns: auto auto; /* Three columns: left, middle (avatar), right */
            align-items: center; /* Align items vertically */
            justify-content: center; /* Center everything horizontally */
            gap: 80px; /* Space between columns */
            padding: 50px;
            left: -50px;
            width: fit-content;
            height: fit-content;
            margin: auto;
            position: relative;
            top: -20px;
        }


        .main-wrapper {
            display: flex;
            justify-content: center;   /* Centers horizontally */
            align-items: center;       /* Centers vertically */
            min-height: 100vh;         /* Ensures the wrapper takes the full viewport height */
        }
    


    /* Introduction Text */

        .intro {
            grid-column: 2; /* Leftmost column */
            grid-row: 1;
            position: relative;
            z-index: 5;
            white-space: nowrap;
            display: grid;
            grid-template-rows: auto auto auto auto auto;
            margin-top: -120px;
        }

        main .intro h1 {
            font: weight 50px;
            font-size: 65px;
            font-family: 'Anonymous Pro', monospace;
            margin: 0;
            grid-row: 1;
        }

        main .intro h1:hover {
            cursor: pointer;
        }

        .h1-background {
            position: absolute;
            color: #1A1E28; /* background color to mask shine trail */
            z-index: -10;
          }
          

        main .intro h2 {
            font-size: 42px;
            font-weight: 10;
            grid-row: 2;
            margin: 0;

        }

        main .intro p {
            font-size: 23px;
            font-weight: 10;
            grid-row: 3;
            margin: 0;
            margin-top: 50px;
            opacity: 80%;
        }

        .shiny-text {
            font-size: 4rem;
            font-weight: bold;
            background: linear-gradient(
              -120deg,
              #ffffff 0%,
              #ffffff 40%,
              #ffffff4f 50%,
              #ffffff 60%,
              #ffffff 100%
            );
            background-size: 200% auto;
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
          }
          
          .shiny-animate {
            animation: textShine 2s ease forwards;
          }

          @keyframes textShine {
            0% {
              background-position: 100% 0;
            }
            100% {
              background-position: -80% 0;
            }
          }
          
          


    /* Avatar */
   
        .avatar {
            width: 500px; /* Adjust as needed */
            height: 900px; /* Adjust as needed */
            top: -150px;
            grid-column: 1; /* Middle column */
            grid-row: 1;
            position: relative;
        }

        .avatar::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 4;
            width: 550px;
            height: 100px;
            top: 730px;
            backdrop-filter: blur(2px);
            pointer-events: none;
          }

        .avatar canvas {
            position: absolute;
            width: 100%; /* Adjust as needed */
            height: 100%; /* Adjust as needed */
            top: 0;
            left: 0;
            z-index: 2;
            filter: drop-shadow(0 0 8px #1a1e286c); /* soft white blur */
            -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 90%);
            mask-image: linear-gradient(to bottom, black 60%, transparent 90%);

            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
            
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
        }

        .avatar .gradient-behind {
            position: absolute;
            bottom: -150px;
            left: 60%; /* Center the gradient */
            transform: translateX(-50%); /* Ensure it's truly centered */
            width: calc(100% + 550px);
            height: calc(100%); /* Adjust as needed */
            
            background: radial-gradient(ellipse at center, 
               #1A1E28 30%, /* Fully opaque in the center */
                #1A1E2800 70%  /* Gradually fades out towards edges */
            );
        
            pointer-events: none; /* Prevents interactions */
            z-index: 0;
        }



    /* Greeting Text */

        .greeting {
            grid-column: 1; /* Rightmost column */
            grid-row: 1;
            justify-self: start; /* Aligns the whole container to the right */
            top: -267px;
            right: -54px;
            z-index: 3; /* Higher z-index to ensure it is on top of the avatar */
            position: relative;
        }

        main .greeting .saturday-august-regular {
            font-size: 45px;
            color: white;
            transform: rotate(-10deg); /* Rotate the text */
        }

        main .greeting svg {
            top: 51px;
            right: 32px;
            transform: rotate(-25deg) scaleX(-1); /* Rotate the text */
            position: absolute;
        }



/* Responsivity of Main */

        
    /* Smaller laptop screen heights */

        @media (max-height: 790px) {
            .intro {
                top: -15px;
            }
        
            .main-wrapper .arrow {
                top: -50px; /* Move arrow up */
            }
        }

        @media (min-height: 900px) {

            main {
                top: 0px;
            }
            
        }


    /* Reposition for tablet */

        @media (min-width: 750px) and (max-width: 1028px) {


            main {
                height: calc(650px) !important;
                left: -25px !important;
            }

            .avatar {
                width: 400px;
                height: 800px;
            }

            .avatar {
                bottom: -325px !important;
            }

            .avatar .gradient-behind {
                bottom: -120px !important;
            }

            .avatar .gradient-overlay {
                height: 60%;
                bottom: -190px !important;
            }

            .avatar::after {
                top: 600px;
                width: 500px;
            }

            .intro h1 {
                font-size: 45px !important; /* Minimum 25px, preferred dynamic size, max 35px */
            }
            .intro h2 {
                font-size: 30px !important; /* Minimum 18px, preferred dynamic size, max 28px */
            }
            .intro p {
                font-size: 16px !important; /* Minimum 18px, preferred dynamic size, max 28px */
            }

            .intro {
                top: -50px;
            }
            
            .icons img {
                width: 32px !important;
                height: 32px !important;
            }

            .icons {
                right: 20px !important;
            }

            .greeting .saturday-august-regular {
                font-size: 40px !important;
            }

            .main-wrapper .arrow {
                transform: scale(0.8);
                transform-origin: center;
                right: 17px !important;
            }

            @keyframes bounce-tablet {
                0%, 100% {
                    transform: scale(0.8) translateY(0);
                }
                50% {
                    transform: scale(0.8) translateY(-5px);
                }
            }
            .arrow.bounce {
                animation: bounce-tablet 0.5s ease-in-out !important;
            }

        }


     /* Reposition for mobile */

          @media (max-width: 750px) {

            main {
                height: calc(660px) !important;
                left: 0px !important;
            }

            main {
                display: grid;
                grid-auto-columns: unset; /* or none */
                grid-auto-flow: row !important;
                grid-template-columns: 1fr !important;
                gap: 0px;
                top: 80px;
            }

            main > * {
                grid-column: 1 / -1 !important; /* Forces everything to span full width */
            }

            .watermark {
                font-size: 40px !important;
            }

            .avatar {
                grid-column: 1;
                grid-row: 1;
                width: 300px;
                height: 700px;
                top: -170px !important;
                left: -30px;
                position: relative;
            }

            .avatar::after {
                top: 550px;
                width: 400px;
            }

            .avatar .gradient-behind {
                bottom: -108px !important;
                width: 100%;
            }

            .avatar .gradient-overlay {
                height: 60% !important;
                bottom: -160px !important;
            }

            .greeting {
                grid-column: 1;
                grid-row: 1;
                right: -2px !important;
                top: -190px !important;
            }

            .greeting .saturday-august-regular {
                font-size: 30px !important;
            }

            .greeting svg {
                right: 20px !important;
                top: 40px !important;
                transform: scale(0.8) rotate(-250deg) !important;
                transform-origin: center;
            }


            .intro {
                grid-column: 1;
                grid-row: 1;
                z-index: 5;
                justify-self: center;
                right: 0px !important;
                top: -80px !important;
            }

            .intro h1 {
                font-size: 35px !important; /* Minimum 25px, preferred dynamic size, max 35px */
                text-align: left !important;
            }
            .intro h2 {
                font-size: 21px !important; /* Minimum 18px, preferred dynamic size, max 28px */
                text-align: left !important;
            }
            .intro p {
                font-size: 16px !important; /* Minimum 18px, preferred dynamic size, max 28px */
                padding-top: 340px !important;
                text-align: center !important;
            }

            .icons {
                display: none;
            }

            .main-wrapper .arrow {
                grid-column: 1;
                grid-row: 1;
                z-index: 5;
                transform: scale(0.6);
                transform-origin: center;
                right: 50px !important;
                top: -140px;
            }

            @keyframes bounce-mobile {
                0%, 100% {
                    transform: scale(0.6) translateY(0);
                }
                50% {
                    transform: scale(0.6) translateY(-5px);
                }
            }
            .arrow.bounce {
                animation: bounce-mobile 0.5s ease-in-out !important;
            }

          }


/* Background Blobs*/

        .blobs {
            overflow-x: hidden;
        }

        .blob {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden; /* To prevent scrollbars if the blob moves outside the viewport */
            filter: blur(30px);
        }

        .blob1 {
            position: absolute;
            background: linear-gradient(45deg, rgba(156, 165, 178, .3), rgba(156, 165, 178, 0));
            height: 764px;
            width: 918px;
            left: -600px;
            top: 550px;
            transform: rotate(-180deg);
            animation: transform 20s ease-in-out infinite both alternate, movement_two 20s ease-in-out infinite both;
        }

        .blob2 {
            position: absolute; 
            background: linear-gradient(-80deg, rgb(131, 53, 126, .9) 20%, rgba(131, 53, 126, .3) 50%, rgba(131, 53, 126, .5) 80%, rgba(131, 53, 126, 0.8) 100%);
            height: 764px;
            width: 1218px;
            top: -400px;
            transform: rotate(180deg);
            animation: transform 17s ease-in-out infinite both alternate, movement_two 20s ease-in-out infinite both;
            overflow: hidden;
            left: calc(100% - 785px); /* Position it to the right */
        }
        

        .blob3 {
            position: absolute;
            background: linear-gradient(-45deg, rgba(131, 53, 126, 1), rgba(131, 53, 126, 0));
            height: 764px;
            width: 918px;
            left: calc(100% - 585px);;
            top: 1500px;
            transform: rotate(180deg);
            animation: transform 25s ease-in-out infinite both alternate;
            overflow-y: hidden;
        }

        @keyframes transform
        {
            0%,
        100% { border-radius: 33% 67% 70% 30% / 30% 40% 70% 70%; } 
        20% { border-radius: 37% 63% 51% 49% / 37% 35% 35% 63%; } 
        40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 26%; } 
        60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 73%; } 
        80% { border-radius: 40% 60% 42% 58% / 51% 51% 49% 59%; } 
        }

        @keyframes movement_two
        {
            0%,
        500% { transform: none; }
        50% { transform: translate(5%, 0%) rotate(-200deg) scale(1.3);}
        }

        @keyframes transform_mobile {
            0%, 100% {
                border-radius: 33% 67% 70% 30% / 30% 40% 70% 70%;
            } 
            20% {
                border-radius: 37% 63% 51% 49% / 37% 45% 35% 63%;
            } 
            40% {
                border-radius: 36% 64% 64% 36% / 64% 48% 52% 26%;
            }
            60% {
                border-radius: 37% 63% 51% 49% / 30% 38% 70% 73%;
            } 
            80% {
                border-radius: 40% 60% 42% 58% / 51% 51% 49% 59%;
            }
        }
        
        @keyframes movement_three
        {
            0%,
        500% { transform: none; }
        50% { transform: translate(5%, 0%) rotate(-200deg) scale(1.1);}
        }


/* Responsivity of Blobs */
    
    /* Reposition for mobile */

     @media (max-width: 750px) {

        .blob1 {
            top: 370px;
            left: -600px;
            animation: transform_mobile 20s ease-in-out infinite both alternate, movement_three 20s ease-in-out infinite both;
        }

        .blob2 {
            left: 300px;
            animation: movement_two 20s ease-in-out infinite both alternate, transform 17s ease-in-out infinite both;
        }

     }



/* Secondary Page - Nav */

        .mid {
            display: flex;
            justify-content: center;
            gap: 50px; /* Adds space between illustrations */
            width: fit-content;
            height: fit-content;
            margin: auto;
            position: relative;
            align-items: center; /* Align items vertically */
            padding: 50px;
            z-index: 3;
        }

        .mid-wrapper {
            display: flex;
            justify-content: center;   /* Centers horizontally */
            align-items: center;       /* Centers vertically */
            min-height: 100vh;         /* Ensures the wrapper takes the full viewport height */
        }

        .illustration-container {
            display: flex;
            flex-direction: column; /* Stack image & label */
            align-items: center; /* Center them */
            text-align: center;
            position: relative;
            border-radius: 30px;
            overflow: hidden;
            transition: transform 0.1s ease;
            padding: 15px;
            padding-top: 25px;
            padding-bottom: 25px;
            will-change: transform;

        }

        .illustration-container:hover {
            background: linear-gradient(
              45deg,
              rgba(156, 165, 178, 0.05) 0%,
              rgba(156, 165, 178, 0.0375) 15%,
              rgba(156, 165, 178, 0.005) 31%,
              rgba(156, 165, 178, 0.05) 43%,
              rgba(156, 165, 178, 0.0375) 72%,
              rgba(156, 165, 178, 0.05) 97%
            );
            border: 1px solid #9CA5B2;
            box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2);
          }
          

        /* Style the navigation list */
        .label {
            margin-top: 50px; /* Space between image & text */
            color: white;
            font-family: 'Anonymous Pro', monospace;
            font-size: 26px;
            text-decoration: none;
        }

        /* Add hover effect for navigation links */
        .label:hover {
            color: #A8A8A8;
        }
        
        .illustration {
            width: 200px;
            height: 200px;
            transition: transform 0.5s ease;
        }
        
        .illustration:hover {
            transform: scale(1.1);
        }

        @keyframes pop {
            0% {
              transform: scale(1);
            }
            50% {
              transform: scale(1.1);
            }
            100% {
              transform: scale(1);
            }
          }
          
          .illustration.animate-once {
            animation: pop 0.6s ease-in-out forwards;
          }

        .bottom-text p {
            justify-self: center;
            align-items: center;
            opacity: 60%;
            text-align: center;
        }

        .bottom-text {
            margin-top: -48px;
            justify-content: center;
            align-items: center;
            width: 100vw;
            z-index: 1000;
            display: flex;
            position: absolute;
        }

        .bottom-text a {
            text-decoration: underline;
            color: white;
            pointer-events: auto;
        }

        .bottom-text a:visited {
            color: white !important;
        }
          

/* Responsivity of Mid */

        /* Resize for smaller laptop*/
        @media (min-width: 870px) and (max-width: 1157px) {
            .illustration {
                width: 150px;
                height: 150px;
            }

            .label {
                font-size: 21px;
                margin-top: 40px;
            }

            .mid {
                gap: 70px;
            }
        }

        /* Resize for tablet*/
        @media (min-width: 640px) and (max-width: 870px) {

            .mid {
                flex-wrap: wrap;
            }
        }

        /* Resize for phone*/
        @media (max-width: 640px) {

            .mid {
                flex-wrap: wrap;
            }

            .illustration {
                width: 115px;
                height: 115px;
            }

            .label {
                font-size: 16px;
                margin-top: 20px;
            }

            .mid {
                gap: 50px;
            }

        }




/* In Progress Message - Future Pages */
        
        .label h3 {
            margin-top: 80px;
            font-size: 30px;
            font-family: 'Anonymous Pro', monospace;
        }

        .later h3 {
            margin-top: -80px;
            font-size: 35px;
            font-family: 'Anonymous Pro', monospace;
        }

        .announcement .construction{
            width: 400px;
            margin-top: -100px;
        }

        .announcement {
            display: flex; /* Align list items horizontally */
            flex-direction: column; /* Align items to the right */
            align-items: center;
            justify-content: center;
            z-index: 33;
            position: relative;
            padding: 50px;
            width: fit-content;
            height: fit-content;
            margin: auto;
        }

        .announcement-wrapper {
            display: flex;
            justify-content: center;   /* Centers horizontally */
            align-items: center;       /* Centers vertically */
            min-height: 100vh;
            overflow: hidden;
        }