:root {
}

html, body {
  position: relative;

  margin: 0;
  padding: 0;

  font-family: Monaco, monospace;
  font-size: 10px;

  letter-spacing: 4px;
}

*, *::after, *::before {
  box-sizing: border-box;

  word-break: break-word;
}

*::after, *::before {
  content: '';
}

body {
  padding-left: 35px;
  padding-right: 15px;
  padding-top: 35px;

  height: 100dvh;
  width: 100dvw;
}

body::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  
  height: 20px;

  border-bottom: 1px solid #000000;
}

body::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;

  width: 20px;

  border-right: 1px solid #000000;
}

h1 {
  position: relative;

  width: fit-content;

  letter-spacing: 10px;

  font-weight: 100;
}

h1::after {
  position: absolute;
  top: 100%;
  left: 5px;
  right: -10px;

  border-bottom: 1px solid #000000;
}

h1::before {
  position: absolute;
  top: 5px;
  left: 100%;
  bottom: -10px;

  border-right: 1px solid #000000;
}

li {
  position: relative;

  list-style-type: none;
}

li:not(:first-child) {
  margin-top: 1em;
}

li::before {
  position: absolute;
  top: 50%;
  right: 100%;
  
  height: 0.5em;
  width: 0.5em;

  border: 1px solid #000000;

  transform: translate(
    -50%,
    calc(
      -50% +
      1px
    )
  );
}

li button {
  margin: 0;
  padding: 0;

  background: none;

  border: none;

  font-size: inherit;
  font-family: inherit;
  
  letter-spacing: inherit;

  cursor: pointer;
}

#content {

}

.content {
  position: fixed;
  top: 50%;
  left: 50%;

  width: 90dvw;
  max-width: 586px;
  padding: 20px;

  background: #ffffff;

  border: 2px solid #000000;

  box-shadow: 10px 10px 0px 5px rgba(
    0,
    0,
    0,
    0.5
  );

  opacity: 0;

  pointer-events: none;
  
  user-select: none;

  transform: translate(
    -50%,
    -50%
  );

  transition: opacity 252ms linear;
}

h2 {
  border-bottom: 1px solid #000000;
}

p a {
  display: block;
  text-align: center;
}

code {
  display: block;

  margin-top: 10px;
  padding: 10px;

  background: #333333;

  color: #00ff00;
}

canvas {
  position: fixed;
  top: calc(
    50% +
    40px
  );
  left: calc(
    50% +
    10px
  );

  height: calc(
    100% -
    40px
  );
  width: calc(
    100% -
    10px
  );

  max-height: min(
    500px,
    100%
  );

  max-width: min(
    500px,
    100%
  );

  object-fit: contain;

  transform: translate(
    -50%,
    -50%
  );

  filter: invert(
    1
  );
}

@keyframes inversion_rotation_one {
  0% {
    transform: translate(
      -50%,
      -50%
    ) rotate(
      45deg
    );
  }
  100% {
    transform: translate(
      -50%,
      -50%
    ) rotate(
      40deg
    );
  }
}

@keyframes inversion_rotation_two {
  0% {
    transform: translate(
      -50%,
      -50%
    ) rotate(
      45deg
    );
  }
  100% {
    transform: translate(
      -50%,
      -50%
    ) rotate(
      405deg
    );
  }
}

@keyframes inversion_rotation_three {
  0% {
    transform: translate(
      -50%,
      -50%
    ) rotate(
      10deg
    );
  }
  100% {
    transform: translate(
      -50%,
      -50%
    ) rotate(
      370deg
    );
  }
}

.invert {
  position: fixed;
  top: 50%;
  left: 50%;

  width: min(100dvh, 100dvw);
  height: min(100dvh, 100dvw);  
  backdrop-filter: invert(1);

  transform: translate(-50%, -50%) rotate(45deg);
}

.invert:nth-child(
  1
) {
  width: min(
    90dvh,
    90dvw
  )
  height: min(
    90dvh,
    90dvw
  );

  transform: translate(-50%, -50%) rotate(45deg);

  animation: inversion_rotation_one 10000ms ease-in-out alternate infinite;
}

.invert:nth-child(
  2
) {
  width: min(
    60dvh,
    60dvw
  );

  height: min(
    60dvh,
    60dvw
  );

  transform: translate(-50%, -50%) rotate(10deg);

  animation: inversion_rotation_three 40404ms reverse backwards infinite;
}

.invert:nth-child(
  3
) {
  width: min(
    87dvh,
    87dvw
  );

  height: min(
    87dvh,
    87dvw
  );

  animation: inversion_rotation_two 80808ms backwards infinite;
}

.invert:nth-child(
  4
) {
  width: min(
    25dvh,
    25dvw
  );

  height: min(
    25dvh,
    25dvw
  );

  transform: translate(-50%, -50%) rotate(-30deg);
}

.invert:nth-child(
  5
) {
  left: calc(50% + 35px);
  top: calc(50% + 25px);

  width: min(
    10dvw,
    10dvh
  );

  height: min(
    10dvw,
    10dvh
  );

  border-radius: 100%;

  transform: translate(-50%, -50%)
}

@media (max-width: 325px) {
  body {
    font-size: 1.25dvw;
  }
}