.grid-item {
  border-radius: 4px;
  display: flex;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size:20px;
}


.header {
	margin-bottom:10px;
}

.header img {
width:270px;
margin-top:9px;
}
 .container {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
	flex-wrap: wrap;
}
 
  
.pfp {
  image-rendering: crisp-edges;
  float: left;
  margin:10px;
  background-image:url("images/white_ant.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:100%;
  width:170px;
  height:170px;
 /* border: 1px solid #6b6b6b;
  border-radius:10px; */


}

#book {
float: right;
}


.bg-box {
background-color: rgba(0, 0, 0, 0.5);
flex-wrap:wrap;
max-width:940px;
overflow-y:auto;
margin: 10px;
padding:5px;
}

.bg-box p {
line-height:1.9;
color:white;
padding: 8px;
font-size:18px;
margin-left:10px; 
}

.song p{
color:white;
font-size:29px;
margin:0px;

}

.song{
display:flex;
}

.sub p{
color:grey; 
font-size:13px;
padding:0px;
margin:0px;
}
.sub a{
color: grey;
text-decoration:none;
}

.last-played {
background-color: rgba(0, 0, 0, 0.5);
flex-wrap:wrap;
max-width:940px;
overflow-y:auto;
margin: 10px;
padding:5px;
}

.last-played p {
	color:white;
	padding: 6px;
	margin:0px
}

@media (max-width: 476px) {
#book{
display:none;
}

.pfp {
  background-image:url("images/book.png");
	width: 170px;
    height: 210px;

}


  }
  
  

  @media (max-width: 374px) {
#book{
display:none;
}

.pfp {
  background-image:url("images/book.png");
	width: 140px;
    height: 180px;

}

.grid-item img{
width:52%;	
}
  	
  
.header {
	height:51px;
	margin-bottom:22px;
}
  


	}
	


  }
  
  	
@media (max-width: 320px) {

.bg-box p {

  font-size:14px;
}
	
	



	}