/* Variables Tema #29 */
:root {
    --primary-color: #0384e080;
    --secondary-color: #5cafeb6f;
    --background-color: #111111;
    --text-color: #ffffff;
    --accent-color: #07070750;
}

body{
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;

    background-color: var(--primary-color); 
    /* Transparencia  Tema #35*/
    /* background-color: transparent; */
    header{
        background: var(--secondary-color); /* Color con transparencia */
}
        color: var(--text-color);
        padding: 10px 0;
        text-align: center;
    }
    nav {
        background-color: var(--primary-color); /* Color con transparencia */
        color: var(--text-color);
        padding: 10px;
        width: 20vh;
        height: 100%;
        text-align: center;
        position: absolute;
        margin-bottom: 20px; /* Espacio debajo del nav */
    }
    nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    nav ul li {
        margin: 10px 0;
    }
    main {
        padding: 20px;
         background-color: var(--primary-color); /* Color con transparencia */
         
         margin-left: 25vw; /* Espacio para el nav */
         /* Unidades de medida relativas Tema #32 pixeles, vh, vw porcentaje, centimetros, pulgadas */
    }       
        section {
        margin-bottom: 20px;
        padding: 10px;
        
    }
    article {
        background-color: var(--accent-color); /* Color con transparencia */
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(27, 7, 204, 0.349);
    }
    footer {
        background-color: var(--secondary-color); /* Color con transparencia */
        color: var(--text-color);
        padding: 10px 0;
        text-align: center;
        position: fixed;
        width: 100vw;
        bottom: 0;
        left: 0;
    }

    @media (max-width: 900px) {
        header h1, footer {
            padding: 10px 0;
            font-size: 1.2em;
        }
        nav {
            position: static;
            width: 100%;
            height: auto;
            margin-bottom: 0;
            padding: 10px 0;
        }
        main {
            margin-left: 0;
            padding: 10px;
        }
        header, footer {
            padding: 10px 0;
        }
    }

    @media (max-width: 600px) {
        header h1, footer {
            padding: 5px 0;
            font-size: 0.95em;
        }
        nav ul li {
            margin: 5px 0;
        }
        main, section, article {
            padding: 8px;
        }
    }