@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;600;700&display=swap');

:root {
    --light-color: #fff;
    --light-gray-color: #ececec;
    --dark-orange-color: #14100b;

    --font-family: 'Roboto Slab', serif;
    --font-size: 16px;

    --margin: 0;
    --padding: 0;

    --link-color: #f1c744;
    --link-color-hover: #4ce2c7;
    --link-color-active: #ffebab;

    /* ul, ol */
    --list-margin: 24px auto;
    --list-li-line-height: 32px;

    --header-bg-nav: ;
    --header-shadow-nav: ;

    --main-p-margin: 0 0 24px 0;
    --main-line-height: 24px;
    --main-bg-color: #1e1b18;

    --footer-color: #b5b5b5;
}

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;

    /* Курсор */
    /* cursor: url("./assets/cursor.svg"), auto; */
}

body {
    color: var(--light-gray-color);
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-style: normal;
    font-weight: 300;
    line-height: 30px;
    background-color: #14100b;
    margin: var(--margin);
    padding: var(--padding);
}

img {
    max-width: 100%;
    display: block;
  }
  
  picture img {
    margin: 30px auto;
    border-radius: 10px;
  }

h3,
h2,
h1 {
   
    font-style: normal;
    font-weight: 500;
    line-height: 44px;
    color: var(--link-color);

    margin-bottom: 40px;
}

h2 {
    font-size: 32px;
    margin-top: 40px;
    margin-bottom: 24px;
}

h3 {
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 24px;
}

a {
    color: var(--light-color);
    text-decoration: none;
}

ol,
ul {
    margin: var(--list-margin);
}

ol li,
ul li {
    line-height: var(--list-li-line-height);
}

button {
    border: none;
    background: none;

    font-family: "OpenSans-Regular";
    font-size: var(--font-size);
    font-style: normal;
    font-weight: 400;
    color: var(--light-color);

    line-height: 20px;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    /* Cбросы для кросс-браузерности */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
}

/* Стили для копки возврата наверх */
#return {
    display: none;

    position: fixed;
    right: 100px;
    bottom: 129.87px;

    width: 34px;
    height: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M20.3892 2.67879L33.1769 27.4061C35.1443 30.9778 33.4228 34 29.7341 34H4.15855C0.469774 34 -1.00574 30.9778 0.715691 27.4061L13.5035 2.67879C15.4708 -0.892929 18.4218 -0.892929 20.3892 2.67879Z' fill='url(%23paint0_linear_137_3286)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_137_3286' x1='0.793333' y1='1.77083' x2='35.9154' y2='5.37208' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FCC100'/%3E%3Cstop offset='1' stop-color='%23FED600'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
#return:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M20.3892 2.67879L33.1769 27.4061C35.1443 30.9778 33.4228 34 29.7341 34H4.15855C0.469774 34 -1.00574 30.9778 0.715691 27.4061L13.5035 2.67879C15.4708 -0.892929 18.4218 -0.892929 20.3892 2.67879Z' fill='url(%23paint0_linear_137_3287)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_137_3287' x1='0.793333' y1='1.77083' x2='35.9154' y2='5.37208' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FCE300'/%3E%3Cstop offset='1' stop-color='%23F9FE00'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

/* Стили сфер */

.gradient_mob,
.gradient_4,
.gradient_1 {
    position: absolute;
    top: -150px;
    left: -320px;
    z-index: -9999;

    width: 902px;
    height: 769px;
    background: radial-gradient(
        50% 50% at 50% 50%,
        rgba(245, 152, 65, 0.3) 0%,
        rgba(64, 41, 36, 0) 100%
    );
}

.gradient_2 {
    position: absolute;
    left: -65px;
    bottom: -3025px;
    z-index: -9999;

    width: 579px;
    height: 531px;

    background: url(./assets/gradient_2.png) no-repeat center;
}

.gradient_3 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -9999;

    width: 551px;
    height: 642px;

    background: url(./assets/gradient_3.png) no-repeat center;
}

