@font-face {
    font-family: 'cormorant_garamond';
    src: url('fonts/cormorant_garamond_medium.woff') format('woff'),
    url('fonts/cormorant_garamond_medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Улучшает отображение при загрузке */
}

@font-face {
    font-family: 'novelist';
    src: url('fonts/novelist.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Улучшает отображение при загрузке */
}

@font-face {
    font-family: 'foglihten';
    src: url('fonts/foglihten_no_06.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Улучшает отображение при загрузке */
}

/* Отключение возможности выделять текст */
* {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /*    Firefox */
    -ms-user-select: none; /*     IE/Edge */
    user-select: none; /*         Стандарт */
}

:root {
    --background-image-url: url('../media/page_elements/background_moons_and_hands.png');
}

html {
    max-width: 100%;
    overflow-x: hidden; /* Отключает горизонтальный скролл */
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'cormorant_garamond', sans-serif;
    overflow-x: hidden;
    background: #f1e8db;
    background: var(--background-image-url) no-repeat center center fixed;
    background-size: cover; /* Растягиваем изображение, чтобы оно покрывало всю страницу */
}

nav {
    display: flex;
    justify-content: center;
    background-color: rgb(131, 98, 80, 0.7); /* Полупрозрачный фон */
    padding: 10px;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    z-index: 999;
    transform: translateY(-20px);
    transition: opacity 1s, transform 1s, background-color 0.3s ease;
    mask-image: linear-gradient(to bottom, black, black 80%, transparent); /* Маска с градиентом */
    -webkit-mask-image: -webkit-linear-gradient(to bottom, black, black 80%, transparent); /* Для поддержки Webkit браузеров */
}

nav button {
    margin: 0 10px;
    padding: 0 5px 5px 5px;
    color: white;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 32px;
    font-family: 'cormorant_garamond', sans-serif;
    transition: background 0.8s ease, color 1s ease, border-radius 1s ease;
}

nav button:hover {
    color: rgb(89, 26, 35);
    background: #f0f0f0;
    border-radius: 25px;
    transition: background 0.5s ease-out, color 0.5s ease, border-radius 0.5s ease;
}

#navBar {
    position: relative; /* Устанавливаем относительное позиционирование для кнопок */
    z-index: 999; /* Кнопки располагаются выше изображения */
}

.hidden {
    visibility: hidden;
}


@media (max-width: 768px) {
    nav {
        /*flex-direction: column; !* Кнопки располагаются вертикально *!*/
        padding: 5px;
    }

    nav button {
        font-size: 125%;
        padding: 5px 10px;
        width: 100%; /* Кнопки растягиваются на всю ширину */
    }

    body {
        background: #f1e8db;
        background: url('../media/page_elements/background_moons_and_hands_vertical.png') no-repeat center center fixed;
        background-size: cover; /* Растягиваем изображение, чтобы оно покрывало всю страницу */
    }
}