@font-face {
    font-family: 'Averia Serif Libre';
    src: url('AveriaSerifLibre-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('AveriaSerifLibre-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('AveriaSerifLibre-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('AveriaSerifLibre-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('AveriaSerifLibre-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('AveriaSerifLibre-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Alte Haas Grotesk';
    src: url('AlteHaasGrotesk_Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
  --primary-color: black;
  --secondary-color: white;
  --accent-color: #98effe;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='a' color-interpolation-filters='sRGB' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.85 0 0 0 0 0.92 0 0 0 0 1 20 0 0 0 -16'/%3E%3C/filter%3E%3Cfilter id='b' color-interpolation-filters='sRGB' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.96 0 0 0 0 0.86 40 0 0 0 -33.6'/%3E%3CfeGaussianBlur stdDeviation='0.6'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family: 'Libre Baskerville', 'Garamond', serif;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 80ch;
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

header {
    border-bottom: 8px double var(--primary-color);
    margin-top: 1rem;
    margin-bottom: 0;
    position: relative;
}

header img {
    position: absolute;
    width: auto;
    height: 32px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: -12px;
}

footer {
    margin-top: auto;
    margin-bottom: 1rem;
}

footer nav ul {
    margin-top: 6rem;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-family: 'Alte Haas Grotesk', 'Helvetica', 'Arial', sans-serif;
}

footer nav ul a {
    text-decoration: none;
}

footer nav ul a:hover,
footer nav ul a:active {
    text-decoration: underline;
}

h1, h2, h3 {
    font-family: 'Alte Haas Grotesk', 'Helvetica', 'Arial', sans-serif;
    overflow-wrap: break-word;
}

main {
    margin: 0 1rem;
}

main h1 {
    font-size: 5rem;
    margin-top: 6rem;
    margin-bottom: 4rem;
}

main h1::first-letter {
    border: 2px solid var(--primary-color);
    margin-right: 0.5rem;
    padding:  0 1rem 0;
}

main h2 {
    font-size: 2rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

p {
    margin: 0;
    text-indent: 1.5rem;
    text-align: justify;
    text-justify: inter-word;
}

a {
    color: inherit;
}

#stars {
    width: 100%;
    height: 16px;
    background-color: var(--primary-color);
    background-image:
        radial-gradient(1.5px 1.5px at 30px 5px, var(--secondary-color) 60%, transparent 100%),
        radial-gradient(1.5px 1.5px at 100px 11px, var(--secondary-color) 60%, transparent 100%),
        radial-gradient(1px 1px at 12px 8px, var(--secondary-color) 60%, transparent 100%),
        radial-gradient(1px 1px at 50px 13px, var(--secondary-color) 60%, transparent 100%),
        radial-gradient(1px 1px at 70px 6px, var(--secondary-color) 60%, transparent 100%),
        radial-gradient(1px 1px at 140px 4px, var(--secondary-color) 60%, transparent 100%);
    background-size:
        83px 16px,
        127px 16px,
        41px 16px,
        71px 16px,
        97px 16px,
        149px 16px;
    background-repeat: repeat-x;
}

body#toc-page {
    background-color: var(--primary-color);
    color: var(--accent-color);
}

body.twin-suns {
    --accent-color: #98effe;
    background-color: #0b1a5c;
    background-image:
        var(--grain),
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.5) 100%),
        radial-gradient(circle 12vmax at 22% 17%,
            #fffbe8 0%, #ffe9b8 10%,
            rgba(255, 205, 140, 0.6) 28%,
            rgba(255, 160, 100, 0.2) 60%,
            transparent 100%),
        radial-gradient(circle 8vmax at 85% 31%,
            #fffbe8 0%, #ffe9b8 10%,
            rgba(255, 205, 140, 0.6) 28%,
            rgba(255, 160, 100, 0.2) 60%,
            transparent 100%),
        linear-gradient(to bottom,
            #050a3a 0%,
            #0b1a5c 25%,
            #1c2a6b 42%,
            #4a4470 55%,
            #9a6a5a 66%,
            #d98f55 76%,
            #e8aa66 82%,
            #c9824a 82%,
            #b86f3c 92%,
            #8a4f2e 100%);
    background-blend-mode: overlay, normal, normal, normal, normal;
    background-attachment: fixed;
}

body.hoth {
    --accent-color: #e4f6ff;
    background-color: #0e1b2e;
    background-image:
        var(--grain),
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.55) 100%),
        radial-gradient(circle 6vmax at 72% 62%,
            #ffffff 0%,
            rgba(235, 248, 255, 0.7) 20%,
            rgba(200, 225, 245, 0.25) 55%,
            transparent 100%),
        linear-gradient(to bottom,
            #0b1626 0%,
            #1d3350 30%,
            #4a6d94 55%,
            #9ab8d2 74%,
            #cfe2ef 80%,
            #b4cbdb 80%,
            #8fa9bd 90%,
            #5d7589 100%);
    background-blend-mode: overlay, normal, normal, normal;
    background-attachment: fixed;
}

body.dagobah {
    --accent-color: #c4f2b0;
    background-color: #060d09;
    background-image:
        var(--grain),
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.4) 100%),
        radial-gradient(ellipse 45vmax 22vmax at 50% 66%,
            rgba(190, 225, 170, 0.35) 0%,
            rgba(120, 170, 120, 0.15) 45%,
            transparent 100%),
        radial-gradient(ellipse 30vmax 14vmax at 18% 50%,
            rgba(170, 210, 160, 0.2) 0%,
            transparent 100%),
        linear-gradient(to bottom,
            #040a07 0%,
            #0b1d14 30%,
            #1b3724 52%,
            #36553a 68%,
            #243a28 78%,
            #1a2d1d 78%,
            #0d1a10 90%,
            #050b07 100%);
    background-blend-mode: overlay, normal, normal, normal, normal;
    background-attachment: fixed;
}

body.bespin {
    --accent-color: #ffe9d2;
    background-color: #2a1a5e;
    background-image:
        var(--grain),
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.55) 100%),
        radial-gradient(circle 9vmax at 50% 74%,
            #fff6dc 0%,
            #ffd9a0 15%,
            rgba(255, 170, 110, 0.55) 40%,
            transparent 100%),
        radial-gradient(ellipse 70vmax 7vmax at 25% 84%,
            rgba(255, 190, 170, 0.35) 0%,
            transparent 100%),
        linear-gradient(to bottom,
            #1d1450 0%,
            #3f2275 22%,
            #8a3a86 45%,
            #d4567a 62%,
            #f58f64 72%,
            #ffc27e 78%,
            #e07a7a 78%,
            #b2527f 90%,
            #5a2f6e 100%);
    background-blend-mode: overlay, normal, normal, normal, normal;
    background-attachment: fixed;
}

