body{
    background-color:burlywood;
}
h1{
    font-size:300%;
    font-family:Snell Roundhand, cursive;
    text-align: center;

}
h2{
    font-size:90%;
    font-family: Snell Roundhand, cursive;
    text-align: center;
}
h5{
    display:block;
    margin-top:auto;
    margin-bottom:auto;
    height:auto;
    font-size:115%;
    text-align:center;
    font-family: Snell Roundhand, cursive;
}
h6{
    font-size:120%;
    text-align:center;
    font-family: Snell Roundhand, cursive;
    margin-top:auto;
    margin-bottom:auto;
    height:auto;
}
.disclaimer{
    font-size:115%;
    text-align:center;
    font-family: Snell Roundhand, cursive;
    margin-bottom:0px;
}
.links{
    font-size:115%;
    text-align:center;
    font-family: Snell Roundhand, cursive;
    color:blue;
}

indexDescription{
    font-family:Snell Roundhand, cursive;
    font-size: 50px;
    background-color:transparent;
    text-anchor: middle;
    text-align: center;
}
button{
    display:block;
    margin-top:1%;
    margin-right:auto;
    margin-left:auto;
    font-family: Snell Roundhand, cursive;
    border-radius: 50px;
    border-color:aliceblue;
    background-color:blanchedalmond;
    border-color:rgb(98,74,46);
    border-width: 4px;
    padding:1% 2%;
    transition:all 0.4s;
    
}
button:hover{
    opacity:80%;
    margin-right:auto;
    margin-left:auto;
    cursor:pointer;
    color: blanchedalmond;
    background-color:black;
}
button:hover a{
    color:blanchedalmond;
    background-color:black;
}
button:active{
    opacity:50%;
}

/*Lalaland*/
.lalaland_button{
    display:block;
    margin-top:1%;
    margin-right:auto;
    margin-left:auto;
    font-family: Snell Roundhand, cursive;
    border-color:black;
    background-color:blanchedalmond;
    width:20%;
    border-radius:50%;
    border-style: solid;
    border-width:3px;
    transition:all 0.4s;
}
.lalaland_button:hover{
    opacity:80%;
    margin-right:auto;
    margin-left:auto;
    cursor:pointer;
    color: blanchedalmond;
    background-color:black;
    border-color:blanchedalmond;
}
.lalaland_button:hover a{
    color: blanchedalmond;
    background-color:black;
}
.lalaland_button:active{
    opacity:50%;
}

/*Lalo*/
.lalo_button{
    display:block;
    margin-top:1%;
    margin-right:auto;
    margin-left:auto;
    font-family: Snell Roundhand, cursive;
    border-color:black;
    background-color:blanchedalmond;
    width:20%;
    border-radius:20%;
    border-style: solid;
    border-width:3px;
    transition:all 0.4s;
}
.lalo_button:hover{
    opacity:80%;
    margin-right:auto;
    margin-left:auto;
    cursor:pointer;
    color: blanchedalmond;
    background-color:black;
    border-color:blanchedalmond;
    transition:opacity 0.35s, color 0.35s, background-color 0.3s;
}
.lalaland_button:hover a{
    color: blanchedalmond;
    background-color:black;
}
.lalo_button:active{
    opacity:50%;
}

/*Saint Saens*/
.saintsaens_button{
    display:block;
    margin-top:1%;
    margin-right:auto;
    margin-left:auto;
    font-family: Snell Roundhand, cursive;
    border-color:black;
    background-color:blanchedalmond;
    width:23%;
    border-radius:20%;
    border-style: solid;
    border-width:3px;
    transition:all 0.4s;
}
.saintsaens_button:hover{
    opacity:80%;
    margin-right:auto;
    margin-left:auto;
    cursor:pointer;
    color: blanchedalmond;
    background-color:black;
    border-color:blanchedalmond;
}
.saintsaens_button:hover a{
    color: blanchedalmond;
    background-color:black;
}
.saintsaens_button:active{
    opacity:50%;
}

/*Schubert*/
.deathmaiden_button{
    display:block;
    margin-top:1%;
    margin-right:auto;
    margin-left:auto;
    font-family: Snell Roundhand, cursive;
    border-color:black;
    background-color:blanchedalmond;
    width:20%;
    border-radius:45%;
    border-style: solid;
    border-width:3px;
    transition:all 0.4s;
}
.deathmaiden_button:hover{
    opacity:80%;
    margin-right:auto;
    margin-left:auto;
    cursor:pointer;
    color: blanchedalmond;
    background-color:black;
    border-color:blanchedalmond;
}
.deathmaiden_button:hover a{
    color: blanchedalmond;
    background-color:black;
}
.deathmaiden_button:active{
    opacity:50%;
}

