/* =====================================================
   BASIS
   ===================================================== */

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background: #ffffff;
    color: #000000;
}

#container {
    width: 100%;
    margin: 0 auto;
}

.dev_comment {
    margin: 20px 0;
}

.subtitle {
    margin-bottom: 20px;
    line-height: 1.4;
}

.subtitle span {
    color: red;
    font-size: 1.2em;
}


/* =====================================================
   PARTY BLOKKEN
   ===================================================== */

#party1,
#party2 {
    width: 100%;
    display: block;
    clear: both;
    margin-bottom: 60px;
}


/* =====================================================
   COUNTDOWN DASHBOARD (DESKTOP)
   ===================================================== */

.countdown_dashboard {
    width: 700px;
    margin: 20px auto;
    position: relative;
    display: block;
    height: 160px;
    /* voorkomt “wippen” */
}

/* CRUCIALE clearfix tegen float-lekken */
.countdown_dashboard::after {
    content: "";
    display: block;
    clear: both;
}

/* individuele tijdsblokken */
.countdown_dashboard .dash {
    float: left;
    width: 130px;
    height: 140px;
    text-align: center;
}

/* titel onder digits */
.dash_title {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    letter-spacing: 1px;
}

/* cijfers */
.digit {
    display: inline-block;
    width: 30px;
    height: 60px;
    line-height: 60px;
    /* verticaal centreren */
    font-size: 36px;
    font-family: Arial, Helvetica, sans-serif;
}
/* =========================================
   FIX: seconden-tiental zakt onder baseline
   ========================================= */

.digit {
    vertical-align: top;
    /* BELANGRIJK */
    font-variant-numeric: tabular-nums;
    /* gelijke cijfers */
    font-feature-settings: "tnum";
    font-family: Arial, Helvetica, monospace;å
}



/* =====================================================
   TABLET & MOBIEL
   ===================================================== */

@media screen and (max-width: 800px) {

    .countdown_dashboard {
        width: 100%;
        max-width: 480px;
        height: auto;
        min-height: 220px;
        /* ruimte reserveren */
    }

    .countdown_dashboard .dash {
        float: none;
        display: inline-block;
        width: 90px;
        height: auto;
        margin: 10px 5px;
    }

    .digit {
        width: 26px;
        height: 50px;
        line-height: 50px;
        font-size: 28px;
    }
}


/* =====================================================
   EXTRA VISUELE NETHEID
   ===================================================== */

hr {
    width: 80%;
    margin: 40px auto;
    border: none;
    border-top: 1px solid #ccc;
}