body, html {
   /* */
    margin: 5px;
    padding: 5px;   
    background-color: #f5f5f5; /* #faf8e7;  Зміна кольору фону */
    font-family: 'Open Sans', sans-serif; /* Встановлюємо шрифт Open Sans */

}
@font-face { font-family: 'AnastasiaScript'; src: url('https://app.lutskrada.gov.ua/provided02/AnastasiaScript.woff') format('woff'), url('https://app.lutskrada.gov.ua/provided02/AnastasiaScript.ttf') format('truetype'); font-weight: normal; font-style: normal; }

.handwritten-text {
	padding: 10px;
   /*  font-family: 'Pacifico', cursive; */
	font-family: 'AnastasiaScript', cursive; 
	text-align: justify;
	font-size: 30px;
	color: #373633;
	background: #f9fdff;
}
.handwritten-text p {
    text-indent: 25px; /* Відступ першого рядка абзацу */
    margin-bottom: -5px; /* Відступ між абзацами */
}

.handwritten-text .signature { text-align: right; /* Вирівнювання тексту праворуч для підпису */ margin-top: 30px; /* Додатковий відступ зверху для підпису */ text-indent: 0; /* Відмінити відступ для підпису */ }

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh; Висота viewport */
    text-align: center;
}
.image-container {
   /* width: 100%; 
    height: 100%; 
    display: flex;
    justify-content: center;*/
    padding-top: 10px; /* Відступ зверху для компенсації навігаційного меню */
}
.image-container img {
    max-width: 100%;
  /*  max-height: 100%;
    object-fit: contain;  Зберігає пропорції зображення */
	padding: 3px;
/*	filter: blur(6px);  /* Розмитя зображення */
}
.to-top {
    position: fixed;
    top: 2%; /* Встановлюємо позицію зверху */
    left: 68%; /* Встановлюємо позицію зліва */
    right: auto; /* Вимикаємо праву позицію */
    bottom: auto; /* Вимикаємо нижню позицію */
    display: none;
    background-color: #ff0000; /* Червоний колір */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    z-index: 1000;
    transition: background-color 0.3s ease-in-out;
}
.to-top:hover {
    background-color: #0000ff; /* Синій колір при наведенні */
}
/* Зміна кольору тексту при наведенні */ 
/* Зміна кольору на червоний при наведенні 
.war_item:hover .war_num { 
		color: #ff0000;  
	} 
	
/* Зміна кольору на червоний при наведенні  	
.war_item:hover .war_desc { 
	color: #0000ff; 
	} 
	*/
	
.war_item:hover { 
	transform: translateY(-10px); /* Припіднімаємо елемент */ 
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Додаємо тінь */	
}
.war_title {
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    color: #4d4c48;
	display: flex;
	justify-content: center;
	text-align: left;
}
.war_block {
    display: flex;
    overflow-x: auto;
    padding: 10px;
	max-width: 100%;
	background-color: #f5f5f5; 
}

.war_block::-webkit-scrollbar {
    height: 8px; /* Задаємо висоту скролу */
}

.war_block::-webkit-scrollbar-thumb {
    background-color: #888; /* Колір повзунка */
    border-radius: 10px; /* Заокруглення повзунка */
}

.war_block::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Колір повзунка при наведенні */
}

.war_item {
    width: 120px;
    height: 80px;    
	background-color: #f5f5f5; 
	font-family: 'Open Sans', sans-serif;
    flex: 0 0 auto;
    cursor: pointer; /* Додаємо курсор-pointer */
	border-top: none;
    border-left: none;
    border-bottom: none;
	z-index: 1;
	border-right: 1px solid;
   /* border-right-color: beige;*/
	color: #4d4c48; /* Встановлюємо колір тексту */ 
	display: flex; 
	flex-direction: column; 
	justify-content: space-between; /* Розподіляє простір між елементами */
}
.war_item img {
	align-self: center;
	max-width: 100%; 
	max-height: 100%; 
	border-radius: 10px; 
	object-fit: contain; /* Зберігає пропорції зображення */
	}
.war_num {
    font-weight: bold;
    display: flex;
    align-items: center;
	align-self: center; /* Вирівнює текст по центру */ 
	padding-top: 10px; /* Відступ від верху */
}

.war_num span {
    padding-left: 3px;
}

.war_desc {
	align-self: flex-end; /* Вирівнює текст зліва */ 
	padding-bottom: 1px; /* Відступ від низу */	
}

@media (max-width: 100px) {
    .war_item {
        min-width: 120px;
        height: 150px;
    }
}