@import url('https://fonts.googleapis.com/css2?family=Bentham&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Just+Another+Hand&display=swap');

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

a:hover {
  text-decoration:none;
}

body {
    font-family: "Bentham", serif;
  font-weight: 400;
  font-style: normal;
  font-size:1.1em;
  color:#191923;
  background-image: url("images/poinkflowers.png");
}    
    
.column {
float: left;

}


h1{
  font-family: "Just Another Hand", cursive;
  font-weight: 500;
  font-style: normal;
  font-size:3.5em;
}


#wrapper {

    width: 1350px;
  margin:auto;

}

#smallwrap{
  width:45%;
  margin:auto;
}

#main {
  

  border: 35px solid transparent; /* change the number here to make the border bigger or smaller! for best results keep it between 40-84px. */

border-image-source: url("images/lacewhite.png");

border-image-slice: 84; /* don't change this! */

border-image-repeat: round; /* this makes the border smoothly fit any size container */

border-image-outset:1; /* this puts the border outside your container */  
  
  
  
  margin:30px;
  text-align:center;
  margin-top:40px;
  padding:10px;
  background-color:#FDC1FA;
}

.textbox{
    background-color:#c895cc;
    border: 35px solid transparent; /* change the number here to make the border bigger or smaller! for best results keep it between 40-84px. */

border-image-source: url("images/lacewhite.png");

border-image-slice: 84; /* don't change this! */

border-image-repeat: round; /* this makes the border smoothly fit any size container */

border-image-outset:1; /* this puts the border outside your container */    
}

#content {
    margin:30px;

  background-color:#c895cc;
  padding:10px;
  height:750px;
  margin-top:40px;
  

  border: 35px solid transparent; /* change the number here to make the border bigger or smaller! for best results keep it between 40-84px. */

border-image-source: url("https://hillhouse.neocities.org/shrines/halloween/images/lacewhite.png");

border-image-slice: 84; /* don't change this! */

border-image-repeat: round; /* this makes the border smoothly fit any size container */

border-image-outset:1; /* this puts the border outside your container */    
}


#playlist{
    overflow:auto;
    height:590px;

}

.left{
  width:45%;


}

.right{
  width:53.2%;
}

.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{
  transform: scale(1.2); 
}


.row:after {
  content: "";
  display: table;
  clear: both;
}

nav{
  display:flex;
  flex-wrap:wrap;
}

nav a {
  line-height: 1.5;
  background-color:#c895cc;
  padding:8px;
  margin:1%;
  width:27.8%;
  text-decoration:none;
  border-radius:15px;
  color:black;
}

nav a:hover {
  background-color:#FB9DF7;
}




@media only screen and (max-width: 1300px) {
  #wrapper {
    width:700px;
  }
  
  #smallwrap {
    width:80%;
  }
  nav a {
  width:45%;
    
  }
  
.column {
    width:100%;
  }
  
  .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;

  

  }
  

  
  .annotation {
    margin-top:-10px;
  }
}


@media only screen and (max-width: 650px) {
 #wrapper, #smallwrap, .column, nav a {
    width: 100%;
  }
  

  .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;
  

  }
  
  #content{
      height:850px;
  }  
  
  .annotation {
    margin-top:-10px;
  }
  


}