/* 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 {
    text-align: right;
}

header a {
    /* Space */
    padding: 0.5rem;

    /* Alignment */
    text-align: center;

    /* Layout */
    display: inline-block;
}

button.timer {
    /* Size */
    width: 15rem;
    aspect-ratio: 1;

    /* Space */
    margin: auto;

    /* Layout */
    align-self: center;

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

button.end {
    /* Size */
    width:     100%;
    max-width: 15rem;

    /* Space */
    padding: 0.5rem;
    margin:  auto;

    /* Layout */
    align-self: center;
}

summary {
    /* Space */
    padding: 0.5rem;

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

details div {
    display: flex;
}

details form {
    /* Size */
    width:     100%;
    max-width: 25rem;

    /* Space */
    padding: 1rem;
    margin: 0 auto;

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

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

    /* Size */
    width: 100%;

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

/* Font */

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

button.timer {
    font-size: 48pt;
}

button.end {
    font-size: 1.5rem;
}

/* Theme */

html {
    background: #F8F8F8;
}

header a {
    color: gray;
}

header a:hover {
    background: #0001;
}

header a:active {
    filter: brightness(150%);
}

button.timer {
    /* Color */
    color: #444;
    background: none;

    /* Border */
    border: 5px solid #333;
    border-radius: 50%;
}

button.timer div {
    background: #F8F8F8;
}

button.end {
    /* Color */
    color: white;
    background: linear-gradient(to right, skyblue, royalblue);

    /* Border */
    border: none;
    border-radius: 9999rem;
}

button.end:hover {
    box-shadow: 0 0 8px 0 royalblue;
}

button.end:active {
    filter: brightness(120%);
}

summary {
    color: gray;
}

label {
    color: #444;
}

/* Animation */

button.timer, button.timer div {
    animation: topdown 0.5s;
}

@keyframes topdown {
    from {
        translate: 0 -0.5em;
        opacity: 0;
    }
}

button.end {
    animation: evanesce 0.75s;
}

details[open] {
    animation: evanesce 0.5s;
}

@keyframes evanesce {
    from {
        translate: 0 0.5em;
        opacity: 0;
    }
}