/* Most of this comes from Simple.CSS, but I'm adding/modifying as I go along */

/* Global variables. */
:root {
    /* Set sans-serif & mono fonts */
    --sans-font: -apple-system, "OCR A Std", BlinkMacSystemFont, "Avenir Next", Avenir,
        "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
        "Helvetica Neue", sans-serif;
    --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    --standard-border-radius: 5px;
    --border-width: 0.5px;

    color-scheme: dark;
    --bg: #212121;
    --div-bg: #21212183;
    --accent-bg: #2b2b2b;
    --text: #dcdcdc;
    --text-light: #ababab;
    --border: #898EA4;
    --div-border: #2b2b2b;
    --accent: #fe90ef;
    --accent-hover: #c75db9;
    --accent-text: var(--bg);
    --code: #f06292;
    --preformatted: #ccc;
    --marked: #ffdd33;
    --disabled: #111;
    --bathroom-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23212121' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E");

    /* Add a bit of transparency so light media isn't so glaring in dark mode */
    img,
    video {
        opacity: 0.8;
    }
}

/* Reset box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reset default appearance */
textarea,
select,
input,
progress {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

@font-face {
    font-family: "OCR A Std";
    font-style: normal;
    font-weight: normal;
    src: local("OCR A Std") url(font/OCRAStd.woff) url(../font/OCRAStd.woff) format("woff");
}

html {
    /* Set the font globally */
    font-family: var(--sans-font);
    scroll-behavior: smooth;
}

/* Deals with the grid/layout of the body */
.container {
    display: grid;
    grid-template-columns: 1fr 12rem min(40rem, 90%) 12rem 1fr;
    grid-template-rows: min-content minmax(34rem, 100%) 4rem 1fr;
    grid-auto-columns: 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
    grid-template-areas:
        ". top-panel top-panel top-panel ."
        ". left-panel main-panel right-panel ."
        ". bottom-panel bottom-panel bottom-panel ."
        ". . . . .";
}

.left-panel {
    border: var(--border-width) solid var(--div-border);
    padding: 0.5rem;
    grid-area: left-panel;
    text-align: left;
}

.main-panel {
    grid-area: main-panel;
    padding: 2rem;
}

.main-panel text {
    position: relative;
    z-index: 2;
}

.right-panel {
    border: var(--border-width) solid var(--div-border);
    padding: 0.5rem;
    grid-area: right-panel;
    text-align: right;
}

.bottom-panel {
    grid-area: bottom-panel;
}

.top-panel {
    border: var(--border-width) solid var(--div-border);
    padding: 1rem;
    grid-area: top-panel;
    text-align: center;
    margin-top: 1rem;
}

body {
    color: var(--text);
    background-color: var(--bg);
    font-size: 1.15rem;
    line-height: 1.5;
    margin: 0;
}

/* Make the header bg full width, but the content inline with body */
body>header {
    background-color: var(--accent-bg);
    border-bottom: var(--border-width) solid var(--div-border);
    text-align: center;
    padding: 0.5rem 0.5rem 2rem 0.5rem;
    width: 100%;
    background-color: #2b2b2b;
    background-image: var(--bathroom-bg);
}

body>header>*:only-child {
    margin-block-start: 2rem;
}

body>header h1 {
    max-width: 1200px;
    margin: 1rem auto;
}

body>header p {
    max-width: 40rem;
    margin: 1rem auto;
}

/* Add a little padding to ensure spacing is correct between content and header nav */
main {
    padding-top: 1.5rem;
}

body>footer {
    margin-top: 4rem;
    padding: 2rem 1rem 1.5rem 1rem;
    color: var(--text-light);
    font-size: 0.9rem;
    text-align: center;
    border-top: var(--border-width) solid var(--div-border);
    background-color: var(--bg);
    position: relative;
    padding-bottom: 100%;
    background-color: #2b2b2b;
    background-image: var(--bathroom-bg);
}

/* Format headers */
h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.6rem;
    margin-top: 0.5rem;
}

h3 {
    font-size: 2rem;
    margin-top: 0.5rem;
}

h4 {
    font-size: 1.44rem;
}

h5 {
    font-size: 1.15rem;
}

h6 {
    font-size: 0.96rem;
}

p {
    margin: 1.5rem 0;
}

/* Prevent long strings from overflowing container */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* Fix line height when title wraps */
h1,
h2,
h3 {
    line-height: 1.1;
}