.gradient_4 {
    top: 1565px;
    left: unset;
    right: 0;
}

.gradient_mob {
    top: unset;
    left: -520px;
    bottom: -3995px;
}

.mob_show {
    display: none;
}

/* Стили для header */
#header {
    position: relative;
    max-width: 1920px;
    height: 170px;

    margin: 0 auto;
}

.header-navbar {
    width: 100%;
    height: 70px;

    display: flex;
    align-items: center;

    padding: 6px 100px;

    background: #292725;
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.25);
}

.logo-container {
    display: flex;
    align-items: center;

    width: 130px;

    column-gap: 16px;

    word-wrap: break-word;
}

.logo-container picture img {
    display: block;
}

.logo-text {
    font-size: 20px;
    text-transform: uppercase;
}

.nav-toggle-button {
    display: none;
}

.main-navigation {
    position: absolute;
    top: 200px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);

    max-width: 1060px;
    height: 81px;

    padding: 32px 327.5px;

    border-radius: 16px;
    background: #292725;
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.25);
}

.nav-item-group {
    display: flex;
    justify-content: center;
    list-style: none;

    margin: 0 auto;
    padding: 0;

    /* Задаем расстояние между  */
    column-gap: 60px;
}

.nav-item-group li {
    line-height: 20px;
    text-align: center;
}

.nav-item-link {
    font-size: 14px;
    text-transform: uppercase;
}

.nav-item-link:hover {
    color: var(--link-color);
}

.nav-item-link:active {
    color: var(--link-color-active);
}

.nav-item-no-link {
    font-size: 14px;
    text-transform: uppercase;
}

.authentication {
    display: flex;
    align-items: center;

    margin-left: auto;
    /* Задаем расстояние между  */
    column-gap: 12px;
}

.auth-button {
    width: 150px;
    height: 48px;
    font-family: var(--font-family);
    padding: 14px 32px;
    font-weight: 500;
    color: var(--dark-orange-color);
    border-radius: 22px;
}

.auth-button-login {
    background: linear-gradient(135deg, #f3cc41 0%, #e3ab55 100%);
}

.auth-button-login:hover {
    background: linear-gradient(135deg, #fff737 0%, #ffa115 100%);
}

.auth-button-register {
    width: auto;
    background: linear-gradient(135deg, #f3cc41 0%, #e3ab55 100%);
}

.auth-button-register:hover {
    background: linear-gradient(135deg, #fff737 0%, #ffa115 100%);
}

.content-header {
    max-width: 900px;
    max-height: 200px;
    margin: 0 auto;
}

.banner-container {
    max-width: 900px;
    max-height: 200px;
    margin: 0 auto;
}

.content-header picture img {
    width: 100%;
    height: 100%;
}

/* Стили для main */
#main {
    position: relative;
    z-index: 0;

    max-width: 1060px;
    height: auto;
    margin: 0 auto 63px auto;

    border-radius: 17px;
    background-color: var(--main-bg-color);
    padding: 142px 40px 56px 40px;

    color: var(--light-gray-color);
    line-height: var(--main-line-height);
}

#main p {
    margin: var(--main-p-margin);
    font-weight: 300;
    font-size: 16px;
    line-height: 32px;
}

#main a {
    color: var(--link-color);
}

#main a:hover {
    color: var(--link-color-hover);
}

#main a:active {
    color: var(--link-color-active);
}

#main > div {
    display: flex;
    align-items: center;

    width: 100%;
}

#main > div p:last-child {
    margin-bottom: 0;
}

/* Первая таблица */
.option-table {
    width: 100%;
    margin: 60px auto 0 auto;

    color: #ececec;
    line-height: 26px;
    letter-spacing: -0.408px;

    border-collapse: collapse;
}

.option-table thead tr td {
    background: #523e2b;
}

