/* 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
*/
body{
  background-image: url('https://images.unsplash.com/photo-1664070719390-f7fedb058c2b?q=80&w=3028&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  background-size: cover;
}
h1{
 
  background-color: black;
  color : yellow;
  font-family: cursive;
  font-size: 100px;
  text-align: center;

  .line2{ 
    font-size: large;
    letter-spacing: 10px;
    color: blue ;
    background-color: ;
  }

  }
  }

  }

}

.color-red {
  color: red;
}

.color-blue {
  color: blue;
}

.color-green {   
  color: green;
}

.subtitle {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 24px;
  text-align: right;
  color: white;
  transform: rotate(12deg);
  transform-origin: left top;
}

.verse
h2 {
  font-family: 'Courier New', Courier, monospace;
  color: white;
  text-wrap: wrap;
  letter-spacing: 20px; 
  text-align: center;
}
.verse 
p{
  color: pink;
font-family: 'Times New Roman', Times, serif;
}

.verse1
h2 {
  color: white;
}

.bridge
{
  color: yellow;
  font-family: fantasy;
   letter-spacing: 50px; 
}
.chorus
{
  color: yellowgreen;
  text-align: center;
  transform: rotate(-14deg);
  transform-origin: left top;

}