html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

html {
    touch-action: none;
}

body {
    background: linear-gradient(150deg, orangered, orange);
    display: flex;
    flex-direction: column;
}

#navbar {
    display: flex;
}
#navbar > span {
    flex-grow: 1;
    padding: 3vmin;
    padding-top: 5vh;
    text-align: center;
    font-family: 'Verdana', sans-serif;
    font-size: 8vmin;
    color: white;
    opacity: 0.5;
    user-select: none;
}
#navbar > span.selected {
    opacity: 1;
    transition: 200ms;
}

#tabs-container {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    outline: none;
}

#tabs-container > div {
    flex: 0 0 100vw;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

#tab-clock {
    color: white;
    font-family: 'Fira Mono', monospace;
    margin-bottom: 11vmin;
    display: flex;
    align-items: center;
    justify-content: center;
}
#tab-clock .minutes {
    font-size: 16vw;
}
#tab-clock .seconds {
    font-size: 12vw;
}

#stopwatch {
    width: 100%;
    height: 100%;
}

#reset-timer {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 2vmin;
    color: white;
    font-family: 'Verdana', sans-serif;
    font-size: 5vmin;
}

.timer-time-display {
    font-family: 'Fira Mono', monospace;
}