/*

Exercise 01 (Jan 9)
Laura Hernandez

CSS for the first exercise of the semester.

*/

@import url('https://fonts.googleapis.com/css?family=Anton|Playfair+Display');

* {
  margin:0;
  padding: 0;
  box-sizing: border-box;
  overflow:hidden;
}

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: column;
  justify-content: center;
  background-color: rgb(122, 255, 200);
}

#intro {
  margin:auto;
  text-align: center;
}

#intro h1{
  color:rgb(70, 70, 70);
  font-family: 'Anton', serif;
  font-size: 60px;
  letter-spacing: 2px;
}

.letter {
  color: rgb(255, 55, 109);
}

#intro p {
  color: rgb(70, 70, 70);
  font-family: 'Playfair Display', sans-serif;
  font-size: 15px;
  transition: all .2s ease;
  cursor: pointer;
}

#intro a {
  text-decoration: none;
  color: inherit;
}

#intro p:hover {
  color: rgb(255, 55, 109);
  font-size: 25px;
  padding-top:10px;
}

#animation {
  width: 250px;
  height: 200px;
  position: absolute;
  bottom: 0;
  left: 5%;
  animation: bounce 8s linear infinite;
}

#animation img {
  max-height:200px;
}

@keyframes bounce {
  0% {left:0; bottom:0%;}
  10% {bottom:5%;}
  20% {bottom:0;}
  30% {bottom:5%;}
  40% {bottom:0%;}
  47% {transform: scaleX(1);}
  50% {left:80%; bottom: 5%; transform: scaleX(-1);}
  60% {bottom:0;}
  70% {bottom:5%;}
  80% {bottom:0;}
  90% {bottom:5%;}
  97% {transform: scaleX(-1);}
  100% {left:0; bottom:0%;}
}

@-webkit-@keyframes bounce {
  0% {left:0; bottom:0%;}
  10% {bottom:5%;}
  20% {bottom:0;}
  30% {bottom:5%;}
  40% {bottom:0%;}
  47% {transform: scaleX(1);}
  50% {left:80%; bottom: 5%; transform: scaleX(-1);}
  60% {bottom:0;}
  70% {bottom:5%;}
  80% {bottom:0;}
  90% {bottom:5%;}
  97% {transform: scaleX(-1);}
  100% {left:0; bottom:0%;}
}

@-moz-@keyframes bounce {
  0% {left:0; bottom:0%;}
  10% {bottom:5%;}
  20% {bottom:0;}
  30% {bottom:5%;}
  40% {bottom:0%;}
  47% {transform: scaleX(1);}
  50% {left:80%; bottom: 5%; transform: scaleX(-1);}
  60% {bottom:0;}
  70% {bottom:5%;}
  80% {bottom:0;}
  90% {bottom:5%;}
  97% {transform: scaleX(-1);}
  100% {left:0; bottom:0%;}
}