/* Основни стилове */
body {
    margin: 0;
    font-family: 'PT Serif', serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('../images/14.webp') no-repeat center center;
    background-size: cover; /* Покриване на целия екран */
}


.book {
    position: relative;
    width: 700px;
    height: 500px;
    perspective: 2000px; /* Задаване на перспектива за 3D ефект */
}

.page {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/old_paper_texture.jpg') center/cover no-repeat;
    border-radius: 5px;
    transform-origin: left; /* Завъртане от лявата страна */
    transition: transform 1.2s ease, opacity 1.2s ease, box-shadow 1.2s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Начална страница */
.page1 {
    z-index: 2;
    transform: rotateY(0deg);
}

/* Втора страница */
.page2 {
    z-index: 1;
    transform: rotateY(-180deg);
    opacity: 0;
}

/* Скрита страница */
.page.hidden {
    opacity: 0;
/*    pointer-events: none; */
    transform: rotateY(-180deg);
}

/* Отворена страница */
.page.open {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    transform: rotateY(0deg);
    opacity: 1;
}

/* Анимация на огъване */
@keyframes pageBend {
    0% {
        transform: rotateY(0deg) translateX(0);
    }
    50% {
        transform: rotateY(-90deg) translateX(5px);
    }
    100% {
        transform: rotateY(-180deg) translateX(0);
    }
}

.content {
    padding: 20px;
    color: #333;
    line-height: 1.6;
}


                                      /* Header */
header {
    background-color: rgba(255, 255, 255, 0.5); /* Полупрозрачен фон */
    backdrop-filter: blur(10px); /* Замъгляване */
    color: #fff;
    text-align: center;
    padding: 20px;
    position: fixed; /* Фиксиране на хедера */
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.3s ease-in-out; /* Гладък ефект при скриване */
}
header.hidden {
    transform: translateY(-100%); /* Премества хедера извън видимостта */
}

header h1 {
    margin: 0;
    font-size: 2em;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.cta-button {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #555;
}

.main-header {
    background-color: rgba(255, 255, 255, 0.5); /* Полупрозрачен фон */
    backdrop-filter: blur(10px); /* Замъгляване */
    color: #fff;
    text-align: center;
    padding: 2px;
    position: fixed; /* Фиксиране на хедера */
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.3s ease-in-out; /* Гладък ефект при скриване */
}

.main-header.hidden {
    transform: translateY(-100%); /* Премества хедера извън видимостта */
}    


                                    /* Основен стил за скролиране */
/* Основен стил за скролиране */
.content.scrollable {
    max-height: calc(100vh - 120px); /* Ограничена височина с изключване на header/footer */
    overflow-y: auto; /* Скролиране само по вертикала */
    padding: 20px;
    box-sizing: border-box;
}

/* Стилизация на скрол лентата за WebKit браузъри (Chrome, Edge, Safari) */
.content.scrollable::-webkit-scrollbar {
    width: 10px; /* Широчина на скрол лентата */
    background: transparent; /* Прозрачен фон на скрол лентата */
}

.content.scrollable::-webkit-scrollbar-thumb {
    background: #5c3a1e; /* Основен цвят на скрол бутона */
    border-radius: 5px; /* Заоблени ъгли */
    border: 2px solid transparent; /* Без контрастна рамка */
}

.content.scrollable::-webkit-scrollbar-thumb:hover {
    background: #3a2714; /* По-тъмен цвят при задържане */
}

/* Стилизация за скрол лентата в Firefox */
.content.scrollable {
    scrollbar-width: thin; /* Тънка лента */
    scrollbar-color: #5c3a1e transparent; /* Прозрачен фон с цвят на скрол бутона */
}