@import url('https://fonts.googleapis.com/css2?family=Bentham&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Just+Another+Hand&display=swap');
  
  
  #container {
        background-color:pink;
        width:100%;
        display:flex;
        flex-wrap:wrap;
        height:790px;

  
  }
  
a{
  color:black;
  text-decoration:underline;
}

a:hover {
  text-decoration:none;
}
  
  h1{
 
  font-size:3em;
  color: BLACK;
  text-align:center;
  background-color:#c895cc;
}


body {
    font-family: "Bentham", serif;
  font-weight: 400;
  font-style: normal;
  font-size:1.08em;
  color:#191923;
}    


  header {
width:100%;
margin:auto;
  }

footer {
  margin-top:25px;
}
  
  marquee {
   background-color:#c895cc;
   padding:5px;
}



  nav{
    width:20%;
    display:flex;
    flex-wrap:wrap;
    align-content:flex-start;
    justify-content: center;
    border-right:white 2px dotted;
  }
  
  nav a {
    color:purple;
    text-align: right;
    width:100%;
    background-color:#c895cc;
    padding:12px;
    margin-top:5px;
    margin-bottom:5px;
      text-decoration:none;
  }
  
  nav a:hover {
  background-color:#FB9DF7;
}
  
  main{
    width:75%;
        overflow:auto;
        height:750px;
    padding:20px;

  }
  

  
  #wrapper {
   width:1000px; 
   margin:auto;
   

  }  
  
    #playlist{
    overflow:auto;
    height:560px;
  }
  
  
  
.song {
  margin-bottom:20px;
  border-radius:20px;
  padding: 30px;
  background-color:#FB9DF7;
  height:auto;


}  
  
.annotation {

  border-radius:20px;
  padding: 15px;
  padding-left: 20px;
  padding-right: 15px;
  background-color: #95A26B;
  max-height: 200px;
  overflow: auto;

}

.arrow{

  content:"";
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid #95A26B; 
  
  margin-top:5%;

}

.button {
  width:1em;
}

.button:hover, .button:focus{
  transform: scale(1.2); 
}


.row {
display:flex;
flex-wrap:wrap;

}

.left{
  width:45%;


}

.right{
  width:53.2%;
}



hr {
  border-bottom:none;
  border-top:dotted white 2px;
}


#mascot{
  display:inline;
}

@media only screen and (max-width: 1000px) {
  
 #wrapper {
 width:100%;
 }
 
 
 

 
 
}


@media only screen and (max-width: 850px) {
  nav {
    width:100%;
    border-right:none;
    border-bottom: white dotted 2px;
    justify-content:center;
        background-color:#c895cc;
    padding:0;
  }
  
  nav a{
    width:19%;
    text-align:center;
  padding:5px;
font-size:0.8em;
  }
  
  #mascot{
    display:none;
  }
  
  main {
    width:100%;
    height:auto;
  }
  
  
  h1 {
    font-size:2.5em;
  }
  
  .arrow{
    
    
    width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  
  border-bottom: 10px solid #95A26B;
  
  margin-left:10%;
  margin-top:-30px;
  

  }
  
  #container{
      height:auto;
  }
  
  #playlist{
  height:auto;  
  }
  
  .left, .right {
    width:100%;
  }
  .annotation {
    margin-top:-10px;
  }
  
  
}