/* Reduce header size on mobile */
@media only screen and (max-width: 720px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2.1rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    h4 {
        font-size: 1.25rem;
    }
}

/* Format links & buttons */
a,
a:visited {
    color: var(--accent);
}

a:hover {
    text-decoration: none;
}

.button {
    width:100%;
    text-align: center;
}

button,
.button,
a.button,
/* extra specificity to override a */
input[type="submit"],
input[type="reset"],
input[type="button"] {
    border: var(--border-width) solid var(--accent);
    background-color: var(--accent);
    color: var(--accent-text);
    padding: 0.5em;
    text-decoration: none;
    line-height: normal;
}

.button[aria-disabled="true"],
input:disabled,
textarea:disabled,
select:disabled,
button[disabled] {
    cursor: not-allowed;
    background-color: var(--disabled);
    border-color: var(--disabled);
    color: var(--text-light);
}

input[type="range"] {
    padding: 0;
}

/* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */
abbr[title] {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

button:enabled:hover,
.button:not([aria-disabled="true"]):hover,
input[type="submit"]:enabled:hover,
input[type="reset"]:enabled:hover,
input[type="button"]:enabled:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    cursor: pointer;
}

.button:focus-visible,
button:focus-visible:where(:enabled),
input:enabled:focus-visible:where([type="submit"],
    [type="reset"],
    [type="button"]) {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Format navigation */
header nav {
    font-size: 1rem;
    line-height: 2;
    padding: 1rem 0 0 0;
}

/* Use flexbox to allow items to wrap, as needed */
header nav ul,
header nav ol {
    align-content: space-around;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* List items are inline elements, make them behave more like blocks */
header nav ul li,
header nav ol li {
    display: inline-block;
}

header nav a,
header nav a:visited {
    margin: 0 0.5rem 1rem 0.5rem;
    border: var(--border-width) solid var(--border);
    border-radius: var(--standard-border-radius);
    color: var(--text);
    display: inline-block;
    padding: 0.1rem 1rem;
    text-decoration: none;
}

header nav a:hover,
header nav a.current,
header nav a[aria-current="page"],
header nav a[aria-current="true"] {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--accent);
    cursor: pointer;
}

/* Reduce nav side on mobile */
@media only screen and (max-width: 720px) {
    header nav a {
        border: none;
        padding: 0;
        text-decoration: underline;
        line-height: 1;
    }

    header nav a.current {
        background: none;
    }
}

/* Consolidate box styling */
aside,
details,
pre,
progress {
    background-color: var(--accent-bg);
    border: var(--border-width) solid var(--border);
    border-radius: var(--standard-border-radius);
    margin-bottom: 1rem;
}

aside {
    font-size: 1rem;
    width: 30%;
    padding: 0 15px;
    margin-inline-start: 15px;
    float: right;
}

*[dir="rtl"] aside {
    float: left;
}

/* Make aside full-width on mobile
@media only screen and (max-width: 720px) {
    aside {
        width: 100%;
        float: none;
        margin-inline-start: 0;
    }
} */

article,
fieldset,
dialog {
    background-color: var(--bg);
    border: var(--border-width) solid var(--border);
    padding: 1rem;
    border-radius: var(--standard-border-radius);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

article h2:first-child,
section h2:first-child,
article h3:first-child,
section h3:first-child {
    margin-top: 1rem;
}


section {
    border-top: var(--border-width) solid var(--border);
    border-bottom: var(--border-width) solid var(--border);
    padding: 2rem 1rem;
    margin: 3rem 0;
}

/* Don't double separators when chaining sections */
section+section,
section:first-child {
    border-top: 0;
    padding-top: 0;
}

section+section {
    margin-top: 0;
}

section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

details {
    padding: 0.7rem 1rem;
}

summary {
    cursor: pointer;
    font-weight: bold;
    padding: 0.7rem 1rem;
    margin: -0.7rem -1rem;
    word-break: break-word;
}

details[open]>summary+* {
    margin-top: 0;
}

details[open]>summary {
    margin-bottom: 0.5rem;
}

details[open]> :last-child {
    margin-bottom: 0;
}

/* Format tables */
table {
    border-collapse: collapse;
    margin: 0.5rem;
}

figure>table {
    width: max-content;
    margin: 0;
}

th {
    border: 0;
    text-align: center;
    vertical-align: center;
    padding: 1rem 0 0 0;
}

th {
    background-color: var(--accent-bg);
    font-weight: bold;
}

td {
    border: 0;
    max-width: auto;
    text-align: center;
    vertical-align: top;
    padding: 0.5rem 0.75rem;
}

td img {
    display: block;
    max-width: 330px;
    height: auto;
    padding: 0.5rem 0;
}

tr:nth-child(even) {
    /* Set every other cell slightly darker. Improves readability. */
    background-color: var(--accent-bg);
}

table caption {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* Format forms */
textarea,
select,
input,
button,
.button {
    font-size: inherit;
    font-family: inherit;
    padding: 0.5em;
    margin-bottom: 0.5rem;
    border-radius: var(--standard-border-radius);
    box-shadow: none;
    max-width: 100%;
    display: inline-block;
}

textarea,
select,
input {
    color: var(--text);
    background-color: var(--bg);
    border: var(--border-width) solid var(--border);
}

label {
    display: block;
}

textarea:not([cols]) {
    width: 100%;
}

/* Add arrow to drop-down */
select:not([multiple]) {
    background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
        linear-gradient(135deg, var(--text) 51%, transparent 49%);
    background-position: calc(100% - 15px), calc(100% - 10px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-inline-end: 25px;
}

*[dir="rtl"] select:not([multiple]) {
    background-position: 10px, 15px;
}

/* checkbox and radio button style */
input[type="checkbox"],
input[type="radio"] {
    vertical-align: middle;
    position: relative;
    width: min-content;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
    display: inline-block;
}

input[type="radio"] {
    border-radius: 100%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--accent);
}

input[type="checkbox"]:checked::after {
    /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
    content: " ";
    width: 0.2em;
    height: 0.4em;
    border-radius: 0;
    position: absolute;
    top: 0.04em;
    left: 0.18em;
    background-color: transparent;
    border-right: solid var(--bg) 0.08em;
    border-bottom: solid var(--bg) 0.08em;
    font-size: 1.8em;
    transform: rotate(45deg);
}

input[type="radio"]:checked::after {
    /* creates a colored circle for the checked radio button  */
    content: " ";
    width: 0.3em;
    height: 0.3em;
    border-radius: 100%;
    position: absolute;
    top: 0.125em;
    background-color: var(--bg);
    left: 0.125em;
    font-size: 1.8em;
}

/* Makes input fields wider on smaller screens */
@media only screen and (max-width: 720px) {

    textarea,
    select,
    input {
        width: 100%;
    }
}

/* Set a height for color input */
input[type="color"] {
    height: 2.5rem;
    padding: 0.2rem;
}

/* do not show border around file selector button */
input[type="file"] {
    border: 0;
}

/* Misc body elements */
hr {
    border: none;
    height: var(--border-width);
    background: var(--border);
    margin: 1rem auto;
}

mark {
    padding: 2px 5px;
    border-radius: var(--standard-border-radius);
    background-color: var(--marked);
    color: black;
}

mark a {
    color: var(--accent);
}

img,
video {
    /* breaking my logos-slide animation
  max-width: 100%;
  */
    border-radius: var(--standard-border-radius);
    object-fit: cover;
    object-position: center;
}

figure {
    margin: 0;
    display: block;
    overflow-x: auto;
}

figure>img,
figure>picture>img {
    display: block;
    margin-inline: auto;
}

figcaption {
    position: sticky;
    left: 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-light);
    margin-block: 1rem;
}

blockquote {
    margin-inline-start: 2rem;
    margin-inline-end: 0;
    margin-block: 2rem;
    padding: 0.4rem 0.8rem;
    border-inline-start: 0.35rem solid var(--accent);
    color: var(--text-light);
    font-style: italic;
}

cite {
    font-size: 0.9rem;
    color: var(--text-light);
    font-style: normal;
}

dt {
    color: var(--text-light);
}

/* Use mono font for code elements */
code,
pre,
pre span,
kbd,
samp {
    font-family: var(--mono-font);
    color: var(--code);
}

kbd {
    color: var(--preformatted);
    border: var(--border-width) solid var(--preformatted);
    border-bottom: 3px solid var(--preformatted);
    border-radius: var(--standard-border-radius);
    padding: 0.1rem 0.4rem;
}

pre {
    padding: 1rem 1.4rem;
    max-width: 100%;
    overflow: auto;
    color: var(--preformatted);
}

/* Fix embedded code within pre */
pre code {
    color: var(--preformatted);
    background: none;
    margin: 0;
    padding: 0;
}

/* Progress bars */
/* Declarations are repeated because you */
/* cannot combine vendor-specific selectors */
progress {
    width: 100%;
}

progress:indeterminate {
    background-color: var(--accent-bg);
}

progress::-webkit-progress-bar {
    border-radius: var(--standard-border-radius);
    background-color: var(--accent-bg);
}

progress::-webkit-progress-value {
    border-radius: var(--standard-border-radius);
    background-color: var(--accent);
}

progress::-moz-progress-bar {
    border-radius: var(--standard-border-radius);
    background-color: var(--accent);
    transition-property: width;
    transition-duration: 0.3s;
}

progress:indeterminate::-moz-progress-bar {
    background-color: var(--accent-bg);
}

dialog {
    background-color: var(--bg);
    max-width: 40rem;
    margin: auto;
}

dialog::backdrop {
    background-color: var(--bg);
    opacity: 0.8;
}

@media only screen and (max-width: 720px) {
    dialog {
        max-width: calc(100vw - 2rem);
    }
}

/* Superscript & Subscript */
/* Prevent scripts from affecting line-height. */
sup,
sub {
    vertical-align: baseline;
    position: relative;
}

sup {
    top: -0.4em;
}

sub {
    top: 0.3em;
}

/* Classes for notices */
.notice {
    background: var(--accent-bg);
    border: var(--border-width) solid var(--border);
    border-radius: var(--standard-border-radius);
    padding: 1.5rem;
}

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

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

/* Print */
@media print {
    @page {
        margin: 1cm;
    }

    body {
        display: block;
    }

    body>header {
        background-color: unset;
    }

    body>header nav,
    body>footer {
        display: none;
    }

    article {
        border: none;
        padding: 0;
    }

    a[href^="http"]::after {
        content: " <" attr(href) ">";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a {
        text-decoration: none;
    }

    p {
        widows: 3;
        orphans: 3;
    }

    hr {
        border-top: var(--border-width) solid var(--border);
    }

    mark {
        border: var(--border-width) solid var(--border);
    }

    pre,
    table,
    figure,
    img,
    svg {
        break-inside: avoid;
    }

    pre code {
        white-space: pre-wrap;
    }
}

/* CRT effect from aleclownes.com */
@keyframes flicker {
    0% {
        opacity: 0.27861;
    }

    5% {
        opacity: 0.34769;
    }

    10% {
        opacity: 0.23604;
    }

    15% {
        opacity: 0.90626;
    }

    20% {
        opacity: 0.18128;
    }

    25% {
        opacity: 0.83891;
    }

    30% {
        opacity: 0.65583;
    }

    35% {
        opacity: 0.67807;
    }

    40% {
        opacity: 0.26559;
    }

    45% {
        opacity: 0.84693;
    }

    50% {
        opacity: 0.96019;
    }

    55% {
        opacity: 0.08594;
    }

    60% {
        opacity: 0.20313;
    }

    65% {
        opacity: 0.71988;
    }

    70% {
        opacity: 0.53455;
    }

    75% {
        opacity: 0.37288;
    }

    80% {
        opacity: 0.71428;
    }

    85% {
        opacity: 0.70419;
    }

    90% {
        opacity: 0.7003;
    }

    95% {
        opacity: 0.36108;
    }

    100% {
        opacity: 0.24387;
    }
}

@keyframes textShadow {
    0% {
        text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5), -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    5% {
        text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5), -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    10% {
        text-shadow: 0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5), -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    15% {
        text-shadow: 0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5), -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    20% {
        text-shadow: 3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5), -3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    25% {
        text-shadow: 1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5), -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    30% {
        text-shadow: 0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5), -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    35% {
        text-shadow: 3.896914047650351px 0 1px rgba(0, 30, 255, 0.5), -3.896914047650351px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    40% {
        text-shadow: 3.870905614848819px 0 1px rgba(0, 30, 255, 0.5), -3.870905614848819px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    45% {
        text-shadow: 2.231056963361899px 0 1px rgba(0, 30, 255, 0.5), -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    50% {
        text-shadow: 0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5), -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    55% {
        text-shadow: 2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5), -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    60% {
        text-shadow: 2.202193051050636px 0 1px rgba(0, 30, 255, 0.5), -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    65% {
        text-shadow: 2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5), -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    70% {
        text-shadow: 0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5), -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    75% {
        text-shadow: 1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5), -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    80% {
        text-shadow: 0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5), -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    85% {
        text-shadow: 0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5), -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    90% {
        text-shadow: 3.443339761481782px 0 1px rgba(0, 30, 255, 0.5), -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    95% {
        text-shadow: 2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5), -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    100% {
        text-shadow: 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5), -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
}

.crt::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    /* animation: flicker 15.15s infinite; on pause because it's too much*/
}

.crt::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.crt {
    animation: textShadow 1.6s infinite;
}

/* Everything down here is from scratch :) */

/* Slide animation makes images go brbrbrbr (tutorial : https://www.youtube.com/watch?v=nAjR0Oj0J8E) */
@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.marquee {
    background: var(--accent-bg);
    position: relative;
    overflow: hidden;
    padding: 1rem 0;
    white-space: nowrap;
    padding-top: 1.5em;
    border: var(--border-width) solid var(--border);
    border-radius: var(--standard-border-radius);
    z-index: 2;
}

.marquee:before,
.marquee:after {
    content: " ";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
}

.marquee:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(0, 0, 0));
}

.marquee:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(0, 0, 0));
}

.marquee:hover .marquee-slide {
    animation-play-state: paused;
}

.marquee-slide {
    display: inline-block;
    animation: 15s slide infinite linear;
}

.marquee-slide img {
    margin: 0 10px;
}

.left-side img {
    height: 50%;
    position: relative;
    top: -100px;
    right: 80px;
}

/* Changelog */
.changelog {
    height: 34rem;
    overflow-y: scroll;
    scrollbar-width: none;
}

.timestamp {
    color: var(--accent);
}

/* To Do List */
.to-do-list {
    height: 34 rem;
    overflow: auto;
}

.to-do-list strike {
    text-decoration-color: var(--accent);
    text-decoration-thickness: 3px;
}

/* Specifications for the dancing skeletons and friends */
.friends {
    position: relative;
    width: 100%;
    pointer-events: none;
}

#ascii-skeleton {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    transform: scale(130%) translate(-70%, -80%);
}

#ascii-skeleton-2 {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    transform: scaleX(-1) translate(10%, -95%);
}

#ascii-videodrome {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    width: 1200px;
    transform: scale(100%) translate(-0.5%, -68%);
}

