/* --- Список цветов --- */

:root {
  
}


@media (prefers-color-scheme: light) {
    body{
        background-color: #ff4696;
    }
    div{
        color: #1E1033;
    }
}
@media (prefers-color-scheme: dark) {
    body{
        background-color: #1E1033;
    }
    div{
        color: #ff4696;
    }
}

/* --- Стили для Топбара (Topbar) --- */

body {
  margin: 0;
  font-family: sans-serif; /* Убедимся, что общий шрифт установлен */
}

.topbar {
  background-color: #322646; /* Темный фон для шапки */
  color: #ff4696;
  padding: 15px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed; /* <-- Ключевое изменение: фиксированное положение */
  top: 0; /* Прикрепляем к самому верху */
  left: 0;
  width: 100%; /* Занимает всю ширину */
  z-index: 1000; /* Убеждаемся, что он поверх всего */
}

.topbar .container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* Растягивает лого и навигацию по краям */
  align-items: center;
  padding: 0 20px;
}

.topbar .logo {
  font-size: 1.5em;
  font-weight: bold;
}

.topbar nav a {
  color: #ff4696;
  text-decoration: none;
  margin-left: 20px;
  padding: 5px 0;
  transition: color 0.3s;
}

.topbar nav a:hover {
  color: #8F2B65; /* Цвет при наведении (синий) */
}

/* --- Стили для основного контента, чтобы он не прятался за топбаром --- */
.content-area {
    padding: 20px;
    margin-top: 60px; /* <-- Ключевое изменение: Отступ сверху равен высоте топбара (примерно 15*2 + 30px отступы)* */
}

/* Убираем стили выравнивания из старого контейнера и используем main с классом content-area */
div[style*="text-align: center;"] {
  text-align: center;
}
/* ... existing code ... */