body{
	margin:0;
	width:100%;
	padding:0;
	height:auto;
	overflow-x:hidden;
	background-color:rgb(0,0,0);
}
header{
	z-index:1;
}
a{
	text-decoration:none;
	color:inherit;
}
p:hover,h3:hover{
	cursor:pointer;
	color:navy;
}
.top-header{
	background-color:#84bd00;
	height:100px;
	border-bottom:3px solid black;
}
.desktop-menu ul{
	list-style-type:none;
	z-index:1;
	position:absolute;
	top:3%;
	left:20%;
	width:auto;
	z-index:2;
}
.desktop-menu  ul li {
	background: rgba(0,0,0,0.7);
	color:white;
	background-size: 400% 400%;	
	display:inline;
	font-family:'Orator Std',sans-serif;
	font-size:130%;
	padding:10px;
	margin:15px;
	transition: 0.5s;
	border:3px solid rgba(0,0,0,0.5);
}
.desktop-menu ul li:hover{
	background-color:transparent;
	color:black;
	cursor:pointer;
}
#logo {
	z-index:2;
	width:10%;
	margin-left:100px;
	margin-top:-30px;
	float:left;
}
section{
	width:80%;
	margin-left:10%;
	height:100%;
	margin-top:100px;
}
@media screen and (max-width: 500px){
	.mobile-menu{
		display:block !important;
		position:fixed;
		z-index:5;
	}
	.desktop-menu{
		display:none;
	}
	footer{
	height:450px !important;
}
footer img{
	width:70% !important;
	
}
#copyright{
	float:none !important;
	width:50% !important;
}
.social-icons {
	margin-top:-100px !important;
	width:100% !important;
}
.social-icons img{
	width:15% !important;
	display:inline-block  !important;
}
	
	
}
.playlist-block{
	width:20%;
	height:200px;
	display:inline-block;
	margin:10px;
	overflow:hidden;
	min-width:200px;
}
.playlist-block:hover{
	cursor:pointer;
}
.playlist-block:hover>img{
	opacity:0;
}
.playlist-block>img{
	width:100%;
	height:100%;
	transition:0.5s;
}
.toplist{
	width:88%;
	display:none;
	position:relative;
	clear:both;
	background: linear-gradient(270deg, #23d4a6, #0f5687);
	background-size: 400% 400%;
	-webkit-animation: animacioni 10s ease infinite;
	-moz-animation: animacioni 10s ease infinite;
	animation: animacioni 10s ease infinite;
}
@-webkit-keyframes animacioni {
    0%{background-position:0% 35%}
    50%{background-position:66% 100%}
    100%{background-position:0% 35%}
}
@-moz-keyframes animacioni {
    0%{background-position:0% 35%}
    50%{background-position:66% 100%}
    100%{background-position:0% 35%}
}
@keyframes animacioni { 
    0%{background-position:0% 35%}
    50%{background-position:66% 100%}
    100%{background-position:0% 35%}
}
.toplist h2{
	font-family:'Orator Std',sans-serif;
	font-size:130%;
	color:white;
	width:100%;
	background: linear-gradient(180deg, #84bd00, #84bd42);
}
.toplist-wrapper {
	padding-right:20px;
	}
.toplist-artist{
	font-weight:bold;
	margin-left:10px;
	background: linear-gradient(270deg, navy, #8e5871);
	background-size: 400% 400%;	color:white;
	border-radius:7px 7px;
	padding-left:5%;
	padding-right:5%;
	box-shadow:2px 2px lightgray;
	-webkit-animation: animacioni 10s ease infinite;
	-moz-animation: animacioni 10s ease infinite;
	animation: animacioni 10s ease infinite;	
	transition:0.5s;
	}
.list-item{
	clear:both;
	width:100%;
	display:block;
	font-family:'Quattrocento',sans-serif;
	padding:20px;
	border-bottom:1px solid black;
	font-weight:bold;
}
.toplist-artist:hover{
	font-size:110%;
		background: linear-gradient(270deg, navy, rgba(24,12,12,0.5));

}

.toplist-wrapper span:hover{
	cursor:pointer;
}
.toplist-duration{
	float:right;
}
.toplist-wrapper div{
	margin:40px;
	display:none;
}
.toplist-wrapper div p{
	width:100%;
	float:left;
}
.toplist-wrapper div span{
	float:left;
	width:60%;
	font-family:'Slabo 27px', serif;
	color:white;
}
.collapsed-div{
	float:right;
	width:25%;
	display:block;
}
.collapsed-div img{
	width:100%;
	
}
.collapsed-div img:nth-child(1){
	position:relative;
	top:80px;
	z-index:2;
	width:25%;
}
.collapsed-div img:nth-child(2){
	position:relative;
	z-index:1;
}
.gradient{
	width:100%;
	height:100%;
	background: -moz-linear-gradient(270deg, rgba(153,218,255,0.05) 0%, rgba(126,180,211,0.05) 17%, rgba(106,151,177,0.05) 30%, rgba(0,0,0,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(153,218,255,0.05)), color-stop(17%, rgba(126,180,211,0.05)), color-stop(30%, rgba(106,151,177,0.05)), color-stop(100%, rgba(0,0,0,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(270deg, rgba(153,218,255,0.05) 0%, rgba(126,180,211,0.05) 17%, rgba(106,151,177,0.05) 30%, rgba(0,0,0,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(270deg, rgba(153,218,255,0.05) 0%, rgba(126,180,211,0.05) 17%, rgba(106,151,177,0.05) 30%, rgba(0,0,0,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(270deg, rgba(153,218,255,0.05) 0%, rgba(126,180,211,0.05) 17%, rgba(106,151,177,0.05) 30%, rgba(0,0,0,1) 100%); /* ie10+ */
background: linear-gradient(180deg, rgba(153,218,255,0.05) 0%, rgba(126,180,211,0.05) 17%, rgba(106,151,177,0.05) 30%, rgba(0,0,0,1) 100%); /* w3c */
}
.musicplayer{
	background: linear-gradient(270deg, #5e4d55, #0f5687,#74e29b,#74e240);
	background-size: 400% 400%;
	-webkit-animation: animacioni 10s ease infinite;
	-moz-animation: animacioni 10s ease infinite;
	animation: animacioni 10s ease infinite;	
	width:100%;
	height:70px;
	border-top:3px solid black;
	
}
.musicplayer img{
	width:10%;
	float:right;
	margin-right:200px;
	margin-top:-40px;
	box-shadow:5px 5px gray;
}
#vol_control {
	margin-left:200px;
	float:left;
	width:10%;
	margin-top:20px;
}
#vol_control input[type=range]{

  -webkit-appearance: none;
  width: 100%;
  margin: 1.2px 0;
}
#vol_control input[type=range]:focus,#seek_control input[type=range]:focus {
  outline: none;
}
#vol_control input[type=range]::-webkit-slider-runnable-track,#seek_control input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 25.6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #5e4d55;
  border-radius: 0px;
  border: 0px solid #010101;
}
#vol_control input[type=range]::-webkit-slider-thumb,#seek_control input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 28px;
  width: 20px;
  border-radius: 0px;
  background: rgba(255, 67, 95, 0.77);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -1.2px;
}
#vol_control input[type=range]:focus::-webkit-slider-runnable-track,#seek_control input[type=range]:focus::-webkit-slider-runnable-track {
  background: #77626c;
}
#vol_control input[type=range]::-moz-range-track,#seek_control input[type=range]::-moz-range-track {
  width: 100%;
  height: 25.6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #5e4d55;
  border-radius: 0px;
  border: 0px solid #010101;
}
#vol_control input[type=range]::-moz-range-thumb,#seek_control input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 28px;
  width: 20px;
  border-radius: 0px;
  background: rgba(255, 67, 95, 0.77);
  cursor: pointer;
}
#vol_control input[type=range]::-ms-track,#seek_control input[type=range]::-ms-track {
  width: 100%;
  height: 25.6px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
#vol_control input[type=range]::-ms-fill-lower,#seek_control input[type=range]::-ms-fill-lower {
  background: #45383e;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
#vol_control input[type=range]::-ms-fill-upper,#seek_control input[type=range]::-ms-fill-upper {
  background: #5e4d55;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
#vol_control input[type=range]::-ms-thumb,#seek_control input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 28px;
  width: 20px;
  border-radius: 0px;
  background: rgba(255, 67, 95, 0.77);
  cursor: pointer;
  height: 25.6px;
}
#vol_control input[type=range]:focus::-ms-fill-lower,#seek_control input[type=range]:focus::ms-fill-lower {
  background: #5e4d55;
}
#vol_control input[type=range]:focus::-ms-fill-upper,#seek_control input[type=range]:focus::-ms-fill-upper {
  background: #77626c;
}
#playpausebtn{
	width:3%;
	float:left;
	margin-left:250px;
	margin-top:50px;
}
#playpausebtn img{
	width:100%;
	transition:0.5s;
	box-shadow:none;
}
#playpausebtn img:hover{
	cursor:pointer;
	transform:scale(1.22);
}
#seek_control{
	width:28%;
	margin-right:40px;
	float:right;
	margin-top:20px;
}
#seek_control input[type=range]{

  -webkit-appearance: none;
  width: 100%;
  margin: 1.2px 0;
} 
#musicplayer-wrapper{
	position:fixed;
	bottom:10px;
	z-index:3;
	display:none;
	}
