:root {
  --bg: #4385BE;
  --curve: #FFFCF0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #205EA6;
    --curve: #100F0F;
  }
}

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

canvas#curve {
  background: var(--bg);

  /* Fill the whole viewport. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  mask-image: linear-gradient(#000, #000), url("./meow.svg");
  mask-repeat: no-repeat, no-repeat;
  mask-position: 0px 0px, center;
  mask-size: 100% 100%, min(92vw, 1600px);
  mask-composite: exclude;
}

ul.nav li a {
  display: inline;
  color: var(--curve);
  font-weight: 500;
}

ul.posts li.post:not(:last-child) {
  border-bottom: 1px solid var(--bg);
}

a {
  color: var(--curve);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--bg);
  transition: all 0.35s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

a:hover {
  color: var(--curve);
  text-decoration: none;
  box-shadow: inset 0 -30px 0 var(--bg);
}

blockquote {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 5px solid var(--bg);
}