/* *** Establecer el modelo de caja para todos los elementos *** */
* {
    box-sizing: border-box; /* Incluye padding y border dentro del tamaño total de los elementos */
}

/* *** Estilos para el body *** */
body {
    padding-left: 100px; /* Añade un padding de 100px a la izquierda */
    padding-right: 100px; /* Añade un padding de 100px a la derecha */
    background-color: green; /* Color de fondo verde */
    margin-bottom: -10px; /* Elimina un poco del margen inferior */
}

/* *** Estilos para el encabezado h1 *** */
h1 {
    color: white; /* Color de texto blanco */
    font-size: 1.5em; /* Tamaño de fuente 1.5 veces el tamaño base */
    margin-left: -108px; /* Mueve el h1 108px hacia la izquierda */
    margin-top: -10px; /* Mueve el h1 10px hacia arriba */
    margin-bottom: -4px; /* Elimina un poco del margen inferior */
}

/* *** Estilos para el menú .menu *** */
.menu {
    background-color: white; /* Color de fondo blanco */
    display: flex; /* Utiliza el modelo Flexbox */
    margin-left: -108px; /* Mueve el menú 108px hacia la izquierda */
    margin-right: -108px; /* Mueve el menú 108px hacia la derecha */
}

/* *** Estilos para las listas dentro del menú .menu ul *** */
.menu ul {
    display: flex; /* Utiliza Flexbox para mostrar los elementos en línea */
    padding: 5px; /* Padding de 5px alrededor de los elementos */
    margin-left: 80%; /* Mueve la lista 80% hacia la derecha */
}

/* *** Estilos para los elementos de la lista del menú .menu li *** */
.menu li {
    border: 3px solid green; /* Borde verde de 3px */
    display: flex; /* Muestra los elementos en línea */
    padding: 15px; /* Padding de 15px alrededor de cada elemento */
    margin-right: 10px; /* Espacio de 10px a la derecha de cada elemento */
    color: green; /* Color de texto verde */
    text-decoration: underline; /* Subraya el texto */
}

/* *** Estilos para el contenedor .caja *** */
.caja {
    font-size: 2em; /* Tamaño de fuente 2 veces el tamaño base */
    text-align: justify; /* Justifica el texto */
    text-indent: 150px; /* Indenta el texto 150px */
    color: white; /* Color de texto blanco */
    border-bottom: 10px solid white; /* Línea blanca de 10px en la parte inferior */
    display: flex; /* Utiliza el modelo Flexbox */
}

/* *** Estilos para el encabezado h2 *** */
h2 {
    font-size: 2.2em; /* Tamaño de fuente 2.2 veces el tamaño base */
    border-bottom: 2px solid white; /* Línea blanca de 2px en la parte inferior */
    margin-left: -30px; /* Mueve el encabezado 30px hacia la izquierda */
}

/* *** Estilos para el contenedor .texto *** */
.texto {
    margin-right: 150px; /* Margen derecho de 150px */
    margin-left: 50px; /* Margen izquierdo de 50px */
}

/* *** Estilos para el contenedor .cajan *** */
.cajan {
    display: flex; /* Utiliza Flexbox para mostrar los elementos en línea */
}

/* *** Estilos para las imágenes dentro de .cajan img *** */
.cajan img {
    width: 50%; /* La imagen ocupa el 50% del ancho del contenedor */
    border: 5px solid white; /* Borde blanco de 5px */
    padding: 10px; /* Padding de 10px alrededor de la imagen */
    margin-bottom: 20px; /* Margen inferior de 20px */
}

/* *** Estilos para las imágenes dentro de .texto img *** */
.texto img {
    width: 10%; /* La imagen ocupa el 10% del ancho del contenedor */
}

/* *** Estilos para una imagen específica con el atributo alt="flechad" *** */
img[alt="flechad"] {
    margin-left: 900px; /* Mueve la imagen 900px hacia la izquierda */
}