/* base subset */
@font-face {
  font-family: 'CoFo Sans';
  src: url('/assets/fonts/var/CoFoSans-base.woff2') format('woff2 supports variations'),
  url('/assets/fonts/var/CoFoSans-base.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A9, U+00AB, U+00BB, U+0401, U+0410-044F, U+0451, U+2012-2014, U+2018-201A, U+201C-201E, U+2026, U+20BD;
}

/*latin ext*/
@font-face {
  font-family: 'CoFo Sans';
  src: url('/assets/fonts/var/CoFoSans-latin-ext.woff2') format('woff2 supports variations'),
  url('/assets/fonts/var/CoFoSans-latin-ext.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00AA, U+00BA, U+00C0-00D6, U+00D8-00F6, U+00F8-0137, U+0139-017E, U+018F, U+01C4-01CC, U+01D3-01D4,
  U+01E2-01E3, U+01F1-01F5, U+01FC-01FF, U+0218-021B, U+0232-0233, U+0237, U+0259, U+0394, U+03A3, U+03A9, U+03BC, U+03C0,
  U+1E46-1E47, U+1E62-1E63, U+1E80-1E85, U+1E9E, U+1EBC-1EBD, U+1EF2-1EF3, U+A7B6-A7B7, U+FB01-FB02;
}

/*cyrillic ext*/
@font-face {
  font-family: 'CoFo Sans';
  src: url('/assets/fonts/var/CoFoSans-cyrillic-ext.woff2') format('woff2 supports variations'),
  url('/assets/fonts/var/CoFoSans-cyrillic-ext.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400, U+0402-040F, U+0450, U+0452-045F, U+0462-0463, U+0472-0475, U+0490-0493,
  U+0496-0497, U+049A-049B, U+04A2-04A3, U+04AE-04B3, U+04B6-04B7, U+04BA-04BB, U+04C0, U+04CF, U+04D8-04D9, U+04E2-04E3,
  U+04E8-04E9, U+04EE-04EF;
}

/* base subset */
@font-face {
  font-family: 'CoFo Kak';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/CoFoKak-Black-base.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00AB, U+00BB, U+0401, U+0410-044F, U+0451, U+2012-2014, U+2018-201A, U+201C-201E, U+2026, U+20BD;
}

/* armenian fallback*/
@font-face {
  font-family: 'Montserrat Arm';
  src: url('/assets/fonts/arm/Montserratarm-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0531-0556, U+0559-055F, U+0561-0587, U+0589, U+058A, U+058F;
}

@font-face {
  font-family: 'Montserrat Arm';
  src: url('/assets/fonts/arm/Montserratarm-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0531-0556, U+0559-055F, U+0561-0587, U+0589, U+058A, U+058F;
}

@font-face {
  font-family: 'Montserrat Arm';
  src: url('/assets/fonts/arm/Montserratarm-SemiBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0531-0556, U+0559-055F, U+0561-0587, U+0589, U+058A, U+058F;
}

@font-face {
  font-family: 'Montserrat Arm';
  src: url('/assets/fonts/arm/Montserratarm-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0531-0556, U+0559-055F, U+0561-0587, U+0589, U+058A, U+058F;
}

@custom-media --bp-s (min-width: 624px);
@custom-media --bp-m (min-width: 1024px);
@custom-media --bp-l (min-width: 1280px);
@custom-media --bp-xl (min-width: 1600px);
@custom-media --bp-xxl (min-width: 1920px);

:root {
  --color-bern: #000;
  --color-bern-90: rgba(0 0 0 / 90%);
  --color-bern-80: rgba(0 0 0 / 80%);
  --color-bern-60: rgba(0 0 0 / 60%);
  --color-bern-50: rgba(0 0 0 / 50%);
  --color-bern-40: rgba(0 0 0 / 40%);
  --color-bern-30: rgba(0 0 0 / 30%);
  --color-bern-20: rgba(0 0 0 / 20%);
  --color-bern-06: rgba(0 0 0 / 6%);
  --color-bamako: #141414;
  --color-bamako-sochi-06: #222;
  --color-bamako-sochi-12: #303030;
  --color-dakar: #0f0f0f;
  --color-bogota: #222;
  --color-berlin: #ff5a24;
  --color-vatican: #e50914;
  --color-sydney: #3dbb3d;
  --color-portland: #006cff;
  --color-sochi: #fff;
  --color-sochi-80: rgba(255 255 255 / 80%);
  --color-sochi-70: rgba(255 255 255 / 70%);
  --color-sochi-60: rgba(255 255 255 / 60%);
  --color-sochi-50: rgba(255 255 255 / 50%);
  --color-sochi-40: rgba(255 255 255 / 40%);
  --color-sochi-30: rgba(255 255 255 / 30%);
  --color-sochi-20: rgba(255 255 255 / 20%);
  --color-sochi-12: rgba(255 255 255 / 12%);
  --color-sochi-10: rgba(255 255 255 / 10%);
  --color-sochi-06: rgba(255 255 255 / 6%);
  --color-sochi-03: rgba(255 255 255 / 3%);

  --color-skin-none: #f0f0f0;
  --color-skin-none-buffer: #858585;
  --color-skin-none-slider: #333333;
  --color-skin-none-time-end: #9b9b9b;

  --gradient-dubai: linear-gradient(63.55deg, #ff9532 -10.89%, #ff8a1c 9.96%, #ff5b21 51.66%, #ff5a24 86%);
  --gradient-montreal: linear-gradient(97deg, #6503ff 6%, #5906ff 94%);
  --gradient-seoul: linear-gradient(112deg, #f2614f 0%, #4523cd 100%);
  --gradient-linear: linear-gradient(103.1deg, rgba(255, 255, 255, 0.3) -6.84%, rgba(255, 255, 255, 0) 133.18%);
  --gradient-linear-black: linear-gradient(180deg, rgba(11, 10, 13, 0.3) 0%, #0b0a0d 100%);

  --header-background: var(--color-bern);
  --main-background: var(--color-bern);
  --player-background: #000;
  --main-button-color: var(--gradient-dubai);
  --main-button-text-color: var(--color-sochi);
  --hover-color: #ff5a47; /* lighten(berlin, 6%) */
  --text-color: var(--color-sochi);
  --success-color: var(--color-sydney);
  --error-color: var(--color-vatican);

  --spacing-xs: 0.4rem;
  --spacing-s: 0.8rem;
  --spacing-m: 1.6rem;
  --spacing-l: 2rem;
  --spacing-xl: 2.4rem;
  --spacing-2xl: 3.2rem;
  --spacing-3xl: 5.2rem;

  --modal-top: 0;
}

@media screen and (min-width: 624px) {
  :root {
    --spacing-s: 1.2rem;
    --spacing-m: 2rem;
    --spacing-l: 2.4rem;
    --spacing-xl: 3.2rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 8rem;
  }
}

@media screen and (min-width: 1600px) {
  :root {
    --spacing-xs: 0.8rem;
    --spacing-s: 1.6rem;
    --spacing-m: 2.4rem;
    --spacing-l: 3.2rem;
    --spacing-xl: 4rem;
    --spacing-2xl: 5.2rem;
    --spacing-3xl: 9.6rem;
  }
}

html {
  font-family: 'CoFo Sans', 'Montserrat Arm', sans-serif;
  /* prettier-ignore */
  font-size: 10Px;
}

[data-modal] {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: none;
  position: absolute;
}

[data-modal] body {
  height: calc(100vh + var(--modal-top));
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  top: calc(-1 * var(--modal-top));
}

@media screen and (min-width: 1920px) {
  html {
    font-size: calc(100vw / 192);
  }
}

html,
body {
  background: var(--main-background);
  box-sizing: border-box;
  color: var(--text-color);
  display: block;
  width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

* {
  scrollbar-color: var(--color-sochi-40) var(--color-bern);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--color-bern);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-sochi-40);
  border-radius: 4px;
}

input,
textarea,
select,
button {
  font-family: 'CoFo Sans', 'Montserrat Arm', sans-serif;
}

[tabindex],
button {
  outline: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 500;
}

.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}

input,
textarea,
select,
button,
[role='button'],
a {
  -webkit-tap-highlight-color: transparent;
}

button:not([disabled]),
[role='button'] {
  cursor: pointer;
}

/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: var(--main-button-color);

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 0.2rem;
}