html {
  height: 100%;
  width: 100%;
}

body {
  overflow-y: hidden;
  background-image: url(https://i.makeagif.com/media/8-25-2022/59P2od.gif);
  background-size: 200%;
}

h1 {
  position: absolute;
  width: 90%;
  left: 5%;
  top: 1%;
  text-align: center;
  animation: huge 3s ease-in-out forwards;
}

.yrsc {
  position: absolute;
  width: 5%;
  left: 1%;
  top: 1%;
  height: 5%;
  background-image: linear-gradient(to right top, #057eff, #c800ff);
  animation: his 3s ease-in-out forwards;
  padding: 0.3% 0.3% 0.3% 0.3%;
  font-size: 1em;
  border: double;
}

.sm {
  font-size: 0.5em;
}

.hi {
  position: absolute;
  width: 75%;
  left: 5%;
  top: 10%;
  height: 20%;
  background-image: linear-gradient(to right top, #05ff71, #ff2300);
  animation: hi 3s ease-in-out forwards;
  padding: 0.3% 0.3% 0.3% 0.3%;
  font-size: 1.7em;
}

@keyframes huge {
    0% {
      font-size: 5em;
    }
    100% {
      font-size: 2em;
    }
}

@keyframes hi {
    0% {
      top: 90%;
    }
    100% {
      top: 10%;
    }
}

@keyframes his {
    0% {
      font-size: 3em;
      width: 20.5%;
      height: 20%;
    }
    100% {
      font-size: 1em;
      width: 7%;
      height: 6%;
    }
}

@keyframes hiy {
    0% {
      top: 90%;
    }
    100% {
      top: 10%;
    }
}

@keyframes hiyy {
    0% {
      top: 115%;
      font-size: 0.01em;
    }
    100% {
      top: 35%;
      font-size: 2em;
    }
}

.enter {
  position: absolute;
  width: 15%;
  right: 4.1%;
  top: 10%;
  height: 21.5%;
  background-image: linear-gradient(to right bottom, #ff2300, #ff00ff);
  animation: hiy 3s ease-in-out forwards;
  padding: 0.3% 0.3% 0.3% 0.3%;
  font-size: 3em;
}

.enter:hover {
  background-image: linear-gradient(to right bottom, #ff00ff, #ff2300);
  font-size: 4em;
}

.bye {
  position: absolute;
  width: 90%;
  left: 5%;
  top: 35%;
  text-align: center;
  height: 60%;
  border: double;
  padding: 0.3% 0.3% 0.3% 0.3%;
  animation: hiyy 3s ease-in-out forwards;
  font-size: 7em;
}