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

/*Keyframes*/

@keyframes scrollBackground {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes idleAnimation {
    0% {
        transform: translateY(50px); /* Starting position */
    }
    50% {
        transform: translateY(35px); /* Moves up */
    }
    100% {
        transform: translateY(50); /* Moves back down */
    }
}

@keyframes view {
    0% {
        opacity: 0; /* Fully transparent */
    }
    100% {
        opacity: 1; /* Fully visible */
        display: flex;
    }
}

@keyframes fade {
    0% {
        opacity: 1; /* Fully visible */
    }
    100% {
        opacity: 0; /* Fully transparent */
        display: none;
    }
}

body {
    overflow: hidden; /* Disables both horizontal and vertical scrolling */
    font-family: arial, sans-serif;
}

img {
    width: 150%;
    height: auto;
}

a {
    color: white;
}

.background {
    background-position: center 100%;  /* Center the image */
    will-change: transform;
    background-image: url('../assests/NavBar/Background.png'); /* Path to your local image */
    background-size: 2300px 800px; 
    height: 100%;  /* Ensure the body takes up the full viewport height */
    margin: 20;  /* Remove any default margin */
    position: fixed;  /* Keeps the background fixed to the screen */
    top: 0;            /* Aligns it to the top */
    left: 0;           /* Aligns it to the left */
    width: 200%;       /* Full width */
    height: 100vh;     /* Full viewport height */
    z-index: -1;       /* Puts the background behind all content */
    animation: scrollBackground 20s linear infinite;
}

/* Menu list */
.logo {
    position: absolute;
    list-style: none;
    display: flex;
    justify-content: center;
    width: 12%;
    height: auto;
    z-index: 10px;
    transform: translateY(-200px);
}

.container {
    position: relative;  /* Ensures container stays above background */
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: visible;
    height: 100vh;  /* Full height */
}

.playbutton, .aboutbutton, .creditsbutton, .backArrow {
    position: absolute;
    z-index: 11;
    width: 200px;
    height: 125px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: default;
    border-radius: 5px;
    margin-top: -50px; /* Adjust the value to move it up more or less */
}
.playbutton[data-values = "values"] {
    width: 300px;
    height: 150px;
    transform: translateY(50px);
    animation: idleAnimation 3s infinite alternate;
}
.aboutbutton[data-position = "position"] {
    transform: translateY(175px);
}
.creditsbutton[data-position = "position"] {
    transform: translateY(250px);
}
.backArrow[data-size = "values"]{
    width: 400px;
    height: 200px;
    transform: translate(-625px, -250px); /* X, Y */
    display: flex;
}

.hide {
    animation: fade 0.5s ease-out forwards;
    pointer-events: none;
} 

.fastHide {
    opacity: 0;
    display: none;
} 

.show {
    animation: view 0.5s ease-in forwards;
    pointer-events: auto;
} 

.fastShow {
    opacity: 1;
    display: flex;
}

.info {
    position: absolute;
    width: 500px; /* Box width */
    padding: 20px; /* Space inside the box */
    background-color: rgb(247, 203, 99); /* Background color */
    border: 10px solid black; /* Border */
    border-radius: 10px; /* Rounded corners */
    text-align: center; /* Center the text */
    font-size: 18px; /* Text size */
    font-family: 'Press Start 2P', sans-serif;
    list-style: none;
    display: flex;
    justify-content: center;
    word-wrap: break-word;
    margin: 0 15px;
    font-size: 24px;
    transform: translateY(0px);
    z-index: 10;
} 

.columnTitle, .location {
    position: absolute;
    width: 500px; /* Box width */
    padding: 10px; /* Space inside the box */
    text-align: center; /* Center the text */
    color: rgb(255, 255, 255);
    font-size: 10px; /* Text size */
    font-family: 'Press Start 2P', sans-serif;
    list-style: none;
    display: flex;
    justify-content: center;
    word-wrap: break-word;
    margin: 0 15px;
    font-size: 24px;
    z-index: 10;
    transform: translate(-350px, -275px);
} 
.columnTitle[data-position = "Translate 350px, -225px"]{
    transform: translate(350px, -275px);
}
.location[data-font = "location-font"]{
    font-size: 20px;
}
.location[data-place = "France"] {
    transform: translate(-300px, -150px);
}
.location[data-place = "TBD1"] {
    transform: translate(-300px, -25px);
}
.location[data-place = "TBD2"] {
    transform: translate(-300px, 100px);
}
.location[data-place = "TBD3"] {
    transform: translate(-300px, 225px);
}

.shrink-image {
    width: 25%; /* Shrinks the image to 50% of its original width */
    height: auto; /* Maintains the aspect ratio */
}

.icon {
    position: absolute;
    list-style: none;
    display: flex;
    justify-content: center;
    width: 5%;
    height: auto;
    z-index: 10;
    transform: translate(-500px,-150px);
} 
.icon[data-frame = "2"] {
    transform: translate(-500px, -25px);
}
.icon[data-frame = "3"] {
    transform: translate(-500px, 100px);
}
.icon[data-frame = "4"] {
    transform: translate(-500px, 225px);
}

.characters {
    position: absolute;
    list-style: none;
    display: flex;
    justify-content: center;
    width: 10%;
    height: auto;
    z-index: 22;
} 
.characters[data-character = "female"] {
    transform: translate(200px, -50px);
}
.characters[data-character = "male"] {
    transform: translate(500px, -50px);
}

.start_button {
    position: absolute;
    width: 800px; /* Box width */
    padding: 20px; /* Space inside the box */
    text-align: center; /* Center the text */
    color: rgb(255, 255, 255);
    font-size: 50px; /* Text size */
    font-family: 'Press Start 2P', sans-serif;
    list-style: none;
    display: flex;
    justify-content: center;
    word-wrap: break-word;
    margin: 0 15px;
    font-size: 24px;
    z-index: 11;
    transform: translateY(275px);
}