#ascii-videodrome-2 {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    width: 1200px;
    transform: scale(100%) translate(-99%, -161.5%);
}

#ascii-videodrome-3 {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    width: 1200px;
    transform: scaleX(-1) scale(100%) translate(99.5%, -68%);
}

#ascii-videodrome-4 {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    width: 1200px;
    transform: scaleX(-1) scale(100%) translate(1%, -161.5%);
}

#ascii-robocop-bear {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 0;
    left: 50%;
    width: 1200px;
    transform: scaleX(100%) translate(11px, -576px);
}

#ascii-robocop-bear-2 {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    width: 1200px;
    transform: scaleX(-1) scale(100%) translate(1191px, -576px);
}

#ascii-leatherface {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    width: 1200px;
    transform: scale(200%) translate(-300px, 6%);
}

#ascii-robocop {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    width: 750px;
    transform: scale(200%) translate(25%, -6%);
}

#ascii-robocop-2 {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    width: 750px;
    transform: scaleX(-1) scale(200%) translate(75%, -6%);
}

#ascii-bicycle {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    width: 600px;
    transform: scaleX(-1) scale(100%) translate(100%, -59%);
}

#ascii-bicycle-2 {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    width: 900px;
    transform: scaleX(-1) scale(100%) translate(-25%, -40%);
}

#ascii-bicycle-3 {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    width: 1200px;
    transform: scaleX(-1) scale(100%) translate(115%, -40%);
}

#ascii-bicycle-4 {
    position: absolute;
    z-index: 0;
    opacity: 30%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(81%) saturate(319%) hue-rotate(37deg) brightness(109%) contrast(105%);
    top: 50%;
    left: 50%;
    width: 300px;
    transform: scaleX(-1) scale(100%) translate(-35%, 0%);
}

/* Text effects */
.accent {
    color: var(--accent);
    animation: textShadow 1.6s infinite;
}

.bad {
    color: red;
    animation: textShadow 1.6s infinite;
}

.fuck-it-up {
    filter: hue-rotate(269deg) saturate(1000%) grayscale(90%) contrast(149%);
    opacity: 100%;
    position: relative;
    z-index: 2;
}