:root {
  --amarillo-claro: #ffff88;
  --amarillo-claro-oscuro: #f6d644;
  --amarillo-oscuro: #e1a700;
  --blanco: #fdfdfd;
  --gris: rgba(80, 84, 79, 0.6);
  --rojo: #b7182e;

  --inter: 'Inter', sans-serif;
  --press-start-2p: 'Press Start 2P', cursive;
}

.contenedor-principal {
  background-color: var(--amarillo-claro);
  display: grid;
  font-family: var(--inter);
  grid-template-areas: "header"
                       "main"
                       "footer";
  grid-template-rows: 1fr 8fr 1fr;
  height: 100vh;
  width: 100vw;
}

.contenedor-logo {
  grid-area: header;
}

.logo {
  height: 51px;
  margin-left: .5rem;;
  margin-top: .5rem;
  width: 150px;
}

.contenedor-tateti {
  grid-area: main;
}

.tateti {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 80%;
  justify-content: center;
}

.botonera {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.btn-nuevo-juego {
  background-color: var(--rojo);
  border: none;
  border-radius: 1.25rem;
  color: var(--blanco);
  font-size: 1.25rem;
  height: 3.125rem;
  max-width: 15.625rem;
  width: 15.625rem;
}

.footer {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

.copyright {
  align-items: center;
  color: var(--gris);
  display: flex;
  font-size: 1rem;
  grid-area: footer;
  justify-content: center;
}

/* FIXME: Workaround para solucionar carga de la fuente. */
.ocultar {
  color: var(--amarillo-claro);
  font-family: var(--press-start-2p);
}