body {
    background-color: #080808;
    color: snow;
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    text-align: center;
    font-size: 3vw;
}

#menu {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes */
    width: 70%;
    gap: 25px;
    justify-self: center;
}

#menu > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3vw;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
    aspect-ratio: 480 / 200;
    width: 100%;
}

#menu > div:hover {
    transform: scale(0.9);
}



#menu > div > img {
    max-width: 80%;
    max-height: 80%;
}
@media (min-width: 751px) {
    #menu > div:nth-child(4n-3),
    #menu > div:nth-child(4n) {
        background-color: #252525;
    }

    #menu > div:nth-child(4n-2),
    #menu > div:nth-child(4n-1) {
        background-color: #353535;
    }
}
@media (max-width: 750px) {
    #menu {
        grid-template-columns: 1fr; /* Une colonne sur les petits écrans */
    }
    #menu > div {
        font-size: 7vw;
    }
    h1 {
        font-size: 6vw;
    }
    #menu > div:nth-child(2n){
        background-color: #353535;
    }
    #menu > div:nth-child(2n+1){
        background-color: #252525;
    }
}