@charset "UTF-8";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --header_height: 4rem;
    --main_height: calc(100vh - var(--header_height) - var(--footer_height));
    --footer_height: 3rem;

    --all_width: 100%;

    --css-color_bg: #ffffbb;
    --font-color: black;

    --color_bg: ;
    /* Used in js. */
}

@media(prefers-color-scheme: dark) {
    :root {
        --css-color_bg: #222222;
        --font-color: #cccccc;
    }

}

/*header*/

body {
    background-color: var(--css-color_bg);
    color: var(--font-color);
}

header {
    display: flex;
    min-height: var(--header_height);
    width: var(--all_width);

    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 2px solid;
    text-align: center;
    background-color: var(--css-color_bg)
}

header>h1 {
    font-size: 2rem;
    margin: .5rem 2rem;
    color: var(--font-color);
}

header ul {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

ul>li {
    list-style: none;
    margin: 0.5rem;
    font-family: 'Courier New', Courier, monospace;
    color: var(--font-color);
    font-weight: 500;
    font-size: 1.1rem;
}

li>a {
    color: black;
    text-decoration: none;
    margin: auto
}

/*main*/

main {
    display: grid;
    min-height: 10rem;
    height: var(--main_height);
    width: var(--all_width);
    place-items: center;
    background-color: var(--color_bg);
}

main>div {
    display: grid;
    width: var(--all_width);
    place-items: center;
}

main p {
    font-size: 1.5rem;
    background-color: #333;
    padding: .5rem;
    color: #fff;
    border-radius: .2rem;
    margin: 1rem;
    color: var(--font-color);
}

main button {
    font-size: 1.3rem;
    background-color: #fff;
    padding: .3rem;
    color: #111;
    border-radius: .2rem;
    border: 2px solid var(--font-color);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

main button:active {
    color: green;
    outline: 3px solid white;
    border-radius: .05rem;
}


/*footer*/

@keyframes roda {
    1% {
        color: yellow
    }

    33% {
        color: red
    }

    63% {
        color: green
    }

    93% {
        color: blue
    }
}

footer {
    display: grid;
    height: var(--footer_height);
    width: var(--all_width);
    place-items: center;
    color: var(--color_bg);
    border-top: 2px solid var(--font-color);
    font-weight: bold;
    background-color: var(--css-color_bg);
    animation: roda 1s steps(4) paused infinite
}

footer:hover>p {
    animation: roda 1s steps(4) running infinite
}