html {
    display: grid;
    min-height: 100%;
}

body {
    display: grid;
    background: #333;
}

.main {
    position: relative;
    margin: auto;
    overflow: hidden;
}

h1 {
    font-family: "Montserrat", sans-serif;
    text-align: center;
    margin-top: 2em;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #F6F4F3;
}

h1 sup {
    text-transform: lowercase;
    color: #FF3E41;
}

.counter {
    color: #F6F4F3;
    text-align: center;
    text-transform: uppercase;
    font-family: "Lato", sans-serif;
    font-size: 1em;
    letter-spacing: 5px;
}

.months,
.weeks,
.days,
.hours,
.minutes,
.seconds,
.left {
    padding: 20px;
    border-radius: 10px;
    margin: 1em auto;
}

.days,
.hours,
.minutes,
.seconds,
.left {
    display: inline-block;
    width: 120px;
    margin-top: 0;
}

.months {
    background: #00e947;
}

.weeks {
    background: #00b1ac;
}

.days {
    background: #D87200;
}

.hours {
    background: #FF3E41;
}

.minutes {
    background: #FFB20C;
}

.seconds {
    background: #2186FF;
}

.left {
    background: #E10A0A;
}

.c-number {
    font-family: "Montserrat", sans-serif;
    color: #333;
    font-size: 5em;
}