@font-face {
	font-family: 'PalatinoLinotype-Roman';
	src: url('fonts/PalatinoLinotype-Roman.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

html, body {
	margin: 0;
    padding: 0;
	height: 100%;
	
    background-color: #000000; /* Устанавливаем цвет фона тела документа в черный */
    color: #fff; /* Устанавливаем цвет текста в белый для контраста */
	font-size: 24px; /* Размер шрифта 16 пикселей */
	font-family: "PalatinoLinotype-Roman";
}
.header {
	border: 0px solid #f1f1f1; /* Устанавливаем границу в 1 пиксель */
	width: 100%;
	height: 50px;
}

#name {
	float: left; /* float: left; */
	margin: 10px 0 0 20px; /* Отступы наружи блока */
	padding: 0; /* Отступы внутри блока */
}

#login {
	float: right; 
	margin: 10px 20px 0 0; /* Отступы наружи блока */
	padding: 0; /* Отступы внутри блока */
}

.container {
	border: 0px solid #f1f1f1; /* Устанавливаем границу в 1 пиксель */
	width: 1200px;
	text-align: center;
	margin-left: auto;
  	margin-right: auto;	
}

.sidebar {
	border: 0px solid #f1f1f1; /* Устанавливаем границу в 1 пиксель */
	margin: 0; /* Отступы наружи блока */
	padding: 20px; /* Отступы внутри блока */
	width: 100%;
	font-size: 24px; /* Размер шрифта 16 пикселей */
	
}

h1 {
	font-size: 24px; /* Размер шрифта 16 пикселей */
	margin: 0; /* Отступы наружи блока */
	padding: 0; /* Отступы внутри блока */
}

h2 {
	border: 1px solid #f1f1f1; /* Устанавливаем границу в 1 пиксель */
	font-size: 40px; /* Размер шрифта 16 пикселей */
	margin: 0 0 10px 0; /* Отступы наружи блока */
	padding: 10px 0; /* Отступы внутри блока */
}

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 пиксель */
	float: left; /* float: left; */
 	margin: 10px; /* Отступы наружи блока */
	padding: 10px; /* Отступы внутри блока */
	font-size: 16px; /* Размер шрифта */
	font-weight: bold; /* Делает текст жирным */
	font-style: italic; /* Делает текст курсивом */
	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: 599px) {
	
.container {
	width: 100%;
	text-align: center;
	border: 0px;
	margin-left: auto;
  	margin-right: auto;
}
	
.header {
	border: 0px solid #f1f1f1; /* Устанавливаем границу в 1 пиксель */
	width: 100%;	
}	

.sidebar {
	border: 0px solid #f1f1f1; /* Устанавливаем границу в 1 пиксель */
	width: 80%;
	text-align: center;
	margin-left: auto;
  	margin-right: auto;	
	
	font-size: 18px; /* Размер шрифта 16 пикселей */
/* 	margin: 0; Отступы наружи блока */
	padding: 10px; /* Отступы внутри блока */
	
}
	
p {	
	border: 1px solid #f1f1f1; /* Устанавливаем границу в 1 пиксель */
	float: left; /* float: left; */
 	margin: 10px; /* Отступы наружи блока */
	padding: 10px; /* Отступы внутри блока */
	font-size: 14px; /* Размер шрифта */
	font-weight: bold; /* Делает текст жирным */
	font-style: italic; /* Делает текст курсивом */
	color: #f1f1f1; /* Цвет текста #f1f1f1 */
}	
	
	

}