@import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Fira+Mono&display=swap');

:root {
  --colorsep1: rgba(0,30,255,0.5);
  --colorsep2: rgba(255,0,80,0.5);
  --current-background: var(--black);
  --pureblack: #000000;
  --black: #141d26;
  --white: #eeeeee;
  --aaaaa: #aaaaaa;
  --selection: #0099ff;
  --red: rgba(255, 0, 0, 1);
  --orange: rgba(255, 154, 0, 1);
  --yellow: rgba(222, 222, 33, 1);
  --green: rgba(79, 220, 74, 1);
  --cyan: rgba(63, 218, 216, 1);
  --blue: rgba(28, 127, 238, 1);
  --violet: rgba(186, 12, 248, 1);
  --background-red: #541c14;
  --background-orange: #533913;
  --background-yellow: #4e5313;
  --background-green: #155313;
  --background-cyan: #135352;
  --background-blue: #133153;
  --background-violet: #411353;
  --yes: #007a2f;
  --no: #7a0039;
  --not: #8c4b06;
  --egg: #a38210;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* scrollbar-gutter: stable; */
  overflow-x: hidden;
}

body {
  background-color: var(--black);
  color: var(--white);
  font-family: "Fira Sans";
  font-size: 16px;
  text-align: center;
}

*[mono], code {
  font-family: "Fira Mono";
}

html,
body {
  overscroll-behavior-y: contain;
}

h1 {
  text-align: center;
}

div, input, button, textarea, select {
  font-family: "Fira Sans";
  text-align: center;
}

q {
  display: inline;
  color:  transparent;
}

r {
  display: inline;
  color: var(--black);
  font-size: 5px;
}

code {
  background-color: #333;
  display: inline-block;
  font-family: "Fira Mono";
  border-radius: 3px;
  padding: 2px 4px;
}

kbd {
  background-color: var(--white);
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
  color: #333;
  display: inline-block;
  font-family: "Fira Mono";
  font-size: .85em;
  font-weight: 600;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

.hidden {
  display: none;
}
.antiselect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.emptyselect::selection {
  background-color: #0099fe;
  color: var(--selection);
}
.pointer {
  cursor: pointer;
}
.nice:hover {
  text-shadow: 0px 0px 10px #FFFFFF !important;
}

.link-left {
  position: absolute;
  left: 21%;
  top: 15px;
}

.link-right {
  position: absolute;
  right: 21%;
  top: 15px;
}

/* canvas */
canvas {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* progress */
.progress:before, .progress:after {
  content: "";
  display: table;
  clear: both;
}

.progress {
  padding: none;
  border: solid var(--white) 1px;
}

spoiler, spoiler > * { transition: color 0.5s, opacity 0.5s; }
spoiler:not(:hover) { color: transparent; }
spoiler:not(:hover) > * { opacity: 0; }
/* fix weird transitions on Chrome: */
blockquote, blockquote > *:not(a) { color: var(--current-background); }

/* images */

img {
  pointer-events: auto;
}

img-container img {
  display: block;
  z-index: -1;
  position: relative;
  pointer-events: auto;
  visibility: visible;
  border-radius: 15px;
}

img-container {
  display: inline-block;
  visibility: visible;
  pointer-events: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  -moz-box-shadow: inset 0 0 15px 7px var(--current-background);
  -webkit-box-shadow: inset 0 0 15px 7px var(--current-background);
  box-shadow: inset 0 0 15px 7px var(--current-background);
}

.img-container-select {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
}

.img-container-small {
  -moz-box-shadow: inset 0 0 8px 3px var(--current-background);
  -webkit-box-shadow: inset 0 0 8px 3px var(--current-background);
  box-shadow: inset 0 0 8px 3px var(--current-background);
}

img-container.img-container-small img {
  border-radius: 5px;
}

/* tables
table {
  border-spacing: 0;
  z-index: -100;
  margin: 0px auto;
}
table.hidden {
  border-collapse: collapse;
  border-style: hidden;
}
table td, table th {
  border: 0px solid var(--white);
  padding: 10px;
}
tr.blankrow {
  height: 30px;
  border: 0;
}
tbody {
  border: 1px solid var(--white);
}*/
table {
  table-layout: fixed;
  margin: 25px auto;
  border-collapse: collapse;
  font-size: 1em;
  box-shadow: 0 0 20px "#eee22";
}
table:not(.table) {
  min-width: 65vw;
}
table thead tr {
  background-color: #009879;
  color: var(--white);
  text-align: left;
}
th {
  font-size: 1.1em;
}
th, td {
  padding: 12px 15px;
  text-align: center;
}
table tbody tr {
  border-bottom: 1px solid var(--white);
}
table tbody tr:nth-of-type(odd) {
  background-color: #22222260;
}
table tbody tr:nth-of-type(even) {
  background-color: #22222260;
}
table:not(.table) tbody tr:last-of-type {
  border-bottom: 5px solid var(--white);
}
table tbody tr.active-row {
  font-weight: bold;
  color: #009879;
}
table.table td {
  border: 1px solid var(--white);
}

/* separator */
hr {
  border-top: 1px solid var(--aaaaa);
  border-bottom: 0px;
  border-left: 0px;
  border-right: 0px;
  margin: 30px 20px;
}

brr {
  display: block;
  margin-top: 0.3em;
  content: " ";
  line-height: 1.3em;
}

fade {
  opacity: 40%;
  transition: opacity 0.5s;
}
fade:hover {
  opacity: 80%;
}

/* links */
a:link {
  color: var(--white);
}
a:hover {
  color: var(--aaaaa);
}
a:visited {
  color: var(--white);
}
a:link:hover {
  color: var(--aaaaa);
}
a:visited:hover {
  color: var(--aaaaa);
}
a:active {
  color: var(--white);
}
.hidden-link, .hidden-link-hover {
  text-decoration: none;
  background-color: transparent;
}
.hidden-link-hover:hover {
  text-decoration: underline;
  background-color: transparent;
}

/* crt */
.scanlines::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: -10000px;
  right: -10000px;
  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;
}

.flickerfast::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: -10000px;
  right: -10000px;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.5s infinite;
}

