/* Organization */

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

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

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

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

body {
    display: contents;
}

article {
    /* Space */
    padding: 0.5in;
    margin:  0 auto;

    /* Size */
    width: 100%;
    max-width: 50em;

    /* Alignment */
    text-align: justify;

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

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

img {
    width: 100%;
}

figure {
    text-align: center;
}

/* Font */

html {
    font-family: sans-serif;
}

article {
    font-size: 12pt;
}

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

article h1 {
    font-size: 1.75em;
}

/* Color */

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

article {
    /* Color */
    background: white;

    /* Border */
    border: 1px solid gainsboro;
}

h1 {
    color: seagreen;
}

/* Animation */

article {
    animation: evanescence 0.5s;
}

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