body {
  box-sizing: border-box;
  margin: 10px;
  font-family: "Rubik Mono One", monospace;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vh - 20px);
  padding: 1vw;
  color: #fff;
  background: #121826;
  background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

main {
  display: flex;
  justify-content: center;
}

h1 {
  font-size: 9vw;
}

h3 {
  text-align: center;
  color: #f1829d;
}

h5 {
  font-size: 12px;
  line-height: 14px;
  margin: 3px 0;
}

svg {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  opacity: 0.4;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-filter: blur(250px);
  filter: blur(250px);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.background__shape {
  mix-blend-mode: lighten;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  position: absolute;
  border-radius: 100%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
  animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
}

.background__shape--1 {
  bottom: 0;
  left: 0;
  width: 40vw;
  height: 30vw;
  background: #dc143c;
  mix-blend-mode: lighten;
  -webkit-transform: translate(-30%, 40%);
  transform: translate(-30%, 40%);
  -webkit-animation-name: gradientShapeAnimation1;
  animation-name: gradientShapeAnimation1;
}

.background__shape--2 {
  top: 0;
  right: 0;
  width: 30vh;
  height: 50vh;
  background: #9f0c30;
  -webkit-transform: translate(20%, -40%);
  transform: translate(20%, -40%);
  -webkit-animation-name: gradientShapeAnimation2;
  animation-name: gradientShapeAnimation2;
}

.background__shape--3 {
  top: 10vw;
  left: 10vw;
  width: 15vw;
  height: 15vw;
  background: #ff0033;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-name: gradientShapeAnimation3;
  animation-name: gradientShapeAnimation3;
}

.loading {
  display: inline-block;
  clip-path: inset(0 3ch 0 0);
  animation: l 1s steps(4) infinite;
}

@keyframes l {
  to {
    clip-path: inset(0 -1ch 0 0);
  }
}

@-webkit-keyframes gradientShapeAnimation1 {
  0% {
    -webkit-transform: translate(-30%, 40%) rotate(-20deg);
    transform: translate(-30%, 40%) rotate(-20deg);
  }

  25% {
    -webkit-transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg);
    transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg);
  }

  50% {
    -webkit-transform: translate(30%, -10%) rotate(180deg);
    transform: translate(30%, -10%) rotate(180deg);
  }

  75% {
    -webkit-transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg);
    transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg);
  }

  100% {
    -webkit-transform: translate(-30%, 40%) rotate(-20deg);
    transform: translate(-30%, 40%) rotate(-20deg);
  }
}

@keyframes gradientShapeAnimation1 {
  0% {
    -webkit-transform: translate(-30%, 40%) rotate(-20deg);
    transform: translate(-30%, 40%) rotate(-20deg);
  }

  25% {
    -webkit-transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg);
    transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg);
  }

  50% {
    -webkit-transform: translate(30%, -10%) rotate(180deg);
    transform: translate(30%, -10%) rotate(180deg);
  }

  75% {
    -webkit-transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg);
    transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg);
  }

  100% {
    -webkit-transform: translate(-30%, 40%) rotate(-20deg);
    transform: translate(-30%, 40%) rotate(-20deg);
  }
}

@-webkit-keyframes gradientShapeAnimation2 {
  0% {
    -webkit-transform: translate(20%, -40%) rotate(-20deg);
    transform: translate(20%, -40%) rotate(-20deg);
  }

  20% {
    -webkit-transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
    transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
  }

  40% {
    -webkit-transform: translate(-40%, 50%) rotate(180deg);
    transform: translate(-40%, 50%) rotate(180deg);
  }

  60% {
    -webkit-transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
    transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
  }

  80% {
    -webkit-transform: translate(10%, -30%) rotate(180deg);
    transform: translate(10%, -30%) rotate(180deg);
  }

  100% {
    -webkit-transform: translate(20%, -40%) rotate(340deg);
    transform: translate(20%, -40%) rotate(340deg);
  }
}

@keyframes gradientShapeAnimation2 {
  0% {
    -webkit-transform: translate(20%, -40%) rotate(-20deg);
    transform: translate(20%, -40%) rotate(-20deg);
  }

  20% {
    -webkit-transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
    transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
  }

  40% {
    -webkit-transform: translate(-40%, 50%) rotate(180deg);
    transform: translate(-40%, 50%) rotate(180deg);
  }

  60% {
    -webkit-transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
    transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
  }

  80% {
    -webkit-transform: translate(10%, -30%) rotate(180deg);
    transform: translate(10%, -30%) rotate(180deg);
  }

  100% {
    -webkit-transform: translate(20%, -40%) rotate(340deg);
    transform: translate(20%, -40%) rotate(340deg);
  }
}

@-webkit-keyframes gradientShapeAnimation3 {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1) rotate(0deg);
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(-30%, -70%) scale(1.2) rotate(90deg);
    transform: translate(-30%, -70%) scale(1.2) rotate(90deg);
  }
  40% {
    -webkit-transform: translate(10%, -30%) scale(0.8) rotate(180deg);
    transform: translate(10%, -30%) scale(0.8) rotate(180deg);
  }
  60% {
    -webkit-transform: translate(70%, 10%) scale(1.3) rotate(270deg);
    transform: translate(70%, 10%) scale(1.3) rotate(270deg);
  }
  80% {
    -webkit-transform: translate(-10%, 70%) scale(0.7) rotate(360deg);
    transform: translate(-10%, 70%) scale(0.7) rotate(360deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1) rotate(450deg);
    transform: translate(-50%, -50%) scale(1) rotate(450deg);
  }
}

@keyframes gradientShapeAnimation3 {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1) rotate(0deg);
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(-30%, -70%) scale(1.2) rotate(90deg);
    transform: translate(-30%, -70%) scale(1.2) rotate(90deg);
  }
  40% {
    -webkit-transform: translate(10%, -30%) scale(0.8) rotate(180deg);
    transform: translate(10%, -30%) scale(0.8) rotate(180deg);
  }
  60% {
    -webkit-transform: translate(70%, 10%) scale(1.3) rotate(270deg);
    transform: translate(70%, 10%) scale(1.3) rotate(270deg);
  }
  80% {
    -webkit-transform: translate(-10%, 70%) scale(0.7) rotate(360deg);
    transform: translate(-10%, 70%) scale(0.7) rotate(360deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1) rotate(450deg);
    transform: translate(-50%, -50%) scale(1) rotate(450deg);
  }
}

@media screen and (max-width: 520px) {
  h3 {
    font-size: 3vw;
  }
}