.flicker::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: -10000px;
  right: -10000px;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 3s infinite;
}

@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;}
}

.colorsep {
  animation: textShadow 1.6s infinite;
}

@keyframes textShadow {
  0% {text-shadow: 0.4389924193300864px 0 1px var(--colorsep1), -0.4389924193300864px 0 1px var(--colorsep2), 0 0 3px;}
  5% {text-shadow: 2.7928974010788217px 0 1px var(--colorsep1), -2.7928974010788217px 0 1px var(--colorsep2), 0 0 3px;}
  10% {text-shadow: 0.02956275843481219px 0 1px var(--colorsep1), -0.02956275843481219px 0 1px var(--colorsep2), 0 0 3px;}
  15% {text-shadow: 0.40218538552878136px 0 1px var(--colorsep1), -0.40218538552878136px 0 1px var(--colorsep2), 0 0 3px;}
  20% {text-shadow: 3.4794037899852017px 0 1px var(--colorsep1), -3.4794037899852017px 0 1px var(--colorsep2), 0 0 3px;}
  25% {text-shadow: 1.6125630401149584px 0 1px var(--colorsep1), -1.6125630401149584px 0 1px var(--colorsep2), 0 0 3px;}
  30% {text-shadow: 0.7015590085143956px 0 1px var(--colorsep1), -0.7015590085143956px 0 1px var(--colorsep2), 0 0 3px;}
  35% {text-shadow: 3.896914047650351px 0 1px var(--colorsep1), -3.896914047650351px 0 1px var(--colorsep2), 0 0 3px;}
  40% {text-shadow: 3.870905614848819px 0 1px var(--colorsep1), -3.870905614848819px 0 1px var(--colorsep2), 0 0 3px;}
  45% {text-shadow: 2.231056963361899px 0 1px var(--colorsep1), -2.231056963361899px 0 1px var(--colorsep2), 0 0 3px;}
  50% {text-shadow: 0.08084290417898504px 0 1px var(--colorsep1), -0.08084290417898504px 0 1px var(--colorsep2), 0 0 3px;}
  55% {text-shadow: 2.3758461067427543px 0 1px var(--colorsep1), -2.3758461067427543px 0 1px var(--colorsep2), 0 0 3px;}
  60% {text-shadow: 2.202193051050636px 0 1px var(--colorsep1), -2.202193051050636px 0 1px var(--colorsep2), 0 0 3px;}
  65% {text-shadow: 2.8638780614874975px 0 1px var(--colorsep1), -2.8638780614874975px 0 1px var(--colorsep2), 0 0 3px;}
  70% {text-shadow: 0.48874025155497314px 0 1px var(--colorsep1), -0.48874025155497314px 0 1px var(--colorsep2), 0 0 3px;}
  75% {text-shadow: 1.8948491305757957px 0 1px var(--colorsep1), -1.8948491305757957px 0 1px var(--colorsep2), 0 0 3px;}
  80% {text-shadow: 0.0833037308038857px 0 1px var(--colorsep1), -0.0833037308038857px 0 1px var(--colorsep2), 0 0 3px;}
  85% {text-shadow: 0.09769827255241735px 0 1px var(--colorsep1), -0.09769827255241735px 0 1px var(--colorsep2), 0 0 3px;}
  90% {text-shadow: 3.443339761481782px 0 1px var(--colorsep1), -3.443339761481782px 0 1px var(--colorsep2), 0 0 3px;}
  95% {text-shadow: 2.1841838852799786px 0 1px var(--colorsep1), -2.1841838852799786px 0 1px var(--colorsep2), 0 0 3px;}
  100% {text-shadow: 2.6208764473832513px 0 1px var(--colorsep1), -2.6208764473832513px 0 1px var(--colorsep2), 0 0 3px;}
}

