@charset "UTF-8";
/* =============================== variables =============================== */
/* variables */
:root {
  scroll-behavior: smooth;
  scroll-padding-top: 10vh;
  --fnt-serif:"EaduiMedium", "Garamond", "Times New Roman", serif;
  --fnt-bltr: "chomskyRegular", "KJV1611Regular", serif;
  --fnt-sans: Ubuntu, sans-serif;
  --fnt-mono: "FiraMonoRegular", "Fira Mono", monospace;
  --fnt-code: "FiraCodeRegular", "Fira Code", "FiraMonoRegular", "Fira Mono", monospace;
  --fnt-ipa: "FiraSansRegular", "Fira Sans", Arial, Sans-Serif;
  --fnt-zswa: "Arial", sans-serif;
  --tb-hite: 28px;
  --dt-padd: 72px;
  --inset-text-top: #000000C0;
  --inset-text-btm: #FFFFFF40;
  --inset-text-colour: #DCD8D0;
  --inset-text-shadow:
  	0px -1px 0px var(--inset-text-top),
  	0px 1px 0px var(--inset-text-btm);
  --ubuntu-grad:
  linear-gradient(
  	#616254 5%,
  	#5b594D 10%,
  	#4D4C47 48%,
  	#4D4C47 52%,
  	#3F403B 100%
  );
  --d-red: #DF382C;
  --d-grn: #4E9A06;
  --d-ylw: #C4A000;
  --d-blu: #3465A4;
  --d-ppl: #75507B;
  --d-aqa: #06989A;
  --d-org: #E95420;
  --s-red: #EF2929;
  --s-grn: #8AE234;
  --s-ylw: #FCE94F;
  --s-blu: #729FCF;
  --s-ppl: #AD7FA8;
  --s-aqa: #34E2E2;
  --s-org: #F07746;
  --bgd-0: #474640;
  --bgd-1: #4E4C46;
  --bgd-2: #5A5850;
  --bgd-3: #4F4D47;
  --bgd-4: #595854;
  --bgd-5: #616254;
  --txt-4: #969693;
  --txt-3: #BAB8B2;
  --txt-2: #DFDBD2;
  --txt-1: #EBEBEB;
  --txt-0: #FFFFFF;
  --brdr-dark: #2D2D2A;
  --btn-hilite: var(--bgd-5);
  --btn-lolite: var(--bgd-0);
}

/* light mode colours */
@media (prefers-color-scheme: light) {
  :root {
    --s-red: #EF2929;
    --s-grn: #8AE234;
    --s-ylw: #FCE94F;
    --s-blu: #729FCF;
    --s-ppl: #AD7FA8;
    --s-aqa: #34E2E2;
    --s-org: #F07746;
    --d-red: #df382c;
    --d-grn: #4E9A06;
    --d-ylw: #C4A000;
    --d-blu: #3465A4;
    --d-ppl: #75507B;
    --d-aqa: #06989A;
    --d-org: #E95420;
    --bgd-0: #FBF1C7;
    --bgd-1: #EBDBB2;
    --bgd-2: #D5C4A1;
    --bgd-3: #BDAE93;
    --bgd-4: #A89984;
    --bgd-5: #928374;
    --txt-4: #7C6F64;
    --txt-3: #665C54;
    --txt-2: #504945;
    --txt-1: #3C3836;
    --txt-0: #282828;
    --btn-hilite: var(--bgd-0);
    --btn-lolite: var(--bgd-4);
  }
}
/* ========================== accessibility styles ========================== */
@media (prefers-reduced-motion) {
  img.anim {
    transition: filter 500ms, background-color 500ms;
  }
  img.anim:not(:hover) {
    background-color: white;
    filter: contrast(0) sepia(100);
  }
}
/* ======================== element generic styles ========================= */
html,
body {
  /* prevents zooming on mobile */
  /* no it doesn't */
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  width: 100%;
  height: 100%;
  accent-color: var(--s-org);
}

