/* Organization */

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

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

    /* Layout */
    display:         flex;
    flex-flow:       column wrap;
    align-items:     safe center;
    justify-content: safe center;
}

body {
    /* Size */
    max-width: 20rem;

    /* Space */
    padding: 1.5rem;
    margin:  1rem;
}

form {
    /* Space */
    gap: 0.5rem;

    /* Layout */
    display:         flex;
    flex-flow:       row wrap;
    align-items:     stretch;
    justify-content: flex-end;
}

form > * {
    padding: 0.4rem 1rem;
}

form button {
    font-weight: bold;
}

/* Font */

html {
    font-family: sans-serif;
}

/* Theme */

html {
    background: #F8F8F8;
}

body {
    /* Color */
    color:      #333;
    background: white;

    /* Border */
    border: 1px solid gainsboro;
    border-radius: 8px;
}

form > * {
    /* Border */
    border-radius: 4px;

    /* Shadow */
    box-shadow: 0 2px 2px 0 #0002;
}

form > *:hover {
    filter: brightness(110%);
}

form > *:active {
    filter: brightness(95%);
}

form a {
    /* Color */
    color:      #333;
    background: #F8F8F8;

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

form button {
    /* Color */
    color:      white;
    background: crimson;

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

form button[disabled] {
    opacity: 0.5;
}

/* Animation */

body {
    animation: devanesce 0.5s;
}

@keyframes devanesce {
    from {
        scale: 0.25;
    }
}