.option-table td,
.option-table td {
    width: 25%;
    padding: 12px 10px;

    border-right: 1px solid #1e1b18;
    border-bottom: 1px solid #987a54;
}

.option-table tbody tr:nth-child(2n + 1) {
    background: #14100b;
}

.option-table tbody tr:nth-child(2n) {
    background: #241d14;
}

tbody tr td:first-child p {
    margin: 0;
    padding: 0;
}

/* Вторая таблица */
.bonus-table {
    width: 100%;
    margin: 60px auto 60px auto;

    color: #ececec;
    line-height: 26px;
    letter-spacing: -0.408px;

    border-collapse: collapse;
}

.bonus-table td {
    padding: 12px 10px;

    border-right: 1px solid #1e1b18;
    border-bottom: 1px solid #987a54;
}

.bonus-table tbody tr td:nth-child(1) {
    width: 20%;
}

.bonus-table tbody tr td:nth-child(2),
.bonus-table tbody tr td:nth-child(3) {
    width: 40%;
}

.bonus-table tbody tr:nth-child(2n + 1) {
    background: #14100b;
}

.bonus-table tbody tr:nth-child(2n) {
    background: #241d14;
}

/* Третья таблица */
.characteristics-table {
    width: 100%;
    margin: 0 auto;

    color: #ececec;
    line-height: 24px;
    letter-spacing: 0.4px;

    border-collapse: collapse;
}

.characteristics-table th {
    width: 26%;
    text-align: start;
    padding: 12px 10px;

    border-right: 1px solid #1e1b18;
    border-bottom: 1px solid #987a54;
}

.characteristics-table td {
    width: 74%;
    padding: 12px 10px;

    border-right: 1px solid #1e1b18;
    border-bottom: 1px solid #987a54;
}

.characteristics-table tr:nth-child(2n + 1) {
    background: #14100b;
}

.characteristics-table tr:nth-child(2n) {
    background: #241d14;
}

#footer {
    border-top: 1px solid #f1c744;
    padding: 40px 0 44px 0;

    text-align: center;
    color: var(--footer-color);
    font-size: 12px;
    line-height: 150%;
}

@media (max-width: 992px) {
    #return {
        right: 12px;
        bottom: 50px;
    }

    .header-navbar {
        position: relative;
        padding: 6px 20px;
        background-color: #292725;
    }

    .main-navigation {
        padding: 32px 182px;
    }

    .auth-button {
        width: 40px;
        height: 40px;

        /* Скрываем текст */
        text-indent: -9999px;

        padding: 0;
        border-radius: 50%;
    }

    .auth-button-login:hover,
    .auth-button-login {
        background: url(./assets/login.svg) no-repeat center;
    }

    .auth-button-register,
    .auth-button-register:hover {
        background: url(./assets/register.svg) no-repeat center;
    }

    .content-header {
        margin-top: 30px;
    }

    .banner-container {
        width: 600px;
        height: 133px;
    }
}

