/* BASE */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- ESTILOS DE CUERPO Y NAVEGACIÓN --- */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #1a1a1a;
  color: #fff;
  /* IMPORTANTE: Deshacemos 'height: 100vh;' y 'display: flex' para que el cuerpo pueda contener más que solo el menú y el diagrama/kahoot. */
  /* Si mantienes 'height: 100vh' y 'display: flex', el iframe se verá limitado en tamaño. */
  /* Lo dejo comentado por si lo quieres descomentar y probar: */
  /* height: 100vh; */
  /* display: flex; */
  /* flex-direction: column; */
  font-family: 'work sans', sans serif ;
}

.menu-nav {
  background-color: #27656C;
  padding:  0.6rem 0;
  max-height: 10rem;
  margin-bottom: 2rem;
}
.menu-nav .menu a{
  font-size: 1.3rem;
  padding: 0.4rem 0.8rem;
  border-radius: 12%;
}
nav ul {
  list-style: none;
  display: flex;         
  justify-content: center;
  gap: 5rem;             
  padding: 1rem;
}
nav ul a{
  text-decoration: none;
  color:#DAF1DD;
  padding: 5rem 5 rem;
  border-radius: 25%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  font-size: 2.5rem;
}
nav ul a:hover,
nav ul a:focus{
  color: black;
  background-color: #DAF1DD;
  transform: translateY(-0.12rem) scale(1.02);
}

/* --- ESTILOS DE KAHOOT! EMBED --- */
/* AQUI ES DONDE PEGARÁS EL NUEVO CÓDIGO */

.kahoot-container {
    /* Esto crea el margen de 0.5rem en todos los lados del elemento, 
       simulando un borde alrededor del iframe. */
    margin: 0.5rem; 
    /* El contenedor del Kahoot puede ser más ancho para aprovechar el espacio */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.kahoot-container iframe {
    /* Ancho al 100% del contenedor */
    width: 100%; 
    /* Altura ajustada al 80% de la altura de la ventana (vh) para que sea largo */
    height: 80vh; 
}