body.endor {
    --accent-color: #ffe0a3;
    background-color: #0a1424;
    background-image:
        var(--grain),
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.45) 100%),
        radial-gradient(circle 14vmax at 70% 66%,
            rgba(255, 220, 150, 0.7) 0%,
            rgba(255, 170, 90, 0.25) 40%,
            transparent 100%),
        radial-gradient(ellipse 40vmax 10vmax at 70% 74%,
            rgba(255, 200, 130, 0.2) 0%,
            transparent 100%),
        linear-gradient(to bottom,
            #060d1a 0%,
            #0f2331 28%,
            #1f4a48 52%,
            #3a6a4a 68%,
            #4a6d3c 78%,
            #243016 78%,
            #131c0d 90%,
            #070a05 100%);
    background-blend-mode: overlay, normal, normal, normal, normal;
    background-attachment: fixed;
}

body.yavin-4 {
    --accent-color: #bff3e6;
    background-color: #120a3a;
    background-image:
        var(--grain),
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.5) 100%),
        radial-gradient(circle 20vmax at 76% 26%,
            #f6b56e 0%,
            #e08a45 45%,
            #b0582c 78%,
            #5e2c25 98%,
            transparent 100%),
        radial-gradient(circle 36vmax at 76% 26%,
            rgba(255, 160, 90, 0.4) 0%,
            rgba(255, 120, 80, 0.15) 55%,
            transparent 100%),
        linear-gradient(to bottom,
            #0a0630 0%,
            #1a1050 30%,
            #3a1d5e 52%,
            #6a3a62 68%,
            #a05a58 76%,
            #0f2418 76%,
            #0a1810 90%,
            #040a06 100%);
    background-blend-mode: overlay, normal, normal, normal, normal;
    background-attachment: fixed;
}

