vampysite/source/css/common.css

/* Fonts */

@font-face {
  font-family: "Cinzel Decorative";
  src: url(../fonts/CinzelDecorative-Regular.ttf);
  font-weight: normal;
}

@font-face {
  font-family: "Cinzel Decorative";
  src: url(../fonts/CinzelDecorative-Bold.ttf);
  font-weight: bold;
}

@font-face {
  font-family: "Crimson";
  src: url(../fonts/Crimson-Roman.otf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Crimson";
  src: url(../fonts/Crimson-Bold.otf);
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Crimson";
  src: url(../fonts/Crimson-Italic.otf);
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Crimson";
  src: url(../fonts/Crimson-BoldItalic.otf);
  font-weight: bold;
  font-style: italic;
}

/* Colors */

html {
  scrollbar-color: var(--accent) var(--bg);
  background: url(../assets/bg-noise-dark.png) repeat;
  background-color: var(--bg);
}

:root {
  --bg: #16121f;
  --bg-code: #110e18;
  --accent: #9aa6cb;
  --accent-dark: #747e9d;
  --text: #d5d6e8;
  --url: var(--accent);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #b6b7d4;
    --bg-code: #a5a6c5;
    --accent: #555a84;
    --accent-dark: #464b73;
    --text: #16121f;
    --url: var(--accent);
  }

  html {
    background: url(../assets/bg-noise-light.png);
    background-color: var(--bg);
  }
}

::selection {
  color: var(--bg);
  background: var(--accent);
}