styles.css

@import url("https://necolas.github.io/normalize.css/8.0.1/normalize.css");
body {
    background: url("./resources/images/pattern-hills.svg") no-repeat left bottom, url("./resources/images/bg-stars.svg") no-repeat top, -webkit-gradient(linear, left top, left bottom, from(hsl(235, 16%, 14%)), to(#251d2c));
    background: url("./resources/images/pattern-hills.svg") no-repeat left bottom, url("./resources/images/bg-stars.svg") no-repeat top, -o-linear-gradient(top, hsl(235, 16%, 14%) 0%, #251d2c 100%);
    background: url("./resources/images/pattern-hills.svg") no-repeat left bottom, url("./resources/images/bg-stars.svg") no-repeat top, linear-gradient(180deg, hsl(235, 16%, 14%) 0%, #251d2c 100%);
    background-size: 100vw 25vh, 100% 100%, 100% 100%;
    font-family: "Red Hat Text", monospace;
    font-size: 14px;
    letter-spacing: 12px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

/* Classes */

.increment {
    letter-spacing: 8px;
    padding: 0;
    margin: 0;
    color: hsl(237, 18%, 59%);
}

.flex_column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.flex_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

.time_holder {
    gap: 24px;
    text-align: center;
}

.card {
    font-size: 90px;
    width: 200px;
    height: 175px;
    -webkit-perspective: 600px;
            perspective: 600px;
}

.background {
    width: 100%;
    height: 50%;
    text-align: center;
    overflow: hidden;
}

.top_background {
    background: rgba(44,44,68,255);
    border-radius: 10px 10px 0 0;
}

.bottom_background {
    background: hsl(236, 21%, 26%);
    border-radius: 0 0 10px 10px;
    -webkit-box-shadow: 0 15px 0 hsl(234, 17%, 12%);
            box-shadow: 0 15px 0 hsl(234, 17%, 12%);
}

.clock_text {
    position: relative;
    font-weight: bold;
    letter-spacing: 0px;
    font-family: "Red Hat Text", sans-serif;
    margin: 0;
    line-height: 1;
}

.top_text {
    top: 50%;
    color: rgba(211,80,114,255);
}

.bottom_text {
    bottom: 50%;
    color: hsl(345, 95%, 68%);
}

/* Imported */

.flipper {
    position: relative;
    width: 100%;
    height: 50%;
    top: 50%;
    margin-top: -50%;
    z-index: 100;
    /* Animation */
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
            transform-origin: bottom center;
}

.flipper_face {
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

.front {
    background: rgb(44,44,68);
    -webkit-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
            transform-origin: bottom center;
}

.back {
    background: hsl(236, 21%, 26%);
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
    -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
            transform-origin: top center;
}

.flip {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
    -webkit-transition: -webkit-transform .35s;
    transition: -webkit-transform .35s;
    -o-transition: transform .35s;
    transition: transform .35s;
    transition: transform .35s, -webkit-transform .35s;
}

.social_icon:hover svg path {
    fill: hsl(345, 95%, 68%);
}

/* Ids */

#main_content {
    margin: 0;
    padding: 0;
    text-align: center;
}

#title {
    color: white;
    font-size: 24px;
    
}

#card_div {
    gap: 42px;
}

#social_div {
    gap: 42px;
}

.main {
    height: 100vh;
}

.main,
.top,
.mid,
.bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.main {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.top,
.bottom {
    height: 33vh;
}

.top,
.mid {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.bottom {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding-bottom: 2rem;
}

@media screen and (max-device-width: 940px) {
    .card {
        font-size: 36px;
        width: 70px;
        height: 60px;
    }

    .increment {
        letter-spacing: 4px;
        font-size: 9px;
    }

    .bottom_background {
        -webkit-box-shadow: 0 5px 0 hsl(234, 17%, 12%);
                box-shadow: 0 5px 0 hsl(234, 17%, 12%);
    }

    .time_holder {
        gap: 14px
    }

    #card_div {
        gap: 10px;
    }
}