html, body {
    width: 100%;
    height: 100%;
}

body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;

    background-color: black;
    font-family: Verdana sans-serif;
}

#countdown {
    /*background-color: rgba(255,0,0,0.5);*/
    color: white;
}

#countdown > .title {
    text-align: center;

    font-size: 5vw;
}

#countdown > .body {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;

    font-size: 10vw;
}

#countdown > .body.grid-5 {
    grid-template-columns: repeat(5, 1fr);
    font-size: 15vw;
}

#countdown > .body.grid-4 {
    grid-template-columns: repeat(4, 1fr);
    font-size: 20vw;
}

#countdown > .body.grid-3 {
    grid-template-columns: repeat(3, 1fr);
    font-size: 25vw;
}

#countdown > .body.grid-2 {
    grid-template-columns: repeat(2, 1fr);
    font-size: 30vw
}

#countdown > .body.grid-1 {
    grid-template-columns: repeat(1, 1fr);
    font-size: 30vw
}

#countdown > .body > div {
    text-align: center;
}

#countdown > .body > div.label {
    font-size: 0.2em;
}

#countdown > .body > div.target {
    font-size: 20vw;
}

#countdown > .body > div > .direction {
    font-size: 0.5em;
}