@import url('https://fonts.googleapis.com/css?family=Josefin+Slab');

body {
  background: #DDC68C;
}
.container {
  position: absolute;
  top: 150px;
}

.face {
  position: absolute;
  top: 25px; left: 23px;
}

.eye {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #333;
  border-radius: 100%;
}

.eye.right {
  transform: translateX(25px);
}

/* .shine {
  position: absolute;
  top: 3px; left: 4px;
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 100%;
} */


.mouth {
  position: absolute;
  top: 7px; left: 10px;
  background: none;
  border-radius: 30px;
  width: 15px;
  height: 15px;
  box-shadow: 2px 5px 0 #333;
  transform: rotate(20deg);
}

.blush {
  position: absolute;
  top: 15px; left: -12px;
  background: #D81E5B; opacity: 0.5;
  border-radius: 100%;
  width: 15px; height: 6px;
}

.blush.right {
  transform: translateX(20px);
}

.six {
  position: absolute;
  top: 100px; left: 380px;
  font-size: 200px;
  color: #666;
  font-family: 'Josefin Slab', serif;
}

.fly {
  position: absolute;
  left: 330px; top: -140px;
}

.seven {
  left: 50px;
  position: absolute;
  font-family: 'Josefin Slab', serif;
  font-size: 200px;
  color: #333;
}

.balloon {
  position: absolute;
  left: 40px; top: -190px;
  width: 80px;
  height: 80px;
  background: radial-gradient(#CCC,#8BBF9F); 
  border-radius: 100%;
  /* Thanks to Lütfü Can!  */
  transform-origin: 20px 220px;
  animation: 5s float ease-in-out alternate infinite;
}

.string {
  z-index: -1;
  position: absolute;
  top: 80px; left: 40px;
  width: 1px;
  height: 140px;
  background: #AAA;
}

.year {
  position: absolute;
  top: 100px; left: 50px;
  font-size: 200px;
  color: #333;
  font-family: 'Josefin Slab', serif;
}

/* Thanks to Lütfü Can! */
@keyframes float {
  0% { transform:translateY(0) rotate(8deg)}
  100% { transform:translateY(0) rotate(-8deg)}
}

footer {
  position: absolute;
  bottom: 0; right: 0;
  padding-bottom: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: #FFF;
  text-align: right;
}

footer a {
  text-decoration: none;
  color: #FFF;
}