html, body {
	margin: 0;
    padding: 0;
	height: 100%;
	
	font-family: Verdana, Geneva, sans-serif;    
    background-color: #000000; /* Устанавливаем цвет фона тела документа в черный */
    color: #fff; /* Устанавливаем цвет текста в белый для контраста */
	font-size: 24px; /* Размер шрифта 16 пикселей */
}

.image-karatay {
	border: 0px solid white; /* Граница толщиной 2 пикселя, черного цвета */
    display: flex; /* Использование flexbox для выравнивания по вертикали */
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
	
    background-image: url('bigKaratay-pro649-531.png');
    width: 649px; /* Ширина контейнера */
    height: 531px; /* Высота контейнера */
	
	-webkit-transition: all 0.3s ease; /* Для Safari и Chrome */
 	 -moz-transition: all 0.3s ease; /* Для Firefox */
 	 -ms-transition: all 0.3s ease; /* Для IE 9 */
 	 -o-transition: all 0.3s ease; /* Для Opera */
 	 transition: all 0.3s ease;
}

.image-karatay:hover {
  	-webkit-transform: scale(0.5); /* Для Safari и Chrome */
 	 -moz-transform: scale(0.5); /* Для Firefox */
 	 -ms-transform: scale(0.5); /* Для IE 9 */
 	 -o-transform: scale(0.5); /* Для Opera */
	  transform: scale(0.5);
}

a, a:link, a:visited, a:active {
    color: #fff; /* Вы можете заменить 'blue' на любой желаемый цвет */
    text-decoration: none; /* Убирает подчеркивание у ссылок */
}

a:hover {
    color: #fff; /* Вы можете заменить 'blue' на любой желаемый цвет */
    text-decoration: none; /* Убирает подчеркивание у ссылок */
}

p {	
	border: 1px solid #f1f1f1; /* Устанавливаем границу в 1 пиксель */
	width: 300px; /* Ширина контейнера */
	margin: 5px 0 0 0; /* Отступы наружи блока */
	padding: 10px; /* Отступы внутри блока */
	font-size: 22px; /* Размер шрифта */
	font-weight: bold; /* Делает текст жирным */
	font-style: italic; /* Делает текст курсивом */
	font-family: Palatino, Verdana, Montserrat, Arial, sans-serif; /* Определяем шрифты */
	color: #f1f1f1; /* Цвет текста #f1f1f1 */
}

p:hover {
	transform: translateY(-5px); /* Поднимает блок при наведении */
  	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Усиливает тень при наведении */	
}

@media only screen and (max-width: 768px) {
	
	.image-karatay {
		border: 0px solid white; /* Граница толщиной 2 пикселя, черного цвета */
   		display: flex; /* Использование flexbox для выравнивания по вертикали */
  	  justify-content: center; /* Центрирование по горизонтали */
  	  align-items: center; /* Центрирование по вертикали */
		
 	   background-image: url('Karataypro250x250.png');
 	   width: 250px; /* Ширина контейнера */
 	   height: 250px; /* Высота контейнера */
	}
	
	p {
		border: 1px solid #f1f1f1; /* Устанавливаем границу в 1 пиксель */
		margin: 5px 0 0 0; /* Отступы наружи блока */
		padding: 10px; /* Отступы внутри блока */
		font-size: 22px; /* Размер шрифта */
		font-weight: bold; /* Делает текст жирным */
		font-style: italic; /* Делает текст курсивом */
		font-family: Palatino, Verdana, Montserrat, Arial, sans-serif; /* Определяем шрифты */
		color: #f1f1f1; /* Цвет текста #f1f1f1 */
	}

}