body {
    background-color: #161616;
    padding: 0;
    margin: 0;
}
#project{
    width: 100%;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
	padding: 2% 0;
}

#wrapper {
    margin-left: 0;
   	margin-right: 0;
    text-align: center;
}
#content {
    width: 100%;
    text-align: center;
	margin: auto;
	padding: 3%;
}
p {
    text-align: center;
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
}
h1 {
    text-align: left;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
}
.tittle {
    padding: 0 8px;
	line-height: 1em; 
	font-size: 1.54em; 
	color: rgba(255, 255, 255, 0.8);
}
.top-right {
    padding: 0 8px;
	line-height: 3.2em; 
	font-size: 1.54em; 
	color: rgba(255, 255, 255, 0.8);
}

.flex-box-mainframe {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
}
.flex-box-items {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
}
.flex-box-center {
    display: flex;
    flex-wrap: wrap;
    align-content: left;
    justify-content: left;
    align-items: flex-end;
    flex-direction: row-reverse;
}
.footnote {
	width: 100%; 
	text-align: left;
	font-size: 0.7em;
	padding: 0 12px; 
	color: rgba(255, 255, 255, 0.2);
	border-radius: 18px;
}
.footnote span {
            display: inline-block;
            margin-right: 2px;
        }

/*lable styling*/
.label {
  color: white;
  padding: 2px 5px;
  font-family: 'Work Sans', sans-serif;
  border-radius: 8px;
  font-size: .8em;
  text-transform: uppercase;
  font-weight: bold;
  margin-right: 2px;
}
/*lable colors*/
.format {background-color: #222; color: rgba(255, 255, 255, 0.7);} /* black */
.info {background-color: #8e8e8e; color: black;} /* gray */
.callout {background-color: orange; color: black;} /* Orange */
.warning {background-color: #303030; color: #F2B705;} /* Red */ 

/*inner border for lables*/
.inner-border {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); /* Change the color and size as needed */
}

/*animation*/
.rgb {
  animation: 6s multicolor infinite ease-in-out 1s;
  -webkit-animation: 6s multicolor infinite ease-in-out 1s;
  cursor: none;
  display: inline-block;
}

.am:hover {
    animation: 6s multicolor;
	  animation-iteration-count: infinite;
	  animation-delay: 1s;
	  animation-timing-function: ease-in-out;
    -webkit-animation: 6s multicolor;
	  -webkit-animation-delay: 1s;
	  -webkit-animation-timing-function: ease-in-out;
	  cursor: none;
	  display: inline-block;
}
.bandcamp {
  border: 0;
  width: 100%;
  height: 600px; /* Set your desired height */
}


@keyframes multicolor {
    
	0% {
        color: #737373;
    }
	20% {
        color: #fff;
    }
    40% {
        color: #4962F2;
    }
  	60% {
		color: #F409fF;
    }
    80% {
        color: #74FFCC;
    }
	 100% {
        color: #737373;
    }
}
@-webkit-keyframes multicolor {
 	0% {
        color: #737373;
    }
	20% {
        color: #fff;
    }
    40% {
        color: #F409FF;
    }
  	60% {
        color: #4962F2;
    }
    80% {
        color: #74FFCC;
    }
	 100% {
        color: #737373;
    }
}

/*Custom*/
@media screen and (max-width: 768px) {
	.footnote {
		font-size: 0.6em;
	}
}

/*Small*/

@media screen and ( max-width : 399px ){
    .bandcamp {
       height: 500px;
    }
	#content {
		width: 96%;
	}
	.tittle {
		font-size: 6vw;
		width: 90%
	}
	.top-right {display: none}
}
@media screen and (min-width : 400px ) and ( max-width : 419px ){
    .bandcamp {
       height: 520px;
    }
		#content {
		width: 96%;
	}
	.top-right{display: none}
}

@media screen and (min-width : 420px ) and ( max-width : 439px ){
    .bandcamp {
       height: 540px;
    }
		#content {
		width: 96%;
	}
	.top-right{display: none}
	.tittle {
		width: 90%;}
}

