/* Документ
 * ========================================================================== */

/* Общие стили */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  transition: 0.1s;
}

/**
  * Добавить изменение размера рамки во всех браузерах (личное мнение).
*/

*,
::before,
::after {
  box-sizing: border-box;
}

/**
  * 1. Добавить наследование оформления текста во все браузеры (упрямо).
  * 2. Добавить наследование вертикального выравнивания во все браузеры (упрямо).
*/

::before,
::after {
  text-decoration: inherit;
  /* 1 */
  vertical-align: inherit;
  /* 2 */
}

/**
  * 1. Использовать курсор по умолчанию во всех браузерах (самоуверенный).
  * 2. Изменить высоту строки во всех браузерах (самоуверенный).
  * 3. Использовать табуляцию шириной в 4 пробела во всех браузерах (самоуверенный).
  * 4. Убрать серую подсветку ссылок в iOS (самоуверенный).
  * 5. Запретить корректировку размера шрифта после изменения ориентации в
       IE на Windows Phone и в iOS.
  * 6. Разбивать слова для предотвращения переполнения во всех браузерах (самоуверенный).
*/

html {
  cursor: default;
  /* 1 */
  line-height: 1.5;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  tab-size: 4;
  /* 3 */
  -webkit-tap-highlight-color: transparent
    /* 4 */
  ;
  -ms-text-size-adjust: 100%;
  /* 5 */
  -webkit-text-size-adjust: 100%;
  /* 5 */
  word-break: break-word;
  /* 6 */

   -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;

  /* Прячем скролл-бар */
    /* Firefox */
  scrollbar-width: none;

  /* IE и Edge */
  -ms-overflow-style: none;

  /* Chrome, Safari, Opera */
  &::-webkit-scrollbar {
    display: none;
  }
}

/* Разделы
  * ========================================================================== */

/**
  * Удалить отступ во всех браузерах (упрямо).
*/

body {
  margin: 0;
}

/**
  * Исправьте размер шрифта и поля элементов `h1` в контекстах `section` и
  * `article` в Chrome, Edge, Firefox и Safari.
*/

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Группировка контента
  * ========================================================================== */

/**
  * Удалите поля во вложенных списках в Chrome, Edge, IE и Safari.
*/

dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

/**
  * Удалить поля во вложенных списках в Edge 18 и IE.
*/

ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

/**
  * 1. Добавьте правильный размер в Firefox.
  * 2. Покажите переполнение в Edge 18 и IE.
*/