/* details and summary */

details {
  border: 1px solid var(--white);
  border-radius: 4px;
  padding: .5em;
  margin: 0px 0px;
}

summary {
  font-weight: bold;
  margin: -.5em -.5em 0;
  padding: .5em;
  margin: 0px 0px;
}

details[open] {
  padding-bottom: 1em;
}

details[open] summary {
  border-bottom: 1px solid var(--white);
  margin-bottom: .5em;
}

.blur {
  color: transparent;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
}
kbd.blur {
  text-shadow: 0 0 5px var(--black);
}

.vcenter {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.centerbox {
  position: absolute;
  left: 50vw;
  top: 50vh;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 50px 50px;
  border: 2px solid var(--white);
  border-radius: 25px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

.boxy {
  padding: 1.5em 1.5em;
  border: 2px solid var(--white);
  border-radius: 25px;
  overflow: auto;
}

.lowercase {
  text-transform: lowercase;
}

.flip {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

#rainbow {
  background: linear-gradient(
    90deg,
    var(--red) 0%,
    var(--red) 11%,
    var(--orange) 15%,
    var(--orange) 25%,
    var(--yellow) 30%,
    var(--yellow) 40%,
    var(--green) 45%,
    var(--green) 55%,
    var(--cyan) 60%,
    var(--cyan) 70%,
    var(--blue) 75%,
    var(--blue) 85%,
    var(--violet) 89%,
    var(--violet) 100%
  );
}

.rainbow {
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 154, 0, 1) 10%,
    rgba(208, 222, 33, 1) 20%,
    rgba(79, 220, 74, 1) 30%,
    rgba(63, 218, 216, 1) 40%,
    rgba(47, 201, 226, 1) 50%,
    rgba(28, 127, 238, 1) 60%,
    rgba(95, 21, 242, 1) 70%,
    rgba(186, 12, 248, 1) 80%,
    rgba(251, 7, 217, 1) 90%,
    rgba(255, 0, 0, 1) 100%
  );
}

