@font-face {
  font-family: custom-font;
  font-weight: 100 900;
  font-style: normal oblique;
  font-stretch: 50% 200%;
  src: url("../font/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
}
:root {
  --global-font-size: 16px;
  --global-line-height: 1.4em;
  --global-space: 10px;
  --font-stack: custom-font, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --mono-font-stack: "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo,
    Monaco, "Courier New", Consolas, "Liberation Mono", monospace;
}
.theme-light {
  --background-color: #fff;
  --page-width: 60em;
  --font-color: #151515;
  --invert-font-color: #fff;
  --primary-color: #1a95e0;
  --secondary-color: #727578;
  --error-color: #d20962;
  --progress-bar-background: #727578;
  --progress-bar-fill: #151515;
  --code-bg-color: #e8eff2;
  --input-style: solid;
  --display-h1-decoration: none;
}
.theme-dark {
  --background-color: #222225;
  --page-width: 60em;
  --font-color: #e8e9ed;
  --invert-font-color: #222225;
  --secondary-color: #a3abba;
  --tertiary-color: #a3abba;
  --primary-color: #62c4ff;
  --error-color: #ff3c74;
  --progress-bar-background: #3f3f44;
  --progress-bar-fill: #62c4ff;
  --code-bg-color: #3f3f44;
  --input-style: solid;
  --display-h1-decoration: none;
}