:root{
    --white-font-color: #fff;
    --black-font-color: #363636;
    --span-font-color: #858585;
    --link-color: #459a3f;
    --inactive-link-color: #bbbbbb;
    --category: #306a2b;
    --border: 1px solid rgba(163, 163, 163, 0.33);
    --article-category-color: #959595;
    --main-navbar-background-color: rgb(27, 28, 28, 0.8);
    --hover-color: rgba(255, 255, 255, 0.10);
    --border-radius: 10px;
}

@font-face {
    font-family: Friz-Quadrata;
    src: url("../fonts/frq/frq55.otf");
}

@font-face {
    font-family: Friz-Quadrata;
    font-weight: bold;
    src: url("../fonts/frq/frq85.otf");
}

#content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    flex-grow: 1;
}

.hidden {
    display: none;
}

/* BASE STYLES */
form.base_form
{
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 285px;
}

div.base_input_block 
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.base_input_block label
{
    color: var(--inactive-link-color);
    margin-bottom: 0 !important;
}

input.base_input
{
    height: 40px;
    padding: 7px 15px;
    border-radius: var(--border-radius);
    border: var(--border);
    font-size: 16px;
    background-color: #f3f3f3;
    transition: background-color .3s linear;
    margin-bottom: 0 !important;
}
input.base_input:focus
{
    outline: none;
    background-color: var(--white-font-color);
    border-color: rgba(0, 0, 0, 0.35);
}
input.base_submit_input
{
    align-self: center;
    font-size: 16px;
    padding: 7px 15px;
    color: #F1EEEA;
    background-color: var(--category);
    border: none !important;
    font-family: 'Geologica', sans-serif !important;
    border-radius: var(--border-radius);
    width: 200px;
    cursor: pointer;
    transition: background-color .3s linear;
}
input.base_submit_input:hover
{
    background-color: var(--link-color);
}

/* MAIN SITE NAVBAR */
.main-site-navbar {
    width: 98%;
    height: 72px;

    display: flex;
    align-items: center;

    padding: 5px;

    border-radius: 8px;

    color: var(--white-font-color);
    background-color: var(--main-navbar-background-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    position: fixed;
    top: 10px;
    left: 50%;

    transform: translate(-50%, 0%);

    z-index: 20;

    font-family: 'Geologica', sans-serif;
}

.main-site-background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, .7);
    width: 100%;

    display: none;
}

.main-site-sidebar {
    position: absolute;
    top: 0;
    left: 0;

    width: 375px;
    min-height: 100%;
    background-color: #000;

    display: none;
}

.main-site-sidebar-image {
    width: 100%;
    height: 270px;
}

.main-site-sidebar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-site-sidebar-content {
    padding: 0 20px;
    padding-left: max(20px, env(safe-area-inset-left));
}

ul.main-site-menu-list {
    list-style: none;
}

li.main-site_menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    text-transform: uppercase;
    color: var(--span-font-color);
    border-bottom: var(--border);

    font-family: 'Geologica', sans-serif;
}

li.main-site_menu-item:last-child {
    border-bottom: none;
}

li.main-site_menu-item a {
    padding: 25px 0;
    color: var(--white-font-color);
    width: 100%;
}


/* LOGO SECTION */
.logo-section {
    height: 100%;

    cursor: pointer;

    display: flex;
    align-items: center;
}

.logo-section::after {
    content: "";

    display: block;

    width: 2px;
    height: 70%;
    background-color: rgba(255, 255, 255, .3);

    margin: 0 8px;
}
.logo-section a {
    height: inherit;
}

.main-site-navbar .logo-section img {
    height: 100%;
    width: 50px;

    filter: brightness(1.20);
}

ul.primary-menu_list {
    list-style: none;

    display: flex;
    align-items: center;
}

a.primary-menu_link-item {
    padding: 0 12px;
    border-radius: 8px;

    height: 48px;
    display: flex;
    align-items: center;

    text-transform: uppercase;

    transition: background-color .3s linear;

    color: var(--white-font-color);
}

