@import url('https://fonts.googleapis.com/css?family=Arimo');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Gamja+Flower');
@import url('https://fonts.googleapis.com/css?family=Ruslan+Display');
h1 {
  font-family: 'Arimo', sans-serif;
  letter-spacing: .1em;
}
h2 {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .1em;
}
p {
  font-family: 'Gamja Flower', cursive;
}
h3 {
  font-family: 'Ruslan Display', cursive;
  margin-bottom:1.5em;
  margin-top:1.5em;
}
#logo {
  border-style:solid;
  border-color:black;
  margin-left:22%;
  margin-right:22%;
  padding-top:2em;
  text-align:center;
  border-width:10px;
  font-size:1.3em;
  margin-top:1em;
  background-color:#2CE28C;
}
a {
  border-style:dashed;
  border-color:black;
  border-width:2px;
  padding-left:1em;
  padding-right:1em;
  padding-top:.5em;
  padding-bottom:.5em;
  font-size:1em;
  text-decoration:none;
  background-color:#00FFFF;
  color:black;
}
a:hover {
  padding-left:2.2em;
  padding-right:2.2em;
  padding-top:1.2em;
  padding-bottom:1.2em;
  font-size:1.2em;
  background-color:#9932CC;
  color:white;
  transition:background-color 1s;
 /* transition:color 1s; */
}

#chapterone {
   border-style:solid;
  border-color:black;
  margin-left:22%;
  margin-right:22%;
  padding-top:2em;
  text-align:center;
  border-width:10px;
  font-size:1.3em;
  margin-top:1em;
  background-color:#A2DFCC;
}
#steptwo{
  border-style:solid;
  border-color:black;
  margin-left:22%;
  margin-right:22%;
  padding-top:2em;
  text-align:center;
  border-width:10px;
  font-size:1.3em;
  margin-top:1em;
  background-color:#FFF68F;
}
#stepthree{
  border-style:solid;
  border-color:black;
  margin-left:22%;
  margin-right:22%;
  padding-top:2em;
  text-align:center;
  border-width:10px;
  font-size:1.3em;
  margin-top:1em;
  background-color:#DA70D6;
}
#stepfour{
  border-style:solid;
  border-color:black;
  margin-left:22%;
  margin-right:22%;
  padding-top:2em;
  text-align:center;
  border-width:10px;
  font-size:1.3em;
  margin-top:1em;
  background-color:#C0C0C0;
}
#small {
font-size:0.3em;
}
#small:hover {
font-size:12em;
color:red
}
#elmo {
background-color:#C41E3A !important;
color:white !important;
}
#elmo:hover {
  background-color:#0B6623 !important;
}
#sesame {
  background-color:#FF4500 !important;
  color:white !important;
}
#sesame:hover {
  background-color:#FF1493 !important;
  color:black !important;
}
#street {
  background-color:yellow !important;
  color:black !important;
}
#street:hover {
  background-color:#8B4513 !important;
  color:white !important;
}
#la {
font-size:25px;
border-style:solid;
  border-color:black;
  margin-left:22%;
  margin-right:22%;
  padding-top:2em;
  text-align:center;
  border-width:10px;
  background-color:#6bffff;
  margin-top:1em;
}
#test {
  border-style:solid;
  border-color:black;
  margin-left:22%;
  margin-right:22%;
  padding-top:2em;
  text-align:center;
  border-width:10px;
  font-size:1.3em;
  background-color:#207c7e;
  
}

#testagain {
  border-style:solid;
  border-color:black;
  margin-left:22%;
  margin-right:22%;
  padding-top:2em;
  text-align:center;
  border-width:10px;
  font-size:1.3em;
  padding-bottom:2em;
  background-color:#bfbf42;
}
#invert:hover {
  background-color:yellow !important;
  color:black !important;
}
#again {
 border-style:solid;
  border-color:black;
  margin-left:22%;
  margin-right:22%;
  padding-top:2em;
  padding-bottom:4em;
  text-align:center;
  border-width:10px;
  font-size:1.3em;
  background-color:#834743;
}
#crystal {
  border-style:solid;
  border-color:black;
  margin-left:22%;
  margin-right:22%;
  padding-top:2em;
  text-align:center;
  border-width:10px;
  font-size:1.3em;
  margin-top:1em;
  background-color:#CBFFCB;
}
#brad {
 border-style:dotted;
 border-color:blue;
 margin-left:22%;
 margin-right:22%;
 padding-top:2em;
 text-align:center;
 border-width:10px;
 font-size:1.3em;
 margin-top:1em;
 background-color:#f08080;
}

#villain {
  transition: transform 60s ease;
}

#villain:hover {
  transform: rotate(80000deg);
}


#bacon {
  transition: filter 1s;
}

#bacon:hover {
 filter: invert(100%); 
}

#pic {
  transition: filter 2s;
}

#pic:hover {
  filter: invert(100%);
}

#crystal {
 transition: transform 10s; 
}

#crystal:hover {
  transform: rotate(720deg);
}