:root {
  --clr1: #9181ff; /* purple */
  --clr2: #8de9ff; /* baby blue */
  --clr3: #fffa91; /* yellow */
  --clr4: #ff76c3; /* pink */
  --clr5: #85ffa9; /* green */
  --clr6: #ffa563; /* orange */
  --clr7: #ff686c; /* red */
  --clr8: #3850eb; /* blue */
  --black: #1f1f1f; /* black */
}

* {
  margin: 0;
}

body {
  height: 100vh;
  width: 100vw;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
}

div.container {
  display: flex;
}

p {
  letter-spacing: 5px;
  font-weight: 900;
  font-family: Poppins;
  font-size: 300px;
}

p:nth-child(1) {
  background: 
    repeating-linear-gradient(to right, var(--clr2) 0 10%, transparent 0 20%),
    repeating-linear-gradient(var(--clr1) 0 7%, var(--clr5) 0 10%);
  background-size: 150px;
  color: transparent;
  -webkit-background-clip: text;
}

p:nth-child(2) {
  background-image: 
    linear-gradient(110deg, var(--clr7) 25%, transparent 25%), 
    linear-gradient(135deg, var(--clr1) 55%, var(--clr3) 25%), 
    linear-gradient(45deg, transparent 75%, var(--clr1) 75%), 
    linear-gradient(135deg, transparent 75%, var(--black) 75%);
  background-size: 40px 70px; 
  background-position: 0 0, 40px 0, 40px -40px, 0px 40px; 
  color: transparent;
  -webkit-background-clip: text;
}

p:nth-child(3) {
  background-image: 
    linear-gradient(45deg, var(--clr4) 25%, transparent 25%), 
    linear-gradient(135deg, var(--clr5) 25%, transparent 25%), 
    linear-gradient(45deg, var(--clr5) 75%, var(--clr8) 75%), 
    linear-gradient(135deg, transparent 75%, var(--clr8) 75%);
  background-size: 40px 40px; 
  background-position: 0 0, 30px 0, 30px -30px, 0px 30px; 
  color: transparent;
  -webkit-background-clip: text;
}

p:nth-child(4) {
  background-color: var(--clr1);
  background-image: 
    linear-gradient(45deg, var(--clr2) 25%, transparent 25%), 
    linear-gradient(135deg, var(--clr4) 25%, var(--clr8) 25%), 
    linear-gradient(45deg, transparent 75%, var(--clr3) 75%), 
    linear-gradient(135deg, transparent 75%, var(--black) 75%);
  background-size: 40px 70px; 
  background-position: 0 0, 40px 0, 40px -40px, 0px 40px; 
  color: transparent;
  -webkit-background-clip: text;
}

p:nth-child(5) {
  background-image: 
    linear-gradient(10deg, var(--clr8) 25%, transparent 25%), 
    linear-gradient(100deg, var(--clr8) 25%, var(--clr5) 0 100%), 
    linear-gradient(100deg, transparent 75%, var(--black) 75%);
  background-size: 40px 70px; 
  background-position: 0 0, 40px 0, 40px -40px, 0px 40px; 
  color: transparent;
  -webkit-background-clip: text;
}

@media screen and (max-height: 400px) {
  .container > p {
    font-size: 200px;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');

body {
  height: 100vh;
  margin: 0;
}

body, html, #glcanvas {
  overflow: hidden;
}

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}