:root {
    /* ФОНОВЫЕ ЦВЕТА (Бэкграунд) */
    --kg-bg-main: #1f1f28; /* Главный глубокий темный фон сайта (mSurface) */
    --kg-bg-side: #2a2a37; /* Панели: фон для хедера, футера и карточек (mSurfaceVariant) */

    /* ТЕКСТ (Буквы) */
    --kg-tx-main: #c8c093; /* Основной мягкий текст цвета пергамента (mOnSurface) */
    --kg-tx-mute: #717c7c; /* Второстепенный серо-зеленый текст (mOnSurfaceVariant) */

    /* ЗАГОЛОВКИ */
    --kg-hd-main: #76946a; /* Главные заголовки h1, h2 (Фирменный зеленый mPrimary) */

    /* ИНТЕРАКТИВ (Ссылки и кнопки) */
    --kg-lnk-main: #7e9cd8; /* Ссылки и кнопки по умолчанию (Приглушенный синий mTertiary) */
    --kg-lnk-hovr: #c0a36e; /* Цвет при наведении мыши (Песочно-желтый mSecondary) */

    /* ГРАНИЦЫ И ЛИНИИ */
    --kg-bd-line: #363646; /* Строгие рамки и разделители (mOutline) */
}

body {
    background-color: var(
        --kg-bg-main
    ); /* Весь сайт теперь светлый, цвета старого пергамента */
    color: var(--kg-tx-main); /* Текст глубокий темный, отлично читается */
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: var(--kg-bg-side); /* Выделяющийся серо-зеленый хедер */
    border-bottom: 2px solid var(--kg-bd-line);
    padding: 20px;
}

h1 {
    color: var(--kg-hd-main); /* Фирменный зеленый заголовок */
    font-family: 'JetBrains Mono', monospace;
    font-size: 3rem;
}

/* 1. Выстраиваем логотип и все меню в одну линию */
header {
    display: flex;
    align-items: center; /* Выравнивает логотип и текст по центру вертикали */
    justify-content: space-between; /* Толкает логотип влево, а меню — в самый правый край */
    padding: 15px 30px; /* Внутренние отступы шапки, чтобы код не прилипал к краям */
    background-color: var(
        --kg-bg-side,
        var(--gb-bg-side)
    ); /* Цвет фона шапки */
}

/* 2. Выстраиваем пункты списка (Home, About, Contact) в ряд */
header nav ul {
    display: flex;
    gap: 25px; /* Расстояние между ссылками в пикселях */
    list-style: none; /* Полностью убирает маркеры-точки у списка */
    margin: 0;
    padding: 0;
}

/* 3. Стили для самих ссылок, чтобы они подхватили цвета вашей темы */
header nav ul li a {
    color: var(--kg-tx-main, var(--gb-tx-main));
    text-decoration: none; /* Убирает стандартное синее подчеркивание */
    font-weight: 500;
    transition: color 0.2s ease;
}

/* Эффект при наведении мышки на ссылку */
header nav ul li a:hover {
    color: var(--kg-lnk-main, var(--gb-lnk-main));
}

main {
  max-width: 900px;           /* Максимальная ширина текстовой зоны */
  margin: 0 auto;             /* Центрирует блок по горизонтали */
  padding: 40px 20px;         /* Отступы: 40px сверху/снизу, 20px по бокам */
}

/* Красивая подложка для контента (используем цвета из вашей темы) */
.content-sheet {
  background-color: var(--kg-bg-side, var(--gb-bg-side)); /* Мягкий фон панелей */
  border: 1px solid var(--kg-bd-line, var(--gb-bd-line)); /* Тонкая строгая рамка */
  border-radius: 8px;         /* Слегка скругляем углы */
  padding: 40px;              /* Большие внутренние отступы, чтобы текст «дышал» */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Легкая глубокая тень */
}

