:root {
    --background: #121619;
    --event-color: #d9dbf1aa;
    --text: #d9dbf1;
}

#ttnbtext {
    color: var(--time-color);
    font-size: 2rem;
    text-align: center;
}

#time {
    font-size: 10rem;
    color: var(--text)
}

@media (max-width: 599px) {
    #time {
        font-size: 6rem;
    }

    #ttnbtext {
        font-size: 1.5rem;
    }
}

body {
    background: var(--background);
    color: var(--text);
    font-family: 'Roboto';
    width: 100dvw;
    height: 100dvh;
    margin: 0;
    display: flex;
    justify-content: center;
}

#centered {
    align-self: center;
}

#lunchSel {
    position: absolute;
    bottom: 20px;
    font-size: 1.5rem;
    color: var(--event-color);
    cursor: default;
}

#lunchSel>span:hover {
    text-decoration: dashed underline;
    cursor: pointer;
}

.selected {
    color: var(--text) !important;
    text-decoration: underline !important;
}