@import 'https://fonts.googleapis.com/css?family=Damion|Work+Sans:900';
body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.nrw .nrw-background {
  background: linear-gradient(180deg, #120458 0%, #007BFF 100%) no-repeat fixed;
  min-height: 100vh;
  animation: gridGeneration 3000s linear;
}
.nrw .nrw-background p {
  font-family: "Work Sans", sans-serif;
  margin: 0;
  padding: 16px 0 16px 0;
  text-align: center;
  font-size: 50px;
  color: transparent;
  background: linear-gradient(#ffffff 0%, #007BFF 22%, #00FFFF 50%, #ffffff 51%, #FF00FF 78%, #FF00FF 78%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nrw .nrw-background p:before {
  content: attr(text);
}
.nrw .nrw-background p:after {
  content: attr(text);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.2;
}
.nrw .nrw-background .nrw-grid {
  background-size: 40px 40px;
  background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
  background-attachment: fixed;
  animation: gridMovement 30s linear infinite;
  min-height: 100vh;
}

@keyframes gridMovement {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 100%;
  }
}
canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  bottom: 0;
  border-radius: 50%;
}

audio {
  position: fixed;
  width: 100%;
  bottom: 0;
  right: 0;
}

.retro {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50vh;
  height: 50vh;
  border-radius: 50%;
}
.retro:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  filter: blur(40px);
  animation: fadeIn 1s easeIn;
  opacity: 1;
  transform: scale(1.6);
}
.retro .lines {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.9;
  background: linear-gradient(180deg, #FF0066 0%, rgb(199, 0, 181) 50%, #FF00FF 100%);
}
.retro .lines .line {
  width: 100%;
  position: relative;
  height: 2.5%;
}
.retro .lines .line:nth-child(25) {
  background: #FF6600;
  animation: rotateLine 4s 2.5s infinite;
}
.retro .lines .line:nth-child(26) {
  background: #FF6600;
  animation: rotateLine 4s 2.6s infinite;
}
.retro .lines .line:nth-child(27) {
  background: #FF6600;
  animation: rotateLine 4s 2.7s infinite;
}
.retro .lines .line:nth-child(28) {
  background: #FF6600;
  animation: rotateLine 4s 2.8s infinite;
}
.retro .lines .line:nth-child(29) {
  background: #FF6600;
  animation: rotateLine 4s 2.9s infinite;
}
.retro .lines .line:nth-child(30) {
  background: #FF6600;
  animation: rotateLine 4s 3s infinite;
}
.retro .lines .line:nth-child(31) {
  background: #FF6600;
  animation: rotateLine 4s 3.1s infinite;
}
.retro .lines .line:nth-child(32) {
  background: #FF6600;
  animation: rotateLine 4s 3.2s infinite;
}
.retro .lines .line:nth-child(33) {
  background: #FF6600;
  animation: rotateLine 4s 3.3s infinite;
}
.retro .lines .line:nth-child(34) {
  background: #FF6600;
  animation: rotateLine 4s 3.4s infinite;
}
.retro .lines .line:nth-child(35) {
  background: #FF6600;
  animation: rotateLine 4s 3.5s infinite;
}
.retro .lines .line:nth-child(36) {
  background: #FF6600;
  animation: rotateLine 4s 3.6s infinite;
}
.retro .lines .line:nth-child(37) {
  background: #FF6600;
  animation: rotateLine 4s 3.7s infinite;
}
.retro .lines .line:nth-child(38) {
  background: #FF6600;
  animation: rotateLine 4s 3.8s infinite;
}
.retro .lines .line:nth-child(39) {
  background: #FF6600;
  animation: rotateLine 4s 3.9s infinite;
}
.retro .lines .line:nth-child(40) {
  background: #FF6600;
  animation: rotateLine 4s 4s infinite;
}
.retro .lines .line:nth-child(41) {
  background: #FF6600;
  animation: rotateLine 4s 4.1s infinite;
}
.retro .lines .line:nth-child(42) {
  background: #FF6600;
  animation: rotateLine 4s 4.2s infinite;
}
.retro .lines .line:nth-child(43) {
  background: #FF6600;
  animation: rotateLine 4s 4.3s infinite;
}
.retro .lines .line:nth-child(44) {
  background: #FF6600;
  animation: rotateLine 4s 4.4s infinite;
}
.retro .lines .line:nth-child(45) {
  background: #FF6600;
  animation: rotateLine 4s 4.5s infinite;
}
.retro .lines .line:nth-child(46) {
  background: #FF6600;
  animation: rotateLine 4s 4.6s infinite;
}
.retro .lines .line:nth-child(47) {
  background: #FF6600;
  animation: rotateLine 4s 4.7s infinite;
}
.retro .lines .line:nth-child(48) {
  background: #FF6600;
  animation: rotateLine 4s 4.8s infinite;
}
.retro .lines .line:nth-child(49) {
  background: #FF6600;
  animation: rotateLine 4s 4.9s infinite;
}
.retro .lines .line:nth-child(50) {
  background: #FF6600;
  animation: rotateLine 4s 5s infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rotateLine {
  0% {
    transform: rotateX(0deg);
  }
  60% {
    transform: rotateX(60deg);
  }
  90% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

/*# sourceMappingURL=style.css.map */