@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&family=Saira:ital,wdth,wght@1,87.5..125,900&display=swap');


::selection { background-color: rgba(170,0,0,0.8); }

:root {

/* some base measure dividers */
/*--scale-rem:  0.8125; /* 13‍÷16 */
/*--scale-rem2: 0.3125; /*  5‍÷16 */

--scale-rem:  0.7222; /* 13‍÷18 */
--scale-rem2: 0.2777; /*  5‍÷18 */

--color-text: rgba(255, 255, 255,   1);
--color-bg:		rgba(  0,   0,   0,   1);

}


html {

	background-color: var(--color-bg);
	background-image: url('../img/bg_stage.jpg');

	background-size: cover;
	background-attachment: fixed;
	background-position: center;

	color: var(--color-text);
	font-family: 'Nunito', sans-serif;
	line-height: 1.15;
	font-size: 100%;

	cursor: default;
	}

a.normal {
	text-decoration: none;
	color: var(--color-text);
}

em {
	font-style: normal;
	font-weight: 900;
	letter-spacing: 0.005em;
	color: var(--color-text);
}

img.large {
	width: 100%;
	height: auto;
}

p span {
	white-space: nowrap;
}


.readability {
	text-shadow: 0px 0px 8px rgba(0,0,0, 1),
							 0px 0px 6px rgba(0,0,0, 1),
							 0px 0px 4px rgba(0,0,0, 1),
							 0px 0px 1px rgba(0,0,0, 1);
	}



@media screen and (min-width: 1100px) {
	img.large { width: 1000px; }

}


#page-dim {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0, 0.20);
	z-index: 0;
}

#page-wrapper.grid {
	z-index: 1;
	position: relative;
	display: grid;
	row-gap: 1rem;
	column-gap: 0;
	grid-template-columns: max(3vw) 1fr max(3vw);
	grid-template-areas:
			'header   header    header'
			'......   subheader ......'
			'......   player    ......'
			'......   styles    ......'
			'......   contact   ......';
	 max-width: 1024px;
	 margin: 0 auto;

	 overflow: hidden;

/*
	height: auto;
	width: 100vw;

	margin: auto;

	margin-top: clamp(1rem, 18vh, 6rem );
	background: none;

	justify-items: center;
	justify-content: center;
	align-items: center;
	text-align: center;
	*/
}

@media screen and (min-width: 320px) {
	#page-wrapper.grid {
			row-gap: 1rem;
			column-gap: 1rem;
			grid-template-columns: clamp(3vw, 8vw, 4rem) 1fr clamp(3vw, 8vw, 4rem);
			grid-template-areas:
					'header   header    header'
					'......   subheader ......'
					'......   player    ......'
					'......   styles    ......'
					'......   contact   ......';
	}
}

@media screen and (min-width: 480px) {
	#page-wrapper.grid {
			row-gap: 1.6rem;
			column-gap: clamp(1rem, 1.6rem, 2rem);
			grid-template-columns: 0 1fr 1fr 0;
			grid-template-areas:
					'header   header    header    header'
					'......   subheader subheader ......'
					'......   player    styles    ......'
					'......   contact   contact   ......';
			}
	.contact { margin: 0 23vw 0 23vw;	}
	.contact h3 { text-align: center; }
}

@media screen and (min-width: 720px) {
	#page-wrapper.grid {
			row-gap: 1.6rem;
			column-gap: 1.6rem;
			grid-template-columns: 0 1fr 1fr 1fr 0;
			grid-template-areas:
					'header   header    header    header    header'
					'......   subheader subheader subheader ......'
					'......   player    styles    contact   ......';
	}
		.contact { margin: 0; }
			.contact h3 { text-align: left; }
}

@media screen and (min-width: 960px) {
	#page-wrapper.grid {
		column-gap: 3rem;
	}
}




