@charset "utf-8";
/* colors  https://htmlweb.ru/html/combine_colors_correctly.php?ysclid=me62sbpo5j363365456 */
/* Цвета https://colorscheme.ru/html-colors.html */
/* Как сделать тёмную тему для сайта https://skillbox.ru/media/code/kak_sdelat_tyemnuyu_temu_dlya_sayta/ */

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 16px;
  font-size: 115%;
}
@media (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 8px;
  }
}

a {
  text-decoration: none;
}

.logo {
  font-size: 140%;
  margin: 0 0 12px 0;
}

nav {
  margin: 12px 0;
  padding: 8px 0;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}



/* Тёмно-зелёная тема - theme-green */
body.theme-green {
  background-color: #003300; /* цвет фона */
  color: #CCFFCC; /* цвет текста */
}
body.theme-green a {
  color: #66CCFF; /* цвет ссылок */
}
body.theme-green h1, body.theme-green h2, body.theme-green h3 {
  color: #FFFFFF; /* цвет заголовков */
}
body.theme-green .btn {
  color: #FFCC00; /* цвет кнопки */
}
/* Тёмно-зелёная тема */

/* Тёмно-серая тема - theme-gray */
body.theme-gray {
  background-color: #333333; /* цвет фона */
  color: #EEEEEE; /* цвет текста */
}
body.theme-gray a {
  color: #66CCFF; /* цвет ссылок */
}
body.theme-gray h1, body.theme-green h2, body.theme-green h3 {
  color: #FFFFFF; /* цвет заголовков */
}
body.theme-gray .btn {
  color: #FF9900; /* цвет кнопки */
}
/* Тёмно-серая тема */

/* Тёмно-фиолетовая тема - theme-purple */
body.theme-purple {
  background-color: #330033; /* цвет фона */
  color: #FFCCFF; /* цвет текста */
}
body.theme-purple a {
  color: #66CCFF; /* цвет ссылок */
}
body.theme-purple h1, body.theme-green h2, body.theme-green h3 {
  color: #FFFFFF; /* цвет заголовков */
}
body.theme-purple .btn {
  color: #00CCCC; /* цвет кнопки */
}
/* Тёмно-фиолетовая тема */

/* Тёмно-бордовая тема - theme-maroon */
body.theme-maroon {
  background-color: #330000; /* цвет фона */
  color: #FFDDCC; /* цвет текста */
}
body.theme-maroon a {
  color: #FFCC66; /* цвет ссылок */
}
body.theme-maroon h1, body.theme-green h2, body.theme-green h3 {
  color: #FFFFFF; /* цвет заголовков */
}
body.theme-maroon .btn {
  color: #FF6600; /* цвет кнопки */
}
/* Тёмно-красная тема */

/* Тёмно-синяя тема - theme-blue */
body.theme-blue {
  background-color: #000066; /* цвет фона */
  color: #EEEEEE; /* цвет текста */
}
body.theme-blue a {
  color: #66CCFF; /* цвет ссылок */
}
body.theme-blue h1, body.theme-green h2, body.theme-green h3 {
  color: #FFFFFF; /* цвет заголовков */
}
body.theme-blue .btn {
  color: #FFCC00; /* цвет кнопки */
}
/* Тёмно-синяя тема */



#themeSwitcher {
  margin: 8px 0px; /* отступы слева и справа */
  padding: 5px;/* внутренние отступы внутри селекта */
  font-size: 100%; /* размер текста */
  border-radius: 6px; /* закруглённые углы */ 
  border: 1px solid #666; /* тонкая рамка */ 
  background-color: #333333; /* тёмно-зелёный фон */ 
  color: #EEEEEE; /* цвет текста */
}