a.primary-menu_link-item:hover {
    background-color: var(--hover-color);
    color: var(--white-font-color) !important;
}

.secondary-menu {
    min-height: 48px;

    border-radius: var(--border-radius);

    display: flex;
    align-items: center;

    position: relative;

    padding: 12px;
    cursor: pointer;

    margin-left: auto;

    transition: background-color .3s linear;
}

.secondary-account-section {
    display: flex;
    align-items: center;
}
.secondary-account-section svg {
    fill: var(--white-font-color);
    width: 30px;
    height: 30px;
}

.secondary-account-section span {
    margin-left: 10px;
}

.dropdown-menu {
    display: none;

    background-color: #1b1c1c;

    padding: 12px;
    border-radius: var(--border-radius);

    height: auto;
    max-height: none;
    min-width: 320px;
    opacity: 1;

    position: absolute;
    top: 70px;
    right: -10px;

    transition: opacity .3s ease;
}

.secondary-menu.active .dropdown-menu {
    display: block;
}

.dropdown-arrow {
    width: 30px;
    height: 30px;

    background-color: #1b1c1c;

    position: absolute;
    top: -5px;
    right: 50%;
    transform: translate(50%, 0) rotate(45deg);

    z-index: -1;
}

.login-section {
    padding: 12px;

    text-align: center;
}

.button-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

button.login-section_button {
    width: 100%;

    border: none;
    border-radius: var(--border-radius);
    background-color: var(--category);
    color: var(--white-font-color);

    padding: 12px 0;

    cursor: pointer;

    transition: all .3s ease;

    font-size: 18px;
    font-family: Friz-Quadrata;

    outline: none;

    font-family: 'Geologica', sans-serif;
}

button.login-section_button:hover {
    background-color: var(--link-color);
}

/* WRAPPER */
.main-wrapper {
    width: 100%;
    position: relative;

    background-color: #efefef;

    flex-grow: 1;
}

/* MAIN FOOTER */
.main-footer {
    display: grid;
    justify-content: center;
    row-gap: 24px;

    text-align: center;
    padding: 15px 0;

    background-color: #1b1c1c;
    color: var(--inactive-link-color);
}

.socials {
    display: grid;
    row-gap: 24px;
}

h3.socials-heading {
    font-size: 34px;
    color: #D2C8AE;
    font-family: Friz-Quadrata;
}

.social-networks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

a.social-networks_link {
    width: 36px;
    height: 36px;
}

a.social-networks_link svg {
    width: 100%;
    height: 100%;
    
    fill: var(--inactive-link-color);
    transition: all .3s ease;
}

a.social-networks_link:hover svg {
    fill: var(--link-color);
}

.localization {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    justify-self: center;

    position: relative;

    cursor: pointer;
}

span.select-language svg {
    width: 8px;
    height: 14px;
}

.localization:hover span.language {
    color: var(--white-font-color);
}

.globe-icon, span.language {
    margin-right: 10px;
}

.globe-icon, span.select-language {
    display: flex;
    align-items: center;
}

.globe-icon, span.select-language svg {
    fill: var(--link-color);
}

ul.language-list {
    list-style: none;
    text-align: left;

    padding: 12px;

    border-radius: var(--border-radius);
    background-color: var(--black-font-color);

    position: absolute;
    top: 0;
    right: -85px;
    width: 85px;

    display: none;

    -webkit-user-select: none; 
    -moz-user-select: none;   
    -ms-user-select: none;     
    user-select: none;
}

li.language-item {
    cursor: pointer;
    transition: color .3s ease;
}

a.language-option {
    color: var(--white-font-color);
}

li.language-item:hover a.language-option {
    color: var(--link-color);
}

.company-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.company-logo a {
    height: 70px;

    margin-bottom: 24px;
}

.company-logo a img {
    height: 100%;
}

.company-logo span {
    display: block;
    font-size: 10px;
}