.musicplayer span{
	margin-left:-12%;
	margin-top:1.3%;
	float:left;
	font-family:'Raleway',serif;
	
}
@keyframes entr{
	0%{
		transform:translateY(-500px);
	}
	100%{
		transform:translateY(0px);
	}
}
#songname{
	width:10%;
	font-size:100%;
	font-family:'Slabo 27px', serif;
	font-weight:bold;
}
header h4 {
	float:right;
	margin-right:300px;
	margin-top:-50px;
	color:white;
	}
header input{
	float:right;
	margin-right:100px;
	margin-top:-60px;
	height:30px;
	border-radius:5px 5px;
	position:relative;
}
.playlist-block svg{
	width:60%;
	margin-top:-140px;
	margin-left:50px;
	animation:fly-in 0.2s ease-in-out;
	display:none;
}
@keyframes fly-in{
	0%{
		transform:translateY(-2000px);
	}
	100%{
		transform:translateY(0px);
	}
}
.playlist-block:hover>svg{
	display:block;
}
.playlist-block:hover>h2{
display:none;
}
.playlist-block h2{
	position:absolute;
	width:200px;
	font-family:'Exo',sans-serif;
	color:white;
	font-size:200%;
	text-align:center;
	margin-left:30px;
	text-shadow:2px 2px black;
	margin-top:0;
	margin-bottom:0px;
}
.playlist-block h2 span{
	animation:changeFont 10s ease-in-out infinite;
	color:#84bd00;
}
@keyframes changeFont {
	0%{
		font-family:'Orator Std',sans-serif;
	}
	20%{
		font-family:'Pacifico',sans-serif;
	}
	30%{
		font-family:'Source Sans Pro',sans-serif;
	}
	50%{
		font-family:'Slabo 27px',serif;
	}
	70%{
		font-family:'Quattrocento',serif;
	}
	80%{
		font-family:'Crete Round',cursive;
	}
	100%{
		font-family:'Raleway',sans-serif;
	}
}
section>h1{
	font-family:'Exo',sans-serif;
	font-size:220%;
	color:#84bd00;
	margin-left:30px;
}
footer{
	position:relative;
	top:150px;
	clear:both;
	width:100%;
	background-color:black;
	height:200px;
		padding:20px;

}
}
.social-icons{
	width:30%;
	border-right:3px dotted gray;
	margin-top:75px;
	margin-left:30px;
	float:left;
}
.social-icons img{
	width:4%;
	height:auto;
	margin-left:30px;
	transition:0.4s;
	margin-top:70px;
	
}
.social-icons img:hover{
	cursor:pointer;
	transform:scale(1.22);
}
footer img{
	height:200px;
	margin-left:10%;
	float:left;
	width:12%;
	
}
#copyright{
	margin-top:75px;
	margin-right:100px;
	color:gray;
	font-family:'Exo',sans-serif;
	float:right;
	width:30%;
	
}
.mobile-menu{
	width:100%;
	margin:0;
	display:none;
}
.mobile-menu h3:hover > ul {
	display:block;
}
.mobile-menu h3{
	position:relative;
	background-color:#84bd00;
	color:white;
	font-family:'Orator Std',sans-serif;
	padding:10px;
	text-align:center;
	
}
.mobile-menu ul{
	background-color:#84bd00;	
	padding:0;
	display:none;
}
.mobile-menu ul li{
	
	width:100%;
	position:relative;
		top:-2px;
	display:block;
	padding-top:20px;
	padding-bottom:20px;
	font-size:20px;
	background-color:black;
	color:white;
	font-family:'Orator Std',sans-serif;
	text-align:center;

	
}