:root {
  --neutral-50: #fafafa;
  --neutral-100: #f4f4f5;
  --neutral-200: #e4e4e7;
  --neutral-300: #d4d4d8;
  --neutral-400: #a1a1aa;
  --neutral-500: #71717a;
  --neutral-600: #52525b;
  --neutral-700: #3f3f46;
  --neutral-800: #27272a;
  --neutral-900: #18181b;

  --color-green: #26cd58;
  --color-red: #ff3a34;
  --color-orange: #ff9900;
  --color-ocean: #3a93ba;
  --color-yellow: #faca15;
  --color-blue: #0059df;
  --color-grey: #d5d6d6;
  --color-purple: #7e3af2;
  --color-reef: #1bb2b2;

  /* TODO: Remove */
  --yellow: #faca15;
  --grey: #d5d6d6;

  --green-light: #eafaef;
  --yellow-light: #fff5e6;
  --red-light: #ffeceb;
  --blue-light: #e6effc;

  --color-background-orange: #fff5e6;
  --color-background-purple: #f3ecfe;
  --color-background-blue: #e6effc;

  --bg-primary: #ffffff;
  --bg-secondary: #fbfbfd;
  --bg-tertiary: #eaecef;

  --bg-primary-white: #ffffff;
  --bg-primary-dark: var(--neutral-900);

  --text-dark-primary: var(--neutral-900);
  --text-dark-secondary: var(--neutral-600);
  --text-dark-tertiary: var(--neutral-400);
  --text-light-primary: white;
  --text-light-secondary: var(--neutral-200);
  --text-light-tertiary: var(--neutral-400);

  --color-border-primary: var(--neutral-200);
  --color-border-button: var(--neutral-900);
  --color-bg-badge: var(--neutral-100);

  --color-button-primary: var(--neutral-900);
  --color-button-secondary: var(--neutral-100);
  --color-button-link: var(--color-blue);
  --color-button-hover: var(--neutral-700);
  --color-button-border: var(--neutral-900);

  --color-divider-dark-primary: var(--neutral-200);
  --color-divider-light-primary: var(--neutral-600);
  --color-border-table-divider: var(--neutral-100);
  --color-border-primary: var(--neutral-200);

  --color-input-border-default: var(--neutral-200);
  --color-input-border-hover: var(--neutral-400);
  --color-input-border-focus: var(--neutral-900);

  --color-background-block: white;
  --color-background-page: #fbfbfd;
  --color-background-badge: var(--neutral-100);

  --color-link: var(--color-blue);
  --color-link-hover: #1e77fd;

  --color-icon-dark-quarternary: var(--neutral-200);
  --color-icon-dark-terteriary: var(--neutral-400);
  --color-icon-dark-secondary: var(--neutral-600);
  --color-icon-dark-primary: var(--neutral-900);

  /* Typography */
  --primary-font: "Golos Text", sans-serif;

  --font-d1: 700 72px/78px var(--primary-font);
  --font-d1-spacing: -2.88px;

  --font-d2: 700 56px/68px var(--primary-font);
  --font-d2-spacing: -2.24px;

  --font-d3: 700 48px/60px var(--primary-font);
  --font-d3-spacing: -1.44px;

  --font-d4: 700 40px/64px var(--primary-font);
  --font-d4-spacing: -1.6px;

  --font-h1: 700 40px/54px var(--primary-font);
  --font-h1-spacing: -1.2px;

  --font-h2: 700 36px/48px var(--primary-font);
  --font-h2-spacing: -1.08px;

  --font-h3: 700 28px/40px var(--primary-font);
  --font-h3-spacing: -0.84px;

  --font-h4: 700 24px/36px var(--primary-font);
  --font-h4-spacing: -0.72px;

  --font-h5: 700 20px/32px var(--primary-font);
  --font-h5-spacing: -0.6px;

  --font-h6: 700 18px/28px var(--primary-font);
  --font-h6-spacing: -0.54px;

  --font-s1: 500 20px/32px var(--primary-font);
  --font-s1-spacing: -0.6px;

  --font-s2: 500 18px/28px var(--primary-font);
  --font-s2-spacing: -0.54px;

  --font-s3: 500 16px/26px var(--primary-font);
  --font-s3-spacing: -0.48px;

  --font-s4: 500 14px/22px var(--primary-font);
  --font-s4-spacing: -0.42px;

  --font-s5: 500 12px/20px var(--primary-font);
  --font-s5-spacing: -0.36px;

  --font-a1: 600 20px/32px var(--primary-font);
  --font-a1-spacing: -0.4px;

  --font-a2: 600 18px/28px var(--primary-font);
  --font-a2-spacing: -0.36px;

  --font-a3: 600 16px/24px var(--primary-font);
  --font-a3-spacing: -0.32px;

  --font-a4: 600 14px/20px var(--primary-font);
  --font-a4-spacing: -0.28px;

  --font-a5: 600 12px/16px var(--primary-font);
  --font-a5-spacing: -0.24px;

  --font-b1: 400 20px/32px var(--primary-font);
  --font-b1-spacing: -0.4px;

  --font-b2: 400 18px/30px var(--primary-font);
  --font-b2-spacing: -0.36px;

  --font-b3: 400 16px/26px var(--primary-font);
  --font-b3-spacing: -0.32px;

  --font-b4: 400 14px/22px var(--primary-font);
  --font-b4-spacing: -0.28px;

  --font-b5: 400 12px/18px var(--primary-font);
  --font-b5-spacing: -0.24px;

  --font-c1: 500 16px/24px var(--primary-font);
  --font-c1-spacing: -0.32px;

  --font-c2: 500 14px/20px var(--primary-font);
  --font-c2-spacing: -0.28px;

  --font-c3: 500 12px/18px var(--primary-font);
  --font-c3-spacing: -0.24px;

  --font-c4: 500 10px/16px var(--primary-font);
  --font-c4-spacing: -0.2px;

  --font-d3-m: 500 48px/60px var(--primary-font);
  --font-d3-m-spacing: -1.92px;

  --font-d4-m: 500 40px/54px var(--primary-font);
  --font-d4-m-spacing: -1.6px;

  --font-d5-m: 500 30px/40px var(--primary-font);
  --font-d5-m-spacing: -1.2px;

  /* Spacing */
  --control-height-sm: 32px;
  --control-padding-sm: 12px;
  --control-padding-sm2: 16px;
  --control-padding-icon-sm: 8px;
  --control-space-sm: 4px;

  --control-height-md: 48px;
  --control-padding-md: 16px;
  --control-padding-md2: 24px;
  --control-padding-icon-md: 12px;
  --control-space-md: 8px;

  --control-height-lg: 56px;
  --control-width-lg: 56px;
  --control-padding-lg: 24px;
  --control-padding-lg2: 32px;
  --control-padding-icon-lg: 16px;
  --control-space-lg: 8px;

  /* Radius*/
  --radius-none: 0;
  --radius-3-xs: 4px;
  --radius-2-xs: 8px;
  --radius-xs: 12px;
  --radius-sm: 16px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2-xl: 48px;
  --radius-3-xl: 64px;
  --radius-full: 999px;

  /* Icons Sizes*/
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;

  /* Shadows */
  --shadow-level-1: 0 2px 8px 0 rgba(24, 24, 27, 0.04);
  --shadow-level-2: 0 6px 24px 0 rgba(24, 24, 27, 0.05);
  --shadow-level-3: 0 10px 40px 0 rgba(24, 24, 27, 0.06);
  --shadow-level-4: 0 24px 128px 0 rgba(24, 24, 27, 0.07);

  /* Spacings */
  --spacing-01: 4px;
  --spacing-02: 8px;
  --spacing-03: 12px;
  --spacing-04: 16px;
  --spacing-05: 20px;
  --spacing-06: 24px;
  --spacing-07: 28px;
  --spacing-08: 32px;
  --spacing-09: 36px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-20: 80px;
}