/*Beethoven*/
.beethovenstringq4_button{
    display:block;
    margin-top:1%;
    margin-right:auto;
    margin-left:auto;
    font-family: Snell Roundhand, cursive;
    border-color:black;
    background-color:blanchedalmond;
    width:23%;
    border-radius:20%;
    border-style: solid;
    border-width:3px;
    transition: all 0.4s;
}
.beethovenstringq4_button:hover{
    opacity:80%;
    margin-right:auto;
    margin-left:auto;
    cursor:pointer;
    color: blanchedalmond;
    background-color:black;
    border-color:blanchedalmond;
    
}
.beethovenstringq4_button:hover a{
    color: blanchedalmond;
    background-color:black;
}
.beethovenstringq4_button:active{
    opacity:50%;
}

/*Shostakovich*/
.shosty_button{
    display:block;
    margin-top:1%;
    margin-right:auto;
    margin-left:auto;
    font-family: Snell Roundhand, cursive;
    border-color:black;
    background-color:blanchedalmond;
    width:25%;
    border-radius:20%;
    border-style: solid;
    border-width:3px;
    transition:all 0.4s;
}
.shosty_button:hover{
    opacity:80%;
    margin-right:auto;
    margin-left:auto;
    cursor:pointer;
    color: blanchedalmond;
    background-color:black;
    border-color:blanchedalmond;
}
.shosty_button:hover a{
    color: blanchedalmond;
    background-color:black;
}
.shosty_button:active{
    opacity:50%;
}



/*Ravel*/
.ravel_button{
    display:block;
    margin-top:1%;
    margin-right:auto;
    margin-left:auto;
    font-family: Snell Roundhand, cursive;
    border-color:black;
    background-color:blanchedalmond;
    width:23%;
    border-radius:20%;
    border-style: solid;
    border-width:3px;
    transition:all 0.4s;
}
.ravel_button:hover{
    opacity:80%;
    margin-right:auto;
    margin-left:auto;
    cursor:pointer;
    color: blanchedalmond;
    background-color:black;
    border-color:blanchedalmond;
}
.ravel_button:hover a{
    color: blanchedalmond;
    background-color:black;
}
.ravel_button:active{
    opacity:50%;
}



a{
    text-decoration:none;
    color:black;
    text-align:center;
    font-size:175%;
    display:inline-block;
}

iframe{
    background-color: antiquewhite;
    width:23%;
    height:200px;

}

.music-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100px;
  }
  
  .note {
    font-size: 40px;
    margin: 0 10px;
    animation: dance 0.5s infinite alternate;
  }
  
  .note:nth-child(2) {
    animation-delay: 0.1s;
  }
  
  .note:nth-child(3) {
    animation-delay: 0.2s;
  }
  
  .note:nth-child(4) {
    animation-delay: 0.3s;
  }
  
  .note:nth-child(5) {
    animation-delay: 0.4s;
  }
  .note:nth-child(6) {
    animation-delay: 0.6s;
  }
  
  .note:nth-child(7) {
    animation-delay: 0.42s;
  }
  
  .note:nth-child(8) {
    animation-delay: 0.35s;
  }
  
  .note:nth-child(9) {
    animation-delay: 0.29s;
  }
  .note:nth-child(10) {
    animation-delay: 0.11s;
  }
  
  .note:nth-child(11) {
    animation-delay: 0.12s;
  }
  
  .note:nth-child(12) {
    animation-delay: 0.53s;
  }
  
  .note:nth-child(13) {
    animation-delay: 0.24s;
  }
  .note:nth-child(14) {
    animation-delay: 0.31s;
  }
  .note:nth-child(15) {
    animation-delay: 0.01s;
  }
  
  .note:nth-child(16) {
    animation-delay: 0.52s;
  }
  
  .note:nth-child(17) {
    animation-delay: 0.1s;
  }
  
  .note:nth-child(18) {
    animation-delay: 0.2s;
  }
  .note:nth-child(19) {
    animation-delay: 1s;
  }
  
  @keyframes dance {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-20px);
    }
  }



/*
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: blue;}
    50%  {background-color: red;}
    100% {background-color: blue;}
  }*/
colorful{
    font-family:Snell Roundhand, cursive;
    width: 100px;
    height: 100px;
    background-color: whitesmoke;
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: 1;/*infinite*/
    animation-direction: alternate;
  }