body {
  background: #000;
  margin-top: 150px;
}

.mainContent {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.mainContent h1 {
  color: transparent;
  font-size: 20rem;
  line-height: 10rem;
  margin: 1rem 0;
  overflow: hidden;
  transition: line-height 0.3s ease;
  background: linear-gradient(to bottom, #8803fb, #b1066c);
  background-size: 100% 300%; /* 300% because 3 h1s stacked */
  -webkit-background-clip: text;
  background-clip: text;
}
.mainContent h1:hover {
  line-height: 21rem;
  cursor: pointer;
}
.mainContent h1:nth-child(1) {
  background-position: 0% 0%;
}
.mainContent h1:nth-child(2) {
  background-position: 0% 50%;
}
.mainContent h1:nth-child(3) {
  background-position: 0% 100%;
}

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