:where(:root) {
  --primary-color: white;
  --background-color: black;
  --highlight-color: red;
  --flash-color: var(--background-color);
  --flash-background-color: var(--primary-color);
  --space: 4px;
}

:where(canvas) {
  pointer-events: none;
}

#back-wag {
  z-index: -999;
}

:where(textarea) {
  white-space: pre;
  font-size: 16px;
  line-height: 1;

  /* UNNEEDED SHIT */
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  background-color: transparent;

  scrollbar-color: var(--primary-color) transparent;

  height: 100%;
  resize: none;
}

/* UNEEDED SHIT */
:where(input[type="text"]) {
  /* font-size: 16px; */
  /* line-height: 1; */
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  background-color: transparent;
}

:where(input[type="text"]:focus) {
  outline: none;
}

:where(input[type="text"])::placeholder {
  color: var(--primary-color);
}

:where(textarea:focus) {
  outline: none;
}

:where(*) {
  box-sizing: border-box;
  overscroll-behavior: none;
}

:where(html) {
  height: 100%;
}

:where(body) {
  height: 100%;
  display: flex;
  margin: 0px;
  gap: var(--space);
  padding: var(--space);
  flex-direction: column;
  background-color: var(--background-color);
  overflow: hidden;
}

:where(main) {
  height: 100%;
  display: grid;
  gap: var(--space);
  grid-template-columns: repeat(auto-fit, minmax(min(30%, 100%), 1fr));
  grid-auto-rows: 1fr;
}

:where(section) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

:where(nav) {
  display: flex;
  justify-content: flex-end;
  gap: var(--space);
  display: inline-block;
}

:where(marquee) {
  display: inline;
  width: fit-content;
  flex-grow: 1;
}

header > span {
  padding-left: calc(var(--space) * 2);
  user-select: none;
}

button {
  background-color: var(--background-color);
  color: var(--primary-color);
  border-color: var(--primary-color);
  cursor: pointer;
}

:where(header) {
  width: 100%;
  position: fixed;
  right: 4px;
  top: 4px;
  gap: var(--space);
  align-items: flex-start;
  flex-wrap: wrap;
  opacity: 0%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  animation: vanish 2s linear;
}

@keyframes vanish {
  from {
    opacity: 100%;
  }
}

:where(header:hover),
:where(header:focus-within) {
  opacity: 100%;
}

:where(.flash) {
  animation: flash 0.2s ease-out, run 0.2s ease-out;
}

:where(.flip-flash) {
  animation: flip-flash 0.2s ease-out;
}

.flip-flash {
  /* background-color: var(--primary-color); */
  /* color: var(--background-color); */
  /* scrollbar-color: var(--background-color) transparent; */
}

@keyframes flip-flash {
  from {
  }
}

@keyframes flash {
  from {
  }
}

.flash {
  background-color: var(--primary-color);
  color: var(--background-color);
  scrollbar-color: var(--background-color) transparent;
}

@keyframes run {
}

:where(main) {
  /* margin: 10vh 10vh; */
  /* margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px; */
  /* margin-top: 30vh; */
  /* mult by device pixel ratio */
  padding-top: calc(300px / var(--device-pixel-ratio, 1));
  padding-bottom: calc(100px / var(--device-pixel-ratio, 1));
  padding-right: calc(100px / var(--device-pixel-ratio, 1));
  padding-left: calc(100px / var(--device-pixel-ratio, 1));
  /* margin-bottom: 8vh; */
  /* margin-inline: 10vw; */
}

:where(textarea)::selection {
  background-color: var(--primary-color);
  color: var(--background-color);
}

:where(select) {
  display: none;
}

:where(body) {
  padding: 0px;
}

:where(a) {
  color: var(--primary-color);
}

:where(a:hover) {
  transform: scale(1.05);
}

:where(a:active) {
  transform: scale(1);
}