@charset "utf-8";
body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Encabezado */
header {
  background-color: rgb(115, 179, 50);
  height: 50px;
  padding: 5px 30px;
  color: #424242;
}

/* Navegación */
nav {
  font-family: 'Lato', sans-serif;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; 
}
nav li {
  flex-grow: 1;
}
nav a {
  display: block;
  padding: 1em;
  text-align: center;
  text-decoration: none;
  color: #000;
  border: solid 1px #424242;
  background-color: #6b6464;
  transition: background-color 0.5s;
  text-transform: uppercase;
}
nav a:hover {
  background-color: rgb(221, 195, 116);
}

/* Contenido principal */
.main {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 80vh;
}

.vertical,
.horizontal {
  border: 1px solid black;
  background-color: white;
}
.vertical {
  width: 32.5%;
  height: 100%;
  padding: 2px 1px;
}
.horizontal {
  width: 100%;
  height: 50%;
}

/* Pie de página */
.footer {
  background-color: #666;
  color: white;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: auto;
}
.footer a {
  text-decoration: none;
  font-size: 18px; 
  color: white;
}
.footer p {
  font-size: 18px;
}

/* Estilos para tabletas, dispositivos móviles en orientación horizontal */
@media (max-width: 768px) {
    nav a {
      font-size: 14px; 
  }
}
/* Estilos parateléfonos móviles en orientación vertical */
@media (max-width: 480px) {
  .vertical {
      width: 100%; 
  }
  .horizontal {
      height: auto; 
  }
  nav a {
      padding: 0.5em; 
  }
}