.header {
	grid-area: header;

	margin: 0;
	margin-top: 4rem;
	margin-top: clamp(1.6rem, 11vh, 6rem );

	color: rgba(10, 0, 90, 0.07);
	mix-blend-mode: normal;
	text-align: center;
	font-size: 3rem;
	font-size: clamp(0.5rem, 16vw, 12rem);
	line-height: 1;
	scale: 1 1.30;

/* font choices: */
/* out: urbanist outfit Nunito   Josefin Sans  */
/*  in:  chivo saira Geologica Be Vietnam Pro ;*/

	font-family: "Saira", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
	font-variation-settings:
    "wdth" 100;
  font-style: italic;
	text-transform: uppercase;
 -webkit-font-smoothing: antialiased;
  letter-spacing: 0.05em;

 -webkit-text-stroke-width: 0.85px;
 -webkit-text-stroke-color: var(--color-text);
 	text-stroke-width: 0.85px;
 	text-stroke-color: var(--color-text);

/*
   text-shadow:
    -1px -1px 0 #fff,
     0   -1px 0 #fff,
     1px -1px 0 #fff,
     1px  0   0 #fff,
     1px  1px 0 #fff,
     0    1px 0 #fff,
    -1px  1px 0 #fff,
    -1px  0   0 #fff,
		-1px -1px 0 #fff,
     0   -1px 0 #fff,
     1px -1px 0 #fff,
     1px  0   0 #fff,
     1px  1px 0 #fff,
     0    1px 0 #fff,
    -1px  1px 0 #fff,
    -1px  0   0 #fff;*/

	animation: djdanjoo-slide 4s ease 0s 1 normal forwards, djdanjoo-fade  4s ease 0s 1 normal forwards;
}

@keyframes djdanjoo-slide {
	  0% {
				 transform: translateY(30px);
			 }
	 50% { transform: translateY(0);
	     }
	100% {
			   transform: translateY(0);
			 }
}

@keyframes djdanjoo-fade {
	  0% { opacity: 0;

			 }
	 50% {
	     }
	100% { opacity: 1;

			 }
}

/* compesation for text stroke width */
@media screen and (min-width: 320px) {
	.header { -webkit-text-stroke-width: 0.85px;
		 	       text-stroke-width: 0.95px;
						 letter-spacing: 0.035em;
						 font-size: 3rem;
						 font-size: clamp(0.5rem, 16vw, 12rem);
		 }
	.subheader h2 { font-size: 1.35rem; }
	.card h3 { font-size: 1.35rem; }
	 }
@media screen and (min-width: 480px) {
	.header { -webkit-text-stroke-width: 0.95px;
		 	       text-stroke-width: 0.95px;
						 letter-spacing: 0.025em;
 						 font-size: 5rem;
 						 font-size: clamp(0.5rem, 16vw, 12rem);
		 }
	 .subheader h2 { font-size: 1.5rem; }
 		}
@media screen and (min-width: 640px) {
	.header { -webkit-text-stroke-width: 1px;
		 	       text-stroke-width: 1px;
						 letter-spacing: 0;
						 font-size: 7rem;
						 font-size: clamp(0.5rem, 18vw, 12rem);
		 }
	 .subheader h2 { font-size: 1.75rem; }
 	 }
@media screen and (min-width: 960px) {
	.header { -webkit-text-stroke-width: 1.2px;
					 text-stroke-width: 1.2px;
					 font-size: 11rem;
					 font-size: clamp(0.5rem, 18vw, 12rem);
				 }
	.subheader h2 { font-size: 1.85rem; }
		}

.subheader {
	grid-area: subheader;
	position: relative;
	/*grid-column: span 3;*/

	/*background: black;
	width: 100%;
	height: 2em;
	margin-top: 1em;*/

	font-family: "Nunito", sans-serif;
	font-style: normal;
	font-weight: 200;
	letter-spacing: 0.015em;
	text-transform: uppercase;
 -webkit-font-smoothing: antialiased;
	font-optical-sizing: auto;

	text-align: center;
	margin-bottom: 5rem;
	margin-bottom: clamp(2rem, 16vh, 6rem);

	animation: subheader-fade-in 3s ease-in 0s 1 normal forwards;
}

@keyframes subheader-fade-in {
	  0% { opacity: 0; }
	 50% { opacity: 0; }
	100% { opacity: 1; }
}

h2 {
	margin: 0;
	font-weight: inherit;
	font-size: 1.35rem;
	line-height: 1;
	position: absolute;
	width: 100%;
	height: fit-content;
	text-align: center;

	transform: translateX(35%);
	opacity: 0;
	filter: blur(10px);
	letter-spacing: 0.5em;
	/*
	good beziers
	cubic-bezier(.77,0,.18,1)
	cubic-bezier(1,0,.25,0.8)
	cubic-bezier(1,.15,.25,.95)
	*/
	animation:  	subheader-animation 20s cubic-bezier(1,.15,.25,.95) 0s infinite normal forwards,
								 subheader-delay 120s linear 0s infinite normal forwards;
}

