@font-face {
  font-family: space-grotesk;
  src: url("../font/SpaceGrotesk-VariableFont_wght.ttf");
}
:root {
  --global-font-size: 15px;
  --global-line-height: 1.4em;
  --global-space: 10px;
  --font-stack: space-grotesk, Menlo, Monaco, Lucida Console, Liberation Mono,
    DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  --mono-font-stack: space-grotesk, Menlo, Monaco, Lucida Console,
    Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New,
    monospace, serif;
}
.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;
  --switch-icon: "🌚";
}
.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;
  --switch-icon: "🌝";
}