body, html {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Para evitar la barra de desplazamiento */
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

@font-face {
  font-family: 'AQA-005';
  src: url('data/AQA-005.otf') format('truetype'); 
}


.row {
  display: flex;
  flex-direction: row;
  gap: 0px;
}

.grid-element {
  background-color: #bbe800;
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
}

.row,
.grid-element {
  flex: 1;

  /* add transitions for smooth change of the grid */
  /* play around with transition time */
  -webkit-transition: flex 1s ease-out;
  -moz-transition: flex 1s ease-out;
  -ms-transition: flex 1s ease-out;
  -o-transition: flex 1s ease-out;
  transition: flex 1s ease-out;
}

.row:hover,
.grid-element:hover {
  flex: 10;
  transition: flex 0.3s ease-out;
}

.grid-element span {
  font-family: 'AQA-005', sans-serif; 
  color: #f44601;
}

.grid-element:hover span {
  transform: scale(20); /* Aumentar el tamaño al pasar el cursor sobre el div */
  transition: transform 0.3s ease-out; /* Agregar una transición suave */
}