/* Organization */

html {
    /* Size */
    width:  100%;
    height: 100%;

    /* Layout */
    display:         flex;
    flex-flow:       column nowrap;
    align-items:     stretch;
    justify-content: flex-start;
}

body {
    display: contents;
}

.loading {
    /* Layout */
    flex: 1 1 auto;

    /* Layout */
    display:         flex;
    align-items:     center;
    justify-content: center;
}

main {
    text-align: center;
}

section > div {
    display:         flex;
    flex-flow:       row wrap;
    align-items:     stretch;
    justify-content: space-evenly;
}

article.big {
    height: 20rem;
}

/* SPECIAL */

section.calendar {
    /* Size */
    max-height: 20rem;

    /* Overflow */
    overflow: auto;
}

article.calendar {
    /* Size */
    width: calc(var(--calendar-w) * 1px);

    /* Space */
    margin: 1rem auto;
}

/* SPECIAL */

/* Font */

html {
    font-family: sans-serif;
}

data {
    font-size: 3rem;
}

@media (max-aspect-ratio: 1 / 1) {
    data {
        font-size: 2rem;
    }
}

/* Theme */

html {
    background: #F8F8F8;
}

h1 {
    color: seagreen;
}

h2 {
    color: #333;
}

h3 {
    color: #222;
}

data {
    color: #888;
}

/* Animation */

main {
    animation: appear 1s;
}

@keyframes appear {
    from, 40% {
        translate: 0 -5em;
        opacity: 0;
    }
}

/* SPECIAL */

:root {
    --pie-1: crimson;
    --pie-2: royalblue;
    --pie-3: gold;
    --pie-4: orange;
    --pie-5: seagreen;
    --pie-6: purple;
    --pie-7: pink;
    --pie-8: turquoise;
    --pie-9: white;
    --pie-10: black;
    --pie-11: silver;

    --calendar-0: skyblue;
    --calendar-1: royalblue;

    --duration: seagreen;

    --calendar-w: 800;
}

/* SPECIAL */