/* импорт шрифтов */

@import url("https://fonts.googleapis.com/css?family=Oswald:300,400,600|Raleway:300,400,600&display=swap&subset=cyrillic");
@import url('https://fonts.googleapis.com/css?family=Lobster&display=swap&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Roboto:300italic,400italic,500italic,700italic,400,300,500,700subset=latin,cyrillic-ext');
:root {
  --font-primary: Roboto,Arial,sans-serif;/*Основной шрифт*/
  --font-secondary: Roboto,Arial,sans-serif;/*Шрифт - для заголовков */

  /* set base values */
  --text-base-size: 0.8em; /*Базовый размер шрифта*/
  --text-scale-ratio: 2em; /*Коэффициент масштабирования*/

  /* line-height */
  --body-line-height: 1.2; /* Базовая высота строки*/
  --heading-line-height: 1.3; /* Высота строки для заголовков */
  --subheading-line-height: 1; /* Высота строки для текста с классом subtitle */

  /*border*/
  --border-radius: 20px;

  /* основные цвета */
  --color-primary: #0d5799; /* Основной цвет*/
  --color-secondary: #000000; /* Дополнительный цвет */
  --color-accent: #0d5799; /* Ссылки и кнопки*/
  --color-hover: #0c74d1; /* Цвет при наведении*/
  
  --color-border: var(--color-accent); /* цвет рамки */
  --color-bg: var(--gray-1); /* цвет фона */
  
  --color-error: #f5414f; /* Цвет ошибок*/

  --white: white;
  --black: #1d1d21;
  
  /*оттенки серого*/
  --gray-10: #2e2e31;
  --gray-6: #7b7a7d;
  --gray-4: #a5a5a6;
  --gray-3: #bbbbbc;
  --gray-2: #d1d0d2;
  --gray-1: #e8e7e8;

  /* текст */
  --color-text: #2e2e31; /* Цвет текста*/
  --color-text-heading: var(--color-secondary); /* Цвет заголовков*/
  --color-text-subheading: var(--color-secondary); /* Цвет доп. заголовков*/
  --color-text-marker: var(--color-secondary); /* Цвет меток*/

  /* ссылки */
  --color-link: var(--color-accent); /* Цвет ссылки*/
  --color-link-hover: var(--color-hover); /* Цвет ссылки при наведении*/

  /* маркер */
  --color-mark: var(--color-accent); /* Цвет маркера*/

  /* Кнопка */
  --btn-color: var(--white); /* Цвет текста кнопки*/
  --btn-bg: var(--color-accent); /* Цвет фона кнопки*/
  --btn-hover: var(--white); /* Цвет текста кнопки при наведении*/
  --btn-bg-hover: var(--color-hover); /* Цвет фона кнопки при наведении*/
  --btn-border: var(--color-border); /* Цвет рамки кнопки*/
  
  /* Табы */
  --tab-color: var(--white); /* Цвет текста таба*/
  --tab-bg: var(--color-primary); /* Цвет фона таба*/
  --tab-bg-content: var(--white); /* Цвет фона у контента таба*/
  
    /* forms */
  --form-element-border: var(--black);
  --form-element-border-focus: var(--color-secondary);
  --form-element-border-error: var(--color-error);
  --form-element-bg: var(--black);
  --form-text-placeholder: var(--black);

 /* type scale */
  --text-xs: calc(1em);
  --text-sm: calc(1em);
  --text-md: calc(1em);
  --text-lg: calc(1em * var(--text-scale-ratio));
  --text-xl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-xxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-xxxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio)
  );

  /* spacing values */
  --space-xxxs: 0.25em;
  --space-xxs: 0.375em;
  --space-xs: 0.5em;
  --space-sm: 0.75em;
  --space-md: 1.25em;
  --space-lg: 2em;
  --space-xl: 3.25em;
  --space-xxl: 5.25em;
  --space-xxxl: 8.5em;
}

