@font-face{
  font-family: coolvetica;
  src: url(/stylesheets/fonts/Coolvetica-Regular.woff2);
}

@font-face{
  font-family: LinLibertine;
  src: url(/stylesheets/fonts/LinLibertine.woff2);
}

[data-theme="light"]{
  --c-bg: #faf8f7;
  --c-text: #252323;
  --c-link: #888d57;
  --c-link-hover: #afb390;
  --c-selection-bg: #6d6e52;
  --c-scrollbar: #dfd9d4;

  --c-outline:
  drop-shadow(-2px 0 0 var(--c-bg))
  drop-shadow(2px 0 0 var(--c-bg))
  drop-shadow(0 -2px 0 var(--c-bg))
  drop-shadow(0 2px 0 var(--c-bg))
  
  drop-shadow(-1px 0 0 #857d79)
  drop-shadow(1px 0 0 #857d79)
  drop-shadow(0 -1px 0 #857d79)
  drop-shadow(0 1px 0 #857d79);
}

[data-theme="dark"]{
  --c-bg: #252323;
  --c-text: #faf8f7;
  --c-link: #ecd0ab;
  --c-link-hover: #f7e4cc;
  --c-selection-bg: #af9260;
  --c-scrollbar: #443f3d;

  --c-outline:
  drop-shadow(-2px 0 0 var(--c-bg))
  drop-shadow(2px 0 0 var(--c-bg))
  drop-shadow(0 -2px 0 var(--c-bg))
  drop-shadow(0 2px 0 var(--c-bg))

  drop-shadow(-1px 0 0 #dfd9d4)
  drop-shadow(1px 0 0 #dfd9d4)
  drop-shadow(0 -1px 0 #dfd9d4)
  drop-shadow(0 1px 0 #dfd9d4);
}

*{
  box-sizing: border-box;
  image-rendering: pixelated;
  scrollbar-width: thin;
  scrollbar-color: var(--c-scrollbar) transparent;
}

::selection{
  color: #faf8f7;
  background: var(--c-selection-bg);
}

body{
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 14px;
  font-family: LinLibertine, Arial, serif;
  line-height: 1.5;
  text-align: justify;
}

img{
  user-select: none;
}

h1, h2, b{
  letter-spacing: 1px;
}

a{
  color: var(--c-link);
  text-decoration: 1px dotted underline;
}

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

ul{
  list-style-type: circle;
}

li{
  padding-left: 0.1em;

  ul{
    list-style-type: disc;
    padding-left: 1em;
  }

  li{
    margin: 0;
  }
}

blockquote{
  margin: 1em 1.75em;
}

hr{
  margin: 2em 5em;
  border: 0;
  border-bottom: 1px dotted var(--c-text);
  opacity: 0.25;
}

#return, #mode, #music-toggle{
  position: fixed;
  top: 1em;
  user-select: none;
  font-size: 18px;
  color: inherit;
}

#return{
  left: 1em;
  text-decoration: none;
  font-weight: bold;
}

#mode{
  right: 1em;
  background: var(--c-text);
  color: var(--c-bg);
  border: 1px solid var(--c-text);
  border-radius: 50%;
  outline: 1px solid var(--c-text);
  outline-offset: 1px;
  padding: 6px;
}

#music-toggle{
  left: 1em;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
}

#return:hover{
  transform: translateX(-2px);
}

#mode:hover{
  cursor: pointer;
  outline-offset: 2px;
}

#music-toggle:hover, #music-toggle.playing{
  transform: scale(1.15) rotate(5deg);
}