@font-face {
  font-family: "Roobert VRT";
  src: url("../../box/fonts/RoobertVRT-Regular.woff2") format("woff2"),
       url("../../box/fonts/RoobertVRT-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roobert VRT";
  src: url("../../box/fonts/RoobertVRT-Bold.woff2") format("woff2"),
       url("../../box/fonts/RoobertVRT-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roobert VRT";
  src: url("../../box/fonts/RoobertVRT-Heavy.woff2") format("woff2"),
       url("../../box/fonts/RoobertVRT-Heavy.woff") format("woff");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* EDUbox stylebook 2023 */
  --edubox-marine-7: #011f49;
  --edubox-marine-6: #002b6c;
  --edubox-marine-5: #005aeb;
  --edubox-marine-4: #0081ff;
  --edubox-marine-3: #00aaff;
  --edubox-marine-2: #d0eaff;
  --edubox-marine-1: #e6f5ff;
  --edubox-tangerine-7: #4d0100;
  --edubox-tangerine-6: #ad1e1e;
  --edubox-tangerine-5: #e62323;
  --edubox-tangerine-4: #ff4944;
  --edubox-tangerine-3: #ff7882;
  --edubox-tangerine-2: #ffbfc3;
  --edubox-tangerine-1: #fff2f6;
  --edubox-emirald-7: #003400;
  --edubox-emirald-6: #165827;
  --edubox-emirald-5: #21891f;
  --edubox-emirald-4: #3ecf6e;
  --edubox-emirald-3: #6de19b;
  --edubox-emirald-2: #c3f0c7;
  --edubox-emirald-1: #eef7ee;
  --edubox-amber-7: #351900;
  --edubox-amber-6: #b17500;
  --edubox-amber-5: #ff9600;
  --edubox-amber-4: #ffbe32;
  --edubox-amber-3: #ffe682;
  --edubox-amber-2: #fdedce;
  --edubox-amber-1: #fffbf1;
  --edubox-midnight-7: #000;
  --edubox-midnight-6: #031037;
  --edubox-midnight-5: #3f4865;
  --edubox-midnight-4: #69788c;
  --edubox-midnight-3: #c1c1c6;
  --edubox-midnight-2: #f2eff0;
  --edubox-midnight-1: #fff;

  --edubox-font: "Roobert VRT", "Roobert", Arial, Helvetica, sans-serif;
  --edubox-text: var(--edubox-midnight-6);
  --edubox-background: var(--edubox-midnight-1);
  --edubox-focus: var(--edubox-midnight-6);
  --edubox-radius-s: 10px;
  --edubox-radius-m: 15px;
  --edubox-radius-l: 25px;
  --edubox-shadow: 0 0 20px rgb(0 0 0 / 8%);
  --edubox-content: 75rem;
  --edubox-reading: 48rem;
}