@keyframes rainbow {
  0% { background-color: rgba(255, 0, 0, 1); }
  10% { background-color: rgba(255, 154, 0, 1); }
  20% { background-color: rgba(208, 222, 33, 1); }
  30% { background-color: rgba(79, 220, 74, 1); }
  40% { background-color: rgba(63, 218, 216, 1); }
  50% { background-color: rgba(47, 201, 226, 1); }
  60% { background-color: rgba(28, 127, 238, 1); }
  70% { background-color: rgba(95, 21, 242, 1); }
  80% { background-color: rgba(186, 12, 248, 1); }
  90% { background-color: rgba(251, 7, 217, 1); }
  100% { background-color: rgba(255, 0, 0, 1); }
}

header {
  height: 100%;
  width: 20vw;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 30px;
  color: var(--black);
}

header wow1 {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  animation: rainbow 20s infinite linear;
}

header wow2 {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #eeeeeed0;
}

/* links */
header a:link {
  color: var(--black);
}
header a:hover {
  color: var(--blue);
}
header a:visited {
  color: var(--black);
}
header a:link:hover {
  color: var(--blue);
}
header a:visited:hover {
  color: var(--blue);
}
header a:active {
  color: var(--black);
}

content {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 20vw;
  margin-right: auto;
  width: calc(80vw - 2em);
  padding: 0 1em;
  text-align: center;
}

.home {
  position: fixed;
  top: -4em;
  left: -4em;
  width: 8em;
  height: 8em;
  background-color: var(--background-yellow);
  border-radius: 100vw;
  transition: all 0.5s ease;
}
.home:hover {
  transform: scale(1.3, 1.3);
  filter: brightness(2);
}
.home svg {
  position: absolute;
  top: 4.6em;
  left: 4.6em;
  width: 2em;
  height: 2em;
}

.settings {
  position: fixed;
  top: -4em;
  right: -4em;
  width: 8em;
  height: 8em;
  background-color: var(--background-violet);
  border-radius: 100vw;
  transition: all 0.5s ease;
}
.settings:hover {
  transform: scale(1.3, 1.3);
  filter: brightness(2);
}
.settings svg {
  position: absolute;
  top: 4.6em;
  right: 4.6em;
  width: 1.8em;
  height: 1.8em;
}

.settingsx {
  position: absolute;
  top: 0em;
  right: 0em;
  width: 4.5em;
  height: 3em;
}
.settingsx svg {
  position: absolute;
  top: 1.2em;
  right: 1.5em;
  width: 1.8em;
  height: 1.8em;
  transition: all 0.5s ease;
}
.settingsx:hover svg {
  transform: scale(1.3, 1.3);
}

/*
html:has(dialog[open]) {
  overflow: hidden;
}
*/
dialog {
  max-inline-size: min(90vw, 100%);
  max-block-size: min(80vh, 100%);
  max-block-size: min(80dvb, 100%);
  overflow: hidden;
  margin: auto;
  position: fixed;
  inset: 0;
  z-index: 99;
  padding: 2em;
  border-radius: 1em;
  box-shadow: 2px 2px 4px var(--white);
  background-color: var(--background-blue);
  color: var(--white);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) allow-discrete;
}
dialog:not([open]) {
  pointer-events: none;
  opacity: 0;
}
@starting-style {
  dialog[open] {
    opacity: 0;
  }
}
@starting-style {
  dialog:not([open]) {
    opacity: 1;
  }
}
dialog::backdrop {
  background-color: transparent;
}
dialog[open]::backdrop {
  backdrop-filter: blur(2px);
  background-color: rgb(11 11 11 / 25%);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) allow-discrete;
}
@starting-style {
  dialog:open::backdrop {
    background-color: transparent;
  }
}

#boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
  width: 100%;
}
.box {
  display: inline-block;
  width: 4.5em;
  height: 4.5em;
  padding: 0.5em;
  border-radius: 0.5em;
  text-align: center;
  /* border: 2px solid var(--white);
  border-radius: 0.5em; */
  transition: all 0.5s ease;
}
#boxes .box {
  margin: 0.5em;
}
.box::after {
  content: "";
  flex: auto;
}
.box:hover {
  filter: brightness(1.5);
  transform: rotate(2deg) scale(0.96, 0.96);
}
.box:active {
  filter: brightness(1.5);
  transform: rotate(10deg) scale(0.9, 0.9);
}