<h1>W3cplus.com !!! (Hover Me)</h1>

@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  color: #fff;
  font-size: 130%;
  letter-spacing: 0.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
}

h1 {
  display: inline-flex;
  position: relative;
  padding-bottom: 8vh;
  font-size: 20vh;
  cursor: pointer;
  background-image: linear-gradient(
    to right,
    #f35 0%,
    #9c27b0 20%,
    #03a9f4 40%,
    #009688 60%,
    #ff9800 80%,
    #e800ff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.2s ease;

  &:hover {
    background-image: linear-gradient(
      to left,
      #f35 0%,
      #9c27b0 20%,
      #03a9f4 40%,
      #009688 60%,
      #ff9800 80%,
      #e800ff 100%
    );

    &::after {
      background-image: linear-gradient(
        to left,
        #f35 0%,
        #9c27b0 20%,
        #03a9f4 40%,
        #009688 60%,
        #ff9800 80%,
        #e800ff 100%
      );
      animation: move 0.6s infinite linear alternate;
    }
  }

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4vh;
    height: 6vh;
    background-image: linear-gradient(
      to right,
      #f35 0%,
      #9c27b0 20%,
      #03a9f4 40%,
      #009688 60%,
      #ff9800 80%,
      #e800ff 100%
    );
    mask-image: url("https://tylergaw-assets.s3.amazonaws.com/inline-masks/repeater.svg#squiggle");
    mask-size: 6vh;
  }
}

@keyframes move {
  to {
    mask-position: 150%;
  }
}