.icons-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
}

:root {
  --bg: #0b0b0b;
  --bg-lighter: #3f3f3f;
  --bg-lightest: #101010;
  --bg-darker: #1b1b1b;
  --bg-black: #020202;
  --tt: #a8a8a8;
  --tt-lighter: #e0dfdc;
  --tt-lighter-2: #fff;
  --tt-darker: #686868;
  --bdc: #00000080;
  --bdc-lighter: #ffffff20;
  --bsh: 0 8px 16px rgba(0, 0, 0, 0.5);
  --bsh-2: 0 1px 3px rgba(0, 0, 0, 0.5);
  --accent: #00bae4;
  --accent-darker: #009ec1;
  --accent-3: #9ab96d;
  --ui-bg: #222;
  --ui-bg-darker: #111;
  --ui-bg-darkest: #000;
  --ui-text-color-on-accent: #fff;
  --ui-bdc: #111;
  --tt-darker-2: #818181;
  --indent: 30px;
  --max-width: 1000px;
  --mobindent: 10px;
  --ease: 0.3s ease;
}

@media screen and (max-width: 1220px) {
  :root {
    --indent: 20px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font: 14px 'Manrope', sans-serif;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.02em;
  color: var(--tt-lighter-2);
  background: var(--bg-black);
  min-height: 100%;
  overflow-x: hidden;
}

img,
video,
iframe {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
}

button {
  cursor: pointer;
}

a,
button,
input,
select,
textarea,
.nav__link,
.header__action-btn,
.header__search-btn,
.header__search-input,
.header__burger,
.filter__toggle,
.filter__option,
.card__link,
.movie__tab,
.movie__reaction a,
.movie__complaint a,
.movie__comments-btn,
.movie__edit a,
.pagination__more a,
.pagination__pages a,
.form__btn,
.login__submit,
.comments-form__submit,
.scrolltop,
.carousel__arrow,
.carousel__dot,
.mobile-nav__link,
.mobile-nav__sublink,
.mobile-nav__toggle {
  transition:
    color var(--ease),
    background-color var(--ease),
    border-color var(--ease),
    opacity var(--ease),
    box-shadow var(--ease),
    transform var(--ease);
}

::selection {
  background: var(--accent);
  color: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@font-face {
  font-family: 'Manrope';
  src: url('../webfonts/manrope-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../webfonts/manrope-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../webfonts/manrope-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OrbitronBold';
  src: url('../webfonts/OrbitronBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}