@media (min-width: 768px) {
  :root {
    --text-scale-ratio: 1.25em;
  }
}
@media (min-width: 1440px) {
  :root {
    --text-scale-ratio: 1.2;
  }
}

/* --------------------------------
Typography
-------------------------------- */
body {
  font-size: var(--text-base-size);
  font-weight: 300;
  font-family: var(--font-primary);
  line-height: var(--body-line-height);
  color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
form legend {
  margin-bottom: var(--space-xxs);
  font-family: var(--font-secondary);
  font-weight: 600;
  line-height: var(--heading-line-height);
  color: var(--color-text-heading);
}

/* text size */
.text--xxxl {
  font-size: var(--text-xxxl);
}

h1,
.h1, .text--xl {
  font-size: var(--text-xxl);
  padding: 40px 0 10px 0;
}

h2,
.h1, .text--lg {
  font-size: var(--text-xl);
}

h3,
.h3, .text--md {
  font-size: var(--text-lg);
}

h4,
h5,
h6,
.h4,
.h5,
.h6,
.text--md {
  font-size: var(--text-md);
}

.text--sm,
small {
  font-size: var(--text-sm);
}

.text--xs {
  font-size: var(--text-xs);
}

p {
  line-height: var(--body-line-height);
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

a {
  color: var(--color-link);
}
a:focus,
a:hover {
  color: var(--color-link-hover);
}

b,
strong {
  font-weight: bold;
}

/* Статьи - для всех элементов отступ сверху */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

h2:not([class]),
h3:not([class]),
h4:not([class]),
.h2,
.h3,
.h4 {
  margin-top: var(--space-sm);
}

ul:not([class]),
ol:not([class]),
p:not([class]) {
  margin-bottom: var(--space-md);
}

ul:not([class]),
ol:not([class]) {
  list-style-position: outside;
  padding-left: 24px;
}

ul:not([class]) {
  list-style-type: disc;
}

ol:not([class]) {
  list-style-type: decimal;
}

ul:not([class]) li,
ol:not([class]) li {
  line-height: var(--body-line-height);
  list-style-type: inherit;
}

em {
  font-style: italic;
}

u {
  text-decoration: underline;
}

.btn {
  color: var(--btn-color);
  border-radius: var(--border-radius);
  border-color: var(--btn-border);
  background-color: var(--btn-bg);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.btn:hover {
  opacity: 0.8;
  color: var(--btn-hover);
  background-color: var(--btn-bg-hover);
  border-color: var(--btn-border);
}
.btn:focus {
  outline: none;
  color: var(--btn-hover);
  box-shadow: 0 0 0 3px var(--btn-bg);
}
.btn:active {
  color: var(--btn-hover);
  background-color: var(--btn-bg-hover);
  border-color: var(--btn-border);
}

.mark {
  font-family: var(--font-secondary);
  font-weight: 600;
  line-height: var(--heading-line-height);
  color: var(--color-mark);
  background-color: transparent;
}

.subtitle {
  margin-bottom: var(--space-xxs);
  font-family: var(--font-secondary);
  font-weight: 600;
  line-height: var(--subheading-line-height);
  color: var(--color-text-subheading);
}

@supports (--css: variables) {
  .theme--dark {
    --background: var(--black);
    --color-border: var(--gray-6);
    --color-text: var(--gray-4);
    --color-text-heading: var(--white);
    --color-bg: transparent;
  }
}

.theme--dark {
  color: var(--gray-1);
 
}
.theme--dark h1,
.theme--dark h2,
.theme--dark h3,
.theme--dark h4,
.theme--dark h5,
.theme--dark h6 {
  color: var(--white);
}
.theme--dark .subtitle {
  color: var(--gray-4);
}
.theme--dark a {
  color: var(--color-accent);
}
.theme--dark .btn {
  color: var(--white);
}
.svg-color {
fill: var(--color-primary);
color: var(--color-primary);
background: var(--color-primary);
}