:root {
  --main-bg-color: black;
  --text-color: #878787;
  --fill-bar-bg-color: pink;
  --timer-border-color: #878787;
  --waypint-bg-color: crimson;
  --image-size: 100px;
}

* {
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 20px;
}
body {
    padding: 130px;
    background-color: var(--main-bg-color);
    color: var(--text-color);
}
h1 {
    text-align: center;
    font-size: 3rem;
    padding-bottom: 1rem;
 }

 .countdown {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
     align-items: center;
     align-content: center;
     
     position: relative;
     height: 200px;
}

.countdown * {
     flex: 0 1 auto;
}

.timer {
    height: 20px;
    border-top: 1px solid var(--timer-border-color);
    border-bottom: 1px solid var(--timer-border-color);
    width: 100%;
    position: absolute;
    bottom: 0;
}
.timer-fill-bar {
    height: 100%;
    background-color: var(--fill-bar-bg-color);
    width: 0%;
}

.waypoint {
    width: 5px;
    position: absolute;
    bottom: 0;
}

.waypoint img {
    width: var(--image-size);
    margin-left: calc((var(--image-size) * (-1) - 5px) / 2);
}
.waypoint figcaption {
    width: var(--image-size);
    margin-left: calc((var(--image-size) * (-1) - 5px) / 2);
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.waypoint div {
    background-color: var(--waypint-bg-color);
    border-radius: 10px;
    width: 100%;
    height: 50px;
}

#date {
    position: absolute;
    top: 50px;
    font-size: 50px;
    left: 50px;
    text-align: left;
}

#time {
    position: absolute;
    top: 50px;
    font-size: 50px;
    right: 50px;
    text-align: right;;
}