body.death-star {
    --accent-color: #cfe9ff;
    background-color: #02040a;
    background-image:
        var(--grain),
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.3) 100%),
        radial-gradient(circle 90vmax at 50% calc(80% + 90vmax),
            #3a4452 0%,
            #566273 94%,
            #b7c9dc 99%,
            transparent 100%),
        radial-gradient(1px 1px at 30px 40px, #fff 60%, transparent 100%),
        radial-gradient(1.5px 1.5px at 100px 90px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 60px 20px, #cfe9ff 60%, transparent 100%),
        linear-gradient(to bottom,
            #01030a 0%,
            #060b1c 60%,
            #0d1a2c 80%,
            #0d1a2c 100%);
    background-size:
        auto,
        auto,
        auto,
        137px 151px,
        211px 173px,
        97px 113px,
        auto;
    background-blend-mode: overlay, normal, normal, normal, normal, normal, normal;
    background-attachment: fixed;
}

body.deep-space {
    --accent-color: #c9ddff;
    background-color: #05081a;
    background-image:
        var(--grain),
        radial-gradient(1.5px 1.5px at 521px 359px, #fff 60%, transparent 100%),
        radial-gradient(1.5px 1.5px at 118px 515px, #cfe9ff 60%, transparent 100%),
        radial-gradient(1px 1px at 35px 330px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 118px 207px, #cfe9ff 60%, transparent 100%),
        radial-gradient(1px 1px at 437px 957px, #fff 60%, transparent 100%),
        radial-gradient(2px 2px at 1015px 686px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 578px 11px, #fff 60%, transparent 100%),
        radial-gradient(2px 2px at 156px 749px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 116px 672px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 484px 760px, #fff 60%, transparent 100%),
        radial-gradient(1.5px 1.5px at 512px 513px, #cfe9ff 60%, transparent 100%),
        radial-gradient(1px 1px at 305px 935px, #fff3d6 60%, transparent 100%),
        radial-gradient(1px 1px at 340px 553px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 225px 1146px, #fff 60%, transparent 100%),
        radial-gradient(2px 2px at 715px 269px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 650px 845px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 280px 251px, #fff 60%, transparent 100%),
        radial-gradient(2px 2px at 435px 378px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 45px 598px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 569px 544px, #cfe9ff 60%, transparent 100%),
        radial-gradient(1.5px 1.5px at 837px 522px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 857px 336px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 1075px 204px, #cfe9ff 60%, transparent 100%),
        radial-gradient(1px 1px at 864px 1112px, #cfe9ff 60%, transparent 100%),
        radial-gradient(2px 2px at 901px 494px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 637px 67px, #fff 60%, transparent 100%),
        radial-gradient(1.5px 1.5px at 930px 587px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 980px 304px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 504px 835px, #cfe9ff 60%, transparent 100%),
        radial-gradient(2px 2px at 375px 569px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 497px 140px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 14px 172px, #fff3d6 60%, transparent 100%),
        radial-gradient(1px 1px at 467px 207px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 393px 331px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 621px 118px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 128px 82px, #cfe9ff 60%, transparent 100%),
        radial-gradient(2px 2px at 1163px 293px, #cfe9ff 60%, transparent 100%),
        radial-gradient(1px 1px at 91px 791px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 458px 61px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 310px 328px, #fff 60%, transparent 100%),
        radial-gradient(ellipse 60vmax 40vmax at 30% 70%,
            rgba(70, 90, 170, 0.18) 0%,
            transparent 100%),
        linear-gradient(to bottom,
            #02040e 0%,
            #07102a 55%,
            #0b1838 100%);
    background-size:
        auto,
        769px 613px,
        1187px 977px,
        1201px 617px,
        877px 1117px,
        691px 1217px,
        1109px 911px,
        937px 811px,
        643px 797px,
        733px 727px,
        673px 1031px,
        1163px 1279px,
        1249px 1103px,
        1061px 1021px,
        971px 1231px,
        839px 631px,
        1019px 1259px,
        1289px 1039px,
        887px 953px,
        653px 929px,
        883px 683px,
        1213px 751px,
        1193px 1291px,
        1181px 827px,
        1091px 1297px,
        1093px 677px,
        659px 719px,
        1051px 709px,
        1229px 857px,
        739px 947px,
        829px 607px,
        1237px 1123px,
        823px 1223px,
        1151px 1283px,
        647px 773px,
        967px 1129px,
        1009px 1033px,
        1277px 661px,
        941px 863px,
        1087px 859px,
        743px 601px,
        auto,
        auto;
    background-blend-mode: overlay, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
    background-attachment: fixed;
}

body.deep-space-noise {
    --accent-color: #c9ddff;
    background-color: #05081a;
    background-image:
        var(--grain),
        var(--stars),
        radial-gradient(ellipse 60vmax 40vmax at 30% 70%,
            rgba(70, 90, 170, 0.18) 0%,
            transparent 100%),
        linear-gradient(to bottom,
            #02040e 0%,
            #07102a 55%,
            #0b1838 100%);
    background-size: auto, 900px 900px, auto, auto;
    background-blend-mode: overlay, normal, normal, normal;
    background-attachment: fixed;
}

#toc-page > h1 {
    color: var(--accent-color);
    font-size: 4rem;
    margin-top: 6rem;
    margin-left: 2rem;
    margin-right: 2rem;
}

#table-of-contents {
    border-top: 2px solid var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    max-width: max-content;
    margin-top: auto;
    margin-bottom: 16rem;
    margin-left: auto;
    margin-right: 2rem;
}

#table-of-contents h1 {
    border-top: 1px solid var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
    margin: 2px 0 0;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}

#table-of-contents h2 {
    border-top: 1px solid var(--accent-color);
    margin: 0;
    padding-top: 0.2rem;
}

#table-of-contents ul {
    margin: 0 0 0.2rem;
    padding: 0;
    list-style-type: none;
    display: block;
}

#table-of-contents ul:last-of-type {
    border-bottom: 1px solid var(--accent-color);
    margin-bottom: 2px;
    padding-bottom: 0.2rem;
}

#table-of-contents a {
    text-decoration: none;
}

#table-of-contents a:hover, a:active {
    text-decoration: underline;
}

@media only screen and (max-width: 450px) {
    #table-of-contents {
        margin-left: 2rem;
    }
}

@media (prefers-color-scheme: dark) {
  :root {
        --primary-color: white;
        --secondary-color: black;
  }
}

@view-transition {
  navigation: auto;
  types: slide;
}