/* 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-color: #0c0f14;
    color: #fff;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}

header {
    background-color: #242424;
    padding: 20px;
}

header h1 {
    font-size: 2.5em;
    margin: 0;
    color: #ff8c00;
}

header p {
    font-size: 1.2em;
    margin: 10px 0 0;
    font-style: italic;
}

section {
    padding: 20px;
}

#sinopsis {
    background-color: #1c1f26;
    margin: 20px;
    border-radius: 10px;
    padding: 20px;
}

#reparto {
    background-color: #2c2f36;
    margin: 20px;
    border-radius: 10px;
    padding: 20px;
}

h2 {
    font-size: 2em;
    color: #ff8c00;
}

ul {
    list-style: none;
    padding: 0;
}

ul li {
    font-size: 1.2em;
    margin: 10px 0;
}

footer {
    background-color: #242424;
    padding: 10px;
    font-size: 0.9em;
    color: #ccc;
}

<!DOCTYPE html>

<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi biografia</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color:#66437E;
            color: #FF7416 ;
        }
        header {
            background-color:#FF7416;
            color: #66437E;
            padding: 20px;
            text-align: center;
        }
        nav {
            background-color:#D3A338;
            color:#FFE69A;
            padding: 10px 0;
            text-align: center;
        }
        nav a {
            color:#FADBD8;
            text-decoration: none;
            margin: 0 10px;
        }
        section {
            padding: 20px;
            margin: 20px;
            background-color: #F2F3F4;
        }
        footer {
            background-color: #7D3C98;
            color: #D2B4DE;
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>

<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pesadilla antes de Navidad</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Pesadilla antes de Navidad</h1>
        <p><em>The Nightmare Before Christmas</em></p>
    </header>

    <section id="sinopsis">
        <h2>Sinopsis</h2>
        <p>
            En "Pesadilla antes de Navidad", Jack Skellington, el Rey de la Ciudad Halloween, descubre la Ciudad Navidad y se queda fascinado con la nueva sensación festiva. Sin embargo, sus intentos de traer la Navidad a Halloween terminan causando caos y confusión.
        </p>
    </section>

    <section id="reparto">
        <h2>Reparto Principal</h2>
        <ul>
            <li>Jack Skellington - Chris Sarandon (voz), Danny Elfman (canciones)</li>
            <li>Sally - Catherine O'Hara</li>
            <li>Oogie Boogie - Ken Page</li>
            <li>Dr. Finkelstein - William Hickey</li>
            <li>Santa Claus - Ed Ivory</li>
        </ul>
    </section>

    <footer>
        <p>© 2024 Información sobre la película "Pesadilla antes de Navidad"</p>
    </footer>
</body>
</html>