*{
    margin: 0;
    padding: 0;
}
.title {
    margin: 5px 5px 0px 5px;
    padding: 10px 0px 15px 0px;
    font-size: larger;
}
body {
    text-align: center;
}
.scoreboard {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.score {
  border: 1.5px solid #84a98c;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80px;
  background-color: #fff;
  color: #354f52;
  box-shadow: 0 0 5px rgba(132, 169, 140, 0.5);
}
.container{
    height: 60vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
}
 .boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-gap: 1.2px;
    width: min(90vw, 400px);  
    aspect-ratio: 1 / 1;     
}

.box {
    width: 100%;
    aspect-ratio: 1 / 1;      
    font-size: clamp(2rem, 6vw, 4.5rem); 
    border: none;
    background-color: #84a98c;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}
#restart{
    margin: 10px;
    padding: 10px 15px;
    border: 2px solid #354f52;
    font-size: 1.2rem;
}
.msg-container{
    padding: 0px 0px 10px 0px;
}
.hide {
    display: none;
}
#msg {
    font-size: 2rem;
    margin: 5px;
}