@media screen and (min-width : 440px ) and ( max-width : 459px ){
    .bandcamp {
       height: 560px;
    }
		#content {
		width: 94%;
	}
	.top-right{display: none}
	.tittle {
		width: 80%;}
}

@media screen and (min-width : 460px ) and ( max-width : 479px ){
    .bandcamp {
       height: 580px;
    }
		#content {
		width: 94%;
	}
	.top-right{display: none}
	.tittle {
		width: 80%;}
}

@media screen and (min-width : 480px ) and ( max-width : 499px ){
    .bandcamp {
       height: 600px;
    }
		#content {
		width: 94%;
	}
	.top-right{display: none}
	.tittle {
		width: 80%;}
}

@media screen and (min-width : 500px ) and ( max-width : 519px ){
    .bandcamp {
       height: 620px;
    }
	#content {
		width: 92%;
	}
	.top-right{display: none}
	.tittle {
		width: 80%;}
}

@media screen and (min-width : 520px ) and ( max-width : 539px ){
    .bandcamp {
       height: 640px;
    }
		#content {
		width: 92%;
	}
	.top-right{display: none}
	.tittle {
		width: 80%;}
}

@media screen and (min-width : 540px ) and ( max-width : 559px ){
    .bandcamp {
       height: 680px;
    }
		#content {
		width: 94%;
	}
	.tittle {
		width: 70%;}
	.top-right{display: none}
}

@media screen and (min-width : 560px ) and ( max-width : 579px ){
    .bandcamp {
       height: 680px;
    }
		#content {
		width: 92%;
	}
	.top-right{display: none}
	.tittle {
		width: 60%;}
}

@media screen and ( min-width : 580px ) and (max-width : 600px ){
    .bandcamp {
       height: 700px;
    }
		#content {
		width: 92%;
	}
	.tittle {
		width: 60%;}
	.top-right{display: none;
	}	
	
}

@media screen and (min-width: 601px) and (max-width: 619px) {
   .bandcamp {
			height: 400px;
	}
	.tittle {
		width: 100%;}
}

/* Tooltip container *
.tooltip {
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* End*/

/*Bigger*/

@media screen and (min-width: 620px) and (max-width: 639px) {
    .bandcamp {
       height: 400px;
    }
}

@media screen and (min-width: 640px) and (max-width: 679px) {
    .bandcamp {
       height: 450px;
    }
}

@media screen and (min-width: 680px) and (max-width: 719px) {
    .bandcamp {
       height: 470px;
    }
}

@media screen and (min-width: 720px) and (max-width: 768px) {
    .bandcamp {
       height: 495px;
    }
				.note {
	width: 84%;
	}
}

/* End*/

/*Big*/

@media screen and (min-width: 769px) and (max-width: 799px) {
    .bandcamp {
       height: 510px;
    }
			.note {
	width: 72%;
	}
	.tittle {
		width: 90%;}
}

@media screen and (min-width: 800px) and (max-width: 839px) {
    .bandcamp {
       height: 530px;
    }
			.note {
	width: 72%;
	}
	.tittle {
		width: 80%;}
}

@media screen and (min-width : 839px ) and ( max-width : 992px ) {
    .bandcamp {
       height: 560px;
    }
			.note {
	width: 60%;
	}
	.tittle {
		width: 80%;}
}

/* End*/

/*High Res*/

@media screen and (min-width: 993px) and ( max-width : 1205px ) {
    .bandcamp {
       height: 440px;
    }
			.note {
	width: 48%;
	}
	.tittle {
		width: 60%;}
}
@media screen and (min-width: 1206px) and ( max-width : 1500px ) {
    .bandcamp {
       height: 472px;
    }
		.note {
	width: 48%;
	}
	.tittle {
		width: 50%;}
}
@media screen and (min-width: 1500px) and ( max-width : 2000px ) {
    .bandcamp {
       height: 472px;
    }
		.note {
	width: 48%;
	}
	.tittle {
		width: 40%;}
}
@media screen and (min-width: 1500px) {
    .bandcamp {
       height: 472px;
    }
		.note {
	width: 48%;
	}
	.tittle {
		width: 40%;}
}