/* rubik-regular - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/rubik-v26-latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/rubik-v26-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/rubik-v26-latin_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/rubik-v26-latin_latin-ext-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/rubik-v26-latin_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/rubik-v26-latin_latin-ext-regular.svg#Rubik') format('svg'); /* Legacy iOS */
}
@font-face {
    font-family: material symbols rounded;
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/google_material_symbols.woff2') format("woff2");
    font-display: swap
}
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
    user-select: none !important;
}
:root {
    font-size: 14px;
    --stroke-color: #777;
    --stroke-color-darker: #444;
    --status: var(--blue);
    --status-darker: var(--blue-darker);
    --corner-distance: 1rem;
    --red: #fd2b3b;
    --red-darker: hsl(0, 70%, 40%);
    --orange: #fb8500;
    --orange-darker: hsl(32, 73%, 36%);
    --yellow: #ffb703;
    --yellow-darker: hsl(46, 80%, 35%);
    --green: #80b918;
    --green-darker: hsl(90, 81%, 31%);
    --blue: #3a86ff;
    --blue-darker: hsl(220, 70%, 40%);
    --purple: #8338ec;
    --purple-darker: hsl(270, 70%, 40%);
    --pink: #ee35a4;
    --pink-darker: hsl(320, 70%, 40%);
    --background: rgb(16, 15, 24);
    --track-color: #23222c;
  }
  
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Rubik", sans-serif;
    scrollbar-face-color: var(--track-color);
    scrollbar-track-color: transparent;
    scrollbar-color: var(--track-color) transparent;
    scrollbar-width: thin;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important
  }
  
  /* ::-moz-selection {
      color: var(--background);
      background: var(--foreground)
  }
  
  ::selection {
      color: var(--background);
      background: var(--foreground)
  } */
  ::-webkit-scrollbar {
    width: 0.4rem;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 1rem;
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--track-color);
    border-radius: 1rem;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--track-color);
  }