@import url('https://fonts.cdnfonts.com/css/akony');
@import url('https://fonts.googleapis.com/css2?family=Bellota+Text:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@font-face {
    font-family: 'Buyan';
    src: url(fonts/BuyanRegular-PKZRE.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*СБРОС НАСТРОЕК БРАУЗЕРА*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*ОБЩИЕ ПОКАЗАТЕЛИ*/
:root {
    --container-width: 1200px;
    --container-padding: 4em;
    --main-font: 'akony', sans-serif;
    --desc-font: 'buyan', sans-serif;
    --text-shadow-gold: 3px 3px 25px #9e6c00;
    --text-shadow-black: 2px 2px 5px #000000;
    --color-gray: #313131;
    --color-white: #ffffff;
    --color-gold: #FFA557;
    --color-black: #000;
    --dark-bg: url(images/BG-gradient.svg);
}




/*НАСТРОЙКА ШАПКИ*/
header {
    min-height: 70px;
    padding: 1em;
    top: 0;
    z-index: 9999;
    background-color: var(--color-black);
    position: sticky;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

/*НАСТРОЙКА ЛОГОТИПА (SQWALEX)*/
.logo {
    font-size: 1rem;
    font-family: var(--main-font);
    color: var(--color-gold);
    text-shadow: var(--text-shadow-black);
}

/*НАСТРОЙКА КНОПОК НАВИГАЦИИ (ГЛАВНАЯ и СВЯЗАТЬСЯ)*/
.nav {
    gap: 2em;
    display: flex;
}

/*НАСТРОЙКА ССЫЛОК В НАВИГАЦИИ*/
.nav a {
    font-size: 0.85rem;
    font-family: var(--main-font);
    color: var(--color-white);
    text-shadow: var(--text-shadow-black);
    text-decoration: none;
}




/*НАСТРОЙКА ПЕРВОЙ СЕКЦИИ*/
section {
    min-height: 100vh;
    background: var(--dark-bg) center/cover no-repeat;
}

/*НАСТРОЙКА ВСЕГО КОНТЕЙНЕРА*/
.intro-container {
    padding: 2em;
    width: 100%;
    gap: 4em;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

/*КОНТЕЙНЕР С ТЕКСТОМ*/
.intro-text {
    flex: 1 1 50%;
}

/*НАСТРОЙКА ЗАГОЛОВКА*/
.intro-text h1 {
    font-size: 1.5rem;
    margin-top: 0.75em;
    font-family: var(--main-font);
    color: var(--color-black);
    text-shadow: var(--text-shadow-gold);
}

/*НАСТРОЙКА КОНТЕЙНЕРА СПИСКА*/
.intro-text ul {
    margin-top: 3em;
}

/*НАСТРОЙКА ОПИСАНИЯ*/
.intro-text ul li {
    margin-top: 1em;
    font-size: 1.5rem;
    font-family: var(--desc-font);
    color: var(--color-black);
    text-shadow: var(--text-shadow-black);
    list-style: none;
}

/*НАСТРОЙКА КОНТЕЙНЕРА КАРТИНКИ*/
.intro-image {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*НАСТРОЙКА КАРТИНКИ*/
.intro-image img {
    max-width: 100%;
    border-radius: 50px;
    box-shadow:  15px 15px 50px #000;
    height: auto;
    object-fit: contain;
}





/*НАСТРОЙКА ПОДВАЛА*/
footer {
    min-height: 100px;
    padding: 1em;
    background-color: var(--color-black);
    justify-content: center;
    display: flex;
}

/*НАСТРОЙКА КОНТЕЙНЕРА ПОДВАЛА*/
.footer-container {
    width: 95%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

/*НАСТРОЙКА ОГЛАВЛЕНИЯ (СОЦ. СЕТИ)*/
.footer-container h3 {
    font-size: 1.5rem;
    font-family: var(--main-font);
    color: var(--color-gold);
    text-shadow: var(--text-shadow-black);
}

/*НАСТРОЙКА ССЫЛОК СОЦ. СЕТЕЙ (ТИК ТОК, ЮТУБ, ТЕЛЕГРАМ)*/
.footer-container a {
    font-size: 1rem;
    font-family: var(--main-font);
    color: var(--color-white);
    text-shadow: var(--text-shadow-black);
    text-decoration: none;
}



@media screen and (min-width: 1400px) {

    /*НАСТРОЙКА ШАПКИ*/
header {
    flex-direction: row;
}

/*НАСТРОЙКА ЛОГОТИПА (SQWALEX)*/
.logo {
    font-size: 1.5rem;
}

/*НАСТРОЙКА КНОПОК НАВИГАЦИИ (ГЛАВНАЯ и СВЯЗАТЬСЯ)*/
.nav {
    gap: 5em;
}

/*НАСТРОЙКА ССЫЛОК В НАВИГАЦИИ*/
.nav a {
    font-size: 1rem;
}




/*НАСТРОЙКА ВСЕГО КОНТЕЙНЕРА*/
.intro-container {
    gap: 7em;
    padding: var(--container-padding);
    flex-direction: row;
}

/*КОНТЕЙНЕР С ТЕКСТОМ*/
.intro-text {
    max-width: var(--container-width);
}

/*НАСТРОЙКА ЗАГОЛОВКА*/
.intro-text h1 {
    font-size: 3rem;
    margin-top: 1.25em;
}

/*НАСТРОЙКА КОНТЕЙНЕРА СПИСКА*/
.intro-text ul {
    margin-top: 6em;
}

/*НАСТРОЙКА ОПИСАНИЯ*/
.intro-text ul li {
    margin-top: 1em;
    font-size: 3rem;
}

/*НАСТРОЙКА КОНТЕЙНЕРА КАРТИНКИ*/
.intro-image {
    padding: 1em;
}

/*НАСТРОЙКА КАРТИНКИ*/
.intro-image img {
    width: 100%;
    max-width: 1100px;
}




/*НАСТРОЙКА ПОДВАЛА*/
footer {
    min-height: 10vh;
}

/*НАСТРОЙКА КОНТЕЙНЕРА ПОДВАЛА*/
.footer-container {
    flex-direction: row;
}

}
