html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}


html {
    -webkit-text-size-adjust: 100%; /* Prevents iOS/Chrome font boosting */
    text-size-adjust: 100%;
}

#background {
    position: relative;
    background-image: url("/Images/SplashPage/BackgroundArt.png");
    width: 100%;
    height: auto;
    min-height: 100dvh;
    background-size: cover;
    background-position: right center;
}

#background::before {
    content:'';
    position: absolute;
    left: 0;
    top: 0;
    width:100dvh;
    height: 100dvh;
}

#main {
    overflow: auto;
    min-height: 100vh;
    padding-bottom:100px;
}

.upper-text {
    /*outline: 3px solid yellow;*/
    position:absolute;
    justify-content: center;
    height: 20vh;
    width: 50%;
    left: 5vh;
    top: 10vh;
}


.country-name2 {
    /*outline: 3px solid red;*/
    position: absolute;
    top:8vh;
    left: 7.5%;
    height: 10vh;
    line-height: 10vh;
    font-family: Roboto,"Sporty Grunge", "Sketch Block";
    font-size: clamp(2rem, 10vh, 12rem); /* Responsive sizing */
    font-weight: bold;
    text-transform: uppercase;
    /* The Jedi Face Split: Yellow to Black */
    background: linear-gradient(to right, #ffae00 0% 50%, #000000 50% 100%);
    /* This makes the gradient fill the text characters */
    -webkit-background-clip: text;
    background-clip: text;
    /* Hide the original font color to show the gradient underneath */
    color: transparent;
    /* Add a yellow shadow to tie it all together */
    filter: drop-shadow(0 0 10px rgba(255, 206, 0, 0.3));
    /* Crucial: If the black half disappears into your background, 
       add a thin stroke so the letters are still visible */
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
}


.country-name {
    position: absolute;
    top: 8vh;
    left: 4.5%;
    font-family: Sketchy,"Roboto Black","Sporty Grunge", "Sketch Block";
    font-size: clamp(2rem,10vh, 12rem);
    height: 10vh;
    line-height: 10vh;
    font-weight: bold;
    color: black;
    text-shadow: 2px 2px 8px rgba(255, 206, 0, 1.0);
    /* Optional: Add a slight shadow if it's hard to see against the dark background */
    filter: drop-shadow(2px 2px 2px rgba(255, 255, 255, 0.1));
}


.site-name {
   /*outline: 3px solid purple;*/
    position: absolute;
    top: 0;
    left: 2%;
    font-size: clamp(2rem,6vh, 12rem);
    font-family: Roboto,Tahoma,"Sporty Grunge", "Sketch Block";
    height: 6vh;
    line-height: 6vh;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 1.0);
}

.curved-svg text {
    fill: rgb(255 255 255 / 70%); /* Semi-transparent white */
    font-size: 30px;
    font-family: Roboto, sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 1.0);
}


    .lower-text {
        position: absolute;
        justify-content: left;
        left: 20%;
        height: 50vh;
        width: 100%;
        bottom: -15vh;
    }

    /*Arrival of the*/
.text-top {
    position: absolute; /* Positions the element relative to its container */
    font-family: Roboto,Tahoma,"Sporty Grunge", "Sketch Block";
    font-size: clamp(1rem,7vh, 7rem);
    font-weight: bold;
    height: 10vh;
    line-height: 10vh;
    width: 50%;
    top: -5%;
    left: 3%;
    color: rgba(255,255,255, 0.9); /* Styles for visibility */
    text-shadow: 4px 4px 16px rgba(0, 0, 0, 1.0);
    /* Adjust vertical position if needed, e.g., using 'top' or 'transform' */
}

    /*DREAM MAKER*/
.text-bottom {
    position: absolute;
    font-family: Roboto, Tahoma, "Sporty Grunge", "Sketch Block";
    font-size: clamp(10vh, 15vh, 12rem);
    font-weight: 900;
    height: 15vh;
    line-height: 15vh;
    white-space: nowrap;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    /* Hide the original font color to show the gradient underneath */
    color: rgba(255, 206, 0);
    top: 10%;
    left: 3%;
    z-index: 4;
}


    .get-started-btn {
        position: absolute;
        bottom: 55%; /* Places it near the bottom */
        left: 18%;
        transform: translateX(-50%); /* Perfectly centers it horizontally */
        z-index: 10; /* Ensures it stays above the images */
        padding: 15px 30px;
        cursor: pointer;
        color: black;     
        font-family: Roboto, "Times New Roman";
        font-weight: bold;
        font-size: clamp(30px, 1.5em, 70px);
        backdrop-filter: blur(10px);
        background: rgba(255, 174, 0, 0.6); /* Slight transparency required */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 1.0); /* Subtle depth */
        transition: transform 0.2s; /* Makes it feel responsive when hovered */
        border: none;
        display: flex;
        text-decoration: none;
    }

footer {
    width: 100%;
    background-color: #fff; /* Ensure it has a solid color so the image doesn't show through */
    position: relative; /* Essential for correct stacking */
    /*z-index: 10;  Keeps it on top of the background */
    bottom: 0;
    left: 0;
}


@media screen and (max-width: 414px) {
    html, body {
        margin: 0;
        padding: 0;
        min-height: 100%;
    }

    #background {
        position: relative;
        height: 100vh;
        height: 100dvh;
        min-height: 100dvh;
        width: auto;
        z-index: -1; /* Keeps it behind your text/buttons */
        background-size: cover;
        min-height: 60vh;
        justify-content: center;
        align-content: center;
    }
    
    .image-container::before {
        position: relative;
        height: 100vh;
        width: auto;
        z-index: -1; /* Keeps it behind your text/buttons */
        background-size: cover;
        min-height: 60vh;
        justify-content: center;
        align-content: center;
        /*background-position: center;
        background-repeat: no-repeat;*/
    }
    
    .get-started-btn {
        left: 70%;
        bottom: 50%;
        padding: 5px 10px;
        font-size: clamp(6px, 0.75em, 70px);
    }

    .lower-text {
        left: 5%
    }
    .text-bottom {
        left: 0%;
        font-size: clamp(6vh, 7vh, 12rem);
    }
    .text-top {
        left: 0%;
        width: 75%;
        font-size: clamp(1.5rem, 4vh, 12rem);
        z-index: 3;
    }
}

    .ticker-wrapper {
        position: absolute;
        width: 100%;
        background: #000; /* Contrast against your image */
        color: #fff;
        overflow: hidden;
        padding: 10px 0;
        white-space: nowrap;
        top: 0;
    }

    .ticker-text {
        display: inline-block;
        padding-left: 100%;
        animation: ticker 15s linear infinite;
        font-weight: bold;
    }

    @keyframes ticker {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-100%);
        }
    }