/* Основні стилі для сторінки */
body {
    margin: 0;
    padding: 0;
    font-family: 'Lora', serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-top: 60px;
}

/* Фіксований фон через окремий контейнер */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('fon/fon_t.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1; /* Фон залишається позаду контенту */
    will-change: transform; /* Оптимізація для мобільних пристроїв */
}

/* Контент сторінки */
.content {
    z-index: 1; /* Контент знаходиться над фоном */
    padding: 20px;
    color: #fff;
    text-align: center;
}
/* Навігаційне меню */
.navbar {
    font-family: 'Lora', serif;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer; /* Курсор у вигляді руки */
}
.navbar a {
    color: #f2f2f2;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    display: inline-block;
}
.navbar a:hover {
    background-color: #575757;
    color: white;
}
/* Висувне меню */
.dropdown {
    position: relative;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    background-color: #575757;
}
.dropdown:hover .dropdown-content {
    display: block;
}
/* Стилі для контенту */
.content {
    padding: 20px;
    flex: 1;
    color: #e60e0e;
    text-align: center;
}
h1{
    font-family: 'Lora', serif;
    text-align: center;
    color: #4ae43c; /* Фіолетовий колір */
    text-shadow: 
    -1px -1px 0 #000, /* Чорний контур */
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
    font-weight: bold; /* Жирний текст */
    font-size: 2.5em; /* Зміна розміру шрифту */
    text-transform: uppercase; /* Всі букви великі */
    letter-spacing: 2px; /* Відступи між буквами */
    margin-top: 70px; /* Відступ зверху */
    margin-bottom: 0; /* Нульовий відступ знизу, щоб уникнути зайвого простору */
}
h2 {
    font-family: 'Lora', serif;
    text-align: center;
    color: #09f3d8; /* Фіолетовий колір */
    text-shadow: 
        -1px -1px 0 #000, /* Чорний контур */
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    font-weight: bold; /* Жирний текст */
    font-size: 1.9em; /* Зміна розміру шрифту */
    text-transform: uppercase; /* Всі букви великі */
    letter-spacing: 2px; /* Відступи між буквами */
    margin-top: 50px; /* Відступ зверху */
    margin-bottom: 0; /* Нульовий відступ знизу */
    width: 100%; /* Розтягує на всю ширину */
    /*box-sizing: border-box; /* Враховує відступи і обводки в загальній ширині */
    word-wrap: normal;
    overflow-wrap: normal;
    hyphens: none;
}
h3 
{
            font-family: 'Lora', serif;
            color: #b9ece6; /* Фіолетовий колір */
            text-shadow: 
            -1px -1px 0 #000, /* Чорний контур */
             1px -1px 0 #000,
            -1px  1px 0 #000,
             1px  1px 0 #000;
            font-weight: bold; /* Жирний текст */
            font-size: 1.3em; /* Зміна розміру шрифту */
            text-transform: uppercase; /* Всі букви великі */
            letter-spacing: 2px; /* Відступи між буквами */
            margin-top: 30px; /* Відступ зверху */
            margin-bottom: 0; /* Нульовий відступ знизу, щоб уникнути зайвого простору */
            word-wrap: normal;
            overflow-wrap: normal;
            hyphens: none;
}
h4 
{
            font-family: 'Lora', serif;
            color: #b9ece6; /* Фіолетовий колір */
            text-shadow: 
            -1px -1px 0 #000, /* Чорний контур */
             1px -1px 0 #000,
            -1px  1px 0 #000,
             1px  1px 0 #000;
            font-weight: bold; /* Жирний текст */
            font-size: 1.2em; /* Зміна розміру шрифту */
            text-transform: uppercase; /* Всі букви великі */
            letter-spacing: 2px; /* Відступи між буквами */
            margin-top: 20px; /* Відступ зверху */
            margin-bottom: 0; /* Нульовий відступ знизу, щоб уникнути зайвого простору */
            word-wrap: normal;
            overflow-wrap: normal;
            hyphens: none;
}
/* Стилі для футера */
.footer {
    background-color: #333;
    color: #f2f2f2;
    text-align: center;
    padding: 10px;
}
.social-links {
    margin-top: 10px;
}
.social-links a {
    margin: 0 10px;
    display: inline-block;
}
.social-links img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* Стилі для бургер-меню */
.t-menuburger {
    display: none; /* Сховати на великих екранах */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.t-menuburger span {
    display: block;
    width: 30px;
    height: 4px;
    background-color: #ffcc00;
    margin: 5px 0;
}
/* Стилі для класу .highlight */
.highlight {
    background-color: rgb(43, 68, 68, 0.6); /* прозорість фону останне значення */
    border-radius: 10px; /* Злегка закруглені кути */
    font-family: 'Lora', serif;
    color: rgb(230, 182, 200);
    text-shadow: 
    -1px -1px 0px #000,  /* Тінь зліва вгорі */
     1px -1px 0px #000,  /* Тінь справа вгорі */
    -1px  1px 0px #000,  /* Тінь зліва внизу */
     1px  1px 0px #000;  /* Тінь справа внизу */

    /*text-shadow: 
            -1px -1px 0 #000, 
             1px -1px 0 #000,
            -1px  1px 0 #000,
             1px  1px 0 #000;*/ /* Чорний контур */
    font-size: 16px;
    padding: 10px;
    margin-left: 200px; /* Зовнішній відступ зліва 40px */
    /*background-color: transparent; */
    border: none;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.0);
    /* text-align: left; /* Горизонтальне вирівнювання по лівому краю */
    text-align: justify;
    line-height: 1.5; /* Вертикальне вирівнювання */
    word-wrap: break-word; /* Перенос слів, якщо вони не вміщуються */
    overflow-wrap: break-word; /* Альтернативне правило для переносу слів */
    hyphens: auto; /* Автоматичне розділення слів для переносу */
   margin-top: 50px; /* Відступ зверху */
}

