*{
    margin:0;
    padding:0
}

body{
    background-color: #f0ccc7;
    text-align: center;}

.container{
    height: 70vh;
    display:flex;
    justify-content: center;
    align-items: center;

}
.game{
    height:65vh;
    width:60vh;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    gap:1.5vh;
    background-color: #CCE8CC;
    border-radius:1rem;
    box-shadow: 0 0 0.5rem rgb(0,0,0,0.1)
}
.box{
    height:18vh;
    width:18vh;
    border: 1px solid black;
    border-radius: 1rem;
    box-shadow: 0 0 1rem rgba(0,0,0,0.3);
    font-size:10vmin;
    color:black;
    background-color:#E2B6CF
}
#reset,#new{
    height:8vh;
    width:20vh;
    margin:2vh;
    border:1px solid black;
    border-radius:5px;
    font-size:15px;
    box-shadow: 0 0 0.6rem rgba(0,0,0,0.2);
}

#reset:hover, #new:hover{
    background-color:#d0a3c3;
    color:white;
    transform: scale(1.05);
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);

}

.message-container{
    height:5vh;
}
#message{
    font-size:30px;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:10px;
    margin-bottom:10px;
}
.hide{
    display:none;
}