/* Стили для главного заголовка */
.content-sheet h1 {
  color: var(--kg-hd-main, var(--gb-hd-main));
  font-size: 2.2rem;
  margin-bottom: 25px;        /* Отступ снизу от заголовка */
}

/* Стили для подзаголовков внутри статьи */
.content-sheet h2, .content-sheet h3 {
  color: var(--kg-hd-main, var(--gb-hd-main));
  font-size: 1.4rem;
  margin-top: 35px;           /* Отступ сверху, чтобы отделить от предыдущего абзаца */
  margin-bottom: 15px;        /* Отступ снизу до текста */
}

/* Стили для обычных абзацев текста */
.content-sheet p {
  margin-bottom: 20px;        /* Отступ между абзацами */
  font-size: 1.05rem;         /* Чуть-чуть увеличиваем размер для шрифта Inter */
  line-height: 1.7;           /* Увеличиваем расстояние между строками для читаемости */
}

/* Стили для списков (ваши пункты про Scratch, Pygame и т.д.) */
.content-sheet ul {
  margin-left: 20px;          /* Отступ слева для всего списка */
  margin-bottom: 25px;
}

.content-sheet li {
  margin-bottom: 12px;        /* Расстояние между пунктами списка */
  line-height: 1.6;
}

@media (max-width: 650px) {
  
  /* 1. В шапке меняем направление с горизонтального на вертикальное */
  header {
    flex-direction: column; 
    gap: 15px;             /* Расстояние между логотипом и списком */
    padding: 15px 10px;    /* Уменьшаем боковые отступы на смартфонах */
    text-align: center;
  }

  /* 2. Делаем пункты списка покрупнее, чтобы по ним было удобно тапать пальцем */
  header nav ul {
    gap: 20px;             /* Расстояние между кнопками меню на телефоне */
  }
  
  header nav ul li a {
    font-size: 1.1rem;     /* Немного увеличиваем размер шрифта для пальцев */
  }

  main {
  max-width: 900px;           /* Максимальная ширина текстовой зоны */
  margin: 0 auto;             /* Центрирует блок по горизонтали */
  padding: 40px 20px;         /* Отступы: 40px сверху/снизу, 20px по бокам */
}

/* Красивая подложка для контента (используем цвета из вашей темы) */
.content-sheet {
  background-color: var(--kg-bg-side, var(--gb-bg-side)); /* Мягкий фон панелей */
  border: 1px solid var(--kg-bd-line, var(--gb-bd-line)); /* Тонкая строгая рамка */
  border-radius: 8px;         /* Слегка скругляем углы */
  padding: 40px;              /* Большие внутренние отступы, чтобы текст «дышал» */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Легкая глубокая тень */
}

/* Стили для главного заголовка */
.content-sheet h1 {
  color: var(--kg-hd-main, var(--gb-hd-main));
  font-size: 1.7rem;
  margin-bottom: 25px;        /* Отступ снизу от заголовка */
}

/* Стили для подзаголовков внутри статьи */
.content-sheet h2, .content-sheet h3 {
  color: var(--kg-hd-main, var(--gb-hd-main));
  font-size: 1.2rem;
  margin-top: 35px;           /* Отступ сверху, чтобы отделить от предыдущего абзаца */
  margin-bottom: 15px;        /* Отступ снизу до текста */
}

/* Стили для обычных абзацев текста */
.content-sheet p {
  margin-bottom: 20px;        /* Отступ между абзацами */
  font-size: 1.05rem;         /* Чуть-чуть увеличиваем размер для шрифта Inter */
  line-height: 1.7;           /* Увеличиваем расстояние между строками для читаемости */
}

/* Стили для списков (ваши пункты про Scratch, Pygame и т.д.) */
.content-sheet ul {
  margin-left: 20px;          /* Отступ слева для всего списка */
  margin-bottom: 25px;
}

.content-sheet li {
  margin-bottom: 12px;        /* Расстояние между пунктами списка */
  line-height: 1.6;
}

}