html {
  /* colour scrollbars with css */
  scrollbar-color: var(--s-org) transparent;
  /* colour scrollbars, but this time for webkit being dumb */
}
html ::selection {
  border-radius: 0.1em;
  background: var(--d-org);
  color: var(--txt-0);
  text-decoration-color: var(--bgd-0);
}
html::-webkit-scrollbar-thumb {
  background-color: var(--s-org);
}
html::-webkit-scrollbar {
  background-color: transparent;
}

.window-content {
  color: var(--txt-1);
}

body {
  color: var(--txt-1);
  font-family: var(--fnt-sans);
  tab-size: 2;
  margin: 0;
  padding: 0;
  border: 0;
  position: absolute;
  inset: 0;
  background-blend-mode: lighten;
  background-attachment: fixed;
  background-image: var(--dsk-bg-img, url(/stadt/assets/images/backgrounds/texture.png)), radial-gradient(circle at center, #EDBA8DA0 5%, transparent 75%), linear-gradient(#26021E, #B63226);
  /*https://web.archive.org/web/20091027151405/http://www.geocities.com/coondogk9/animsnow.gif*/
  /*https://web.archive.org/web/20040414012444fw_/http://www.geocities.com/joannewww/jwbgs/snow.htm*/
}

h1 {
  font-size: 2.2em;
}

h2 {
  font-size: 2em;
}

h3, .h-summ {
  font-size: 1.8em;
}

h4 {
  font-size: 1.6em;
}

h5 {
  font-size: 1.4em;
}

h6 {
  font-size: 1.2em;
}

h1,
h2 {
  margin-block: 0.5em;
  border-bottom: 0.1em solid var(--d-org);
  border-image-source: radial-gradient(circle at bottom, var(--s-org), var(--d-org), transparent);
  border-image-slice: 1;
}
h1 mark,
h2 mark {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h-summ {
  margin-inline: 0.5em;
  font-family: var(--fnt-serif);
  text-align: center;
  color: var(--s-org);
}
h1:target,
h2:target,
h3:target,
h4:target,
h5:target,
h6:target,
.h-summ:target {
  color: var(--s-grn);
}

hr {
  border: 1px solid transparent;
  border-top-color: var(--bgd-0);
  border-bottom-color: var(--bgd-5);
  margin-inline: 1em;
}

strong {
  color: var(--s-ylw);
}

b {
  color: var(--d-ylw);
}

small {
  color: var(--txt-4);
}

em {
  color: var(--s-org);
}

i,
q {
  color: var(--d-org);
  font-style: italic;
}

blockquote {
  margin: 1em 0;
  padding: 0.5em 1.6ch;
  border-left: 0.4ch solid var(--d-ylw);
  padding-left: 1.6ch;
  position: relative;
  display: block;
  overflow: clip;
  isolation: isolate;
}
blockquote::before {
  content: open-quote;
  position: absolute;
  display: block;
  z-index: -1;
  color: var(--bgd-3);
  top: -0.2em;
  left: 0em;
  font-size: 8em;
}
blockquote::after {
  content: no-close-quote;
}

/* colour highlighted text */
mark {
  margin-left: -0.5ch;
  margin-right: -0.5ch;
  padding-left: 0.5ch;
  padding-right: 0.5ch;
  border-radius: 0.1em;
  background-color: var(--s-ylw);
  color: var(--bgd-0);
}

del {
  text-decoration-color: var(--s-red);
}

ins {
  text-decoration-color: var(--s-grn);
}

kbd {
  background-color: var(--bgd-3);
  padding-inline: 0.3em;
  padding-top: 0.3em;
  border-radius: 0.2em;
  font-size: 1em;
  box-shadow: -2px -2px 0 var(--btn-hilite), 2px 2px 0 var(--btn-lolite);
}

a[href^="mailto"] {
  cursor: progress;
}
a[href^="http"] {
  cursor: alias;
}
a:link {
  color: var(--s-blu);
}
a:visited {
  color: var(--s-ppl);
}
a:active, a:focus {
  color: var(--s-red);
}
a:any-link:hover {
  outline: 1px dotted;
}
a:any-link:hover:has(*) {
  outline: none;
}

/* ========================= class generic styles ========================== */
.faux-inf::after {
  content: "00\00a0\00a0";
  letter-spacing: -4px;
}

pre,
samp,
.ascii-art {
  font-family: var(--fnt-mono);
}

.ascii-art {
  white-space: pre;
  overflow: hidden;
  display: block;
  font-variant-ligatures: none;
  -moz-tab-size: 0;
  tab-size: 0;
}

code {
  font-family: var(--fnt-code);
}

.spoiler {
  color: var(--s-aqa);
  filter: blur(4px);
  transition: color 0.25s ease, filter 0.25s ease;
}
.spoiler:hover, .spoiler:active {
  color: revert-layer;
  filter: none;
}

.captioned,
abbr {
  cursor: help;
  color: var(--s-aqa);
  position: relative;
}
.captioned:active::after, .captioned:focus::after,
abbr:active::after,
abbr:focus::after {
  position: absolute;
  content: attr(title);
  font-family: var(--fnt-sans);
  font-size: 0.8rem;
  font-weight: normal;
  font-style: normal;
  width: max-content;
  left: 0;
  bottom: -1em;
  padding: 2px;
  border-radius: 2px;
  background-color: var(--s-blu);
  color: var(--bgd-0);
}

.ipa {
  font-family: var(--fnt-ipa);
}

.glyph-showcase[lang="sr"] {
  font-family: "Overpass", "OverpassRegular";
}

code.codeblock {
  font-family: var(--fnt-code);
  -moz-tab-size: 4;
  tab-size: 4;
  display: block;
  white-space: pre;
  margin: 0.5em;
  padding: 0.5em;
  background: var(--bgd-0);
}
code .obj {
  color: var(--s-red);
}
code .mod {
  color: var(--s-ylw);
}
code .opr {
  color: var(--s-grn);
}
code .val {
  color: var(--s-ppl);
}
code .cmt {
  color: var(--d-org);
  font-style: italic;
}

.btn-88x31,
.btn-176x31,
.btn-80x15,
.btn-150x20,
.stamp-99x56,
.stamp-100x50,
.tower,
.pixel-art,
.desktop-icon img,
.window-icon,
.window-title:before {
  /* render pixel art pixelly when zoomed in */
  image-rendering: pixelated;
  /* fallback, pixellated */
  image-rendering: crisp-edges;
  /* unsure, filter e.g. hq2x */
  /* so that button alt text can still be scrolled, but doesn't break layout */
  overflow: auto;
}

img.smooth-zoom {
  image-rendering: auto;
}

.img-grid {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
  text-wrap: balance;
}
.img-grid li {
  display: inline-block;
  vertical-align: top;
}
.img-grid li a {
  text-decoration: none;
}
.img-grid img {
  display: inline;
  margin: 2px 1px;
  vertical-align: middle;
}

.img-grid.hover-zoom img,
.img-grid.hover-zoom iframe {
  /* zoom/scale/grow on hover */
  transition: transform 0.2s ease-in-out 0s;
}
.img-grid.hover-zoom img:hover, .img-grid.hover-zoom img:focus, .img-grid.hover-zoom img:focus-within,
.img-grid.hover-zoom iframe:hover,
.img-grid.hover-zoom iframe:focus,
.img-grid.hover-zoom iframe:focus-within {
  transform: scale(2);
  filter: hue-rotate(360deg);
  transition-delay: 0.5s;
}
.img-grid.hover-zoom img[src$=".svg"]:hover, .img-grid.hover-zoom img[src$=".svg"]:focus, .img-grid.hover-zoom img[src$=".svg"]:focus-within,
.img-grid.hover-zoom iframe[src$=".svg"]:hover,
.img-grid.hover-zoom iframe[src$=".svg"]:focus,
.img-grid.hover-zoom iframe[src$=".svg"]:focus-within {
  transform: scale(3);
  image-rendering: auto;
}

.btn-88x31 {
  width: 88px;
  height: 31px;
}

.btn-88x31[src$=".svg"] {
  image-rendering: auto;
}

.btn-176x31 {
  width: 176px;
  height: 31px;
}

.btn-80x15 {
  width: 80px;
  height: 15px;
}

.btn-150x20 {
  width: 150px;
  height: 20px;
}

.stamp-99x56 {
  width: 99px;
  height: 56px;
}

.stamp-100x50 {
  width: 100px;
  height: 50px;
}

.img-aside {
  width: min-content;
  transform: rotate(var(--rot));
  shape-outside: var(--shape-outside);
}
.img-aside.left {
  float: left;
}
.img-aside.right {
  float: right;
}

.x-window {
  position: absolute;
  box-shadow: 4px 4px 8px -4px black;
  --window-radius: 8px;
  border-top-left-radius: var(--window-radius);
  border-top-right-radius: var(--window-radius);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  background-color: var(--bgd-1);
}
.x-window.window-fixed {
  position: fixed;
}
.x-window:target {
  z-index: 90 !important;
}

.window-titlebar {
  background: var(--ubuntu-grad);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  color: var(--title-col, var(--inset-text-colour));
  text-align: center;
  text-shadow: var(--inset-text-shadow);
  position: relative;
  margin: 0px 0px 2px 0px;
  padding: 4px 8px;
  height: 20px;
  user-select: none;
  /* ======================================================================	*\
  ||         all window decoration svgs from material design icons:        	||
  ||                    https://materialdesignicons.com/                   	||
  ||             ztodo https://www.compart.com/en/unicode/U+1F5D7          	||
  \* ======================================================================	*/
}
.window-titlebar .window-title {
  /* remove link styling for titles */
  color: inherit;
  font-style: italic;
  font-weight: bold;
  text-decoration: none;
  cursor: default;
  padding: 4px;
}
.window-titlebar .window-icon {
  display: none;
  vertical-align: middle;
  float: left;
}
.window-titlebar .window-decs {
  margin: 0;
  max-height: 100%;
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  margin-block: auto;
}
.window-titlebar .window-decs li {
  visibility: hidden;
  font-family: "Material Design Icons";
  display: inline-block;
  user-select: none;
  visibility: visible;
  position: relative;
  margin: 0;
  height: 16px;
  aspect-ratio: 1;
  font-size: 11px;
  background-image: linear-gradient(#969590, #5C5B57);
  color: #423630;
  box-shadow: 0 0 0 1px #423630;
  box-sizing: border-box;
  text-shadow: 0 1px 0 var(--inset-text-btm);
  border-radius: 99vw;
}
.window-titlebar .window-decs .window-min:before {
  content: "🗕";
  content: url(/stadt/assets/images/window-icons/window-minimise.svg);
}
.window-titlebar .window-decs .window-max:before {
  content: "🗖";
  content: url(/stadt/assets/images/window-icons/window-maximise.svg);
}
.window-titlebar .window-decs .window-rst:before {
  content: "🗗";
  content: url(/stadt/assets/images/window-icons/window-restore.svg);
}
.window-titlebar .window-decs .window-cls:before {
  content: "🗙";
  content: url(/stadt/assets/images/window-icons/window-close.svg);
}
.window-titlebar .window-decs .window-hlp {
  display: none;
}
.window-titlebar .window-decs .window-cls {
  color: #32312e;
  background-image: linear-gradient(#F19478, #DA4D1C);
}

.indent-9x,
.copy-all,
textarea {
  margin: 0;
  background: var(--bgd-0);
  border: 1px solid var(--brdr-dark);
  border-radius: 5px;
  box-shadow: inset 0px 0px 4px -2px #000;
}

textarea {
  color: var(--txt-3);
  padding: 1em 1ch;
}

/* https://codersblock.com/blog/the-surprising-things-that-css-can-animate/#text-selection-trick */
.copy-all {
  user-select: all;
}
.copy-all:focus {
  animation: select 100ms step-end forwards;
}

@keyframes select {
  to {
    user-select: text;
  }
}
.outdent-9x,
.btn-9x,
.btn-dropdown:before {
  background-color: var(--bgd-2);
  padding: 2px;
  border-width: 2px;
  border-style: solid;
  border-top-color: var(--btn-hilite);
  border-left-color: var(--btn-hilite);
  border-bottom-color: var(--btn-lolite);
  border-right-color: var(--btn-lolite);
  outline-offset: -5px;
}

.window-maximised {
  width: 100%;
  height: 100%;
}

.btn-9x,
.btn-dropdown {
  display: inline-block;
  text-align: center;
  margin: 1px;
  margin: auto;
  color: var(--txt-1) !important;
  text-decoration: none;
  background: var(--bgd-2);
  user-select: none;
}
.btn-9x:active, .btn-9x:active::before,
.btn-dropdown:active,
.btn-dropdown:active::before {
  border-top-color: var(--btn-lolite);
  border-left-color: var(--btn-lolite);
  border-bottom-color: var(--btn-hilite);
  border-right-color: var(--btn-hilite);
}

.btn-dropdown {
  margin: 0;
  font-size: 1.2em;
  margin-right: 2px;
  padding: 0px;
  color: red;
}
.btn-dropdown :before {
  content: "";
  background-size: 1em;
  background-repeat: no-repeat;
  background-position: center;
}

.window-menu ul {
  display: none;
  margin: 0;
  padding: 0;
  cursor: default;
  user-select: none;
}
.window-menu ul li {
  display: inline-block;
  padding: 0px 4px;
}
.window-menu ul li:hover {
  background-color: var(--bgd-3);
}
.window-menu ul li:active u {
  color: var(--s-ylw);
}

.window-content {
  line-height: 1.3;
  margin: 2px;
}

/* ============================ specific styles ============================ */
/* -------------------------------- desktop -------------------------------- */
#window-area {
  margin-top: var(--tb-hite);
  margin-left: var(--dt-padd);
}

#desktop-area {
  position: fixed;
  width: 100%;
  height: 100%;
}
#desktop-area #wall-imgs {
  display: block;
  position: fixed;
}
#desktop-area #wall-imgs #alucard {
  bottom: 4vh;
  right: 1vw;
}
#desktop-area #wall-imgs #bluescreen {
  bottom: 6vh;
  left: 5vw;
}
#desktop-area #wall-imgs #comp-spin {
  top: 50vh;
  right: 1vw;
}
#desktop-area #wall-imgs #curiosity {
  top: 5vh;
  right: 10vw;
}
#desktop-area #wall-imgs #eye {
  top: 25vh;
  left: 40vw;
}
#desktop-area #wall-imgs #lava {
  bottom: 25vh;
  right: 35vw;
}
#desktop-area #wall-imgs #polarbear {
  top: 5vh;
  left: 10vw;
}
#desktop-area #wall-imgs #skellington {
  bottom: 5vh;
  right: 22vw;
}
#desktop-area #wall-imgs #sprockets {
  bottom: 5vh;
  left: 10vw;
}
#desktop-area #wall-imgs #waddle {
  bottom: 5vh;
  left: 45vw;
}
#desktop-area #wall-imgs #www {
  top: 5vh;
  left: 50vw;
}
#desktop-area #wall-imgs .wall-img {
  display: block;
  position: fixed;
  font-size: 0.5em;
  width: min-content;
  color: var(--bgd-0);
  opacity: 0;
  transition: opacity 250ms;
}
#desktop-area #wall-imgs .wall-img:hover {
  opacity: 0.9;
}

