* {					  /* Сброс всех отступов и паддингов, чтобы избежать проблем с различиями в браузерах */
	margin: 0;
	padding: 0;
	box-sizing: border-box; 		  /* Убираем влияние margin и padding на размер элемента */
}

html, body {				  /* Общие стили для html и body */
	height: 100%;                         /* Устанавливаем 100% высоты для body и html */
	width: 100%;                          /* Устанавливаем 100% ширины для body и html */
	font-family: Arial, sans-serif;       /* Основной шрифт на странице */
	display: flex;                        /* Используем flexbox для основного контейнера */
	flex-direction: column;               /* Элементы внутри будут расположены по вертикали */
	justify-content: flex-start;          /* Все элементы выравниваются по верхнему краю */
	align-items: stretch;                 /* Элементы растягиваются по ширине */
	overflow-x: hidden;                   /* Отключаем горизонтальную прокрутку */
}

body::-webkit-scrollbar {		  /* Стили для прокрутки */
	width: 8px;                           /* Устанавливаем ширину полосы прокрутки */
}

body::-webkit-scrollbar-track {
	background-color: #f1f1f1;            /* Цвет фона полосы прокрутки */
}

body::-webkit-scrollbar-thumb {
	background-color: #888;               /* Цвет самой полосы прокрутки */
}

body::-webkit-scrollbar-thumb:hover {
	background-color: #555;               /* Цвет полосы прокрутки при наведении */
}

h1, h2, h3, h4, h5, h6 {		  /* Стиль для всех заголовков (h1, h2, h3, и т.д.) */
	font-weight: normal;                  /* Убираем жирный шрифт по умолчанию */
	margin: 1rem 0;                       /* Отступы сверху и снизу для заголовков */
}

p {					  /* Оформление для абзацев */
	line-height: 1.6;                     /* Высота строки для лучшего восприятия текста */
	margin-bottom: 1rem;                  /* Отступ снизу для абзацев */
}

a {					  /* Оформление ссылок на странице */
	color: inherit;                       /* Ссылки наследуют цвет от родительского элемента */
	text-decoration: none;                /* Убираем подчеркивание по умолчанию */
}

a:hover {
	color: #007bff;                       /* Цвет при наведении на ссылку */
	text-decoration: underline;           /* Подчеркивание при наведении */
}

a:active, a:visited {
	color: #f47059;                       /* Цвет активных и посещенных ссылок */
}

button {				  /* Стили для кнопок */
	background-color: #007bff;            /* Цвет фона кнопки */
	color: #fff;                          /* Цвет текста кнопки */
	border: none;                         /* Убираем рамку */
	padding: 10px 20px;                   /* Отступы внутри кнопки */
	border-radius: 5px;                   /* Закругленные углы кнопки */
	cursor: pointer;                      /* Указатель при наведении */
}

button:hover {
	background-color: #f0f0f0;            /* Цвет кнопки при наведении (светло-серый) */
}

img {					  /* Оформление для изображений */
	max-width: 100%;                      /* Ограничиваем ширину изображений */
	height: auto;                         /* Автоматическая высота изображений */
}

.container {				  /* Универсальные стили для контейнеров */
	width: 100%;                          /* Ширина контейнера 100% */
	max-width: 1200px;                    /* Максимальная ширина контейнера */
	margin: 0 auto;                       /* Центрирование контейнера по горизонтали */
	padding: 20px;                        /* Отступы внутри контейнера */
}

ul, ol {				  /* Стили для списков */
	list-style: none;                     /* Убираем маркеры и нумерацию у списков */
	padding-left: 0;                      /* Убираем отступ слева */
}

li {
	margin-bottom: 10px;                  /* Отступ между элементами списка */
}

input, textarea, select, button {	  /* Стили для полей ввода и текстовых областей */
	font-size: 1rem;                      /* Размер шрифта в элементах формы */
	border-radius: 4px;                   /* Закругленные углы */
	border: 1px solid #ccc;               /* Легкая рамка */
	padding: 10px;                        /* Отступы внутри полей ввода */
	margin-bottom: 10px;                  /* Отступ снизу */
}

input:focus, textarea:focus, select:focus { /* Стили для фокуса на полях ввода */
	border-color: #007bff;                /* Изменение цвета бордера при фокусе */
	outline: none;                        /* Убираем обводку вокруг поля */
}
