/*
bright red = #D91828
red = #BF1B1B
white = #F2F2F2
grey = #595959
black = #0D0D0D
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: darkred;
  color: #F2F2F2;
}

.container {
	max-width: 85em;
	margin: 0 auto;
}

.wrapper {
}

.reserve {
	background-color: #0;
	text-align: center;
}
.menu {
	background-color: #595959;
	display: block;
	float: left;
	width: 100%;
	text-align: right;
}

.menu-active_link {
	color: #999;
}

.header, .subheader {
	background-color: #D91828;
	display: block;
	float: left;
	width: 100%;
	font-family: 'Comfortaa';
}

.header  div , .subheader div {
	padding: 0 0.6em;
}

.subheader {
	color: #0D0D0D;
}

.info_artworks {
	background-color: #BF1B1B;
	display: block;
	float: left;
	width: 100%;
}

.info_art {
	margin: 0 auto;
	padding: 0 0.6em;
	text-align: center;
}

#infocontainer  {
	padding: 0.6em 0;
}

#infocontainer img {
	border-radius: 4px;
}

.player {
	padding: 0.6em;
	margin: 0 auto;
}

.footer {
	background-color: #595959;
	text-align: center;
	height: 2em;
	padding: 0.4em 0;
}

h1 {
	font-size: 2.4em;
	margin-bottom: 0.3em;
}

h2 {
	font-size: 1.4em;
	margin-bottom: 0.3em;
}

audio {
	 visibility: hidden;
}

.info_title {
	font: 1em comfortaa;
	margin: 0.6em;
	padding: 0.6em 1em;
	background:  #BF1B1B;
	border-radius: 4px;
}

.info_artist {
	display: inline-block;
	padding-left: 0.6em;
	margin: 0;
	font-weight: 1000;
}

.info_song {
  display: inline-block;
  font-weight: 1000;
  margin: 0;
}

.info_artist  a {
	color: #0D0D0D;
  text-decoration: underline;
  }

.info_stream {
	background: #BF1B1B;
	font: 1em comfortaa;
	margin: 0.6em;
	border-radius: 4px;
}

.info_stream span {
	text-transform: lowercase;
	font-style: italic;
}

.spoiler {
	display: inline-block;
	cursor: pointer;
	margin: 0;
	padding: 0.6em 1em;
	font-weight: 800;
	min-width: 100%
}
.spoiler_p {
	float: right;
	min-width: 10%;
	margin: 0;
	padding: 0;
	text-align: right;
	font-weight: 800;
}

.spoiler-info {
	padding: 0 1em 0.6em 1em;
}

.pure-menu-heading {
	text-transform: none;
}

 .menu-tab {
	 width: 75px;
	 height: 58px;
	 position: fixed;
	 z-index: 100;
	 top: 0px;
	 right: 0px;
	 cursor: pointer;
	 background-color: rgba( 89, 89, 89, 0.5);
	 transition: all 0.6s ease-in-out;
	/*end of div*/
}
 .menu-tab div {
	 width: 28px;
	 height: 3px;
	 background-color: #F2F2F2;
	 display: block;
	 margin: 5px 23px;
	 transition: all 0.6s ease-in-out;
}
 .menu-tab div:nth-child(1) {
	 margin-top: 20px;
}
/*end of menu-tab*/
 .menu-tab.active {
	 right: 260px;
	 transition: all 600ms ease-in-out;
	 background-color: rgba(89, 89, 89, 0.5);
}
 .menu-tab.active #one {
	 transform: translateY(8px) rotate(-135deg);
	 transition: all 0.6s ease-in-out;
	 background-color: #F2F2F2;
}
 .menu-tab.active #two {
	 opacity: 0;
	 transition: 0.4s ease;
}
 .menu-tab.active #three {
	 transform: translateY(-8px) rotate(-45deg);
	 transition: all 0.6s ease-in-out;
	 background-color: #F2F2F2;
}
 .menu-hide {
	 width: 260px;
	 right: -260px;
	 height: 100vh;
	 position: fixed;
	 z-index: 10;
	 top: 0px;
	 transition: all 0.6s ease-in-out;
	/*end of nav*/
}
 .menu-hide ul li {
	 height: 58px;
	 list-style-type: none;
	 text-align: center;
	 line-height: 58px;
	 transition: all 0.5s ease;
}
 .menu-hide ul li:hover {
	 background-color: #e74c3c;
	 transition: all 0.5s ease;
}
 .menu-hide ul li a {
	/* padding: 30px 25px; */
	 text-decoration: none;
	 color: #F2F2F2;
	 font-weight: 500;
}
/*end of menu-hide*/
 .menu-hide.show {
	 right: 0px;
	 background-color: rgba(89, 89, 89, 0.5);
	 transition: all 0.6s ease-in-out;
}







@media screen and (min-width: 48em){

	.menu-tab {
		display: none;
	}
}

@media screen and (max-width: 48em) {
	.menu {
		display: none;
	}
	.pure-menu-link {
		padding: 0;
	}
	.pure-menu-link:hover {
	 background-color: #F2F2F2;
	 color: #595959;
	 transition: all 0.5s ease;
  }
  .hide_me {
  	display: none;
  }
  .info_title {
  	text-align: center;
  }
  .info_title span {
  	display: none;
  }
  .info_artist {
  	padding: 0;
  	display: block;
  }
  .info_song {
  	padding: 0;
  	display: block;
  }