/* -------------------------------- taskbar -------------------------------- */
#ubuntu-sidebar {
  width: min-content;
  position: fixed;
  top: var(--tb-hite);
  padding: 8px;
  background: #00000040;
  backdrop-filter: blur(2px);
  box-shadow: inset -4px 0px 8px -4px #000;
  border-right: 1px solid #ffffff30;
  height: 100%;
  overflow-x: visible;
  scrollbar-width: thin;
}
#ubuntu-sidebar .desktop-icon {
  text-align: center;
  color: var(--bgd-0);
  display: block;
  --icon-size: 48px;
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 1/1;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid #ffffff40;
  background-image: linear-gradient(#ffffff10 25%, #ffffff60);
}
#ubuntu-sidebar .desktop-icon.update {
  background-color: var(--d-blu);
}
#ubuntu-sidebar .desktop-icon.current {
  background-color: var(--d-org);
}
#ubuntu-sidebar .desktop-icon:hover, #ubuntu-sidebar .desktop-icon:focus-visible {
  background-color: var(--d-ppl);
}
#ubuntu-sidebar .desktop-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background-image: radial-gradient(circle at top, #ffffffc0, transparent 50%);
}
#ubuntu-sidebar .desktop-icon span {
  display: none;
}
#ubuntu-sidebar .desktop-icon:hover span, #ubuntu-sidebar .desktop-icon:focus span {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--icon-size) + 8px);
  height: min-content;
  width: max-content;
  margin-block: auto;
  background-color: #121212;
  background-image: radial-gradient(ellipse at top, #ffffff60, transparent);
  color: white;
  padding-block: 8px;
  padding-inline: 16px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 99vw;
  border-bottom-left-radius: 99vw;
  border: 1px solid #FFFFFF80;
}
#ubuntu-sidebar .desktop-icon + .desktop-icon {
  margin-top: 8px;
}
#ubuntu-sidebar .desktop-icon img {
  width: var(--icon-size);
  display: block;
  margin-inline: auto;
}