ul.main-footer_list {
    list-style: none;
    text-transform: uppercase;

    display: flex;
    align-items: center;

    font-size: 12px;

    margin-top: -10px;
    margin-bottom: 10px;
}

li.main-footer_item {
    padding: 0 12px;
    transition: all .3s ease;
    border-right: 1px solid #ffffff4d;
}

li.main-footer_item:last-child {
    border-right: none;
}

a.main-footer_link {
    color: var(--inactive-link-color);
}

li.main-footer_item:hover a.main-footer_link {
    color: var(--white-font-color);
}

/* PAGE 404 */
.page-not-found {
    text-align: center;
    padding: 20px;
}

/* COOKIES */
#cookieBar {
    box-shadow: none !important;
    border-radius: var(--border-radius);
    border: none !important;
}

#cookieBar a.cc-bar-btn {
    background-color: var(--category) !important;
    border: none !important;
    font-family: 'Geologica', sans-serif !important;
    border-radius: var(--border-radius);
    width: 200px;
}

/* CONTACT-US FORM */
form#contact_form 
{
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 285px;
}
form#contact_form div.base_contact 
{
    display: flex;
    flex-direction: column;
}

div.base_contact label
{
    color: var(--inactive-link-color);
    margin-bottom: 0 !important;
}

form#contact_form span
{
    display: none;
    color: tomato;
    text-align: right;
    font-size: 14px;
    margin-bottom: 0;
}

form#contact_form span.error
{
    display: block;
}

form#contact_form input#contact_email
{
    height: 40px;
    padding: 7px 15px;
    border-radius: var(--border-radius);
    border: var(--border);
    font-size: 16px;
    background-color: #f3f3f3;
    transition: background-color .3s linear;
    margin-bottom: 0 !important;
}

form#contact_form input#contact_email.error, textarea#issue_desc.error {
    border-color: tomato;
}

textarea#issue_desc 
{
    font-size: 16px;
    padding: 15px;
    height: 100px;
    border-radius: var(--border-radius);
    border: var(--border);
    resize: none;
    background-color: #f3f3f3;
    transition: background-color .3s linear;
    margin-bottom: 0 !important;
}

form#contact_form input#contact_email:focus, textarea#issue_desc:focus
{
    outline: none;
    background-color: var(--white-font-color);
    border-color: rgba(0, 0, 0, 0.35);
}

input#contactForm_submit
{
    align-self: center;
    font-size: 16px;
    padding: 7px 15px;
    color: #F1EEEA;
    background-color: var(--category);
    border: none !important;
    font-family: 'Geologica', sans-serif !important;
    border-radius: var(--border-radius);
    width: 200px;
    cursor: pointer;
    transition: background-color .3s linear;
}

input#contactForm_submit:hover
{
    background-color: var(--link-color);
}

form#contact_form input#issue_desc {
    height: 200px;
}

/* GREEN BUTTON */
button.green-btn {
    /* min-width: 301px; */
    height: 75px;

    cursor: pointer;
    font-size: 24px;
    font-family: Friz-Quadrata, serif;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 2px #000;

    border: none;
    background-color: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    padding: 0 20px;
}

button.green-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-image: 
    url("/static/img/btn_green_1_inactive.png"),
    url("/static/img/btn_green_2_inactive.png"),
    url("/static/img/btn_green_3_inactive.png");

    transition: all .3s linear;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    
    background-repeat: no-repeat;
    background-position: left center, center center, right center;
    background-size: auto 75px, calc(100% - 53px) 75px, auto 75px;
    pointer-events: none; /* Чтобы клик ловила кнопка, а не псевдоэлемент */

    z-index: -1;
}

button.green-btn:hover::before {
    background-image: 
        url("/static/img/btn_green_1_active.png"),
        url("/static/img/btn_green_2_active.png"),
        url("/static/img/btn_green_3_active.png");
}

