* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
    font-family: 'Monaco', 'Menlo', 'Andale Mono', monospace;
    overflow: hidden;
}

.half {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.time-container {
    text-align: center;
}

.label {
    font-size: min(3vw, 5vh);
    font-weight: bold;
    letter-spacing: 0.2vw;
    margin-bottom: 2vh;
}

.time-display {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-num, .colon {
    font-size: min(15vw, 25vh);
    font-weight: bold;
    line-height: 1;
}

.colon {
    margin: 0 1vw;
}

.time-sublabel {
    font-size: min(2vw, 3vh);
    letter-spacing: 0.1vw;
    margin-top: 1vh;
    opacity: 0.8;
}

/* Top half: Decimal time, inverted (White bg, black text) */
#top-half {
    background-color: #FFF;
    color: #000;
}

/* Bottom half: Normal time (Black bg, bright red text) */
#bottom-half {
    background-color: #000;
    color: #FF0000;
}