#ubuntu-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--tb-hite);
  box-sizing: border-box;
  background-image: var(--ubuntu-grad);
  padding-inline: 4px;
  box-shadow: 0px 0px 8px 4px black;
  color: var(--inset-text-colour);
  font-size: 16px;
  font-weight: bold;
  text-shadow: var(--inset-text-shadow);
  display: flex;
  gap: 1ch;
  justify-content: space-between;
  align-items: center;
}
#ubuntu-header section {
  display: inline-block;
  height: min-content;
  white-space: nowrap;
}
#ubuntu-header section .page-title {
  margin-inline: 4px;
}
#ubuntu-header section .img-grid {
  width: max-content;
  display: inline-block;
}
#ubuntu-header section img {
  border: 1px solid;
  border-radius: 3px;
  border-top-color: var(--inset-text-top);
  border-left-color: var(--inset-text-top);
  border-bottom-color: var(--inset-text-btm);
  border-right-color: var(--inset-text-btm);
  vertical-align: middle;
}
#ubuntu-header section a {
  display: inline-block;
}

#start-orb {
  height: 1em;
  vertical-align: bottom;
  text-shadow: var(--ubuntu-inset-text);
  width: calc(var(--dt-padd) - 8px);
  padding-right: 2px;
  border-right: 1px solid #ffffff30;
}

