/* Misc. */

a {
    text-decoration: none;
}

/* Organization */

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

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

body {
    display: contents;
}

header span {
    /* Space */
    padding: 0;
    margin:  0 0 0 0.5rem;

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

form {
    padding: 1rem;
    margin:  auto;
}

div label {
    display: inline-block;
}

div label input {
    width: auto;
}

input, textarea {
    /* Space */
    padding: 0.25rem;
    margin:  0 0 0.25rem 0;

    /* Size */
    width: 100%;

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

textarea {
    margin-bottom: 1rem;
}

button {
    /* Size */
    width: 100%;

    /* Space */
    padding: 0.5rem;

    /* Alignment */
    text-align: center;
}

/* Font */

html {
    font-family:    sans-serif;
    text-rendering: geometricPrecision;
}

header span {
    font-size:   1.25rem;
    font-weight: bold;
}

button {
    font-size:   1.25rem;
    font-weight: bold;
}

@media (max-aspect-ratio: 1 / 1) {
    header.bar h1, header.bar span, header.bar .menu {
        font-size: 0.75rem;
    }
}

/* Theme */

html {
    background: #F8F8F8;
}

h1 {
    color: #333;
}

header span {
    color: #666;
}

b {
    color: #444;
}

input, textarea, button {
    box-shadow: 0 2px 8px 0 gainsboro;
}

button {
    /* Color */
    color:      white;
    background: seagreen;

    /* Border */
    border: darkgreen solid 1px;
    border-radius: 4px;
}

button:hover {
    filter: brightness(120%);
}

button:active {
    filter: brightness(95%);
}

hr {
    border: 1px solid silver;
    border-top: 1px;
}

/* Animation */

form {
    animation: devanesce 0.75s;
}

@keyframes devanesce {
    from {
        translate: 0 -2em;
        opacity: 0;
    }
}

header.bar h1, header.bar span {
    animation: drag 1s;
}

@keyframes drag {
    from {
        translate: -1em 0;
        opacity: 0;
    }
}