:root {

    /*COLOURS*/
    --c-main: #ffffff;
    --c-brand-rgb: 217, 72, 15;
    --c-brand: #ED2156;

}

/*TITLE FONTS*/
.f-changeling-r {
    font-family: "changeling-neo", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.f-changeling-b {
    font-family: "changeling-neo", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.f-changeling-in {
    font-family: "changeling-neo-inline", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.f-changeling-st {
    font-family: "changeling-neo-stencil", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.f-poppins-t {
    font-family: "poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.f-poppins-l {
    font-family: "poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}
.f-poppins-r {
    font-family: "poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.f-poppins-b {
    font-family: "poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.f-poppins-i {
    font-family: "poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
}
.f-poppins-bi {
    font-family: "poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.count-title h1 {
       font-size: 100px;
}


.count-title {
    font-size: 20px;
    font-weight: 200;
    color: var(--c-main);
    /*border: 1px solid red;*/
    padding: 0;
    margin: 100px 0 0 0;
}

@font-face {
    font-family: "changeling-neo", sans-serif;
    font-weight: normal;
    font-style: normal;
}

.countdown {
    text-align: center;
    font-family: "changeling-neo", sans-serif;
    font-size: 30px;
    color: var(--c-brand);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 0;

}

.counter-box {
    /*border: 1px solid rgba(0, 0, 0, 0.2);*/
    border-radius: 30px;
    /*box-shadow: 0 0 10px #000000;*/
    /*background-color: rgba(0, 0, 0, 0.2);*/
    width: 50%;
    height: auto;
    margin: 0 auto;
    padding: 20px;
}

.counter-frame {
    display: inline-block;
    /*border: 1px solid yellow;*/
    padding: 30px;
    margin: 100px auto;
    width: 100%;
    height: 100%;
    /*background-color: #000000;*/
    text-align: center;
}

#count-section {
    background: linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)), url(../../images/carl-cup-space.jpg) no-repeat center;
    background-size: cover;
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: 1;
}

/*MEDIA RESPONSIVE*/
@media only screen and (max-width: 2200px) {
    .countdown {
        font-size: 3.5em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        /*margin-top: 150px;*/
    }
}

@media only screen and (max-width: 1950px) {
    .countdown {
        font-size: 3.0em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        /*margin-top: 200px;*/
    }
}

/*my monitor is this one*/
@media only screen and (max-width: 1650px) {
    .countdown {
        font-size: 2.5em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        /*margin-top: 200px;*/
    }
}

@media only screen and (max-width: 1350px) {
    .countdown {
        font-size: 2.0em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        /*margin-top: 200px;*/
    }
}

@media only screen and (max-width: 1150px) {
    .countdown {
        font-size: 1.5em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        /*margin-top: 250px;*/
    }
}

@media only screen and (max-width: 850px) {
    .countdown {
        font-size: 1.0em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        /*margin-top: 250px;*/
    }
}

@media only screen and (max-width: 600px) {
    .countdown {
        font-size: 1.0em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
    }
}

@media only screen and (max-width: 575px) {
    .countdown {
        font-size: 1.0em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        overflow-wrap: break-word;
    }
}

.logo-container {
    width: 20%;
    height: 20%;
    position: relative;
    z-index: 2;
    /*top: 0;*/
    /*left: 0;*/
    background-color: rgba(0, 0, 0, 0.5);
}