body {
    background: url(../images/bg.png) no-repeat, #000;
    background-size: cover;
    background-position: top center;

    color: #FDFDF5;
    font-family: 'Articulat CF', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 14.4px */
    letter-spacing: 0.48px;
    text-transform: uppercase;

    overflow: hidden;
}

.scrollable {
    overflow-y: auto !important;
}

.overlay {
    position: absolute;

    border-bottom-left-radius: 1022px;
    border-bottom-right-radius: 1022px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.27) 0%, rgba(0, 0, 0, 0.27) 100%), radial-gradient(90.14% 34.76% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.00) 100%);

    z-index: 2;
    width: 150%;
    height: 150px;
    top: -45px;
    left: -25%;
}

.content {
    max-width: 1200px;

    margin: 0 auto;

    height: 100%;

    display: flex;
    justify-content: center;
    flex-direction: column;

    padding: 27px 0 48px;

    z-index: 5;
    position: relative;
}

.remove-center {
    flex-direction: unset;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    max-width: 1200px;
    margin: 40px auto 0;
}

header .logo {
    width: 100%;
    height: 22px;
    object-fit: contain;
}

.big-title {
    text-align: center;
    font-family: 'Articulat CF', sans-serif;
    font-size: 80px;
    font-style: normal;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 4px;
    text-transform: initial;

    background: linear-gradient(93deg, #E8C06F 2.55%, #8E621F 95.28%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-align: center;
}

.big-title span {
    font-family: "Merriweather Sans", sans-serif;
    /*color: #BA964C;*/
    font-weight: bold;
}

.description {
    color: #AEAEAE;
    font-family: 'Articulat CF', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    text-align: center;
    margin-top: 40px;
    text-transform: none;
}

.form-container {
    margin-top: 54px;

    display: flex;
    align-items: center;
    flex-direction: column;
}

.form-container > :not(:first-child) {
    margin-top: 18px;
}

.form-container .form-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px 65px;

    justify-content: center;
}

.button {
    display: flex;
    padding: 20px 30px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;

    border-radius: 100px;

    background: #BA964C;

    color: #FDFDF5;
    font-family: 'Articulat CF', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.48px;
    text-transform: uppercase;

    transition: box-shadow 200ms ease-in-out, background-color 200ms ease-in-out;
}

.button:disabled {
    background: rgba(186, 150, 76, 0.20);
}

.button:not(:disabled):hover {
    box-shadow: 0px 0px 71.5px 0px rgba(186, 150, 76, 0.49);
}

.finish-container {
    display: flex;
    justify-content: center;

    margin-top: 58px;
}

input {
    padding: 15px 0 8px;
    background: transparent;
    border-bottom: 1px solid #AEAEAE;

    color: #FDFDF5;

    font-family: 'Merriweather Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;

    transition: color 200ms ease-in-out, border-color 200ms ease-in-out;
}

input::placeholder {
    color: #FDFDF5;
    opacity: 0.5;
}

.resend-button {
    color: rgba(186, 150, 76, 0.59);
    font-family: 'Articulat CF', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
}

.timer-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-container img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-right: 12px;
}

.timer-container p {
    color: #AEAEAE;
    font-family: 'Articulat CF', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.language-wrapper {
    position: relative;

    z-index: 999;
}

.languages-list {
    position: absolute;

    padding: 0 16px 16px 16px;

    width: 100%;

    /*bottom: -48px;*/

    border-radius: 15px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: rgba(186, 150, 76, 0.20);

    /*backdrop-filter: blur(2px);*/

    z-index: 998;

    opacity: 0;
    visibility: hidden;

    transition: opacity 200ms ease-in-out;
}

.languages-list p {
    cursor: pointer;
}

.languages-list p + p {
    margin-top: 4px;
}

.language-selector {
    padding: 8px 28px 8px 16px;

    position: relative;

    border-radius: 15px;
    background: rgba(186, 150, 76, 0.20);

    /*backdrop-filter: blur(2px);*/

    cursor: pointer;

    transition: border-radius 200ms ease-in-out;
}

.is-open .language-selector {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.is-open .languages-list {
    opacity: 1;
    visibility: visible;
}

.language-selector:after {
    content: '';
    position: absolute;

    right: 16px;
    top: 0;
    bottom: 0;
    margin: auto 0;

    width: 8px;
    height: 4px;

    background: url(../images/arrow.svg) no-repeat;
    background-size: contain;
}

.background-video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20px;
    left: 0;
    z-index: 0;
}

.hidden {
    display: none !important;
}

.input-container {
    position: relative;
}

.input-container .error-text {
    color: #9F2121;

    font-family: 'Articulat CF', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    opacity: 0;
    visibility: hidden;

    position: absolute;
    bottom: -15px;
}

.input-container.error input {
    color: #9F2121;
    border-color: #9F2121;
}

.input-container.error .error-text {
    opacity: 1;
    visibility: visible;
}

.banner-container {
    display: block;
    margin: 30px auto 0;
/*     max-width: 80vw; */
    max-width: 1200px;
}

.banner {
    width: 100%;
/*     height: 364px; */
    background-size: contain;
}

.banner.banner-mobile {
    display: none;
}

@media (min-width: 769px) {
    .error-text {
        width: 150%;
    }
}

@media (max-width: 768px) {
    body {
        padding: 0 18px;
        background: url(../images/mobile-bg.png) no-repeat, #000;
        background-size: cover;
        background-position: top center;
    }

    .banner-container {
        margin: 30px 18px 0;
    }

    .banner {
        width: 100%;
        background-size: contain;
        background-position: center;
    }

    .banner.banner-desktop {
        display: none;
    }

    .banner.banner-mobile {
        display: block;
    }

    body, html {
        overflow-x: hidden;
        position:relative;
    }

    .form-group {
        width: 100%;
    }

    .form-container .form-group {
        grid-template-columns: 1fr;
    }

    .big-title {
        font-size: 47px;
    }

    .form-container {
        margin-top: 35px;
    }

    .background-video {
        display: none;
    }

    input {
        width: 100%;
    }

    .content, main {
        height: fit-content;
    }
}