.space-mono-regular {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.space-mono-bold {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.space-mono-regular-italic {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.space-mono-bold-italic {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: italic;
}

html, body {
    margin: 0;
    height: 100%;
}

body {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
  background-color: black;
}

.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.spinny-guy {
  animation: spin 2s infinite linear;
  color: white;
  max-height: 50%;
  filter: drop-shadow(0px 0px 2rem black);
}

@keyframes spin {
            0% {
                transform: rotate(0deg) 
                      translateY(100px) rotate(0deg) rotateY(0deg) rotateZ(360deg) rotateX(360deg);
            }

            100% {
                transform: rotate(360deg) 
                      translateY(100px) rotate(-360deg) rotateY(720deg) rotateZ(0deg) rotateX(0deg);
            }
        }

@keyframes layer1-scroll {
    0% { background-position: left 0px top 0px; }
    100% { background-position: left -800px top -1600px; }
}

.container::before {
  content: "";
  background-image: url("assets/magenter.png");
  background-size: 512px;
  position: absolute;
  width: 100%;
  height: 100%;
  animation: 60s linear infinite layer1-scroll;
  
}

@keyframes layer2-scroll {
    0% { background-position: right 0px bottom 0px; }
    100% { background-position: right -800px bottom -1600px; }
}

body::before {
  content: "";
  background-image: url("assets/cyaner.png");
  background-size: 256px;
  position: absolute;
  width: 100%;
  height: 100%;
  animation: 120s linear infinite layer2-scroll;

}