@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

:root {
--text-color: white;
--primary-color: rgb(111, 185, 158);
--contrast-color: gold;
--background-color: #363636;
--background-light: rgb(79, 79, 79);
--background-mid: rgb(62, 62, 62);
--background-dark: rgb(42, 42, 42);
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	margin: 0;
	/* font-stretch: 150%; */
	font-weight: lighter;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-align: left;
	font-family: Lato, sans-serif;
}
/* trbl */
h1 {
	font-weight: lighter;
	font-size: 20px;
}


h2 {
	font-weight: lighter;
}

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

.constrained {
	margin: 0 auto;
	max-width: 1100px;
}

.header-container {
	padding-top: 2rem;
	/* background-color: var(--background-light); */
}

.header {
	margin: 0 0 1.5rem 0;
	display: flex;
	flex-direction: row;
	gap: 1.5rem;
	padding: 1rem;
}

.header-image {
	border-radius: 50%;
	width: 140px;
	height: 140px;
	position:relative
}

.header-text {
	display: flex;
	flex-direction: column;
	padding-left: 1rem;
}

.header-links {
	/* margin: 0 1rem 0 auto; */
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	margin-left: auto;
	padding: 0.5rem;
	/* background-color: var(--background-mid); */
	/* border-radius: 10px; */
}

.audio-container {
	margin: 1.5rem;
	/* padding: 1.5rem 0 1.5rem 0; */
	/* height: 100rem; */

}

.audio-player {
	width: 100%;
	/* margin: 0 auto; */
	border-radius: 10px;
}

#videos-container {
	margin: 1.5rem;
	display: block;
	/* padding: 1.5rem 0 1.5rem 0; */
}

.videos {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	margin-bottom: 1rem;
}

.videos iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	border-width: 0px;
	/* box-shadow: 10px 10px black; */
}

.credits-container {
	margin: 0 1.5rem 0 1.5rem;
	padding: 0 0 1.5rem 0;
}

.credits {
	border-collapse: collapse;
	border-width: 0px;
	/* tr:nth-child(even) {background-color: var(--background-mid)} */
}

thead {
	background-color: var(--background-mid);
}

table  th:nth-child(1) {
	border-radius: 10px 0px 0px 10px;
}

table  th:nth-last-child(1) {
	border-radius: 0px 10px 10px 0px;
}

table  tr:nth-last-child(1) {
	border-bottom: 0px solid var(--background-mid);
}

th, td {
	padding: 1rem;
}

th {
	white-space: nowrap;
	font-weight: lighter;
}

tr {
	border-bottom: 1px solid var(--background-mid);
}

.about-container {
	padding: 1.5rem 0 1.5rem 0;
	background-color: var(--background-mid);
}

.about {
	margin: 1.5rem;
	display: flex;
	flex-direction: row;
	gap: 2rem;
	text-align: justify;
}

.about-picture-container {
	flex-basis: 80%;
	align-self: baseline;
	flex-shrink: 0.7;
	max-width: 800px;
	/* margin-top: 1.5rem; */
	padding-top: 1.5rem;
}

.about-picture {
	width: 100%;
	height: 100%;
	border-radius: 10px;

}

.footer {
	width: 100%;
	margin: 1.5rem;
	padding-top: 2rem;
	text-align: center;
	margin: 0 auto 4rem auto;
}

.footer-links {
	margin-left:auto;
}

/* header/about rows to centered columns */
@media (max-width: 800px) {
	.header {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.header-links {
		margin-left: 0%;
		flex-direction: row;
	}
	.about {
		flex-direction: column;
	}
	.about-picture-container {
		max-width: 60vw;
		align-self: center;
	}
	.hide800 {
		display: none;
	}
	h2 {
		text-align: center;
	}
	.contact {
		text-align: center;
	}
}

/* for credits */
@media (max-width: 600px) {
	.notes {
		display :none;
	}
	.credits {
		/* tr:nth-child(odd) {background-color: var(--background-mid)} */
		width: 100%;
		margin: 0 auto;
	}
	td, th{
		padding: 0.5rem;
	}
}

#cookieConsentBanner {
	margin: 0 1.5rem 0 1.5rem;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background-color: var(--background-light);
	color: white;
	padding: 20px;
	text-align: center;
	font-size: 16px;
	z-index: 1000;
	display: none;
	border-radius: 10px;
  }

  #cookieConsentBanner button {
	/* margin: auto; */
	margin-top: 1rem;
	width: auto;
	background-color: var(--primary-color);
	/* width: 15rem; */
	border-radius: 10px;
	color: white;
	border: none;
	padding: 10px 15px;
	font-size: 14px;
	cursor: pointer;
  }

  #cookieConsentBanner button:hover {
	background-color: #45a049;
  }