#logo-container {
  margin-right: auto;
}

@media (max-width: 800px) {
  #logo-container#logo-container {
    display: none;
  }

  #antipixes {
    flex-shrink: 1;
    min-width: 0px;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to left, transparent 0px 4px, black 32px 64px);
    mask-image: linear-gradient(to left, transparent 0px 4px, black 32px 64px);
  }
}
#edit-date {
  all: unset;
  padding-inline: 2px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid transparent;
}
#edit-date:hover {
  border-color: var(--brdr-dark);
  border-bottom: none;
}

#edit-date:focus + div {
  display: block;
}

#edit-date-popup:focus-within {
  display: block;
}

#edit-date-popup {
  display: none;
}

#edit-date-popup {
  position: absolute;
  right: 0;
  padding: 0;
  background-color: #41403B;
  color: var(--inset-text-colour);
  outline: 1px solid #2F2F2C;
  border: 1px solid #474640;
  border-top: none;
  box-shadow: 4px 4px 8px -4px black;
  font-weight: normal;
  width: 24ch;
  text-shadow: none;
}
#edit-date-popup p {
  margin: 0;
  padding-block: 4px;
  padding-inline: 16px;
  border: 1px solid transparent;
}
#edit-date-popup p:hover {
  background-image: linear-gradient(var(--s-org), var(--d-org));
  border-color: var(--d-org);
}

