@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Teachers:ital,wght@0,400..800;1,400..800&display=swap');
@import url("https://www.nerdfonts.com/assets/css/webfont.css");

:root,
::backdrop {
  /* set sans-serif & mono fonts */
  --sans-font: Teachers, -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
    "Helvetica Neue", sans-serif;
  --mono-font: "JetBrains Mono", Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  --standard-border-radius: 5px;

  /* default colors */
  --bg: #EEEEEE;
  --bg-light: #CBCDCD;
  --text: #41474E;
  --text-light: #646868;
  --accent: #D26878;
  --accent-light: #e08f67;
  --accent-text: var(--bg);
  --border: #646868;
  --link: #5690AF;
}

/* theme media queries */
@media (prefers-color-scheme: dark) {
  :root,
  ::backdrop {
    color-scheme: dark;
    --bg: #292222;
    --bg-light: #494646;
    --text: #D6D6D6;
    --text-light: #dbbcbc;
    --accent: #78B6AD;
    --accent-light: #e58787;
    --accent-text: var(--bg);
    --border: #dbbcbc;
    --link: #e2a2a2;
  }
  img,
  video {
    opacity: 0.8;
  }
}

@media (prefers-color-scheme: light) {
  :root,
  ::backdrop {
    color-scheme: light;
    --bg: #EEEEEE;
    --bg-light: #cdcbcb;
    --text: #4e4141;
    --text-light: #686464;
    --accent: #d26868;
    --accent-light: #e06767;
    --accent-text: var(--bg);
    --border: #686464;
    --link: #af5656;
  }
}

[data-theme="light"] {
  /* default (light) theme */
  color-scheme: light;
    --bg: #EEEEEE;
    --bg-light: #cdcbcb;
    --text: #4e4141;
    --text-light: #686464;
    --accent: #d26868;
    --accent-light: #e06767;
    --accent-text: var(--bg);
    --border: #686464;
    --link: #af5656;
}

[data-theme="dark"] {
  color-scheme: dark;
    --bg: #292222;
    --bg-light: #494646;
    --text: #D6D6D6;
    --text-light: #dbbcbc;
    --accent: #78B6AD;
    --accent-light: #e58787;
    --accent-text: var(--bg);
    --border: #dbbcbc;
    --link: #e2a2a2;
}