@font-face {
    font-family: 'Linear Grotesk';
    src        : url('fonts/LinearGrotesk-Bold.woff2') format('woff2'),
        url('fonts/LinearGrotesk-Bold.woff') format('woff');
    font-weight : bold;
    font-style  : normal;
    font-display: swap;
}

@font-face {
    font-family: 'Linear Grotesk';
    src        : url('fonts/LinearGrotesk-Black.woff2') format('woff2'),
        url('fonts/LinearGrotesk-Black.woff') format('woff');
    font-weight : 900;
    font-style  : normal;
    font-display: swap;
}

@font-face {
    font-family: 'Linear Grotesk';
    src        : url('fonts/LinearGrotesk-Medium.woff2') format('woff2'),
        url('fonts/LinearGrotesk-Medium.woff') format('woff');
    font-weight : 500;
    font-style  : normal;
    font-display: swap;
}

@font-face {
    font-family: 'Linear Grotesk';
    src        : url('fonts/LinearGrotesk-Regular.woff2') format('woff2'),
        url('fonts/LinearGrotesk-Regular.woff') format('woff');
    font-weight : normal;
    font-style  : normal;
    font-display: swap;
}

* {
    font-family: 'Linear Grotesk', sans-serif;
}

:root {
    --primary-color: #D7DF22;
}

body {
    padding         : 0;
    margin          : 0;
    color           : var(--primary-color);
    background-color: #262626;
    overflow-x      : hidden;
}

main {
    --rocket-x         : 0px;
    --rocket-y         : 0px;
    display            : flex;
    flex-direction     : column;
    align-items        : center;
    justify-content    : center;
    min-height         : 100vh;
    background-image   : url(img/background.png);
    background-size    : cover;
    background-position: center;
    position           : relative;
}

main::after {
    content            : '';
    position           : absolute;
    top                : 0;
    left               : 0;
    width              : 100%;
    height             : 100%;
    background-image   : url(img/rocket.png);
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : cover;
    transition         : transform 0.2s ease-out;
    will-change        : transform;
    z-index            : 1;
    transform          : translate(var(--rocket-x), var(--rocket-y));
    filter             : grayscale(100%);
}

.container {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    justify-content: center;
    padding-inline : 1rem;
    box-sizing     : border-box;
    position       : relative;
    z-index        : 2;
}


.logo-group {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    width          : 100%;
    padding-top    : 80px;
    padding-bottom : 20px;
}

.logo {
    max-width    : 100%;
    margin-inline: auto;
    margin-bottom: 1rem;
}

.logo-subtitle {
    display   : block;
    font-size : 38px;
    text-align: center;
    margin-top: 0;
    width     : 100%;
    color     : #fff;
}

.title {
    font-size     : 48px;
    letter-spacing: 4px;
    text-align    : center;
    width         : 100%;
    margin-bottom : 10px;
    font-weight   : 900;
}

.subtitle {
    font-size     : 24px;
    letter-spacing: 2px;
    text-align    : center;
    width         : 100%;
    margin-top    : 0;
    font-weight   : 400;
}

.form-wrapper {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    justify-content: center;
    width          : 100%;
}

.form {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    justify-content: center;
    width          : 550px;
    max-width      : 100%;
}

.footer {
    font-weight  : 700;
    font-size    : 16px;
    text-align   : center;
    width        : 100%;
    line-height  : 16px;
    color        : #fff;
    margin-top   : 70px;
    margin-bottom: 40px;
    z-index      : 2;
}

.form input,
.form textarea {
    width        : 100%;
    margin-bottom: 16px;
    border-radius: 20px;
    border       : 1px solid #000;
    padding      : .85rem 1.5rem;
    color        : #000;
    opacity      : .6;
}

.form input::placeholder,
.form textarea::placeholder {
    color      : #000;
    font-weight: 500;
}

button {
    border             : 0;
    font-weight        : 700;
    line-height        : 16px;
    font-size          : 16px;
    padding            : 12px;
    width              : 160px;
    max-width          : 100%;
    border-radius      : 6px;
    cursor             : pointer;
    background         : linear-gradient(to right, #D7DF22, #1EB797, #D7DF22);
    background-size    : 200% 100%;
    background-position: right bottom;
    transition         : all .3s ease-out;
}

button:hover {
    background-position: left bottom;
}

.checkbox-wrapper {
    display      : flex;
    gap          : 24px;
    margin-bottom: 1rem;
}

.form input#checkbox {
    width        : 24px !important;
    display      : block;
    border       : 1px solid #000;
    border-radius: 5px;
}

label {
    color    : #fff;
    font-size: 12px;
    width    : 90%;
    cursor   : pointer;
}

label a {
    color: #fff;
}

.date-counter {
    display  : flex;
    flex-wrap: wrap;
}

.date-counter-item {
    padding-inline: 64px;
    display       : flex;
    flex-wrap     : wrap;
}

.date-counter-item .number {
    width         : 100%;
    text-align    : center;
    font-size     : 80px;
    letter-spacing: 4px;
    margin-bottom : 0px;
}

.date-counter-item .label {
    font-size     : 20px;
    letter-spacing: 4px;
    text-align    : center;
    width         : 100%;
}

.date-counter .date-counter-item {
    border-right: 3px solid var(--primary-color);
}

.date-counter .date-counter-item:last-child {
    border-right: 0;
}

.date-counter .date-counter-item {
    position: relative;
}

.message-bar {
    position   : fixed;
    top        : 0;
    left       : 0;
    right      : 0;
    padding    : 15px;
    text-align : center;
    font-weight: bold;
    display    : none;
    z-index    : 1000;
}

.message-bar.success {
    background-color: #4CAF50;
    color           : white;
}

.message-bar.error {
    background-color: #f44336;
    color           : white;
}

.footer p {
    line-height: 1.2;
}

.footer a {
    color          : #fff;
    text-decoration: none;
}

@media screen and (max-width: 992px) {
    .date-counter-item {
        padding-inline: 40px;
    }

    .date-counter-item .number {
        font-size: 50px;
    }
}

@media screen and (max-width: 768px) {
    .container {
        max-width: 100%;
    }

    .date-counter-item .number {
        font-size: 40px;
    }

    .date-counter-item {
        padding-inline: 20px;
    }

    .title {
        font-size: 32px;
    }

    .subtitle {
        font-size: 20px;
    }

    .form {
        max-width: 100%;
    }

    main::after {
        background-position: 80%;
    }
}

@media screen and (max-width: 520px) {
    .date-counter .date-counter-item {
        padding-inline: 10px;
        border-width  : 1px;
    }

    .date-counter-item .number {
        font-size: 22px;
    }

    .date-counter-item .label {
        font-size: 17px;
    }

}

@media screen and (max-width: 380px) {
    .date-counter {
        flex-wrap: wrap;
    }

    .date-counter .date-counter-item {
        width        : 100%;
        border-right : 0;
        margin-bottom: 2rem;
    }


    .date-counter-item .number {
        font-size: 52px;
    }

    .date-counter-item .label {
        font-size: 27px;
    }

}