:root {
  --bg-dark: hsl(0 0% 0); /* Темный фон */
  --bg: hsl(0 0% 6); /* Фон */
  --bg-light: hsl(0 0% 10); /* Светлый фон */
  --text: hsl(0 0% 95); /* Цвет текста */
  --text-muted: hsl(0 0% 85); /* Вторичный цвет текста */
  --primary: hsl(280, 100%, 75%); /* Основной цвет */
}

* {
  margin: 0; /* Убираем внешние отступы у всех элементов */
  padding: 0; /* Убираем внутренние отступы у всех элементов */
}

html {
  font-size: 12pt; /* Размер шрифта для HTML */
  font-family: monospace, Tahoma, sans-serif; /* Шрифты для HTML */
}

body {
  background-color: var(--bg-dark); /* Цвет фона для body */
  scroll-behavior: smooth; /* Плавный скроллинг */
}

nav {
  height: 60px; /* Высота навигационной панели */
  background-color: var(--bg); /* Цвет фона навигационной панели */
  display: flex; /* Используем флексбокс для упорядочивания элементов */
  justify-content: flex-end; /* Выравнивание элементов по правому краю */
  align-items: center; /* Вертикальное выравнивание элементов по центру */
}

.links-container {
  height: 100%; /* Высота контейнера ссылок */
  width: 100%; /* Ширина контейнера ссылок */
  display: flex; /* Используем флексбокс для расположения ссылок */
  flex-direction: row; /* Расположение ссылок в строку */
  align-items: center; /* Вертикальное выравнивание ссылок по центру */
}

nav a {
  height: 100%; /* Высота ссылки */
  padding: 0 20px; /* Внутренние отступы для ссылки */
  display: flex; /* Используем флексбокс для ссылки */
  align-items: center; /* Вертикальное выравнивание текста ссылки по центру */
  text-decoration: none; /* Убираем подчеркивание текста ссылки */
  color: var(--text); /* Цвет текста ссылки */
}

nav a:hover {
  background-color: var(--bg-light); /* Цвет фона ссылки при наведении */
}

nav .logo {
  margin-right: auto; /* Автоматические отступы справа для логотипа, чтобы сдвинуть его влево */
  font-weight: bold; /* Жирный шрифт для логотипа */
  font-size: 1.5rem; /* Размер шрифта чуть больше для выделения */
  color: var(--primary); /* Яркий цвет для логотипа */
}

nav .logo:hover {
  background-color: var(--bg); /* Цвет фона логотипа при наведении */
}

nav .sidebar-header {
  margin-right: auto; /* Автоматические отступы справа для заголовка боковой панели */
}

nav svg {
  fill: var(--text); /* Цвет для иконок в SVG */
}

#sidebar-active {
  display: none; /* Скрываем чекбокс для боковой панели */
}

.open-sidebar-button, .close-sidebar-button {
  display: none; /* Скрываем кнопки открытия/закрытия боковой панели */
}

#about {
  margin: 48px auto; /* Отступ сверху и снизу, авто по бокам для центрирования */
  padding: 24px; /* Внутренние отступы */
  width: 280px; /* Ширина блока о нас */
  height: 170px; /* Высота блока о нас */
  background-color: var(--bg); /* Цвет фона блока о нас */
  border-radius: 12px; /* Скругление углов блока */
  display: grid; /* Устанавливаем сеточный дисплей */
  grid-template-columns: 1fr; /* Одна колонка для сетки */
  justify-content: center; /* Центрируем содержимое по горизонтали */
  align-items: center; /* Центрируем содержимое по вертикали */
  position: relative; /* Относительное позиционирование для дочерних элементов */
}

@property --angle { /* Определение пользовательского свойства для угла */
  syntax: "<angle>";
  initial-value: 0deg; /* Начальное значение угла */
  inherits: false; /* Не наследуется */
}

#about::after, #about::before {
  content: ''; /* Псевдоэлементы без содержимого */
  position: absolute; /* Абсолютное позиционирование псевдоэлементов */
  height: 100%; /* Высота 100% относительно родителя */
  width: 100%; /* Ширина 100% относительно родителя */
  background-image: conic-gradient(from var(--angle), transparent 55%, var(--primary), hsl(from var(--primary) h s calc(l + 15))); /* Конический градиент для фона */
  top: 50%; /* Центрируем сверху */
  left: 50%; /* Центрируем слева */
  translate: -50% -50%; /* Центрируем элементы */
  z-index: -1; /* Уровень наложения для фона */
  padding: 5px; /* Внутренние отступы */
  border-radius: 15px; /* Скругление углов */
  animation: 3s spin linear infinite; /* Анимация вращения */
}

#about::before {
  filter: blur(1.5rem); /* Размытие фона */
  opacity: 0.7; /* Прозрачность фона */
}