/*
Made dynamic with PHP:
h2:nth-of-type(1) { animation-delay:   0s; animation: subheader-static 20s cubic-bezier(1,.15,.25,.95) 0s 1 normal forwards,
																											subheader-animation 20s cubic-bezier(1,.15,.25,.95) 0s infinite normal forwards,
								 																			subheader-delay 120s linear 0s infinite normal forwards; }
h2:nth-of-type(2) { animation-delay:  20s; }
h2:nth-of-type(3) { animation-delay:  40s; }
h2:nth-of-type(4) { animation-delay:  60s; }
h2:nth-of-type(5) { animation-delay:  80s; }
h2:nth-of-type(6) { animation-delay: 100s; }
*/

@keyframes subheader-static {
	   0% { opacity: 1; transform: translateX(0); filter: blur(0px); letter-spacing: 0.015em; }

		65% { opacity: 1; transform: translateX(0); filter: blur(0px); }
		70% { filter: blur(0px); letter-spacing: 0.015em;}
		90% { filter: blur(10px); }
		99% { opacity: 0; transform: translateX(-35%); filter: blur(15px); letter-spacing: 0.6em; }
		100% { opacity: 0; transform: translateX(35%); filter: blur(10px); letter-spacing: 0.5em; }
}

@keyframes subheader-animation {
	  0% { }
	 25% { }
	 30% { opacity: 1; transform: translateX(0); filter: blur(0px); letter-spacing: 0.015em; }
	 50% {  }
	 70% { opacity: 1; transform: translateX(0); filter: blur(0px); }
   75% { filter: blur(0px); letter-spacing: 0.015em;}
	 90% { filter: blur(10px); }
	 99% { opacity: 0; }
	100% { opacity: 0; transform: translateX(-35%); filter: blur(15px); letter-spacing: 0.6em; }

}

/* Made dynamic with PHP
@keyframes subheader-delay {
	  0% { visibility: visible; }
   16% { visibility: visible; }
   17% { visibility: hidden; }
  100% { visibility: hidden; }
}
*/


.player  { grid-area: player; }
.styles  { grid-area: styles; }
.contact { grid-area: contact; }

.card {
		font-family: "Nunito", sans-serif;
		font-style: normal;
		font-weight: 200;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	 -webkit-font-smoothing: antialiased;
		font-optical-sizing: auto;
		font-size: 0.85rem;
		line-height: 1.5;
		background: linear-gradient( rgba(0,0,0, 0.5) 10%, rgba(0,0,50, 0) 100% );
		padding: 0 0.65rem 1.6em 0.65em;


		animation: card-fade 4s ease-in 0s 1 normal forwards;
}

@keyframes card-fade {
	  0% { opacity: 0; }
	 50% {opacity: 0;  }
	100% { opacity: 1; }
}

h3 {
	margin: 0;

	font-family: "Nunito", sans-serif;
	font-style: normal;
	font-weight: 200;
	font-size: 1rem;
	line-height: 1.85;
	letter-spacing: 0.05em;
	text-transform: uppercase;
 -webkit-font-smoothing: antialiased;
	font-optical-sizing: auto;

	border-bottom: 1px solid white;
	margin-bottom: 0.7em;
	margin-bottom: 0.35lh;
}

.card h3 img {
	color: white;
	height: 0.92em;
	vertical-align: baseline;
	filter: invert(100%);
	margin-right: 0.45em;
  margin-left: 1px;
}

.card p {
	margin: 0;
	margin-bottom: 1.35em;
	margin-bottom: 1lh;
}

.card.styles {

}

.card.styles h3 img {	margin-bottom: -3px; }
.card.contact h3 img {	margin-bottom: -2px; }

.card audio {
	margin-bottom: 0.7em;

	width: 100%;
	display: block;
}

.card .track a {
	margin-bottom: 0.85em;
	display: inline-block;
	margin-left: 0.2em;
	text-decoration: none;
	color: var(--color-text);
}

.card .track a img {
	color: white;
	height: 1.15em;
	vertical-align: bottom;
	filter: invert(100%);
}



.card.contact a img {
		color: white;
		height: 1em;
		vertical-align: middle;
		filter: invert(100%);
		margin-left: 0.25em;
}

.card:last-of-type {
	margin-bottom: 3rem;
}