body {
    margin: 0;
    padding: 0 16px;
    min-height: 100vh;
    background-color: black;
    color: white;
    font-family: "Times New Roman", serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#label {
    font-size: clamp(32px, 10vw, 80px);
    margin: 0.4em 0 0;
    overflow-wrap: anywhere;
}

#since {
    font-size: 20px;
    min-height: 1.2em;
    margin: 0.3em 0;
}

#compass {
    width: min(70vw, 50vh, 400px);
    height: min(70vw, 50vh, 400px);
    margin: 2vh 0;
    border-radius: 50%;
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

#arrow {
    width: 70%;
    height: 70%;
    fill: white;
    transition: transform 0.25s linear, opacity 0.5s;
    opacity: 0.15;
}

#arrow.north {
    fill: #888;
}

body.ready #arrow {
    opacity: 1;
}

body.arrived #arrow,
body.nowhere #arrow {
    opacity: 0.15;
}

#distance {
    font-size: clamp(40px, 14vw, 90px);
    font-weight: bold;
    min-height: 1.2em;
}

#hint {
    font-size: 18px;
    color: #aaa;
    min-height: 2.6em;
    max-width: 30em;
}

#start {
    margin: 1em 0 2em;
    padding: 0.6em 1.4em;
    font: inherit;
    font-size: 24px;
    color: black;
    background: white;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

body.started #start {
    display: none;
}