body {
   background-color: #faf8ef;
   display: flex;
   justify-content: center;
   font-family: "Clear Sans", Helvetica, serif;
}

h1 {
   font-size: 80px;
   line-height: 0.7;
   color: #776E65;
   margin: 0;
}

p, h2 {
   margin: 0;
}

.container {
   margin: auto;
   width: 80%;
   margin-top: 30px;
   color: #b09d8a;
   font-size: 1.5rem;
}

.info {
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
}

.grid {
   display: flex;
   flex-wrap: wrap;
   background-color: #776E65;
   margin: 20px auto;
   width: 20vw;
   aspect-ratio: 1 / 1;         /*  Cuadrado responsive */
   border: 7px solid #776E65;
   border-radius: 10px;
   gap: 2px;
}

@media all and (max-width: 1150px) {
   .grid {
      width: 30vw;
   }
}

@media all and (max-width: 725px) {
   .grid {
      width: 40vw;
   }
   .grid div {
      font-size: 1.5rem !important;
   }
}

@media all and (max-width: 500px) {
   .grid {
      width: 60vw;
   }
   .grid div {
      font-size: 1.5rem !important;
   }
   .container {
      font-size: 1rem;
   }
}


.grid div {
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 1 0 20%;               
   border-radius: 10px;
   margin: 2px;
   color: #776E65;
   font-weight: bold;
   font-size: 2rem;
}

.score-container {
   text-align: center;
   width: 70px;
   height: 60px;
   border-radius: 3px;
   background-color: #b09d8a;
   color: #FFF;
}

#score {
   font-size: 30px;
}

.score-title {
   font-size: 16px;
}