:root {
    font-family: Helvetica, sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    background-color: #44444a;
    font-size: 1.1em;
}

.padding {
    margin-bottom: 2em;
}

.content {
    padding-top: 10vh;
    text-align: center;
    color: #eee;
}

.timer {
    font-size: 15vw;
    margin: 0;
}

.timer-milliseconds {
    font-size: 25%;
    font-family: Iosevka, monospace;
}

.inline {
    display: inline-block;
}

.input-container {
    display: inline-block;
    height: 1.9em;
}

button {
    display: inline-block;
    border: none;
    margin: 0;
    padding: 0.3em;
    padding-left: 0.6em;
    padding-right: 0.6em;
    font-size: 1em;
    transition: 0.2s;
    font-family: helvetica, sans-serif;
    background-color: #ddd;
    font-size: 1em;
}

audio {
    display: none;
}

.scroller {
    height: 100%;
}

.scroller:first-child {
    border-top-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    background-color: #eb6868;
}

.scroller:last-child {
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
    background-color: #77e777;
}

.scroller:first-child:hover {
    background-color: #dd5151;
}

.scroller:last-child:hover {
    background-color: #53db53;
}

button:hover {
    background-color: #c0c0c0;
}

#time-input {
    border: none;
    background: none;
    position: relative;
    background-color: #eee;
    max-width: 5ch;
    height: 100%;
    text-align: center;
    transition: 0.2s;
    font-size: 1em;
    font-family: helvetica, sans-serif;
}

#volume-slider {
    display: inline-block;
}

#time-input:hover {
    background-color: #cbcbcb;
}

#audiocontrols {
    display: inline-flex;
    width: 50vw;
}

#audiocontrols > * {
    width: 50%;
}

#file {
    width: 10em;
}

#time-input.invalid {
    background-color: #dd7979!
}

#time-input.invalid:hover {
    background-color: #c56161
}

.footnote {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
    padding-bottom: 2em;
}

.footnote a {
    color: #c7c5ee;
}

@media (max-width: 900px) {
    .content {
        padding: 0;
    }

    .timer {
        font-size: 40vw;
    }
}