@charset "UTF-8";
/* TEXT STYLES */
a {
  color: var(--primary);
}
a:hover {
  color: var(--accent);
}
a:visited {
  color: var(--accent);
}

h2 {
  font-weight: bold;
}

p {
  text-wrap: pretty;
}

em {
  font-style: italic;
}

.preserve-line > p {
  text-wrap: auto !important;
}

.meta {
  font-family: var(--font-akkurat-mono);
  color: var(--primary-highlight);
  font-size: 2rem;
  max-width: 680px;
  margin-bottom: 12rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.meta p > a {
  color: var(--accent);
}
.meta p > a:hover {
  color: var(--accent-3);
}
.meta p > a:visited {
  color: var(--accent);
}
.meta p > a:visited:hover {
  color: var(--accent-3);
}

blockquote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  font-style: italic;
}

.caption.meta,
cite.meta {
  margin-bottom: 4rem;
}

svg.inline-icon {
  display: inline-block;
  vertical-align: middle;
}

.title-link {
  color: var(--primary);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.title-link:hover {
  color: var(--accent);
}
.title-link:visited {
  color: var(--primary);
}
.title-link:visited:hover {
  color: var(--accent);
}

pre {
  background: var(--core-90);
  width: 100%;
  font-size: 1.75rem;
  line-height: 1.8;
  border-radius: var(--border-radius);
  color: var(--core-5);
}
pre code {
  display: block;
  padding: 2rem;
  text-wrap: wrap;
}
pre.collapsible input[type=checkbox] {
  display: none;
}
pre.collapsible code {
  max-height: 15em;
  overflow: hidden;
  position: relative;
}
pre.collapsible code::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5em;
  background: linear-gradient(transparent, var(--core-90));
  pointer-events: none;
}
pre.collapsible label {
  display: block;
  padding: 1rem 2rem;
  background: var(--core-80, );
  border-top: 1px solid var(--core-70);
  color: var(--core-5);
  font-size: 1.5rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}
pre.collapsible label:hover {
  background: var(--core-70);
}
pre.collapsible label::before {
  content: "+ Mehr anzeigen";
}
pre.collapsible input[type=checkbox]:checked ~ code {
  max-height: none;
}
pre.collapsible input[type=checkbox]:checked ~ code::after {
  display: none;
}
pre.collapsible input[type=checkbox]:checked ~ label::before {
  content: "− Weniger anzeigen";
}

:root {
  --core-0: hsla(0, 0%, 100%, 1);
  --core-5: hsla(240, 9%, 95%, 1);
  --core-10: hsla(240, 9%, 87%, 1);
  --core-20: hsla(246, 9%, 79%, 1);
  --core-30: hsla(240, 8%, 71%, 1);
  --core-40: hsla(240, 8%, 62%, 1);
  --core-50: hsla(243, 9%, 54%, 1);
  --core-60: hsla(242, 10%, 46%, 1);
  --core-70: hsla(242, 15%, 38%, 1);
  --core-80: hsla(240, 20%, 29%, 1);
  --core-90: hsla(242, 31%, 21%, 1);
  --core-95: hsla(240, 58%, 13%, 1);
  --core-100: hsla(0, 0%, 0%, 1);
  --core-5-op-5: hsla(240, 8%, 95%, .05);
  --core-5-op-10: hsla(240, 8%, 95%, .1);
  --core-5-op-66: hsla(240, 8%, 95%, .66);
  --core-95-op-5: hsla(240, 58%, 13%, .05);
  --core-95-op-10: hsla(240, 58%, 13%, .1);
  --core-95-op-66: hsla(240, 58%, 13%, .66);
  --yellow-50: hsla(71, 100%, 50%, 1);
  --orange-50: hsla(28, 100%, 52%, 1);
  --red-50: hsla(347, 100%, 50%, 1);
  --pink-50: hsla(328, 100%, 54%, 1);
  --green-50: hsla(119, 100%, 50%, 1);
  --lila-peek: hsla(232, 100%, 76%, 1);
  --blue-10: hsla(245, 67%, 86%, 1);
  --blue-30: hsla(245, 83%, 66%, 1);
  --blue-50: hsla(245, 100%, 46%, 1);
  --blue-90: hsla(244, 78%, 20%, 1);
  --blue-50-op-80: hsla(245, 100%, 46%, .8);
  --yellow-50-op-80: hsla(71, 100%, 50%, .8);
  --sky-10: hsla(189, 74%, 86%, 1);
  --sky-50: hsla(188, 100%, 50%, 1);
  --sky-90: hsla(208, 77%, 21%, 1);
  --cyan-10: hsla(170, 61%, 86%, 1);
  --cyan-50: hsla(168, 87%, 50%, 1);
  --cyan-90: hsla(199, 68%, 19%, 1);
  --font-bradford: "Bradford", Garamond, "Times New Roman", serif;
  --font-akkurat-mono: "Akkurat Mono", monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light dark;
  --primary: light-dark(var(--core-95), var(--core-5));
  --primary-transparent: light-dark(var(--core-95-op-10), var(--core-5-op-10));
  --primary-highlight: light-dark(var(--core-60), var(--core-40));
  --border-light: light-dark(var(--core-30), var(--core-70));
  --secondary: light-dark(var(--core-5), var(--core-95));
  --secondary-transparent: light-dark(var(--core-5-op-10), var(--core-95-op-10));
  --secondary-highlight: light-dark(var(--core-0), var(--core-90));
  --accent: light-dark(var(--blue-50), var(--yellow-50));
  --accent-transparent: light-dark(var(--blue-50-op-80), var(--yellow-50));
  --accent-2: light-dark(var(--blue-30), var(--cyan-50));
  --accent-3: light-dark(var(--pink-50), var(--green-50));
  --accent-4: light-dark(var(--orange-50), var(--sky-50));
  --accent-inv: light-dark(var(--yellow-50), var(--blue-50));
  --accent-2-inv: light-dark(var(--cyan-50), var(--blue-30));
  --accent-3-inv: light-dark(var(--green-50), var(--pink-50));
  --accent-4-inv: light-dark(var(--sky-50), var(--orange-50));
  --base: 8px;
  --spacing-small: 2rem;
  --spacing: 4rem;
  --spacing-medium: 10rem;
  --spacing-large: 18rem;
  --border-radius: 1rem;
  --border-radius-extra: 4rem;
  --border-radius-round: 99rem;
  --transition-default: all .2s linear;
  font-size: var(--base);
  scroll-padding-top: 15rem;
}

::selection {
  background: var(--accent-inv);
  color: var(--primary);
}

html, body {
  height: auto;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  color: var(--primary);
  background-color: var(--secondary);
  font-family: var(--font-bradford);
  font-size: 4rem;
  line-height: 1.5;
  width: 100svw;
  max-width: 180rem;
  margin: 0 auto;
}

/* CORE BODY STRUCTURE */
nav,
main,
footer {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  margin: 5rem;
}

main {
  display: flex;
  flex-direction: column;
  gap: 0;
}

body > footer {
  margin-top: 20rem;
}
body > footer .meta {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  margin: 0;
}
body > footer .meta a {
  color: var(--primary-highlight);
}

/* MOBILE / DESKTOP ONLY*/
@media (max-width: 780px) {
  :root {
    --base: 6px;
  }
  nav,
  main,
  footer {
    margin: 4rem;
  }
}

/*# sourceMappingURL=style.css.map */