/* Organization */

html {
    /* Space */
    padding: 1em;
    margin:  0;

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

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

    /* Misc. */
    box-sizing: border-box;
}

@media (max-aspect-ratio: 1/1) {
    html {
        padding: 0;
    }
}

body {
    /* Space */
    padding: 0.5in;
    margin:  0;

    /* Size */
    width: min(50em, 100%);

    /* Misc. */
    box-sizing: border-box;
}

@media (max-aspect-ratio: 1/1) {
    body {
        padding: 0.25in;
    }
}

video {
    width: 100%;
}

pre {
    overflow: auto;
}

/* Font */

body {
    font-family: sans-serif;
    font-size:   12pt;
}

@media (max-aspect-ratio: 1/1) {
    body {
        font-size: 10pt;
    }
}

/* Color */

html {
    color:      black;
    background: #303030;
}

body {
    background: white;
}

h1 {
    color: #22CC66;
}

/* Animation */

body {
    animation: evanescence 0.5s;
}

@keyframes evanescence {
    from {
        opacity:   0;
        translate: 0 -5%;
    }
}