/* ============================== animations =============================== */
@keyframes colour-cycle {
  0% {
    color: var(--s-org);
    text-shadow: 0 0 var(--shad-size-s, 0) var(--s-org), 0 0 var(--shad-size-l, 0) var(--d-org);
  }
  14% {
    color: var(--s-ylw);
    text-shadow: 0 0 var(--shad-size-s, 0) var(--s-ylw), 0 0 var(--shad-size-l, 0) var(--d-ylw);
  }
  29% {
    color: var(--s-grn);
    text-shadow: 0 0 var(--shad-size-s, 0) var(--s-grn), 0 0 var(--shad-size-l, 0) var(--d-grn);
  }
  43% {
    color: var(--s-aqa);
    text-shadow: 0 0 var(--shad-size-s, 0) var(--s-aqa), 0 0 var(--shad-size-l, 0) var(--d-aqa);
  }
  57% {
    color: var(--s-blu);
    text-shadow: 0 0 var(--shad-size-s, 0) var(--s-blu), 0 0 var(--shad-size-l, 0) var(--d-blu);
  }
  71% {
    color: var(--s-ppl);
    text-shadow: 0 0 var(--shad-size-s, 0) var(--s-ppl), 0 0 var(--shad-size-l, 0) var(--d-ppl);
  }
  86% {
    color: var(--s-red);
    text-shadow: 0 0 var(--shad-size-s, 0) var(--s-red), 0 0 var(--shad-size-l, 0) var(--d-red);
  }
  100% {
    color: var(--s-org);
    text-shadow: 0 0 var(--shad-size-s, 0) var(--s-org), 0 0 var(--shad-size-l, 0) var(--d-org);
  }
}
.marquee-container {
  overflow: hidden;
  /* don't optimise by not animating gifs */
  will-change: contents;
  width: max-content;
}

.marquee-rtl, .marquee-ltr {
  width: max-content;
  /* don't optimise - hotline used this, but i think above works better? */
  will-change: scroll-position;
  	 /*
  	& ul {
  		width: max-content;
  		display: inline-block;
  	}
  
  	& li {
  		display: inline-block;
  		will-change: transform;
  		list-style-type: none;
  	}*/
}
.marquee-rtl:hover, .marquee-ltr:hover {
  animation-play-state: paused;
}

.marquee-track {
  display: inline;
}

.marquee-rtl {
  animation: marquee-rtl var(--el-speed, 35s) linear infinite;
}

.marquee-ltr {
  animation: marquee-ltr 35s linear infinite;
}

@keyframes rtl-track {
  0% {
    order: -1;
  }
  100% {
    order: 99;
  }
}
@keyframes marquee-rtl {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
@keyframes marquee-ltr {
  0% {
    transform: translate(-50%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@media (prefers-reduced-motion) {
  .marquee-rtl, .marquee-ltr {
    animation-play-state: paused;
    padding-left: 0%;
  }
  .marquee-rtl:hover, .marquee-ltr:hover {
    animation-play-state: running;
  }
}