html {
  background-color: pink;
}

@keyframes backgroundColorPalette {
  0% {
    background: #ffc4e5;
  }
  50% {
    background: #a9d4fc;
  }
  100% {
    background: #d6a1ff;
  }
}

html {
  animation-name: backgroundColorPalette;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

.title {
  text-align: center;
  color: white;
  margin-top: 350px;
  transform: rotate(2deg);
}

.title:hover {
  color: red;
}

.title {
  display: block;
  position: relative;
  color: white;
}

.title:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 4px;
  bottom: 0;
  left: 0;
  background-color: red;
  transform-origin: bottom right;
  transition: transform 0.5s ease-out;
}

.title:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

h2 {
  text-align: center;
  display: block;
  position: relative;
  color: red;
  margin-top: 0px;
  text-decoration: underline;
  font-size: 20px;
  transform: rotate(2deg);
}

h2:hover {
  color: red;
}

a:link {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}