:root {
  --bg: #e6dcd7;
  --text: #50463c;
  --link: #dc5014;
  --visited-color: #e1a076;
  --font-body: 'Spectral', serif;
  --font-mono: 'Roboto Mono', monospace;
}

body {
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text);
}

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

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #3c322d;
    --text: #d2c8c3;
    --link: #f0641e;
    --visited-color: #964b1e;
  }
}

body,
main,
article,
p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-body) !important;
}

.meta,
footer {
    font-family: var(--font-mono) !important;
    font-size: 0.8rem;  
}

ul.blog-posts li {
  display: flex;
  align-items: flex-start;
}

ul.blog-posts li span {
  flex: 0 0 130px;
}

.post-title:visited {
  color: var(--visited-color);
}

.post-content {
  display: flex;
  flex-direction: column;
}

.tags {
  font-size: 0.7rem;
}

.tags a {
  margin-right: 0.5rem;
  text-decoration: none;
}

@font-face {
    font-family: 'Spectral';
    src: url('/fonts/Spectral-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spectral';
    src: url('/fonts/Spectral-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Spectral';
    src: url('/fonts/Spectral-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('/fonts/RobotoMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Teranoptia';
    src: url('/fonts/Teranoptia-Furiae.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}