@use "sass:math";
@font-face { font-family: 'fairfax'; src: url("/static/fonts/fairfax.ttf"); }

:root { font-family: 'fairfax'; background-color: #1f232e; margin: 0; padding: 0; line-height: 1em; }

body { margin: 0; padding: 0; }

@keyframes fade-in { from { opacity: 0; }
  to { opacity: 1; } }

a { color: inherit; }

table { border-collapse: collapse; margin: 0.5em 0.5ch 0.5em 0.5ch; }

table th, table td { padding: 0.5em 0.5ch 0.5em 0.5ch; border: 1px solid; }

h1, h2, h3, h4, h5, h6 { position: relative; z-index: 1; overflow: hidden; text-align: center; line-height: 2em; margin: -1em 0ch -1em 0ch; }

h1::before, h1::after, h2::before, h2::after, h3::before, h3::after, h4::before, h4::after, h5::before, h5::after, h6::before, h6::after { position: absolute; top: 51%; overflow: hidden; width: 49%; height: 1px; content: '\a0'; background-color: #000000; }

h1::before, h2::before, h3::before, h4::before, h5::before, h6::before { margin-left: -50%; }

p { margin: 1em 0ch; }

blockquote { border-left: 1ch solid #a53551; padding-left: 1ch; margin-left: 0; }

pre:has(code) { font-family: inherit; background-color: #eee; }

code { font-family: inherit; background-color: #eee; }

ul { list-style: none; margin: 0 0 0 0ch; padding: 0 0 0 0.4ch; }

ul li { box-sizing: border-box; margin: 0 0 0 0ch; padding: 0 0 0 0.5ch; border-left: 1px solid #646464; white-space: normal; }

ul li:last-child { border-left: none; }

ul li:before { position: relative; top: -0.25em; height: 0.75em; width: 0.4ch; border-bottom: 1px solid #646464; content: ""; display: inline-block; left: -0.5ch; margin: 0 -0.4ch 0 0; }

ul li:last-child:before { border-left: 1px solid #646464; }

ul li:first-child:before { top: -0.25em; height: 0.4em; }

.splash { margin-inline: auto; width: 108ch; }

.splash pre { color: #e8e3e3; margin: 0; margin-inline: auto; width: min-content; float: right; }

.page { width: 100%; display: grid; grid-template-columns: 1fr [left] 24ch 4ch [main] 80ch [right] 0 1fr; margin-inline: auto; margin: 0; }

.page > .navbar, .page > .main { display: grid; grid-template-rows: [header] 12em 0em [content] minmax(10em, auto) 0em [footer] 8em; }

.page > .navbar > .header > canvas, .page > .main > .header > canvas { width: 24ch; height: 10em; padding: 1em 1ch 1em 1ch; margin: 0ch 0 6ch 0; box-sizing: border-box; object-fit: contain; image-rendering: pixelated; }

.page > .navbar > .header:not(.no-frame), .page > .navbar > .content > *, .page > .navbar > .footer, .page > .main > .header:not(.no-frame), .page > .main > .content > *, .page > .main > .footer { background-color: #e8e3e3; border-style: solid; border-color: #a53551; border-width: 1em 1ch 1em 1ch; box-shadow: 1ch 1em #000000; padding: 1em 1ch 1em 1ch; margin: 0ch 0 6ch 0; }

.page > .navbar > .header, .page > .main > .header { grid-row-start: header; }

.page > .navbar > .content, .page > .main > .content { grid-row: content / span 1; }

.page > .navbar > .footer, .page > .main > .footer { grid-row: footer / span 1; }

.page .navbar { grid-column: left / span 1; }

.page .main { grid-column: main / span 1; }

@keyframes rainbow-animate { 0% { color: #cb94ff; }
  20% { color: #028ba1; }
  40% { color: #4dc725; }
  60% { color: #ff941a; }
  80% { color: #d21b1b; }
  100% { color: #cb94ff; } }

@keyframes shake-animate { 0% { transform: translateY(1px); }
  100% { transform: translateY(-1px); } }

@keyframes spin-animate { 0% { transform: rotateY(0deg); }
  100% { transform: rotateY(-360deg); } }

.effect-rainbow .char, .effect-shake .char, .effect-wave .char, .effect-spin .char { display: table-cell; white-space: pre; animation-composition: accumulate; }

.effect-rainbow .char { animation: rainbow-animate 1.0s linear infinite; }

.effect-shake .char { animation: shake-animate 0.075s linear infinite alternate; }

.effect-rainbow .effect-shake .char, .effect-shake .effect-rainbow .char { animation: rainbow-animate 1s linear infinite, shake-animate 0.075s linear infinite alternate; }

.effect-wave .char { animation: shake-animate 0.30s ease-in-out infinite alternate; }

.effect-rainbow .effect-wave .char, .effect-wave .effect-rainbow .char { animation: rainbow-animate 1s linear infinite, shake-animate 0.30s ease-in-out infinite alternate; }

.effect-spin .char { animation: spin-animate 2.00s ease-in-out infinite; }

.effect-rainbow .effect-spin .char, .effect-spin .effect-rainbow .char { animation: rainbow-animate 1s linear infinite, spin-animate 2.00s ease-in-out infinite; }

.char:nth-child(10n + 0) { animation-delay: -2000ms !important; }

.char:nth-child(10n + 1) { animation-delay: -1900ms !important; }

.char:nth-child(10n + 2) { animation-delay: -1800ms !important; }

.char:nth-child(10n + 3) { animation-delay: -1700ms !important; }

.char:nth-child(10n + 4) { animation-delay: -1600ms !important; }

.char:nth-child(10n + 5) { animation-delay: -1500ms !important; }

.char:nth-child(10n + 6) { animation-delay: -1400ms !important; }

.char:nth-child(10n + 7) { animation-delay: -1300ms !important; }

.char:nth-child(10n + 8) { animation-delay: -1200ms !important; }

.char:nth-child(10n + 9) { animation-delay: -1100ms !important; }

.char:nth-child(10n + 10) { animation-delay: -1000ms !important; }

.char:nth-child(10n + 11) { animation-delay: -900ms !important; }

.char:nth-child(10n + 12) { animation-delay: -800ms !important; }

.char:nth-child(10n + 13) { animation-delay: -700ms !important; }

.char:nth-child(10n + 14) { animation-delay: -600ms !important; }

.char:nth-child(10n + 15) { animation-delay: -500ms !important; }

.char:nth-child(10n + 16) { animation-delay: -400ms !important; }

.char:nth-child(10n + 17) { animation-delay: -300ms !important; }

.char:nth-child(10n + 18) { animation-delay: -200ms !important; }

.char:nth-child(10n + 19) { animation-delay: -100ms !important; }

.char:nth-child(10n + 20) { animation-delay: 0ms !important; }