/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("Islands.jpg"); /* ruta de la imagen */
  background-repeat: no-repeat;                /* evita que se repita */
  background-size: cover;                      /* ajusta la imagen a toda la pantalla */
  background-position: center;                 /* centra la imagen */
  font-family: Verdana;
  color: black;
}

.portada {
  width: 71%;        /* ocupa todo el ancho disponible */
  height: 20%;       /* mantiene proporción natural */
}



.cuadro {
  border: 2px solid #3498db;   /* color y grosor del borde */
  padding: 15px;               /* espacio interno */
  margin: 20px auto;           /* separación externa */
  border-radius: 8px;          /* esquinas redondeadas */
  background-color: #f0f8ff;   /* color de fondo */
  max-width: 600px;            /* ancho máximo */
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.menu {
  width: 400px;
  font-family: Arial, sans-serif;
  border: 2px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

/* Parte superior */
.menu-top {
  background-color: #add8e6; /* azul claro */
  color: white;
  text-align: center;
  padding: px;
  font-weight: bold;
}