html,
body {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #502020 0%, #682e2e 45%, #6d2f2f 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* OVERALL PUMPKIN */
.pumpkin {
  height: 11em;
  width: 15em;
  background: orange;
  border: 0.4em solid #a14907;
  border-radius: 70%/110%;
  position: relative;
  box-shadow: inset 0 0px 20px #a14907, 0 0 30px -4px red;
  z-index: 1;
  animation: float 3s infinite;

}

.pumpkin .texture {
  height: 10.8em;
  width: 6.5em;
  position: absolute;
  bottom: -0.4em;
  left: 4em;
  border-radius: 70%/130%;
  border-bottom: 0.5em solid #a14907;
  border-top: 0.5em solid #a14907;
}

.pumpkin .texture:after {
  content: "";
  display: block;
  height: 10.7em;
  width: 12em;
  position: absolute;
  bottom: -0.4em;
  left: -2.5em;
  border-radius: 70%/130%;
  border-bottom: 0.5em solid #a14907;
  border-top: .5em solid #a14907;
}

.pumpkin .root {
  background: #517f54;
  height: 2.8em;
  width: 1.25em;
  position: absolute;
  left: calc(7.5em - 0.625em);
  top: -2.7em;
  transform: rotate(5deg);
  border-radius: 30% 20% 70% 10%;
  z-index: -1;
  box-shadow: inset 0 0px 10px #29412b;
}

/* EYE STUFF */
.pumpkin .eye {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0.8em solid transparent;
  top: 2.8em;
}

.pumpkin .eye.right {
  right: 3.7em;
  transform: rotate(30deg);
  border-bottom: 2.1em solid transparent;
  border-left: 2.4em solid #401d03;
}

.pumpkin .eye.left {
  left: 3.7em;
  transform: rotate(-30deg);
  border-bottom: 2.1em solid transparent;
  border-right: 2.4em solid #401d03;
}

/* MOUTH  */
.pumpkin .mouth {
  width: 4em;
  height: 2em;
  position: absolute;
  bottom: 1.5em;
  border-bottom: 1em solid #401d03;
}

.pumpkin .mouth.right {
  right: 3.6em;
  border-radius: 0 0 100% 0;
}

.pumpkin .mouth.left {
  left: 3.6em;
  border-radius: 0 0 0 100%;
}

.pumpkin .teeth {
  width: 0.5em;
  height: 1em;
  position: absolute;
  top: 7.7em;
  left: 7.25em;
  border-top: 0.8em solid transparent;
  border-bottom: 0em solid transparent;
  border-left: 0.8em solid #401d03;
}

.pumpkin .teeth:before,
.pumpkin .teeth:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0.8em solid transparent;
}

.pumpkin .teeth:before {
  right: 2.2em;
  top: -0.65em;
  transform: rotate(30deg);
  border-bottom: 0.5em solid transparent;
  border-left: 1em solid #401d03;
}

.pumpkin .teeth:after {
  left: 1em;
  top: -0.85em;
  transform: rotate(30deg);
  border-bottom: 0.5em solid transparent;
  border-left: 1em solid #401d03;
}

.shadow {
  margin: 10% auto 0;
  background: #000;
  width: 230px;
  height: 50px;
  border-radius: 50%;
  animation: zoom 3s infinite;
}

/* MAKES THE PUMPKIN MOVE */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10%);
  }

}

@keyframes zoom {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.8);

  }
}

/* ADDIONAL STUFF ADDED */

.pumpkin:hover {
  background: pink;
}

.face:hover .eye.right {
  border-left-color: #2f4040;
}

.face:hover .eye.left {
  border-right-color: #2f4040;
}

.face:hover .mouth {
  border-bottom-color: rgb(255, 255, 255);
}

.face:hover .teeth,
.face:hover .teeth:before,
.face:hover .teeth:after {
  border-left-color: rgb(11, 121, 121);
}

h1:hover {
  color: aqua;
}

.button{
    background: #646ef1;
    border-radius:5px;
    display: inline-block;
    padding: 8px 12px;
    margin: 6px;
    width: auto;
    sticky: top;
}

.button a{
    color: #fff;
    text-decoration: none;
    display: inline-block;
}