@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Ubuntu:wght@300;400;700&family=Audiowide&display=swap');

/* color variables */
:root {
  --theme-color: #0f8;
  --theme-dark: #040;
  --theme-bg: #020;
}

body {
  background-color: #000C00;
  background-color: var(--theme-bg);
  background: radial-gradient(ellipse at center,
    var(--theme-bg) 0%,
    var(--theme-bg) 50%,
    #000000 100%) fixed;
  color: #aca;
  /* Ubuntu */
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
  overflow-x: hidden;
  font-weight: 500;
}

body.light {
  background-color: #fff;
  background-color: var(--theme-bg);
  background: 
    radial-gradient(ellipse at center,
      #fff 0%,
      #eee 50%,
      var(--theme-bg) 100%) fixed,
    center/300% url('/light-bg.png'),
    url('/light-bg.png') repeat;
  background-blend-mode: multiply, multiply, multiply;
  color: #000;
}

.container {
  position: relative;
  padding: 0 2em;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: start;
  /* overflow: hidden;  Fix for text splay in iOS */
}

.title {
  /*letter-spacing: 0.25em;*/
  font-weight: 700;
  display: inline-block;
}

.chapter, .title, .header {
  position: relative;
  z-index: 1;
  margin: 0rem -0.01em 10rem -0.01em;

  text-align: center;
  line-height: 1;
  color: var(--theme-color);
  font-size: 2.5rem;
  font-family: 'AudioWide', sans-serif;
  font-weight: 600;
  /* letter-spacing: 0.15em; */

  -webkit-text-stroke-width: 0.025em;
  -webkit-text-stroke-color: var(--theme-dark);
  text-shadow: 
     0.1em   0.05em   0     #070707,
     0.2em   0.10em   0     #050505,
     0.3em   0.15em   0     #030303,
     0.4em   0.20em   0     #010101;
}

.chapter.red {
  color: #f22;
  -webkit-text-stroke-color: #400;
}

.chapter.amber {
  color: #ff2;
  -webkit-text-stroke-color: #440;
}

.chapter.blue {
  color: #22f;
  -webkit-text-stroke-color: #004;
}

.chapter.black {
  color: #222;
  -webkit-text-stroke-color: #000;
}

.chapter.purple {
  color: #f2f;
  -webkit-text-stroke-color: #404;
}

#chapter-0 {
  padding-bottom: 3em;
}

.old-title-shadow {
  text-shadow:
   /* outline */
     0       -0.1em   0 #000,
     0        0.1em   0 #000,
    -0.1em    0       0 #000,
     0.1em    0       0 #000,
    -0.1em   -0.1em   0 #000,
    -0.1em    0.1em   0 #000,
     0.1em   -0.1em   0 #000,

   /* drop shadow */
     /* SW edge */
    -0.05em   0.15em  2px #000,
     0        0.2em   2px #000,
     0.05em   0.25em  2px #000,
     0.1em    0.3em   2px #000,

     /* NE edge */
     0.15em  -0.05em  2px #000,
     0.2em    0       2px #000,
     0.25em   0.05em  2px #000,
     0.3em    0.1em   2px #000,

     /* SE corner */
     0.2em    0.3em   0 #000,
     0.3em    0.2em   0 #000,
     0.3em    0.3em   0 #000;
}

.title .simple-shadow {
  text-shadow: 
     0.1em   0.05em   0     #070707,
     0.2em   0.10em   0     #050505,
     0.3em   0.15em   0     #030303;
}

@media (min-width: 1200px) {
  .title-splay, .chapter-splay {
    display: block;
  }
  .title, .chapter {
    font-size: 4.5rem;
  }
  /*
  body.special.light {
    background-size: 200vw 200vh;
  }
  body.special:not(.light) {
    background-size: 200vw 200vh;
  }
  */
}

@media (max-width: 1000px) {
  .title-splay, .chapter-splay {
    font-size: 4.5vw;
  }
}

@media (max-width: 700px) {
  .title-splay, .chapter-splay {
    font-size: 6.5vw;
  }
  .title, .chapter {
    font-size: 2.5rem;
    letter-spacing: 0;
  }
  .tracklist {
    padding: 0;
  }
}

.author {
  display: inline-block;
}

.author a {
  text-decoration: none;
  color: #fff;
  text-shadow: 0 0 0.1em #000,
    -0.1em -0.1em 4px #000,
     0.1em -0.1em 4px #000,
    -0.1em  0.1em 4px #000,
     0.1em  0.1em 4px #000;
}

.author a:hover {
  text-decoration: underline;
  color: var(--theme-color);
}

body.light .author a {
  color: #000;
  text-shadow: 0 0 0.1em #fff;
}

.hook {
  font-size: 1.5rem;
  margin: 1em 0 15em 0;
  text-shadow: 0 0 0.1em #000,
    -0.1em -0.1em 4px #000,
     0.1em -0.1em 4px #000,
    -0.1em  0.1em 4px #000,
     0.1em  0.1em 4px #000;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

body.light .hook {
  color: #084;
  text-shadow: 0 0 0.1em #fff;
}

pre {
  text-indent: 4em;
  margin: 0;
  text-align: left;
}

pre.preamble {
  text-indent: 0;
  padding: 2em;
  text-align: justify;
}

code {
  /* fix for word-break: break-word */
  white-space: pre-wrap;
  word-break: normal;
  word-wrap: break-word;
  font-size: 0.9rem;
  line-height: 1;
}

p {
  padding: 0;
  margin: 0;
  text-shadow: 0 0 0.2em #000;
}

body.light p {
  color: #000;
  text-shadow: 0 0 0.2em #fff;
}

.dark-mode-button, .scroll-top-button {
  position: fixed;
  top: 0.5em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 5%;
  background-color: var(--theme-color);
  color: #000;
  text-decoration: none;
  font-size: 1.5em;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  z-index: 100;
  border: 0.1em solid #000;
  box-shadow: 0 0 0.2em #000;
  opacity: 0.5;
}

.scroll-top-button {
  right: 0.5em;
}

.dark-mode-button {
  left: 0.5em;
  text-shadow: 0 0 0.2em #000,
    0.2em 0.1em 0 #000;
}

.dark-mode-button:hover, .scroll-top-button:hover {
  box-shadow: 0 0 0.4em var(--theme-color);
  opacity: 1;
}

.card {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 1.1;
  position: absolute;
  z-index: 1;

  background-color: #fff;
  box-shadow: -3px 3px 10px rgba(0,0,0,.25), -2px 2px 2px rgba(0,0,0,1);
}

.card p {
  font-size: 160px;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  hyphenate-character: "-";
  hyphens: auto;
  overflow: hidden;
  margin: 0;
  user-select: none;
  color: black;
  /*font-variant: small-caps;*/
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  max-width: 600px;
  width: calc(100% - 2em);
  padding: 1em 2.5em 1em 1.5em;
  background-color: rgba(0, 0, 0, 0.95);
  border: 2px solid var(--theme-color);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
  z-index: 1000;
  text-align: left;
}

.toast p {
  margin: 0.5em 0;
  text-shadow: none;
  color: #ccc;
  font-size: 0.9rem;
  line-height: 1.4;
}

.toast p:first-of-type {
  margin-top: 0;
}

.toast p:last-of-type {
  margin-bottom: 0;
}

.toast strong {
  color: #f80;
}

.toast-close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  background: none;
  border: none;
  color: var(--theme-color);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 1.5em;
  height: 1.5em;
}

.toast-close:hover {
  color: #fff;
}

.toast.hidden {
  display: none;
}