/* Add your CSS styles here! */
/* Practice different selectors:
   - Element selectors: h1, p, button
   - Class selectors: .verse, .chorus, .emphasis
   - ID selectors: #special-item
   - Descendant selectors: header p, .practice-area button
*/

.color-red {
  color: red;
  font-size: 20px;
  text-align: center;
  font-family: fantasy;
}
body{
  background-color: aliceblue;
  border: 1cm;
  border-style: dashed;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
}
.bridge{
 
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}

}
.chorus{
  margin-top: 620px;
}
.color-blue {
  color: blue;
}

.color-green {   
  color: green;
  text-align: right;
  font-size: 20px;
}
.color-change{
  color: mediumvioletred;
  text-align: center;
}
h2{
  color: cadetblue;
}
.box{
  color: coral;
}
.box1{
  color: olive;
}

img{
  height: 600px;
  width: 750px;
  border-style: double;
  color: lightslategrey;
}
button{
  background-color: yellow;
  border: 2px solid brown;
  border-radius: 5px;
  
}
.nana{
  word-spacing: 200px;
  color: brown;
}