/* Basic page style resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 36px;
  font-family: 'Bebas Neue', cursive;
}

a {
  display: block;
  width: 300px;
  padding: 15px 5px;
  border-radius: 5px;
  margin: 10% auto;
  background-color: DodgerBlue;
  text-align: center;
  color: FloralWhite;
}

a:hover {
  background-color: ForestGreen;
  font-size: 46px; 
}

.one {
  transition-property: background-color;
  transition-duration: 2s; 
  animation: scaleUp 400ms ease 200ms; 
}

.two {
  transition-property: background-color;
  transition-duration: 400ms; 
  animation: flip 400ms ease-out;
}

.three {
  /*transition-property: background-color; 
  transition-duration: 400ms;
  transition-timing-function: ease-out; 
  transition-delay: 200ms; */
  transition: background-color 400ms ease-out 200ms; 
  animation: focus 400ms ease-in; 
}

.four {
  transition: background-color 200ms ease-out 200ms, font-size 800ms linear 100ms; 
}

.five {
  transition: all 400ms ease-out 200ms; 
}

@keyframes scaleUp {
  0%{
    transition: scale(.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes flip {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(-180deg); 
  }
}

@keyframes focus {
  0%{
    filter: blur(12px);
  }
  100%{
    filter: blur(0px);
  }
}