html {
  height: 100%;
}

body {
  font-family: sans-serif;
  margin: auto;
  background-color:rgb(253, 235, 97);
  /* display: flex; */
  align-items: center;
  justify-content: center;
}

.face {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 34em;
}

.eye-parent {
  display: flex;
  flex-direction: row;
  height: 20em;
}

.eye {
  background-color: #2a2a2a;
  width: 5em;
  height: 10em;
  margin: 5em;
  border-radius: 10px;

  animation-duration: 50s;
  animation-delay: 10s;
  animation-name: eyeblink;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

.mouth-upper  {
  background-color: #f7b932;
  width: 30em;
  height: 5em;
  border-radius: 10px;
  box-shadow: 3px 5px 9px rgba(0,0,0,.05);
  z-index: 2;
}

.throat  {
  background-color: #2a2a2a;
  width: 20em;
  height: 5em;
  border-width: -10px;
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
  /* box-shadow: 3px 5px 8px rgba(0,0,0,.04); */
  z-index: 0;
}

.tongue  {
  background-color: #de7474;
  width: 14em;
  height: 3em;
  margin-left: 3em;
  margin-right: 3em;
  margin-top: 2em;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  /* box-shadow: 3px 5px 8px rgba(0,0,0,.04); */
  z-index: 0;
}

.mouth-lower  {
  background-color: #f7b932;
  width: 20em;
  height: 5em;
  margin-top: -5em;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 3px 5px 9px rgba(0,0,0,.05);
  z-index: 1;
}

.face.quack-open .mouth-lower {
  animation-duration: .07s;
  animation-delay: 0s;
  animation-name: quack-open;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-timing-function:  ease-in-out;
  animation-fill-mode: forwards;
}

.face.quack-close .mouth-lower {
  animation-duration: .07s;
  animation-delay: 0s;
  animation-name: quack-close;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-timing-function:  ease-in-out;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  bottom: 0em;
  margin-top: 10em;
  font-size: .75em;
  opacity: 40%;
  padding: .5em;
}

footer a:link {
  color: black;

}
footer a:hover {
  color: blue;
}

@keyframes eyeblink {
  from {
    scale: 1.0 100%;
  }

  .2% {
    scale: 1.0 3%;
  }

  .4% {
    scale: 1.0 100%;
  }


  32% {
    scale: 1.0 100%;
  }
  32.2% {
    scale: 1.0 3%;
  }
  32.4% {
    scale: 1.0 100%;
  }


  56% {
    scale: 1.0 100%;
  }
  56.2% {
    scale: 1.0 3%;
  }
  56.4% {
    scale: 1.0 100%;
  }


  77% {
    scale: 1.0 100%;
  }
  77.2% {
    scale: 1.0 3%;
  }
  77.4% {
    scale: 1.0 100%;
  }
  77.5% {
    scale: 1.0 100%;
  }
  77.7% {
    scale: 1.0 3%;
  }
  77.9% {
    scale: 1.0 100%;
  }

  to {
    scale: 1.0 100%;
  }
}

@keyframes quack-open {
  from {
    margin-top: -5em;
  }

 
  to {
    margin-top: -1em;
  }

}

@keyframes quack-close {
  from {
    margin-top: -1em;
  }

 
  to {
    margin-top: -5em;
  }
}