@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Parkinsans:wght@300..800&display=swap');


#backToGame {
    position: fixed;
    bottom: 20px; /* Position the button 20px from the bottom */
    right: 20px; /* Position the button 20px from the right */
    width: 300px; /* Adjust the width as needed */
    height: 200px; /* Adjust the height as needed */
    background-image: url('assets/branit.png');
    background-size: contain; /* Ensure the image scales to fit within the button */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-position: center; /* Center the image within the button */
    background-color: transparent; /* Ensure the background is transparent */
    border: none; /* Remove the default border */
    cursor: pointer; /* Change the cursor to a pointer */
    opacity: 0; /* Initial opacity for fade-in effect */
    transition: opacity 1s ease-in-out; /* Smooth fade-in effect */
}


#backToGame:hover {
    filter: drop-shadow(0 0 20px rgba(255, 242, 0, 0.901)); /* Add a bright light effect around the button */
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

h1 {
    text-align: center;
    margin-top: 20px;
    color: black;
}

main {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

section {
    margin-bottom: 20px;
}

h2 {
    margin-top: 20px;
    color: black    ;
}

p {
    line-height: 1.6;
    color: black;
}

body {
    background-image: url('assets/infoscreen.png'); /* Use the infoscreen.png image */
    background-size: cover; /* Ensure the image covers the entire background */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-attachment: fixed; /* Prevent the background from zooming in */
    margin: 0;
    padding: 0;
    font-family: "Parkinsans", serif;
    font-style: normal;
    font-weight: 700;
    font-size: x-large;
}