/* CSS Variables [All pages] */

@font-face {
  font-family: Haffer VF;
  src: url("https://osmo.b-cdn.net/website/fonts/HafferStandardUprights-VF.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Haffer XH;
  src: url("https://osmo.b-cdn.net/website/fonts/HafferXHRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Haffer Mono;
  src: url("https://osmo.b-cdn.net/website/fonts/HafferMonoMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Haffer Mono;
  src: url("https://osmo.b-cdn.net/website/fonts/HafferMonoRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Brisa Pro;
  src: url("https://osmo.b-cdn.net/website/fonts/BrisaPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------- Variables - Sizes, Animations Etc. ------------------------------------------- */

:root {
  /* Animations */
  --cubic-default: cubic-bezier(0.625, 0.05, 0, 1);
  --duration-default-double: 1.2s; /* Double of default */
  --duration-default-onehalf: 0.9s; /* One & Half of default */
  --duration-default: 0.6s;
  --duration-default-half: 0.3s; /* Half of default */
  --animation-default-double: var(--duration-default-double) var(--cubic-default);
  --animation-default-onehalf: var(--duration-default-onehalf) var(--cubic-default);
  --duration-default-quarter: 0.15s; /* Quarter of default */
  --animation-default: var(--duration-default) var(--cubic-default);
  --animation-default-half: var(--duration-default-half) var(--cubic-default);
  --animation-default-quarter: var(--duration-default-quarter) var(--cubic-default);
  --animation-ease: 0.2s ease;
  --animation-ease-double: 0.4s ease;
  --cubic-bounce: linear(
    0,
    0.5737 7.6%,
    0.8382 11.87%,
    0.9463 14.19%,
    1.0292 16.54%,
    1.0886 18.97%,
    1.1258 21.53%,
    1.137 22.97%,
    1.1424 24.48%,
    1.1423 26.1%,
    1.1366 27.86%,
    1.1165 31.01%,
    1.0507 38.62%,
    1.0219 42.57%,
    0.9995 46.99%,
    0.9872 51.63%,
    0.9842 58.77%,
    1.0011 81.26%,
    1
  );
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --btn-height: 3em;
    --padding-xl: 10em;
    --padding-l: 7.5em;
    --padding-m: 5em;
    --padding-s: 3.75em;
    --container-padding: 0.625em;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
  }
}
/* ------------------------- Container -------------------------  */

/* Desktop */
@media screen and (min-width: 992px) {
  .container {
    max-width: var(--size-container);
    padding: 0 var(--container-padding);
  }

  .container.is--m {
    max-width: calc(var(--size-container) * 0.825);
  }

  .container.is--sm {
    max-width: calc(var(--size-container) * 0.65);
  }

  .container.is--s {
    max-width: calc(var(--size-container) * 0.5);
  }
}

/* Tablet & Mobile */
@media screen and (max-width: 991px) {
  .container {
    max-width: 100%;
    padding: 0 var(--container-padding);
  }

  .container.is--md-m {
    padding: 0 var(--gap-m);
  }
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 850;
    --size-container-min: 768px;
    --size-container-max: 991px;
  }

  .dash {
    --size-container-ideal: 1072;
    --size-container-min: 840px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 320px;
    --size-container-max: 479px;
  }

  .dash {
    --size-container-ideal: 420;
  }
}

/* ------------------------- Dashboard ------------------------------------------- */

main {
  /* Sizes */
  --dash-side-width: 19em;
  --dash-col-width: calc(
    ((99.99vw - (var(--dash-side-width) + 4em)) / var(--dash-columns)) -
      (var(--dash-col-gap) * ((var(--dash-columns) - 1) / var(--dash-columns)))
  );
  --dash-col-width-half: calc(
    ((99.99vw - (var(--dash-side-width) + 4em)) / (var(--dash-columns) * 2)) -
      (var(--dash-col-gap) * (((var(--dash-columns) * 2) - 1) / (var(--dash-columns) * 2)))
  );
  --dash-columns: 3;
  --dash-col-gap: 1.5em;
  --dash-content-width: calc(
    100vw - (var(--dash-side-width) + var(--dash-col-width) + 5.5em)
  ); /* 3 columns */
}

/* Desktop */
@media screen and (min-width: 768px) and (max-width: 1500px) {
  main[data-barba-namespace="icons"] {
    --dash-columns: 2.5;
  }
}
@media screen and (min-width: 1908px) {
  main {
    --dash-columns: 4;
  }
  main:is([data-barba-namespace="resource"], [data-barba-namespace="lesson"]) {
    --dash-columns: 3;
  }
  main[data-barba-namespace="icons"] {
    --dash-columns: 4;
  }
}
@media screen and (min-width: 2276px) {
  main {
    --dash-columns: 5;
  }
  main:is([data-barba-namespace="resource"], [data-barba-namespace="lesson"]) {
    --dash-columns: 4;
  }
  main[data-barba-namespace="icons"] {
    --dash-columns: 4.5;
  }
}
@media screen and (min-width: 2400px) {
  main[data-barba-namespace="icons"] {
    --dash-columns: 5;
  }
}
@media screen and (min-width: 2550px) {
  main[data-barba-namespace="icons"] {
    --dash-columns: 6;
  }
}

/* Dashboard collapsed */
body[data-dash-collapsed="true"],
body[data-dash-collapsed="true"] main {
  --dash-side-width: var(--dash-side-width-collapsed);
}

@media screen and (min-width: 1700px) {
  [data-dash-collapsed="true"] main {
    --dash-columns: 4;
  }
  [data-dash-collapsed="true"]
    main:is([data-barba-namespace="resource"], [data-barba-namespace="lesson"]) {
    --dash-columns: 3;
  }
  [data-dash-collapsed="true"] main[data-barba-namespace="icons"] {
    --dash-columns: 3.5;
  }
}
@media screen and (min-width: 2068px) {
  [data-dash-collapsed="true"] main {
    --dash-columns: 5;
  }
  [data-dash-collapsed="true"]
    main:is([data-barba-namespace="resource"], [data-barba-namespace="lesson"]) {
    --dash-columns: 4;
  }
  [data-dash-collapsed="true"] main[data-barba-namespace="icons"] {
    --dash-columns: 4;
  }
}
@media screen and (min-width: 2220px) {
  [data-dash-collapsed="true"] main[data-barba-namespace="icons"] {
    --dash-columns: 5;
  }
}
@media screen and (min-width: 2370px) {
  [data-dash-collapsed="true"] main[data-barba-namespace="icons"] {
    --dash-columns: 6;
  }
}

/* Tablet */
@media screen and (max-width: 991px) {
  main {
    /* Sizes */
    --dash-col-width: calc(
      ((99.99vw - 2em) / var(--dash-columns)) -
        (var(--dash-col-gap) * ((var(--dash-columns) - 1) / var(--dash-columns)))
    );
    --dash-col-width-half: calc(
      ((99.99vw - 2em) / (var(--dash-columns) * 2)) -
        (var(--dash-col-gap) * (((var(--dash-columns) * 2) - 1) / (var(--dash-columns) * 2)))
    );
    --dash-hero-height-top-shrinked: calc(1.625em + 2em + 2em);
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  main {
    /* Sizes */
    --dash-columns: 1;
    --dash-col-gap: 1em;
    --dash-top-height: 5.5em;
    --dash-hero-height-top: 8em;
  }

  [data-dash-collapsed="true"] main {
    --dash-columns: 1;
  }
  main[data-barba-namespace="icons"] {
    --dash-columns: 1;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  main {
  }
}

/* ------------------------- Variables - Colors ------------------------------------------- */

:root {
  /* Colors (not changing with Dark/Light Theme) */
  --color-ignore-neutral-100: #ffffff;
  --color-ignore-neutral-200: #f4f4f4;
  --color-ignore-neutral-300: #eaeaea;
  --color-ignore-neutral-400: #e1e1e1;
  --color-ignore-neutral-450: #d8d8d8;
  --color-ignore-neutral-475: #b8b8b8;
  --color-ignore-neutral-500: #817f7f;
  --color-ignore-neutral-525: #4f4c4c;
  --color-ignore-neutral-550: #393636;
  --color-ignore-neutral-600: #312e2e;
  --color-ignore-neutral-700: #2a2727;
  --color-ignore-neutral-800: #201d1d;
  --color-ignore-neutral-900: #151313;
  --color-ignore-neutral-950: #000000;
  --color-ignore-white: var(--color-ignore-neutral-100);
  --color-ignore-light: var(--color-ignore-neutral-200);
  --color-ignore-dark: var(--color-ignore-neutral-800);
  --color-ignore-black: var(--color-ignore-neutral-950);

  --color-ignore-rgb-dark: 32, 29, 29;
  --color-ignore-rgb-light: 249, 249, 249;
  --color-ignore-rgb-black: 0, 0, 0;
  --color-ignore-rgb-white: 255, 255, 255;

  /* Colors Theme */
  --color-neutral-100: var(--color-ignore-neutral-100);
  --color-neutral-200: var(--color-ignore-neutral-200);
  --color-neutral-300: var(--color-ignore-neutral-300);
  --color-neutral-400: var(--color-ignore-neutral-400);
  --color-neutral-450: var(--color-ignore-neutral-450);
  --color-neutral-475: var(--color-ignore-neutral-475);
  --color-neutral-500: var(--color-ignore-neutral-500);
  --color-neutral-525: var(--color-ignore-neutral-525);
  --color-neutral-550: var(--color-ignore-neutral-550);
  --color-neutral-600: var(--color-ignore-neutral-600);
  --color-neutral-700: var(--color-ignore-neutral-700);
  --color-neutral-800: var(--color-ignore-neutral-800);
  --color-neutral-900: var(--color-ignore-neutral-900);
  --color-neutral-950: var(--color-ignore-neutral-950);
  --color-white: var(--color-ignore-neutral-100);
  --color-light: var(--color-ignore-neutral-200);
  --color-dark: var(--color-ignore-neutral-800);
  --color-black: var(--color-ignore-neutral-950);

  /* RGB Colors, for transparent RGBA */
  --color-rgb-dark: var(--color-ignore-rgb-dark);
  --color-rgb-light: var(--color-ignore-rgb-light);
  --color-rgb-black: var(--color-ignore-rgb-black);
  --color-rgb-white: var(--color-ignore-rgb-white);
  --color-rgb-gray: 129, 127, 127;
  --color-rgb-tint: 40, 40, 40;
}

/* Dashboard Theme Dark */
[data-dash-theme="dark"] {
  /* Colors */
  --color-neutral-100: var(--color-ignore-neutral-900);
  --color-neutral-200: var(--color-ignore-neutral-800);
  --color-neutral-300: var(--color-ignore-neutral-700);
  --color-neutral-400: var(--color-ignore-neutral-600);
  --color-neutral-450: var(--color-ignore-neutral-550);
  --color-neutral-475: var(--color-ignore-neutral-525);
  --color-neutral-500: var(--color-ignore-neutral-500);
  --color-neutral-525: var(--color-ignore-neutral-475);
  --color-neutral-550: var(--color-ignore-neutral-450);
  --color-neutral-600: var(--color-ignore-neutral-400);
  --color-neutral-700: var(--color-ignore-neutral-300);
  --color-neutral-800: var(--color-ignore-neutral-200);
  --color-neutral-900: var(--color-ignore-neutral-100);
  --color-white: var(--color-ignore-neutral-900);
  --color-light: var(--color-ignore-neutral-800);
  --color-dark: var(--color-ignore-neutral-200);
  --color-black: var(--color-ignore-neutral-100);
  --color-saved: var(--color-ignore-saved-dark);

  /* RGB Colors, for transparent RGBA */
  --color-rgb-dark: var(--color-ignore-rgb-light);
  --color-rgb-light: var(--color-ignore-rgb-dark);
  --color-rgb-black: var(--color-ignore-rgb-white);
  --color-rgb-white: var(--color-ignore-rgb-black);
  --color-rgb-tint: 222, 210, 210;
}