body {
  background-color: black;
  font-family: 'Quatl', sans-serif;
  color: white;
}

header {
  font-size: 5em;
}

header, h1 {
  text-align: center;
}

.container {
  margin-top: 10vh;
  display: flex;
  justify-content: space-evenly;
}

#eye1,#eye2{
  height:40vh;
  animation:spin 3s linear infinite;
}
#eye2{animation-direction:reverse}

@keyframes spin{to{transform:rotate(360deg);}}

#mouth {
  position: absolute;
  left: 27rem;
}

#mouth:hover {
  animation: float 0.5s ease-in-out infinite alternate;
}

@keyframes float{
  from{transform:scale(1);}
  to{transform:scale(1.1);}
  
  }