body {
  background-color: #ffd289;
  font-family: Helvetica, sans-serif;
  text-align: left;
  font-size: 2em;
  transition: background-color 1s ease;
}

header {
  padding: 0% 3% 0% 3%; /* arriba, derecha, abajo, izquierda */
  color: #ede6e3;
  text-align: left;
}

footer {
  padding: 0% 3% 0% 3%;
  color: #ede6e3;
  text-align: right;
}

a {
color: #000000;
text-align: center;
text-decoration: none;
}

#menu {
  background-color: transparent;
  padding: 0% 0% 3% 0%;
}
#menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu ul li{
  display: inline-block;
}

#menu ul li a{
  color: white;
  font-size: 25px;
  text-decoration: none;
  font-family: Helvetica, sans-serif;
}

#menu a:hover {
  color: #EFA7A7;
  animation: 2s an 1;
}

.botones {
  text-align: left;
  align-items: center;
}

.canvas {
  max-width: 20%;
  height: auto;
}

.iconoCerrar {
    float: right;
    margin: -10px -10px 0 0;
    position: relative;
}

#acercade {
  background: #C7EAE4;
  height: 600px;
  width: 700px;
  font-size: 20px;
  color: #36382E;
  text-align: left;
  padding: 33px;
  min-height: 250px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 400;
  display: none;
}

#instrucciones {
  background: #FCBCB8;
  height: 600px;
  width: 700px;
  font-size: 20px;
  color: #36382E;
  text-align: left;
  padding: 33px;
  min-height: 250px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 400;
  display: none;
}

#creditos {
  background: #A7E8BD;
  height: 600px;
  width: 700px;
  font-size: 20px;
  color: #36382E;
  text-align: left;
  padding: 33px;
  min-height: 250px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 400;
  display: none;
}

.contenedor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  padding: 2% 7% 2% 7%;
}

.cuadrado {
  width: 100%;
  height: 200px;
}

.cuadrado-uno {
  background-color: #E0EAD4;
  transition: background-color 1s ease;
}

.cuadrado-uno:hover {
  background-color: #FABB98;
}

.cuadrado-dos {
  background-color: #D6E4EF;
  transition: background-color 1s ease;
}

.cuadrado-dos:hover {
  background-color: #F3E7E7;
}

.cuadrado-tres {
  background-color: #FCE8D8;
  transition: background-color 1s ease;
}

.cuadrado-tres:hover {
  background-color: #E4ECF0;
}

.cuadrado-cuatro {
  background-color: #C9C9C9;
  transition: background-color 1s ease;
}

.cuadrado-cuatro:hover {
  background-color: #D7CF13;
}

.cuadrado-cinco {
  background-color: #FCF4AB;
  transition: background-color 1s ease;
}

.cuadrado-cinco:hover {
  background-color: #D8D1A1;
}

.cuadrado-seis {
  background-color: #E9E9E9;
  transition: background-color 1s ease;
}

.cuadrado-seis:hover {
  background-color: #F4FEC1;
}

.cuadrado-siete {
  background-color: #F2EFE6;
  transition: background-color 1s ease;
}

.cuadrado-siete:hover {
  background-color: #F0A6CA;
}

.cuadrado-ocho {
  background-color: #F3E2D4;
  transition: background-color 1s ease;
}

.cuadrado-ocho:hover {
  background-color: #E4E6E7;
}