html {
  font-family: var(--font);
  /* This two make the font look thinner.*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--color-green-m);
  color: var(--color-green-light);
}

.err::selection {
  background-color: rgba(255, 255, 0, 0.3);
  color: yellow;
}

:is(h1, h2, h3, h4, h5, h6) + p {
  margin-top: 0;
}

article h1 {
  font-size: clamp(2.5rem, 12vw, 5rem);
  margin-block: clamp(0rem, 5vw, 1rem) 1.5rem;
}

h1.error {
  font-size: clamp(2.5rem, 10vw, 4rem);
}

h1.alt {
  font-size: clamp(1.9rem, 6vw, 3.5rem);
  margin-bottom: 0;
}

h2 {
  font-size: clamp(2rem, 8vw, 2.5rem);
  margin-top: clamp(1rem, 5vw, 2.5rem);
  margin-bottom: 0.5rem;
}

h3 {
  font-size: clamp(1.8rem, 6vw, 2rem);
  margin-top: clamp(3rem, 5vw, 2rem);
  margin-bottom: 0.5rem;
}

.subtitle-h2 {
  margin: 0;
}

h4 {
  font-size: 1.5rem;
  margin-top: 1.8rem;
  margin-bottom: 0.5rem;
}

p {
  line-height: 1.7em;
  font-size: 1.5rem;
  margin-bottom: 0px;
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: auto;
  text-wrap: pretty;
}

p:has(#sigil) {
  margin-top: 40px;
  line-height: 0;
  font-size: 3.5rem;
}

.departure {
  font-family: var(--font-mono);
  font-size: 1.25rem;
}

.jb-mono {
  font-family: var(--font-jb-mono);
  font-size: 1.25rem;
}

jb-emoji {
  font-family: var(--font-jb-mono);
  font-size: 1.25rem;
  color: orange;
}

h1.alt {
  margin: 20px 0!important;
  line-height: 1;
  font-size: clamp(1.9rem, 6vw, 3.5rem);
}

noscript-span {
  font-size: 1.1rem;
  line-height: 1.7em;
  display: block;
  margin: 10px;
  text-align: center;

  text-decoration: underline wavy orangered 1px;
  text-underline-offset: 7px;
}

noscript-span,
.error {
  font-family: var(--font-mono);
  color: orangered;
}

.exit {
  font-family: Arial, Helvetica, sans-serif;
}

.exit:hover {
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
  cursor: default;
}

code,
.code {
  line-height: 1.7em;
  font-size: 1.5rem;

  margin-bottom: 10px;
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: auto;
  text-wrap: pretty;
  font-family: var(--font-mono);
  font-size: 1rem;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 7px;
  padding: 5px 15px;
  margin: 0;
  position: relative;
  margin-block: 20px;
  font-size: 1.1rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

article ol li::marker {
  content: unset;
  color: orange;
}

article ul li::marker {
  content: "◈ ";
  color: orange;
}

article ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 20px;
}

@media (min-width: 600px) {
  article ul {
    padding-left: 40px;
  }
}

article li {
  line-height: 1.7em;
  max-width: 65ch;
  margin-top: 5px;
}

em-oblique {
  font-style: oblique 10deg;
}

magic-spell {
  color: SlateBlue;
  font-size: 1.6rem;
  font-style: italic;
}

dev-notice {
  display: inline-block;
  text-align: center;
  width: 100%;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  -webkit-text-stroke: 1px black;
  font-size: 1.5rem;
  padding: 5px 20px;
  color: black;
  /* text-shadow: 1.5px 0 black, -1.5px 0 black, 0 1.5px black, 0 -1.5px black,
    1.5px 1.5px black, -1.5px -1.5px black, 1.5px -1.5px black,
    -1.5px 1.5px black; */
  background-image: repeating-linear-gradient(
    -45deg,
    hsla(52, 100%, 40%, 1) 0 20px,
    hsla(0, 0%, 7%, 1) 20px 40px
  );
}

dev-notice span {
  background-color: hsla(52, 100%, 40%, 1);
  padding-inline: 2px;
}

#devlog dev-notice {
  padding: 20px 5px;

  span {
    font-size: 2rem;
    text-transform: none;
    padding: 0px 2px 3px 2px;

    version-n {
      padding-left: 5px;
      font-family: var(--font-mono);
      -webkit-text-stroke: 0px black;
      font-size: 1.4rem;
      display: inline-block;
      transform: translateY(-2.5px);
    }
  }
}

.typewriter {
  font-family: var(--font-typewriter);
  font-size: 1.3rem;
}