@import "/iosevka-webfont/iosevka-ss17.css";

@media (prefers-color-scheme: light) {
  :root {
    --header-bg: #3d7ebb;
    --header-fg: white;
    --body-bg: #ecf1f8;
    --body-fg: black;
    --link: #1579cb;
    --link-hover: #3595e3;

    --shiki-color-background: #fafcff;
    --shiki-color-text: #5c6166;
    --shiki-token-comment: #4b4f5699;
    --shiki-token-keyword: #db6d1d;
    --shiki-token-parameter: #4fb8ed;
    --shiki-token-punctuation: #b3704f;
    --shiki-token-function: #c49606;
    --shiki-token-constant: #996fc3;
    --shiki-token-string: #709600;
    --shiki-token-string-expression: #709600;
    --shiki-token-link: #000000;

    --codeblock-bg: #fafcff;
    --codeblock-fg: #5c6166;
    --highlight-comment: #4b4f5699;
    --highlight-keyword: #db6d1d;
    --highlight-class: #4fb8ed;
    --highlight-operator: #b3704f;
    --highlight-function: #c49606;
    --highlight-number: #996fc3;
    --highlight-string: #709600;

    --button: #e2e9f1;
    --button-text: black;
    --button-border: #83b6f1;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --header-bg: #21598d;
    --header-fg: white;
    --body-bg: #17202c;
    --body-fg: white;
    --link: #3f9be6;
    --link-hover: #77bffa;

    --shiki-color-background: #1f2a39;
    --shiki-color-text: #cccac2;
    --shiki-token-comment: #b8cfe680;
    --shiki-token-keyword: #ffad66;
    --shiki-token-parameter: #87d7ff;
    --shiki-token-punctuation: #f29e74;
    --shiki-token-function: #ffd173;
    --shiki-token-constant: #dfbfff;
    --shiki-token-string: #d5ff80;
    --shiki-token-string-expression: #d5ff80;
    --shiki-token-link: #000000;

    --codeblock-bg: #1f2a39;
    --codeblock-fg: #cccac2;
    --highlight-comment: #b8cfe680;
    --highlight-keyword: #ffad66;
    --highlight-class: #87d7ff;
    --highlight-operator: #f29e74;
    --highlight-function: #ffd173;
    --highlight-number: #dfbfff;
    --highlight-string: #d5ff80;

    --button: #17202c;
    --button-text: white;
    --button-border: #406c9f;
  }
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.preload {
  transition: none;
}

body {
  font-family: "Fira Sans", sans-serif;
  margin: 0;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  background: var(--body-bg);
  color: var(--body-fg);
}

h2 { font-weight: 500; }

p { font-weight: 300; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.2s;
  font-weight: 400;
}

a:hover {
  color: var(--link-hover);
}

.monospace {
  font-weight: 300;
  font-family: "Iosevka SS17 Web", monospace;
}

.align-left {
  max-width: 70%;
  padding-top: 30px;
  margin: auto auto 12rem;
}

.align-center {
  max-width: 60%;
  padding-top: 30px;
  text-align: center;
  margin: auto auto 12rem;
}

header {
  padding: 20px;
  text-align: center;
  background: var(--header-bg);
  color: var(--header-fg);
}

.title {
  font-size: 48px;
  font-weight: 450;
}

.subtitle {
  font-size: 24px;
  font-weight: 300;
}

pre {
  max-width: 660px;
  margin: 0;
  padding: 20px;
  border-radius: 6px;
  overflow-x: auto;
  background-color: var(--codeblock-bg);
}

pre.shiki-code {
  display: none;
}

code {
  color: var(--codeblock-fg);
  font: 500 15px "Iosevka SS17 Web", monospace;
}

.input {
  cursor: text;
  padding: 3px 6px;
  background-color: var(--button);
  color: var(--button-text);
  border: 2px solid var(--button-border);
  border-radius: 4px;
  font: 13px "Fira Sans", sans-serif;
}

.button {
  cursor: pointer;
  padding: 3px 10px;
  background-color: var(--button);
  color: var(--button-text);
  border: 2px solid var(--button-border);
  border-radius: 4px;
  font: 13px "Fira Sans", sans-serif;
  transition-duration: 0.36s;
}

.button:hover {
  background-color: var(--button-border);
}

.h-comment  { color: var(--highlight-comment); }
.h-keyword  { color: var(--highlight-keyword); }
.h-class    { color: var(--highlight-class); }
.h-operator { color: var(--highlight-operator); }
.h-function { color: var(--highlight-function); }
.h-number   { color: var(--highlight-number); }
.h-string   { color: var(--highlight-string); }