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



h1{
    justify-content: center;
    text-align: center;
    font-family: Cherry Bomb One;
    font-weight: 200;
    font-size: 70px;
   color: #734002;
}

button{

    justify-self: center;
    display: grid;
    background: #D9C091;
    border-radius: 20px;
    border-color: #734002;
    padding: 10px;
    font-family: Cherry Bomb One;
    font-size: 20px;
    color: #734002;
     padding: 20px;

}

p{
    font-family: Cherry Bomb One;
    color: #734002;
    font-size: 25px;
}

body{
    background-color: #FFF8CD;
    place-items: center;
}

#grille{
    place-content: center;
    width: 30vmin;
    height: 30vmin;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 350px;


}
#grille .case{

    border: solid rgb(255, 255, 255)  7px;
    border-radius: 50px;
    display: grid;
    place-items: center;
    height: 20vmin;
    width: 20vmin;
    margin: 4px;
    background-size: contain;
   
}

#grille .case:hover{
background-color:#F2AEC1;
}

#message img{
    max-width: 30vmin;
}

@media (max-width: 450px) {
    h1 {
        font-size: 50px;
    }

    button {
        font-size: 16px; 
        padding: 15px; 
    }

    p {
        font-size: 18px; 
    }

    #grille {
        width: 70vmin; 
        height: auto; 
        padding: 40px; 
    }

    #grille .case {
        height: 15vmin; 
        width: auto;
    }

    #message img {
        max-width: 50vmin; 
    }
}