html {
  min-height: 100%;
}

body {
  background-color: #59AFDE;
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow:hidden;
/*   border: 2px solid red; */
}

.snowflake {
  position: absolute;
  color: snow;
  opacity: 0;
}

.snowflake1 {
  left: 135px;
  animation: snow 10s ease infinite;
}

.snowflake2 {
  left: 200px;
  animation: snow 6s ease infinite;
  animation-delay: 3s;
}

.snowflake3 {
  left: 350px;
  animation: snow 4s ease infinite;
  animation-delay: 1s;
}

.snowflake4 {
  left: 1025px;
  animation: snow 8s ease infinite;
  animation-delay: 1s;
}

.snowflake5 {
  left: 1200px;
  animation: snow 8s ease infinite;
  animation-delay: 2s;
}

.snowflake6 {
  left: 1350px;
  animation: snow 6s ease infinite;
  animation-delay: 3s;
}

.snowflake7 {
  left: 1550px;
  animation: snow 7s ease infinite;
  animation-delay: 1s;
}

.snowflake8 {
  left: 1650px;
  animation: snow 9s ease infinite;
  animation-delay: 6s;
}

.snowflake9 {
  left: 1850px;
  animation: snow 6s ease infinite;
  animation-delay: 6s;
}

.snowflake10 {
  left: 1950px;
  animation: snow 7s ease infinite;
  animation-delay: 2s;
}

.snowflake11 {
  left: 1060px;
  animation: snow 8s ease infinite;
  animation-delay: 3s;
}

.snowflake12 {
  left: 500px;
  animation: snow 8s ease infinite;
  animation-delay: 3s;
}

h1 {
  text-align: center;
  font-family: 'Homemade Apple', cursive;
  color: gold;
  margin-top: 50px;
  margin-bottom: 0px;
  padding: 0;
}

.greeting {
  animation: pulse 3s linear infinite;
}

.snowperson {
  position: relative;
/*   border: 2px solid goldenrod; */
  top: -50px;
}

.topHead {
  width: 100px;
  height: 100px;
  background-color: snow;
  margin: 0 auto;
  border-radius: 50%;
  position: relative;
  top: 95px;
}

.leftEye {
  background-color: black;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 20px;
  left: 20px;
}

.rightEye {
  background-color: black;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 20px;
  left: 50px;
}

.nose {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 45px solid orange;
  position: absolute;
  top: 35px;
}

.mouth1 {
  background-color: black;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 60px;
  left: 25px;
}

.mouth2 {
  background-color: black;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 65px;
  left: 30px;
}

.mouth3 {
  background-color: black;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 65px;
  left: 38px;
}

.mouth4 {
  background-color: black;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 60px;
  left: 45px;
}

.leftArm {
  background-color: brown;
  width: 75px;
  height: 10px;
  position: relative;
  z-index: 0;
  transform: rotate(20deg);
  top: 25px;
  left: -55px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.leftHand {
  width: 25px;
  height: 10px;
  background-color: brown;
  position: relative;
  left: -75px;
  top: 3px;
}

.rightHand {
  width: 25px;
  height: 10px;
  background-color: brown;
  position: relative;
  left: 185px;
  top: -17px;
}

.rightArm {
  background-color: brown;
  width: 75px;
  height: 10px;
  position: relative;
  z-index: 2;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  transform: rotate(-20deg);
  top: 5px;
  left: 115px;
}

.midBody {
  width: 150px;
  height: 150px;
  background-color: snow;
  margin: 0 auto;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  top: 75px;
}

.button1 {
  background-color: black;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 20px;
  left: 50px;
}

.button2 {
  background-color: black;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 50px;
  left: 50px;
}

.button3 {
  background-color: black;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 80px;
  left: 50px;
}

.bottomBody {
  width: 200px;
  height: 200px;
  background-color: snow;
  margin: 0 auto;
  border-radius: 50%;
  position: relative;
  top: 18px;
}

@keyframes snow {
	0% {
		top: 0;
    transform-origin: center;
    opacity: 0;
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(25px); 
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    transform: translateX(50px);
    transform-origin: center;
    opacity: 0;
  }
	100% {
		top: 100%;
	}
}