hr {
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
  * Добавьте правильное отображение в IE.
*/

main {
  display: flex;
}

/**
  * Удалить стиль списка в навигационных списках во всех браузерах (самоуверенное решение).
*/

nav ol,
nav ul {
  list-style: none;
  padding: 0;
}

/**
  * 1. Исправьте наследование и масштабирование размера шрифта во всех браузерах.
  * 2. Исправьте нечетные размеры шрифта `em` во всех браузерах.
*/

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Семантика на уровне текста

  * ========================================================================== */

/**
  * Убрать серый фон на активных ссылках в IE 10.
*/

a {
  background-color: transparent;
}

/**
  * Добавьте правильное оформление текста в Edge 18, IE и Safari.
*/

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
  * Добавьте правильную толщину шрифта в Chrome, Edge и Safari.
*/

b,
strong {
  font-weight: bolder;
}

/**
  * 1. Исправьте наследование и масштабирование размера шрифта во всех браузерах.
  * 2. Исправьте нечетные размеры шрифта `em` во всех браузерах.
*/

code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
  * Добавьте правильный размер шрифта во все браузеры.
*/

small {
  font-size: 80%;
}

/* Встроенный контент
  * ========================================================================== */

/*
  * Изменить выравнивание медиа-элементов во всех браузерах (упрямое).
*/

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
  * Добавьте правильное отображение в IE 9-.
*/

audio,
video {
  display: inline-block;
}

/**
  * Добавьте правильное отображение в iOS 4-7.
*/

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
  * Убрать рамку у iframe во всех браузерах (самоуверенное решение).
*/

iframe {
  border-style: none;
}

/**
  * Убрать рамку у изображений внутри ссылок в IE 10-.
*/

img {
  border-style: none;
}

/**
  * Измените цвет заливки так, чтобы он соответствовал цвету текста во всех браузерах (самоуверенно).
*/

svg:not([fill]) {
  fill: currentColor;
}

/**
  * Скрыть переполнение в IE.
*/

svg:not(:root) {
  overflow: hidden;
}

/* Табличные данные
  * ========================================================================== */

/**
  * Уменьшить интервалы между границами во всех браузерах (мнение).
*/

table {
  border-collapse: collapse;
}

/* Формы
  * ========================================================================== */

/**
  * Уберите поля у элементов управления в Safari.
*/

button,
input,
select {
  margin: 0;
}

/**
  * 1. Показать переполнение в IE.
  * 2. Удалить наследование преобразования текста в Edge 18-, Firefox и IE.
*/

button {
  overflow: visible;
  /* 1 */
  text-transform: none;
  /* 2 */
}

/**
  * Исправлена ​​невозможность стилизовать кнопки в iOS и Safari.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
  * 1. Измените непоследовательный внешний вид во всех браузерах (упрямо).
  * 2. Исправьте отступы в Firefox.
*/

fieldset {
  border: 1px solid #a0a0a0;
  /* 1 */
  padding: 0.35em 0.75em 0.625em;
  /* 2 */
}

/**
  * Покажите переполнение в Edge 18 и IE.
*/

input {
  overflow: visible;
}

/**
  * 1. Исправьте перенос текста в Edge 18- и IE.
  * 2. Исправьте наследование цвета из элементов `fieldset` в IE.
*/

legend {
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  white-space: normal;
  /* 1 */
}

/**
  * 1. Добавьте правильное отображение в Edge 18 и IE.
  * 2. Добавьте правильное вертикальное выравнивание в Chrome, Edge и Firefox.
*/

progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
  * Удалить наследование преобразования текста в Firefox.
*/

select {
  text-transform: none;
}

/**
  * 1. Удалить поле в Firefox и Safari.
  * 2. Удалить вертикальную полосу прокрутки по умолчанию в IE.
  * 3. Изменить направление изменения размера во всех браузерах (упрямо).
*/

textarea {
  margin: 0;
  /* 1 */
  overflow: auto;
  /* 2 */
  resize: vertical;
  /* 3 */
}

/**
  * Уберите отступы в IE 10-.
*/

[type="checkbox"],
[type="radio"] {
  padding: 0;
}

/**
  * 1. Исправьте странный внешний вид в Chrome, Edge и Safari.
  * 2. Исправьте стиль контура в Safari.
*/

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
  * Исправлен стиль курсора кнопок увеличения и уменьшения в Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
  * Исправлен стиль текста заполнителей в Chrome, Edge и Safari.
*/

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
  * Удалите внутреннюю отбивку в Chrome, Edge и Safari на macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
  * 1. Исправлена ​​невозможность стилизовать кнопки загрузки в iOS и Safari.
  * 2. Измените свойства шрифта на `inherit` в Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/**
  * Удалить внутреннюю границу и отступы контуров фокуса в Firefox.
*/

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
  * Восстановить стили контура фокуса, отмененные предыдущим правилом в Firefox.
*/

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
  * Удалите дополнительные стили :invalid в Firefox.
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/* Интерактивный
  * ========================================================================== */

/*
  * Добавьте правильное отображение в Edge 18 и IE.
*/

details {
  display: block;
}

/*
  * Добавьте правильные стили в Edge 18, IE и Safari.
*/

dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  margin: auto;
  padding: 1em;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

/*
  * Добавьте правильное отображение во всех браузерах.
*/

summary {
  display: list-item;
}

/* Сценарии
  * ========================================================================== */

/**
  * Добавьте правильное отображение в IE 9-.
*/

canvas {
  display: inline-block;
}

/**
  * Добавьте правильное отображение в IE.
*/

template {
  display: none;
}

/* Взаимодействие с пользователем

  * ========================================================================== */

/*
  * 1. Убрать задержку нажатия в IE 10.
  * 2. Убрать задержку нажатия на кликабельных элементах
       во всех браузерах (мнение).
*/

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
  /* 1 */
  touch-action: manipulation;
  /* 2 */
}

/**
  * Добавьте правильное отображение в IE 10-.
*/

[hidden] {
  display: none;
}

/* Доступность
  * ========================================================================== */

/**
  * Изменить курсор на занятых элементах во всех браузерах (самоуверенно).
*/

[aria-busy="true"] {
  cursor: progress;
}

/*
  * Изменить курсор на элементах управления во всех браузерах (самоуверенно).
*/

[aria-controls] {
  cursor: pointer;
}

/*
  * Измените курсор на отключенных, нередактируемых или иных
  * неработоспособных элементах во всех браузерах (упрямый).
*/

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/*
  * Изменить отображение визуально скрытых доступных элементов
  * во всех браузерах (мнение).
*/

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}