@keyframes spin { /* Определение анимации вращения */
  from {
    --angle: 0deg; /* Начальный угол */
  }
  to{
    --angle: 360deg; /* Конечный угол */
  }
}

#about h2 {
  color: var(--primary); /* Цвет заголовка */
  text-align: center; /* Выравнивание текста по центру */
  font-size: 2em; /* Размер шрифта заголовка */
}

#about p {
  text-align: center; /* Выравнивание текста по центру */
  color: var(--text-muted); /* Цвет текста параграфа */
  font-size: 1.4em; /* Размер шрифта параграфа */
  margin: 0 12px; /* Отступы по бокам */
}

#about span {
  color: var(--text-muted); /* Цвет для текста в спане */
  font-weight: bold; /* Жирный текст для спана */
}

#about span::after {
  content: 'Сайты'; /* Контент для спана по умолчанию */
  animation: words 8s infinite; /* Анимация для смены контента */
}

@keyframes words { /* Анимация смены слов */
  0%, 33%{
    content: 'сайты'; /* Первое слово */
    color: var(--primary); /* Цвет первого слова */
  }
  34%, 66%{
    content: 'игры'; /* Второе слово */
    color: hsl(290, 100%, 45%); /* Цвет второго слова */
  }
  67%, 100%{
    content: 'приложения'; /* Третье слово */
    color: hsl(300, 100%, 65%); /* Цвет третьего слова */
  }
}

@media(max-width: 768px){ /* Медиа-запрос для экранов шириной до 768 пикселей */
  nav {
    background-color: transparent; /* Прозрачный фон для Navbar в мобильном виде */
  }
  .links-container {
    flex-direction: column; /* Расположение ссылок в колонку */
    align-items: flex-start; /* Выравнивание ссылок по левому краю */

    position: fixed; /* Фиксируем контейнер ссылок на экране */
    top: 0; /* Положение сверху */
    right: -100%; /* Скрываем контейнер за границей экрана справа */
    z-index: 10; /* Уровень наложения элементов */
    width: 65vw; /* Ширина боковой панели 65% от ширины окна */
    
    background-color: var(--bg); /* Цвет фона боковой панели */
    transition: 0.3s ease-out; /* Плавный переход при открытии/закрытии */
    box-shadow: 5px 0 48px var(--primary);
  }
  
  .sidebar-header {
    display: flex; /* Используем флексбокс для заголовка боковой панели */
    justify-content: center; /* Центрируем заголовок */
    align-items: center; /* Вертикальное выравнивание заголовка */
    width: 100%; /* Ширина заголовка 100% */
    box-sizing: border-box; /* Учитываем отступы и рамки в ширину */
    padding: 0 30px; /* Внутренние отступы для заголовка */
    order: 0; /* Порядок отображения заголовка */
    position: relative; /* Позиционирование заголовка относительно родителя */
  }

  nav a {
    box-sizing: border-box; /* Учитываем отступы и рамки в ширину ссылок */
    height: auto; /* Высота ссылки автоматически */
    width: 100%; /* Ширина ссылки 100% */
    padding: 20px 30px; /* Внутренние отступы для ссылки */
    justify-content: flex-start; /* Выравнивание текста ссылки по левому краю */
  }
  
  .open-sidebar-button{
    padding: 20px; /* Внутренние отступы для кнопки открытия боковой панели */
    display: block; /* Отображаем кнопку открытия боковой панели */
  }
  
  .close-sidebar-button {
    position: absolute; /* Абсолютное позиционирование кнопки закрытия */
    left: -20px; /* Положение слева */
    top: 50%; /* Положение по центру по вертикали */
    transform: translateY(-50%); /* Центрируем кнопку по вертикали */
    
    padding: 20px 30px; /* Внутренние отступы для кнопки закрытия */
    display: block; /* Отображаем кнопку закрытия боковой панели */
    order: 0; /* Порядок отображения кнопки */
  }

  nav .logo {
    font-size: 1rem; /* Обычный размер шрифта для логотипа */
    order: 1; /* Порядок отображения логотипа */
    margin: 0; /* Убираем отступы у логотипа */
    justify-content: center; /* Центрируем логотип */
    height: auto; /* Высота логотипа автоматически */
    width: auto; /* Ширина логотипа автоматически */
    display: flex; /* Используем флексбокс для логотипа */
  }

  nav a:not(.logo) {
    order: 2; /* Порядок отображения ссылок, не являющихся логотипом */
  }
  
  #sidebar-active:checked ~ .links-container {
    right: 0; /* Показываем контейнер ссылок при активации чекбокса */
  }
  
  #sidebar-active:checked ~ #overlay {
    height: 100%; /* Высота оверлея при активации чекбокса */
    width: 100%; /* Ширина оверлея 100% */
    position: fixed; /* Фиксируем оверлей на экране */
    top: 0; /* Положение сверху */
    left: 0; /* Положение слева */
    z-index: 9; /* Уровень наложения для оверлея */
  }
}