*,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
input,button{outline:none;}
/* a,a:hover,a:visited{color:#ddd;text-decoration:none;} */
.flex{display:-webkit-flex;display:flex;}
.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flex-align{-webkit-align-items:center;align-items:center;}
.w-full{width:100%;}

/* HTML5 Audio Player with Playlist, source: https://www.codehim.com/vanilla-javascript/javascript-audio-player-with-playlist/ */
#simp button,#simp input,#simp img{border:0;}
#simp{max-width:1100px;font-size:16px;font-family:Lato, sans-serif;text-align:initial;line-height:initial;background:var(--background-color);color:#ddd;margin:0 auto;border-radius:6px;overflow:hidden;}
/* #simp .simp-album{padding:20px 25px 5px;} */
/* #simp .simp-album .simp-cover{margin-right:20px;} */
#simp .simp-album .simp-cover{margin:0px; padding:0px;}
/* #simp .simp-album .simp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;} */
#simp .simp-album .simp-title{font-size:120%;font-weight:bold;}
#simp .simp-album .simp-artist{font-size:90%;color:#6c7883;}
#simp .simp-controls{padding-bottom:15px;}
#simp .simp-controls button{font-size:130%;width:50px;height:50px;background:none;color:#ddd;padding:7px;cursor:pointer;border:0;border-radius:3px;}
#simp .simp-controls button[disabled]{color:#636469;cursor:initial;}
#simp .simp-controls button:not([disabled]):hover{background:var(--background-light);color:#fff;}
#simp .simp-controls .simp-prev,#simp .simp-controls .simp-next{font-size:100%;}
#simp .simp-controls .simp-tracker,#simp .simp-controls .simp-volume{flex:1;margin-left:10px;position:relative;}
#simp .simp-controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
/* #simp .simp-controls .simp-loading .simp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;} */
#simp .simp-controls .simp-time,#simp .simp-controls .simp-others{margin-left:10px;}
#simp .simp-controls .simp-volume{max-width:110px;}
#simp .simp-controls .simp-volume .simp-mute{margin-right:5px;}
#simp .simp-controls .simp-others .simp-active{background:var(--background-color);}
#simp .simp-controls .simp-others .simp-shide button{font-size:100%;padding:0;width:24px;height:14px;display:block;}
#simp .simp-controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;}

#simp .simp-controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.40);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls .simp-load .simp-progress::-webkit-slider-runnable-track{background:var(--background-dark);}
#simp .simp-controls .simp-loading .simp-progress::-webkit-slider-runnable-track{background:var(--primary-color);}
#simp .simp-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--primary-color);height:15px;width:15px;margin-top:-4px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--primary-color);}

#simp .simp-controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.40);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls .simp-load .simp-progress::-moz-range-track{background:var(--background-dark);}
#simp .simp-controls .simp-loading .simp-progress::-moz-range-track{background:var(--primary-color);}
#simp .simp-controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:var(--primary-color);height:15px;width:15px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px var(--primary-color), 0 0 0 1px var(--primary-color);}

#simp .simp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;}
#simp .simp-display{overflow:hidden;max-height:5000px;transition:max-height .5s ease-in-out;}
#simp .simp-hide{max-height:0;}
/* playlist */
#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:1000px;}
#simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;}
#simp ul li:last-child{padding-bottom:13px;}
#simp ul li:nth-child(odd){background:var(--background-color);}
#simp ul li:hover{background:var(--background-mid);border-radius: 10px;}
#simp ul li.simp-active{background: var(--background-mid);color:#fff;border-radius: 10px;}
#simp ul li .simp-desc{font-size:90%;opacity:.5;margin-left:5px;}
/* playlist scrollbar */
/* #simp ul{overflow-y:auto;overflow-x:hidden;scrollbar-color:rgba(5, 118, 230,rgb(rgba(1, 128, 255, 0) 74);}
#simp ul::-webkit-scrollbar-track{background-color:rgb(0, 0, 0);}
#simp ul::-webkit-scrollbar{width:6px;background-color:#090909;}
#simp ul::-webkit-scrollbar-thumb{background-color:#000000;} */
/* progress animation */
@-webkit-keyframes audio-progress{to{background-position:25px 0;}}
@keyframes audio-progress{to{background-position:25px 0;}}
/* mobile */
@media screen and (max-width:480px) {
#simp .simp-controls .simp-volume,#simp .simp-controls .simp-others{display:none;}
#simp .simp-controls .simp-time{margin-right:10px;}
}
@media screen and (max-width:370px) {
#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
}