:root {
    --black: #171614ff;
    --brown: #3a2618ff;
    --red: #754043ff;
    --yellow: #9a8873ff;
    --green: #37423dff;
    
    --black50: #17161480;
    --brown50: #3a261880;
    --red50: #75404380;
    --yellow50: #9a887380;
    --green50: #37423da0;
    
    --black20: #17161452;
    --brown20: #3a261842;
    --red20: #75404352;
    --yellow20: #9a887352;
    --green20: #37423d72;

    --yellow00: #9a887322;
}
@media (max-width: 549px) {
    h4 { text-align: center }
}
html { background: var(--yellow00); }
* { color: var(--black); }
.copyright, .copyright a, .copyright em, .copyright i { text-align: center; color: var(--brown50); }
.copyright i { font-size: 0.8em;}
.copyright i::before { padding-bottom: 0.2em }



main#coffee {
    text-align: center;
}


.settings label {
    width: 10rem;
    display: inline-block;
}
.settings input {
    height: 38px;
    padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
    background-color: var(--yellow20);
    border: 1px solid var(--yellow);
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}
.settings input.first {
    /*margin-right: 6rem;*/
}


.timer {
    position: relative;
}
.timer .countdown {
    width: 12rem;
    position: absolute;
    top: calc(50% - 3rem);
    left: calc(50% - 6rem);
    text-align: center;
    line-height: 1.5rem;
}
.timer .countdown:not(.alt) .now, .timer .countdown.alt .left {
    display: inline-block;
    font-size: 4rem;
    font-weight: bold;
    margin-top: 0.5rem;
}

.timer .circle {
    transition: 0.5s stroke-dashoffset;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke: var(--black);
    stroke-width: 14px;
}
.timer .outline {
    transition: 0.5s fill;
    stroke: var(--black);
    stroke-width: 1px;
    fill: var(--yellow20);
}
.timer .outline[data-color="brown"] { fill: var(--brown20) }
.timer .outline[data-color="green"] { fill: var(--green20) }
.timer .outline[data-color="red"] { fill: var(--red20) }



.buttons button {
    font-size: 1.5rem;
}
.buttons .reset {
    background: var(--red20);
    border-color: var(--red50);
    color: var(--red);
}
.buttons .start {
    background: var(--green20);
    border-color: var(--green50);
    color: var(--green);
}
.buttons .pause {
    background: var(--brown20);
    border-color: var(--brown50);
    color: var(--brown);
}