/* style.css */
:root {
  --background-color-light: #F0F4F8; /* Мягкий оттенок серо-голубого для светлой темы */
  --text-color-light: #333; /* Глубокий темно-серый для текста светлой темы */
  --background-color-dark: #333333; /* Темный фон для темной темы */
  --text-color-dark: #ffffff; /* Белый текст для темной темы */
  /* Оставляем ваши предыдущие переменные без изменений */
  --main-color: #333; /* Насыщенный оттенок синего */
  --accent-green: #B3E5FC;
  --accent-pink: #FFC1E3;
  --accent-yellow: #FFF9C4;
  --header-footer-background-color: hsl(197, 87%, 78%);
}



body {
  font-family: 'San Francisco', sans-serif;
  margin: 0;
  padding-left: 20px;
  padding-right: 20px;
  color: var(--text-color-light);
  background-color: var(--background-color-light);
  
}

/* Стили для темной темы */
body.dark-theme {
  color: var(--text-color-dark);
  background-color: var(--background-color-dark);
}
.justify-text {
  text-align: justify;
}


.floating-link {
  position: fixed; /* Фиксированное позиционирование относительно окна браузера */
  left: 20px; /* Отступ слева */
  bottom: 100px; /* Отступ снизу */
  background-color: #8ab8f0; /* Цвет фона */
  color: #ffffff; /* Цвет текста */
  padding: 10px 15px; /* Поля вокруг текста */
  text-decoration: none; /* Убирает подчеркивание текста */
  border-radius: 5px; /* Скругление углов */
  font-size: 16px; /* Размер шрифта */
  z-index: 1000; /* Убедитесь, что ссылка находится над другими элементами */
}

.floating-link:hover {
  background-color: #94c3f5; /* Цвет фона при наведении */
}
/* Стили для кнопки "На главную" в темной теме */
body.dark-theme .floating-link {
  background-color: #4fc3f7; /* Яркий фон для лучшей видимости в темной теме */
  color: #333; /* Темный текст для контраста на светлом фоне */
}


.header {
  background-color: var(--header-footer-background-color); /* Возвращение исходного цвета фона */
  text-align: left; /* Центрирование текста для заголовка и подвала */
  padding: 20px;
}

.footer {
  background-color: var(--header-footer-background-color); /* Возвращение исходного цвета фона */
  text-align: center; /* Центрирование текста для заголовка и подвала */
  padding: 20px;
}
.header, .footer {
  position: relative; /* Для позиционирования кнопки переключения темы */
}

body.dark-theme .header,
body.dark-theme .footer {
  background-color: #2c3e50; /* Темный фон */
  color: #ecf0f1; /* Светлый текст */
}
body.dark-theme a {
  color: #4fc3f7; /* Яркий синий для лучшей видимости на темном фоне */
}

#theme-toggler {
  position: absolute;
  top: 10px; /* Или другое значение для верхнего отступа внутри хедера */
  right: 20px; /* Отступ справа */
  min-width: 60px; /* Установка минимальной ширины */
  height: 60px; /* Высота кнопки */
  border-radius: 30px; /* Радиус для круглой формы */
  background-color: #3498db; /* Цвет фона кнопки */
  color: #ffffff; /* Цвет текста кнопки */
  border: none; /* Убираем границу */
  cursor: pointer; /* Курсор в виде указателя */
  display: flex; /* Используем Flexbox для центрирования содержимого */
  align-items: center; /* Центрирование содержимого по вертикали */
  justify-content: center; /* Центрирование содержимого по горизонтали */
  font-size: 24px; /* Размер иконки или текста */
  padding: 0 15px; /* Добавляем немного пространства по бокам */
}



.main {
  padding: 20px;
  margin-left: 20px;
}

.section {
  margin-bottom: 40px;

  
}
.my-list {
  line-height: 1.5; /* Применяется только к спискам с классом .my-list */
}
.section a {
  display: inline-block;
  margin-right: 40px;
}

.section h2 {
  color: var(--main-color); /* Использование основного цвета для заголовков */
}
body.dark-theme {
  color: var(--text-color-dark);
  background-color: var(--background-color-dark);
}

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
  color: var(--text-color-dark); /* Инвертирует цвет текста заголовков для темной темы */
}

.contact-form {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
}

.contact-form input, .contact-form textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

.contact-form button {
  background: var(--main-color); /* Фон кнопки соответствует основному цвету */
  color: #fff; /* Белый текст на кнопке */
  padding: 10px;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Плавные переходы для кнопки */
}

.contact-form button:hover {
  background-color: #0056b3; /* Темно-синий при наведении */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень при наведении */
}


.portfolio img, .about-me img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.social-links {
  text-align: center; /* Центрирование социальных ссылок */
  margin-top: 20px;
}



.social-links a:hover {
  color: #0056b3; /* Темно-синий при наведении */
  transform: scale(1.1); /* Увеличение при наведении */
}
a:hover {
  color: #0056b3; /* Темно-синий цвет при наведении */
}


@media (max-width: 768px) {
  .contact-form {
    width: 90%;
  }
}

ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0;
}

ul li {
  margin-bottom: 10px;
}

ul li a {
  text-decoration: none;
  color: #007bff; /* Синий цвет ссылок для лучшего сочетания */
}
ul {
  list-style-type: none; /* Убираем стандартные маркеры */
  padding: 0;
}

li {
  display: flex;
  align-items: flex-start; /* Выравнивание псевдоэлемента (маркера) и текста по верхнему краю */
}

li::before {
  content: "•"; /* Собственный маркер */
  color: grey(70, 67, 67); /* Цвет маркера */
  padding-right: 0.5em; /* Отступ между маркером и текстом */
  font-size: larger; /* Размер маркера */
}

ul {
  list-style-type: disc; /* или другой стиль маркера, который вы предпочитаете */
  list-style-position: inside;
}