.highlight1 {
    background-color: rgb(43, 68, 68, 0.6); /* прозорість фону останне значення */
    border-radius: 10px; /* Злегка закруглені кути */
    font-family: 'Lora', serif;
    color: rgb(248, 244, 11);
    text-shadow: 
            -1px -1px 0 #000, /* Чорний контур */
             1px -1px 0 #000,
            -1px  1px 0 #000,
             1px  1px 0 #000;
    font-size: 16px;
    padding: 10px;
    margin-right: 200px; /* Зовнішній відступ зліва 40px */
    /*background-color: transparent;*/
    border: none;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.0);
    /* text-align: left; /* Горизонтальне вирівнювання по лівому краю */
    text-align: justify;
    margin-left: 15px; /* Відступ для першого абзацу */
    line-height: 1.5; /* Вертикальне вирівнювання */
    word-wrap: break-word; /* Перенос слів, якщо вони не вміщуються */
    overflow-wrap: break-word; /* Альтернативне правило для переносу слів */
    hyphens: auto; /* Автоматичне розділення слів для переносу */
    margin-top: 50px; /* Відступ зверху */
}

p {
    font-family: 'Lora', serif;
    /*text-indent: 70px;  відступ в першому рядку */
    font-size: 26px; /* Розмір шрифта */
    line-height: 1.6; /* Відстань між рядками */
    margin-bottom: 0px; /* Відступ між абзацами */
}
p:first-child {
    margin-left: 0px; /* Відступ для першого абзацу */
}
.p-indent {
    text-indent: 50px; /* Відступ на початку першого рядку */
}
.social-link {
    margin: 0 10px; /* Відступи між іконками */
    display: inline-block;
}
.social-link img {
    transition: transform 0.3s ease; /* Анімація при наведені */
}
.social-link:hover img {
    transform: scale(1.2); /* Збільшення іконки при наведенні */
}
    .rounded-icon {
      width: 50px; /* Розмір іконки */
      height: 50px; /* Розмір іконки */
      border-radius: 50%; /* Округлення */
      object-fit: cover; /* Обрізає зображення для правильного відображення */
    }
    .fixed-window {
        position: fixed;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5); /* Прозорий чорний фон */
        padding: 10px;
        border-radius: 0 10px 10px 0;
        z-index: 1000;
    }
    
    /* Фіксоване вікно зліва */
.fixed-window {
    position: fixed; /* Закріплює елемент на сторінці */
    top: 80%; /* Розташовує вікно по центру по вертикалі */
    left: 0; /* Прив'язує до лівого краю */
    transform: translateY(-50%); /* Центрує вікно точно по вертикалі */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.0), rgba(50, 50, 50, 0.0)); /* Градієнтний фон */
    padding: 15px; /* Збільшено відступи */
    border-radius: 0 10px 10px 0; /* Згладжує кути праворуч */
    z-index: 1000; /* Забезпечує видимість поверх інших елементів */
    display: flex; /* Використовується для управління внутрішніми елементами */
    flex-direction: column; /* Розташовує всі елементи вертикально */
    align-items: center; /* Центрує іконки по горизонталі */
}
/* Фіксоване вікно зліва Стилі для посилань  */
.fixed-window {
    position: fixed; /* Закріплює елемент на сторінці */
    bottom: 10px; /* Прив'язує вікно до нижнього краю */
    left: 0; /* Прив'язує до лівого краю */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.0), rgba(50, 50, 50, 0.0)); /* Градієнтний фон */
    padding: 15px; /* Відступи всередині контейнера */
    border-radius: 0 10px 10px 0; /* Згладжує кути праворуч */
    z-index: 1000; /* Забезпечує видимість поверх інших елементів */
    display: flex; /* Використовується для управління внутрішніми елементами */
    flex-direction: column; /* Розташовує всі елементи вертикально */
    align-items: center; /* Центрує іконки по горизонталі */
    gap: 25px !important; /* Примусово збільшує відступи між іконками */
}

/* Стилі для посилань */
.fixed-window .link {
    text-align: center; /* Центрує вміст (іконки) всередині посилань */
}

/* Стилі для іконок */
.fixed-window .link img {
    width: 50px; /* Ширина іконки */
    height: 50px; /* Висота іконки */
    border: 2px solid #fff; /* Білий обвід */
    border-radius: 50%; /* Круглі іконки */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Тінь для іконок */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавний перехід при зміні розміру і тіні */
}

/* Ефект при наведенні */
.fixed-window .link img:hover {
    transform: scale(1.2) rotate(10deg); /* Збільшення іконки та легкий поворот */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Посилення тіні при наведенні */
    filter: brightness(1.3); /* Збільшення яскравості */
}