:root {
    --page-bg: rgb(85, 77, 58);
    --text: #e9e9e9;
    --muted: #cacaca;
    --link: #4fc3f7;
    --cell-bg: rgba(1, 1, 1, 0.5);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--page-bg);
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--link);
}

h1, h2, h3, p {
    margin: 0;
    font-weight: 400;
}

/* Blurred background image, set by randomBackground() or per page */
#bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(6px) brightness(0.9);
    transform: scale(1.05); /* hide the blurred edges */
}

.back {
    position: fixed;
    top: 16px;
    left: 16px;
    color: white;
    text-decoration: none;
    font-size: 2rem;
    line-height: 1;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 64px 16px;
}

footer {
    padding: 4px 8px;
    color: var(--muted);
    font-size: 0.9rem;
}

.ad {
    width: 100%;
    max-width: 970px;
    margin: 32px auto 0;
}

/* Single timer pages */
.timer {
    text-shadow: 1px 1px 8px black;
}

.timer #label {
    font-size: 1.64rem;
}

.timer #time {
    font-size: clamp(3rem, 14vw, 5rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.timer #endLabel {
    font-size: 1.15rem;
}

.timer #endTime {
    font-size: clamp(2rem, 10vw, 3.56rem);
    font-variant-numeric: tabular-nums;
}

.timer #when {
    min-height: 1.5em;
}

.timer .note {
    margin-top: 16px;
    color: var(--muted);
    max-width: 40em;
}