@media (max-width: 768px) {
    .mob_none {
        display: none;
    }

    .header-navbar {
        padding: 6px 86px 6px 20px;
    }

    .nav-toggle-button {
        display: block;
        width: 50px;
        height: 50px;

        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);

        background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cg id='menu'%3E%3Crect id='Rectangle 4' x='2' y='2' width='46' height='46' rx='23' stroke='%23FCC900' stroke-width='2.3984' stroke-miterlimit='10' /%3E%3Cg id='Group 194'%3E%3Crect id='Rectangle5' x='12' y='13' width='26' height='3' rx='1.5' fill='url(%23paint0_linear_137_3235)' /%3E%3Crect id='Rectangle6' x='12' y='23' width='26' height='3' rx='1.5' fill='url(%23paint1_linear_137_3235)' /%3E%3Crect id='Rectangle7' x='12' y='33' width='26' height='3' rx='1.5' fill='url(%23paint2_linear_137_3235)' /%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_137_3235' x1='12.6067' y1='13.1562' x2='27.7716' y2='26.6324' gradientUnits='userSpaceOnUse' %3E%3Cstop stop-color='%23FCC100' /%3E%3Cstop offset='1' stop-color='%23FED600' /%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_137_3235' x1='12.6067' y1='23.1562' x2='27.7716' y2='36.6324' gradientUnits='userSpaceOnUse' %3E%3Cstop stop-color='%23FCC100' /%3E%3Cstop offset='1' stop-color='%23FED600' /%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_137_3235' x1='12.6067' y1='33.1562' x2='27.7716' y2='46.6324' gradientUnits='userSpaceOnUse' %3E%3Cstop stop-color='%23FCC100' /%3E%3Cstop offset='1' stop-color='%23FED600' /%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    }

    .nav-toggle-button-active {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' fill='none'%3E%3Crect x='2' y='2' width='46' height='46' rx='23' stroke='%23FCC900' stroke-width='2.3984' stroke-miterlimit='10'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0607 31.9394C15.4749 32.5252 15.4749 33.4749 16.0607 34.0607C16.6464 34.6465 17.5962 34.6465 18.182 34.0607L25 27.2427L32.2028 34.4455C32.7886 35.0312 33.7383 35.0312 34.3241 34.4455C34.9099 33.8597 34.9099 32.9099 34.3241 32.3241L27.1213 25.1213L34.4454 17.7972C35.0312 17.2114 35.0312 16.2617 34.4454 15.6759C33.8596 15.0901 32.9099 15.0901 32.3241 15.6759L25 23L18.0607 16.0607C17.4749 15.4749 16.5251 15.4749 15.9393 16.0607C15.3536 16.6465 15.3536 17.5962 15.9393 18.182L22.8787 25.1213L16.0607 31.9394Z' fill='url(%23paint0_linear_137_3062)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_137_3062' x1='15.5395' y1='32.6815' x2='35.7918' y2='31.4873' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FCC100'/%3E%3Cstop offset='1' stop-color='%23FED600'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    }

    .main-navigation {
        top: 69px;

        width: 100%;
        height: 730px;
        background: #292725;

        border-radius: unset;
        padding: 0;
        padding-top: 52px;
    }

    .nav-item-group {
        display: block;
        column-gap: 0;
    }

    .nav-item-group-mob:nth-child(2n + 1) {
        background: #241d14;
    }

    .nav-item-group-mob:nth-child(2n) {
        background: #523e2b;
    }

    .nav-item-no-link,
    .nav-item-link {
        display: block;
        padding: 20px 80px;
    }

    .authentication {
        margin-left: auto;

        /* Задаем расстояние между  */
        column-gap: 8px;
    }

    .auth-button {
        width: 40px;
        height: 40px;

        /* Скрываем текст */
        text-indent: -9999px;

        padding: 0;
        border-radius: 50%;
    }

    .auth-button-login:hover,
    .auth-button-login {
        background: url(./assets/login.svg) no-repeat center;
    }

    .auth-button-register,
    .auth-button-register:hover {
        background: url(./assets/register.svg) no-repeat center;
    }

    .banner-container {
        width: 576px;
        height: 128px;
    }

    #main {
        background-color: unset;

        margin: 40px auto 96px auto;
        padding: 0 20px 0 20px;
    }

    #main > div {
        display: block;
    }

    #main > div picture {
        display: block;
        text-align: center;
        margin-bottom: 24px;
    }
}

@media (max-width: 576px) {
    h1 {
        line-height: 40px;
        text-align: start;
    }

    h2,
    h3 {
        text-align: start;
    }

    .banner-container {
        width: 390px;
        height: 86px;
    }
}

@media (max-width: 390px) {
    body {
        width: 390px;
        margin: 0 auto;
    }

    #main {
        width: 390px;
    }

    .bonus-table {
        /* Чтобы таблица не выходила за рамки */
        font-size: 14px;
    }

    #footer {
        padding: 40px 0 30px 0;
    }
}