:root {
  --color-0: #c59ff6;
  --color-1: #ff9d88;

  --bg-0: #2a2a2a;
  --fg-0: #e0e0e0;

  --bg-1: #2b2c2f;
  --fg-1: #dfdfdf;

  --fg-2: #b0b0b0;

  --content-width: 900px;
  --monospace: monospace;

  --bg-pattern-color0: #1c1c1c;
  --bg-pattern-color1: #5c4b70;

  --bg-pattern: 
    linear-gradient(var(--bg-pattern-color1) 1px, transparent 1px), 
    linear-gradient(to right, var(--bg-pattern-color1) 1px, var(--bg-pattern-color0) 1px);
  --bg-pattern-size: 3em 3em;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-0: #6c2ca2;
    --color-1: #5d006b;

    --bg-0: #ededed;
    --fg-0: #232627;

    /*--bg-1: #dddddd;*/
    /*--fg-1: #000000;*/

    --fg-2: #595959;

    --bg-pattern-color0: #C6B8D4;
    --bg-pattern-color1: #7a6480;

    --bg-pattern: 
      radial-gradient(circle at top left,transparent 9%, var(--bg-pattern-color1) 10% ,var(--bg-pattern-color1) 15% , transparent 16%) , 
      radial-gradient(circle at bottom left,transparent 9%, var(--bg-pattern-color1) 10% ,var(--bg-pattern-color1) 15% , transparent 16%), 
      radial-gradient(circle at top right ,transparent 9%, var(--bg-pattern-color1) 10% ,var(--bg-pattern-color1) 15% , transparent 16%) , 
      radial-gradient(circle at bottom right,transparent 9%, var(--bg-pattern-color1) 10% ,var(--bg-pattern-color1) 15% , transparent 16%),
      radial-gradient(circle, transparent 25%, var(--bg-pattern-color0)  26%),
      linear-gradient(45deg, transparent 46%, var(--bg-pattern-color1) 47%, var(--bg-pattern-color1) 52%, transparent 53%), 
      linear-gradient(135deg, transparent 46%, var(--bg-pattern-color1) 47%, var(--bg-pattern-color1) 52%, transparent 53%);
    --bg-pattern-size: 5em 5em;
  }
}

* { box-sizing: border-box; }

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

body {
  color: var(--fg-0);
  font-size: 1.2rem;
  line-height: 1.4;
  font-family: sans-serif;

  background: var(--bg-pattern);
  background-size: var(--bg-pattern-size);
  background-color: var(--bg-pattern-color0);
}

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

#nav-active-link{ color: var(--fg-0); }

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

p#top-link { text-align: right; }
p#top-link a { color: var(--color-1); }

hr {
  border: none;
  border-top: 2px dashed var(--color-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);
  border: 2px solid var(--color-1);
}

header {
  margin-top: 3em;
  padding: 1.5em 1.4em;
}

main {
  padding: 0.8em 1.4em;
}

header, main, footer {
  max-width: var(--content-width);
  width: 98%;
  margin: 2em auto;
  background-color: var(--bg-0);
  border-radius: 0.6em;
  box-shadow: 0.2em 0.2em 0.4em black;
}

footer {
  margin-bottom: 5em;
  padding: 1.5em 1.4em;
}

footer nav {
  margin-top: 1.2em;
}

code, code * {
  font-family: var(--monospace);
  font-size: 1em;
}

pre code {
  overflow-x: auto;
  display: block;
}

pre { border-radius: 4px; }

code {
  background-color: var(--bg-1);
  color: var(--fg-1);
  padding: 5px 8px 0px 8px;
  border-radius: 4px;
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

#site-logo-anchor { display: contents; }
#site-logo { height: 1.7em; }
#site-logo #logo--v { fill: var(--fg-0); }
#site-logo #logo--k { fill: var(--color-0); }

nav ul {
  list-style-type: none;
  display: flex;
  gap: 0.6em;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: center;
}

header nav ul {
  font-size: 1em;
  flex-wrap: nowrap;
}

.post-tags {
  list-style-type: none;
  display: flex;
  gap: 0.4em;
  flex-wrap: wrap;
  padding: 0;
}

footer #post-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .6em;
  justify-content: space-between;
}

footer #post-footer a {
  color: var(--color-1);
}

footer #copyright {
  font-size: 0.85em;
}

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

#index li:not(:last-child) {
  margin-bottom: 1.8em;
}

#index a { 
  color: var(--fg-0); 
  font-size: 1.2em;
  font-weight: bold;
}

#index a:visited { color: var(--fg-2); }

#index time, #index .length {
  color: var(--color-1);
  font-family: var(--monospace);
}