styles.css

/* fonts */

@font-face {
  font-family: "Berkeley Mono";
  font-weight: 400;
  font-style: normal;
  src: url("/fonts/BerkeleyMono-Regular.woff2") format("woff2"),
    url("/fonts/BerkeleyMono-Regular.woff") format("woff");
}

@font-face {
  font-family: "Berkeley Mono";
  font-weight: 700;
  font-style: normal;
  src: url("/fonts/BerkeleyMono-Bold.woff2") format("woff2"),
    url("/fonts/BerkeleyMono-Bold.woff") format("woff");
}

@font-face {
  font-family: "Berkeley Mono";
  font-weight: 400;
  font-style: italic;
  src: url("/fonts/BerkeleyMono-Italic.woff2") format("woff2"),
    url("/fonts/BerkeleyMono-Italic.woff") format("woff");
}

@font-face {
  font-family: "Berkeley Mono";
  font-weight: 700;
  font-style: italic;
  src: url("/fonts/BerkeleyMono-BoldItalic.woff2") format("woff2"),
    url("/fonts/BerkeleyMono-BoldItalic.woff") format("woff");
}

/* general */

:root {
  --color: #402000;
  --background-color: #fff0f8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color: #00ff80;
    --background-color: #101010;
  }
}

:root {
  box-sizing: border-box;
  background-color: var(--background-color);
  color: var(--color);

  font-family: "Berkeley Mono", monospace;
}

* {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0 max(2rem, (100vw - 40rem) / 2);
}

nav {
  font-size: 3rem;
}

nav,
footer {
  padding: 1rem 0;
  text-align: center;
}

hr {
  border: 0.0625rem solid var(--color);
}

a {
  color: inherit;
}

ul {
  list-style-type: "* ";
}

img {
  width: 100%;
}

img,
pre {
  border: 0.25em solid;
}

a:not(article a),
article h1 > a,
article h2 > a,
article h3 > a,
article h4 > a,
article h5 > a,
article h6 > a,
a.footnote {
  text-decoration: inherit;
}

a:hover {
  text-decoration: inherit;
  background-color: var(--color);
  color: var(--background-color);
}

a.box {
  display: block;
  text-align: center;
  padding: 0.25rem 0.5rem;
  border: 0.25rem solid;
}

a.box:hover {
  border-color: var(--color);
}

#ring {
  font-size: 2rem;
}

/* code blocks */

:root {
  --code-color: #303030;
  --code-background-color: #f8e8f0;

  --code-gray: #808080;
  --code-red: #d8031a;
  --code-orange: #ff8041;
  --code-yellow: #cfb015;
  --code-green: #01c26d;
  --code-blue: #156ebb;
  --code-purple: #982fcd;
  --code-pink: #ff4785;
}

@media (prefers-color-scheme: dark) {
  :root {
    --code-color: #d0d0d0;
    --code-background-color: #181818;

    --code-gray: #808080;
    --code-red: #ec475a;
    --code-orange: #ffaf00;
    --code-yellow: #ffd300;
    /* --code-green: #171916; */
    --code-blue: #397bf6;
    --code-purple: #a965ec;
    /* --code-pink: #bdb2ff; */
  }
}

:not(pre) > code::before,
:not(pre) > code::after {
  content: "`";

  color: var(--code-gray);
}

pre {
  background-color: var(--code-background-color);

  padding: 1rem;

  overflow-x: auto;
}

code {
  font-family: "Berkeley Mono", monospace;

  color: var(--code-color);
}

code.highlighted .attribute {
  color: var(--code-blue);
}

code.highlighted .comment {
  color: var(--code-gray);
}

code.highlighted .constant {
  color: var(--code-pink);
}

code.highlighted .function,
code.highlighted .constructor {
  color: var(--code-blue);
}

code.highlighted .keyword,
code.highlighted .builtin {
  color: var(--code-orange);
}

code.highlighted .module {
  color: var(--code-reds);
}

code.highlighted .operator {
  color: var(--code-orange);
}

code.highlighted .punctuation {
  color: var(--code-gray);
}

code.highlighted .string {
  color: var(--code-green);
}

code.highlighted .number {
  color: var(--code-yellow);
}

code.highlighted .tag {
  color: var(--code-blue);
}

code.highlighted .property {
  color: var(--code-purple);
}

code.highlighted .type {
  color: var(--code-pink);
}