@import url(https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@300;400;500;600;700&family=Syne:wght@500&display=swap);

*, hr {
    border: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, img, menu, nav, section {
    display: block
}

body, main {
    margin: 0 auto
}

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
    font-weight: 400
}

button {
    background-color: inherit
}

a, button, input, select, textarea {
    outline: 0;
    border: 0;
    text-decoration: none
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote:after, blockquote:before, q:after, q:before {
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

a, button {
    cursor: pointer
}

.timeline .description .title, b, strong {
    font-weight: 700
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

img {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

html {
    width: 100%;
    height: 100%;
    overflow-x: hidden
}

body {
    background-color: #1b212a
}

a, body, button, input, p, select, span, textarea {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: .35px;
    color: #fff
}

footer .title, h1 {
    font-family: "Barlow Condensed", sans-serif
}

.timer .wrapper .separator, .timer .wrapper .value, h1 {
    font-size: 42px
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 1180px;
    width: calc(100% - 40px);
    padding: 90px 0
}

.timeline, .timer {
    align-items: center
}

h1 {
    line-height: 56px;
    font-weight: 600;
    color: #04b76f
}

p, a {
    font-size: 20px;
}

a {
    color: #04b76f;
    text-decoration: underline;
}

.heading {
    text-align: center;
    margin-top: 50px
}

.heading h1 {
    margin-bottom: 25px
}

.timeline {
    display: grid;
    grid-template-areas:"point-1 line-1 point-2 line-2 point-3 line-3 point-4 line-4 point-5" "description-1 description-1 description-2 description-2 description-3 description-3 description-4 description-4 description-5";
    gap: 25px 0;
    margin: 50px 0 40px
}

.timeline .point {
    padding: 5px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #2e3541
}

.timeline .line, .timeline .point .inner {
    background-color: #04b76f;
    position: relative
}

.timeline .point .inner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center
}

.timeline .line.inactive, .timeline .point .inner.inactive {
    background-color: #2e3541
}

.timeline .line {
    width: 188px;
    height: 11px;
    border-top: 2.5px solid #2e3541;
    border-bottom: 2.5px solid #2e3541;
    margin: 0 -6px;
    z-index: 1
}

.timeline .point-1 {
    grid-area: point-1
}

.timeline .point-2 {
    grid-area: point-2
}

.timeline .point-3 {
    grid-area: point-3
}

.timeline .point-4 {
    grid-area: point-4
}

.timeline .point-5 {
    grid-area: point-5
}

.timeline .line-1 {
    grid-area: line-1
}

.timeline .line-2 {
    grid-area: line-2
}

.timeline .line-3 {
    grid-area: line-3
}

.timeline .line-4 {
    grid-area: line-4
}

.timeline .description-1 {
    grid-area: description-1
}

.timeline .description-2 {
    grid-area: description-2
}

.timeline .description-3 {
    grid-area: description-3
}

.timeline .description-4 {
    grid-area: description-4
}

.timeline .description-5 {
    grid-area: description-5
}

.timer {
    display: flex;
    justify-content: center;
    gap: 50px;
    min-height: 210px;
    background-image: url("./asset/laptop.png");
    background-repeat: no-repeat;
    background-position: left;
    min-width: 750px
}

.timer .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.timer .wrapper .value, .updates {
    display: flex;
    justify-content: center
}

.timer .wrapper .col {
    text-align: center;
    position: relative
}

.timer .wrapper .value {
    align-items: center;
    height: 96px;
    min-width: 69px;
    border-radius: 12px;
    border: 1px solid #303743;
    background: linear-gradient(155deg, #303743 0, #1f2632 100%)
}

.timer .wrapper .unit {
    font-size: 15px;
    line-height: 20px;
    text-transform: uppercase;
    position: absolute;
    bottom: -30px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%)
}

.updates {
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
    width: 100%;
}

footer, footer .socials {
    justify-content: center;
    display: flex
}

.updates .message {
    background-color: #272e3a;
    padding: 25px;
    border-radius: 6px;
    position: relative;
    max-width: 284px;
    width: 100%
}

.updates .message::after {
    position: absolute;
    content: "";
    display: block;
    height: 20px;
    top: -40px;
    left: 40px;
    border-color: #272e3a transparent transparent;
    border-style: solid;
    border-width: 11px;
    transform: rotate(180deg)
}

.updates .message .date {
    margin-bottom: 12px
}

.updates .message .title {
    font-weight: 700;
    color: #04b76f
}

footer {
    border-top: 1px solid #2e343c;
    width: 100%;
    margin-top: 35px;
    padding-top: 35px;
    align-items: center;
    gap: 30px
}

footer .title {
    font-size: 18px;
    line-height: 24px
}

footer .socials {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px
}

footer .socials a {
    width: 45px;
    height: 45px;
    border: 1px solid #2c313a;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color .3s
}

footer .socials a:hover {
    background-color: #2c313a
}

@media (max-width: 1023px) {
    .timeline {
        grid-template-columns:38px 1fr;
        grid-template-areas:"point-1 description-1" "line-1 ." "point-2 description-2" "line-2 ." "point-3 description-3" "line-3 ." "point-4 description-4" "line-4 ." "point-5 description-5";
        gap: 0 30px
    }

    .timeline .line {
        width: 11px;
        min-height: 130px;
        height: auto;
        justify-self: center;
        border-top: none;
        border-bottom: none;
        border-left: 2.5px solid #2e3541;
        border-right: 2.5px solid #2e3541;
        margin: -6px 0
    }

    .timer {
        flex-direction: column;
        min-width: 100%
    }

    .updates {
        flex-wrap: wrap
    }
}

@media (max-width: 639px) {
    main {
        padding: 25px 0
    }

    #logo {
        max-width: 156px
    }

    h1 {
        font-size: 32px;
        line-height: 43px
    }

    .timeline {
        margin: 50px 0 0
    }

    .timer {
        background-position: top;
        gap: 0
    }

    .timer h1 {
        margin: 100px 0 30px
    }

    .updates {
        margin-top: 80px;
        gap: 30px
    }

    .updates .message {
        max-width: 100%
    }

    footer .title {
        display: none
    }

    footer .socials {
        display: grid;
        grid-template-columns:repeat(4, 45px)
    }
}