body {
    margin: 0; /* Elimina el margen predeterminado del body */
    padding: 0; /* Elimina el padding predeterminado del body */
    font-family: sans-serif; /* Fuente predeterminada para el cuerpo (sin serifa) */
    background-color: #f0f0f0; /* Fondo gris claro como en la imagen */
    color: #333; /* Color de texto predeterminado */
    min-height: 100vh; /* Asegura que el body ocupe al menos toda la altura de la ventana */
    display: flex; /* Usa flexbox para centrar el contenido */
    justify-content: center; /* Centra horizontalmente el contenido flex */
    align-items: center; /* Centra verticalmente el contenido flex */
    box-sizing: border-box; /* Incluye padding y border en el cálculo del tamaño */
}

.container {
    text-align: center; /* Centra todo el texto e imágenes dentro del contenedor */
    padding: 20px; /* Espaciado interno alrededor del contenido */
    max-width: 800px; /* Limita el ancho máximo del contenido en pantallas grandes */
    width: 100%; /* Ocupa el 100% del ancho disponible en pantallas más pequeñas */
    box-sizing: border-box; /* Incluye padding en el cálculo del ancho */
}

h1 {
    font-family: serif; /* Fuente con serifa para el título */
    font-size: 3em; /* Tamaño grande para el título */
    margin-top: 0; /* Elimina el margen superior predeterminado del h1 */
    margin-bottom: 0.5em; /* Espacio debajo del título */
    color: #222; /* Color del título */
}

.devil-image {
    max-width: 100px; /* Limita el ancho máximo de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Hace que la imagen sea un elemento de bloque para centrarla correctamente */
    margin: 0 auto 1.5em auto; /* Centra la imagen horizontalmente y añade margen abajo */
}

.description {
    font-size: 1.1em; /* Tamaño de fuente slightly larger */
    margin-bottom: 2em; /* Espacio debajo de la descripción */
    font-style: italic; /* Parece itálico en la imagen (por el asterisco) */
    color: #555; /* Color ligeramente más claro */
}

.links {
    font-size: 1em; /* Tamaño de fuente para los enlaces */
    line-height: 1.6; /* Espacio entre líneas si los enlaces envuelven en varias líneas */
    word-wrap: break-word; /* Permite que palabras largas se rompan si es necesario */
    overflow-wrap: break-word; /* Similar a word-wrap, mejor compatibilidad */
}

.links a {
    color: #333; /* Color de los enlaces */
    text-decoration: none; /* Elimina la subrayado predeterminado de los enlaces */
    /* El espaciado entre los enlaces y corchetes se maneja por los espacios en el HTML */
}

.links a:hover {
    text-decoration: underline; /* Añade subrayado al pasar el ratón por encima */
}

/* Media Query para hacer ajustes en pantallas más pequeñas (opcional, la mayoría ya es responsivo) */
@media (max-width: 600px) {
    h1 {
        font-size: 2.5em; /* Tamaño de título ligeramente más pequeño en móviles */
    }

    .description {
        font-size: 1em; /* Tamaño de descripción ligeramente más pequeño en móviles */
    }

    /* Los enlaces ya se envuelven de forma natural con la estructura actual,
       no se necesitan reglas específicas aquí a menos que quieras un comportamiento diferente. */
}