*{
    box-sizing: border-box; /* Hace que el padding y el borde se incluyan dentro del tamaño total del elemento */
}

body{
    background-color: rgb(255, 181, 181); /* Color de fondo rosa claro para toda la página */
}

header{
    width: 100%;  /* Ocupa todo el ancho */
    background-color: rgb(151, 39, 39); /* Fondo rojo oscuro */
    color: white; /* Texto blanco */
    text-align: center; /* Centra el texto */
    font-size: 4em; /* Tamaño muy grande para el título */
    text-transform: uppercase; /* Convierte el texto a mayúsculas */
    letter-spacing: 8px; /* Espaciado entre letras */
    border-bottom: 15px solid; /* Borde inferior grueso */
}

article{
    width: 80%; /* El contenido ocupa el 80% de la página */
    margin: 30px auto; /* Centrado con margen superior e inferior */
    border-left: 10px solid rgb(243, 123, 123); /* Borde izquierdo rosado */
    border-right:10px double rgb(243, 123, 123); /* Borde derecho doble rosado */
    padding: 0px 10px; /* Espacio interno lateral */
}

h1{
    width: 100%; /* El encabezado ocupa todo el ancho */
    background-color: rgb(255, 105, 130); /* Fondo rosa fuerte */
    color: pink; /* Texto color rosa claro */
    text-transform: capitalize; /* Convierte la primera letra de cada palabra en mayúscula */
}

section{
    width: 100%; /* Ocupa todo el ancho */
    border: 8px solid red; /* Borde rojo grueso alrededor de la sección */
    display: flex; /* Activa el modelo Flexbox */
    flex-wrap: nowrap; /* Evita que los elementos salten a otra línea */
    font-size: 1.5em; /* Texto más grande */
    justify-content: space-between; /* Espacia los elementos con separación máxima entre ellos */
}

img{
    width: 20%; /* Las imágenes ocupan el 20% del ancho de la sección */
}

footer{
    width: 100%;  /* Ocupa todo el ancho */
    background-color: rgb(151, 39, 39); /* Fondo rojo oscuro */
    color: white; /* Texto blanco */
    text-align: right; /* Alinea el texto a la derecha */
    font-size: 1.2em; /* Tamaño del texto moderado */
    border-top: 15px solid; /* Borde superior grueso */
}

footer > p{
    margin: 0; /* Elimina márgenes */
    padding-right: 20px; /* Añade separación a la derecha */
    font-size: 1em; /* Tamaño estándar de texto */
}

footer > p:last-of-type{
    color: yellow; /* El último párrafo del footer aparece en amarillo */
}