/* PLAY GAME BUTTON */
button.playGame-btn {
    min-width: 313px;
    height: 93px;

    cursor: pointer;
    font-size: 52px;
    font-family: Friz-Quadrata, serif;
    font-weight: bold;

    border: none;
    background-color: transparent;
    
    /* Gradient text */
    background: linear-gradient(
        to bottom,
        #d4af37 0%,
        #d4af37 25%,
        #f9f2b0 50%,
        #d4af37 60%,
        #d4af37 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
        
    position: relative;
}

button.playGame-btn::before {
    width: 100%;
    height: 105px;

    content: "";
    display: block;

    background-image: 
    url("/static/img/btn_playgame_1_inactive.png"),
    url("/static/img/btn_playgame_3_inactive.png"),
    url("/static/img/btn_playgame_decor.png"),
    url("/static/img/btn_playgame_2_inactive.png");

    transition: all .3s linear;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    
    background-repeat: no-repeat;
    background-position: left 0, right 0, 25% 86px, center 0;
    background-size: auto 93px, auto 93px, auto 18px, calc(100% - 100px) 93px;
    pointer-events: none; /* Чтобы клик ловила кнопка, а не псевдоэлемент */

    z-index: -1;
}

button.playGame-btn:hover::before {
    background-image: 
        url("/static/img/btn_playgame_1_active.png"),
        url("/static/img/btn_playgame_3_active.png"),
        url("/static/img/btn_playgame_decor.png"),
        url("/static/img/btn_playgame_2_active.png");
}

button.playGame-btn::after {
    width: 100%;
    height: 105px;

    content: "";
    display: block;

    transition: all .3s linear;
    transform: scaleX(-1);
    
    background-image: url(/static/img/btn_playgame_decor.png);
    background-repeat: no-repeat;
    background-position: 25% 86px;
    background-size: auto 18px;
    pointer-events: none;

    position: absolute;
    bottom: -12px;
    z-index: 2;
}

span.playGame-btn-shadow, 
span.playGame-btn-text {
    font-size: 52px;
    font-family: Friz-Quadrata;
    font-weight: bold;
    position: absolute;
}

span.playGame-btn-shadow {
    text-shadow: 2px 4px 2px rgb(90, 36, 20);

    top: 8px;
    left: -4px;
    right: 0;
    bottom: 0;
    
    pointer-events: none;

    z-index: 1;
    /* Firefox fix */
    @-moz-document url-prefix() {
        top: 0;
    }
}

span.playGame-btn-text {
    top: 8px;
    left: 0;
    right: 0;
    bottom: 0;
    
    background: linear-gradient(
        to bottom,
        #d4af37 0%,
        #d4af37 25%,
        #f9f2b0 50%,
        #d4af37 60%,
        #d4af37 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
        
    z-index: 2;
    /* Firefox fix */
    @-moz-document url-prefix() {
        top: 0;
    }
}

/* MEDIA QUERIES */
@media (hover: hover) {
    .secondary-menu:hover {
        background-color: var(--hover-color);
    }
    .primary-menu_list-item:hover a, .sidebar-item:hover a{
        color: var(--link-color);
    }
}

@media screen and (max-width: 500px) {
    #cookieBar .cc-bar-col {
        width: 100% !important;
    }

    #cookieBar a.cc-bar-btn {
        width: 100% !important;
    }
}

@media screen and (max-width: 926px) {
    ul.main-footer_list {
        font-size: 10px;
    }
    .main-site-navbar .logo-section {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);

        height: calc(100% - 5px);
    }
    .main-site-navbar .logo-section::after {
        display: none;
    }
    .primary-menu {
        display: none;
    }
    .secondary-account-section span {
        display: none;
    }
    .secondary-menu.active .dropdown-menu {
        right: -5px;
    }
    .secondary-menu.active .dropdown-arrow {
        right: 33px;
    }
}

@media only screen and (max-width: 991px) {
    #cookieBar {
        border-radius: var(--border-radius) !important;
    }
}