/* CSS Styles Table ; 2025 debend.website.yandexcloud.net */

/*	универсальный сброс стилей
	универсальный селектор * задает базовые стили для всего сайта.
	Сбрасывает все внешние отступы у элементов
	Обнуляет внутренние отступы
	Изменяет модель расчёта размеров элементов
	Особенно критично для адаптивной вёрстки */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*	После сброса возвращаем абзацы */

p, h1, h2, h3, h4, h5, h6 {
    margin-top: 1em;
    margin-bottom: 1em;
}


img {
  max-width: 100%;
  height: auto;
  display: block; /* убирает лишние пробелы под изображением */
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1.2rem;
    font-weight: 700;
    color: #2c3e50;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #2c3e50;
}

h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: 500;
    color: #2c3e50;
}

h4 {
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
    font-weight: 500;
    color: #333;
}

h5 {
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
    font-weight: 400;
    color: #555;
}

h6 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
    color: #666;
}


/*	Типографика становится единообразной на всей странице
	Внешний вид страницы становится современным и профессиональным
	Важно помнить: Эти стили наследуются всеми текстовыми элементами */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

/*	создает адаптивный контейнер
	На маленьких экранах сайт будет занимать 90% ширины
	На больших экранах ширина не превысит 1200px
	Адаптивность: контейнер подстраивается под размер экрана
	Центрирование: контент всегда находится по центру
	Защитное пространство: внутренние отступы предотвращают “прилипание” контента к краям
	Универсальность: подходит для большинства устройств */

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/*	Устанавливает темно-синий цвет фона для заголовка
	Цвет текста белый
	стиль создает Контрастную шапку сайта */

.header {
    background-color: #2c3e50;
    color: white;
    padding: 1rem 0;
}

/*	Делает текст H1 / логотипа - крупнее, чем основной текст */

.logo {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: white;
}

/*	list-style: none
		Убирает стандартные маркеры списка
		Делает навигацию более чистой и современной
	display: flex
		Располагает элементы списка в ряд
		Обеспечивает гибкое выравнивание
		Позволяет легко управлять распределением пространства
	gap: 1.5rem
		Создает равномерное расстояние между элементами меню
		Обеспечивает читаемость и удобство использования */

.nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

/*	Устанавливает белый цвет текста ссылок
		Обеспечивает контрастность на темном фоне
	text-decoration: none
		Убирает подчеркивание ссылок
		Создает более современный вид
	font-weight: 500
		Делает текст ссылок более выразительным
		Придает им визуальный вес
	transition: color 0.3s
		Добавляет плавную анимацию при изменении цвета */

.nav a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav a:hover {
    color: #3498db;
}

/*	Визуальный эффект, Эти стили создают:
		Контрастную секцию на странице
		Центрированный контент с хорошим отступом
		Выделенный блок для важной информации
		Единое оформление для всех элементов внутри секции */

.hero {
    background-color: #3498db;
    color: white;
    text-align: left;
    padding: 4rem 0;
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

/*	Чистый белый контейнер для основного контента
	Достаточное пространство вокруг контента
	Контраст с общим фоном страницы
	Профессиональное оформление основного содержимого */

.content {
    padding: 3rem 0;
    background-color: white;
}

.content h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}


/* Adaptive section 
	В медиа-запросе для экранов меньше 768px:
		Список меню становится вертикальным
		Отступы уменьшаются до 1rem
		Меню адаптируется под мобильные устройства */

@media (max-width: 768px) {
    .nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    .hero h2 {
        font-size: 2rem;
    }

    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    h3 {
        font-size: 1.6rem;
    }
    h4 {
        font-size: 1.4rem;
    }
    h5 {
        font-size: 1.2rem;
    }
    h6 {
        font-size: 1.0rem;
    }

/*	вписываем размер картинок для мобильных */
    img {
        max-width: 100%;
        height: auto;
    }
}