html {
    background-image: url("/background");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

body {
    font-family: Arial, sans-serif;
    align-items: center;
    flex-direction: column;
}


.container {
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 30vh;
    left: 5vw;
    right: 5vw;
}

/* Logo en haut */
.logo {
    text-align: center;
    margin-top: 20px;

}


/* Container des boutons centraux */
.buttons {
    display: flex;
    flex-direction: column; /* Aligne les boutons en colonne (verticalement) */
    gap: 20px; /* Ajoute de l'espace entre chaque bouton */
    width: 100%; /* Utilisation complète de l'espace disponible */
    margin-top: 30px; /* Espace avant les boutons */
}


.btn-play {
    font-family: Raleway, sans-serif;
    background-color: black;
    color: white; /* Écriture blanche */
    border-radius: 50px; /* Coins arrondis */
    border: none; /* Pas de bordure */
    padding: 20px; /* Plus de hauteur */
    font-size: 20px; /* Texte plus grand */
    font-weight: bold; /* Texte en gras */
    width: 100%; /* Rendre le bouton large */
}

/* Style du bouton "Crédits" */
.btn-credit {
    font-family: Raleway, sans-serif;
    background-color: transparent; /* Fond transparent */
    color: white; /* Écriture blanche */
    border: 2px solid white; /* Bordure blanche */
    border-radius: 50px; /* Coins arrondis */
    padding: 20px; /* Plus de hauteur */
    font-size: 20px; /* Texte plus grand */
    font-weight: bold; /* Texte en gras */
    width: 100%; /* Rendre le bouton large */
}


/* Pied de page */
.footer {
    display: flex;
    justify-content: center; /* Centre les logos horizontalement */
    gap: 200px; /* Espacement entre les logos */
    width: 100%; /* Largeur du footer */
    padding: 10px 0; /* Espace intérieur du footer */
}


.footer {
    width: 15%; /* Taille proportionnelle */
    max-width: 100px; /* Taille maximale pour éviter qu'il devienne trop grand */
    height: auto; /* Préserve les proportions */
    margin: 0 10px; /* Espacement horizontal entre les logos */
}

#mmi-logo {
    position: absolute;
    bottom: 5vh;
    left: 5vw;
}

#musba-logo {
    position: absolute;
    bottom: 5vh;
    right: 5vw;
}