/*endregion*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  align-items: start;
  min-height: 100vh;
  background-color: var(--bg-secondary);
  color: var(--text-dark-primary);
  font-weight: 400;
  font-family: var(--primary-font), sans-serif;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

hr {
  height: 1px;
  border: none;
  background-color: var(--color-divider-dark-primary);

  &.vertical {
    align-self: stretch;
    width: 1px;
    height: auto;
    background-color: var(--color-divider-dark-primary);
  }
}

/*region Fonts */
@font-face {
  font-style: normal;
  font-weight: 400;
  src: url("/static/font/golos/GolosText-Regular.2afdf3a308c5.ttf") format("truetype");
  font-family: "Golos Text";
}

@font-face {
  font-weight: 500;
  src: url("/static/font/golos/GolosText-Medium.8e81f2e10b17.ttf") format("truetype");
  font-family: "Golos Text";
}

@font-face {
  font-weight: 600;
  src: url("/static/font/golos/GolosText-SemiBold.14b024d8e9a6.ttf") format("truetype");
  font-family: "Golos Text";
}

@font-face {
  font-weight: 700;
  src: url("/static/font/golos/GolosText-Bold.249e63dbfef3.ttf") format("truetype");
  font-family: "Golos Text";
}

@font-face {
  font-weight: 800;
  src: url("/static/font/golos/GolosText-ExtraBold.492f44d66b13.ttf") format("truetype");
  font-family: "Golos Text";
}

@font-face {
  font-weight: 900;
  src: url("/static/font/golos/GolosText-Black.46ec0bfa5588.ttf") format("truetype");
  font-family: "Golos Text";
}

@font-face {
  font-style: normal;
  font-weight: 400;
  src: url("/static/font/UbuntuMono-Regular.c8ca9c5cab28.ttf") format("truetype");
  font-family: "Ubuntu Mono";
}

.container {
  width: 100%;
  margin-bottom: 80px;
  padding-inline: 16px;
}

@media (min-width: 768px) {
  .container {
    margin-bottom: 100px;
    padding-inline: 24px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 1280px;
    margin-bottom: 120px;
    padding-inline: 32px;
  }
}

@media (min-width: 1280px) {
  .container {
    margin-inline: auto;
  }
}

#scrollToTop {
  display: none;
  z-index: 99;
  position: fixed;
  right: 20px;
  bottom: 100px;
  padding: 12px;
  border: 1px solid var(--neutral-800);
  border-radius: 50%;
  outline: none;
  background-color: var(--bg-primary-white);
  cursor: pointer;
}

#scrollToTop:hover {
  background-color: var(--neutral-100);
}