/*
    <header>
        <div class="header-top"></div>
        <h1 class="titulo">Organizador de horarios</h1>
        <div class="header-bottom"></div>
    </header>
*/

:root {
    --header-line-padding: 0.21rem;
    --header-background-color: black;
    --header-line-color: rgb(238, 255, 1);
    --header-text-color: white;
    --header-padding-vertical: 1.4rem;
}

header {
    background-color: var(--header-background-color);
    color: var(--header-text-color);
}

header h1 {
    font-size: 12vw;
    text-align: center;
    user-select: none;
}

@media (min-width: 360px) { header h1 { font-size: 44px; } }

@media (min-width: 480px) { header h1 { font-size: 48px; } }

@media (min-width: 768px) { header h1 { font-size: 56px; } }

@media (min-width: 1024px) { header h1 { font-size: 64px; } }


.header-top {
    padding: var(--header-line-padding);
}

.header-bottom {
    padding: var(--header-line-padding);
    background-color: var(--header-line-color);
}