:root {
  --color-0: #f38ba8;
  --color-1: #eba0ac;

  --bg-0: #1e1e2e;
  --fg-0: #cdd6f4;

  --bg-1: #313244;
  --fg-1: #a6adc8;

  --selection-bg: #45475a;
  --selection-fg: #bac2de;

  --content-width: 600px;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-0: #8839ef;
    --color-1: #9a4dff;

    --bg-0: #e6e9ef;
    --fg-0: #4c4f69;

    --bg-1: #ccd0da;
    --fg-1: #5c5f77;

    --selection-bg: #bcc0cc;
    --selection-fg: #5c5f77;
  }
}

* { box-sizing: border-box; }

html { 
  scroll-behavior: smooth; 
  scrollbar-color: var(--color-0) var(--bg-0); 
}

body {
  color: var(--fg-0);
  background-color: var(--bg-0);
  font-size: 1.1em;
  line-height: 1.4;
  font-family: sans-serif;
  max-width: var(--content-width);
  width: 90%;
  margin: 2em auto;
  overflow-y: scroll;
}

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

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

a { color: var(--color-0); }
a:hover { color: var(--color-1); }

hr {
  border: none;
  border-top: 1px solid var(--color-0);
  margin: 1.2em auto 1.6em auto;
}

blockquote {
  padding: 0.2em 0.6em;
  margin-left: 1em;
  border-left: 0.2em solid var(--color-0);
  display:inline-flex;
}

blockquote p { margin: 0; }

figure { margin: 2em auto; }

figure figcaption { text-align: center; }

img {
  display: block;
  margin: 1em auto;
  max-width: 100%;
  height: auto;
  max-height: var(--content-width);
}

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

#top {
  position: absolute;
  top: 0;
}

#site-header { 
  margin-bottom: 2em; 
  border-bottom: 1px solid var(--color-0);
}

#site-header h1 { font-size: 1.4em; }
#site-header h1 a { text-decoration: none; }

#nav-active-link { color: var(--fg-0); }
nav ul {
  width: 100%;
  list-style-type: none;
  font-size: 1em;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

#site-footer { 
  font-size: 0.85em; 
  margin-top: 2em;
  margin-bottom: 5em;
  border-top: 1px solid var(--color-0);
}

p#top-link { 
  text-align: center; 
  padding-top: 1em;
}

ol#post-index {
  list-style-type: none;
  padding: 0;
}

ol#post-index a {
  display: grid;
  grid-template-columns: 6.7em 1fr;
  width: 100%;
  text-decoration: none;
  color: var(--fg-0);
  margin-bottom: 1em;
}

ol#post-index time { color: var(--color-1); }

ol#post-index a:visited { color: var(--fg-1); }