/* 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 400ms 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);
  }
}