/***************************excercise 1************************************************/

* {
  margin: 0;
  padding: 0;
}
html,
body {
  min-height: 100%;
}
body {
  margin: 1em;
  font-family: sans-serif;
}

h2 {
  font-weight: 100;
  margin: 1em 0 0.5em 0;
}

ul:hover li {
  width: 500px;
}

#ease {
  transition: width 2s ease;
}

#easeIn {
  transition: width 2s ease-in;
}

#easeOut {
  transition: width 2s ease-out;
}

#easeInOut {
  transition: width 2s ease-in-out;
}

#linear {
  transition: width 2s linear;
}

/***************************excercise 2************************************************/

@keyframes straightShot {
  0% {
    left: 25px;
  }
  100% {
    left: 280px;
  }
}

#table1:hover #cueball1 {
  animation: straightShot 2s ease-out;
  animation-fill-mode: forwards;
}

@keyframes bankShot {
  0% {
    left: 25px;
  }
  33% {
    left: 120px;
    top: 0px;
  }
  66% {
    left: 240px;
    top: 90px;
  }
  100% {
    left: 280px;
  }
}
#table2:hover #cueball2 {
  animation: bankShot 2s ease-out;
  animation-fill-mode: forwards;
}

@keyframes eightball {
  0% {
    left: 300px;
  }

  100% {
    left: 380px;
  }
}

#table3:hover #eightball {
  animation: eighball 2s ease-out 2s;
}
#table3:hover #cueball3 {
  animation: eightball 1s ease-out 1s;
  animation-fill-mode: forwards;
}

/****************************************Excercise 3 ****************************************/

@keyframes headlineDrop {
  0% {
    font-size: 6em;
    filter: blur(40px);
  }

  100% {
    font-size: 2em;
    filter: blur(0px);
  }
}

h1 {
  animation: headlineDrop 1s ease-in;
}

@keyframes subheadSlide {
  0% {
    opacity: 0;
    transform: translateX(-300px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

h2 {
  animation: subheadSlide 1s ease-in 1s;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#div1,
#div2,
#div3 {
  opacity: 0;
}

#div1 {
  animation: fadeIn 0.5s linear 2s forwards;
}

#div2 {
  animation: fadeIn 0.5s linear 2.5s forwards;
}

#div3 {
  animation: fadeIn 0.5s linear 3s forwards;
}

/*****************************************************
needs work on getting background color change on click
*****************************************************/

/***************************excercise 5************************************************/

input[type="checkbox"] {
  display: none;
}
label {
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid #a8a8a8;
  border-radius: 4px;
  background: #f4f4f4;
  transition: backgound 0.3s;
}

input[type="checkbox"]:checked ~ #target {
  background: #ffb101;
}

#target {
  transition: backgound 1.5s ease;
}

#zoom {
  width: 150px;
  transform: all 1s ease-in-out;
}

#zoom:target {
  width: 400px;
}

/********************************************************************************
 needs work on geting image showing on click
*********************************************************************************/