html {font-size: 1rem; text-align: center;}
body {background: #0d0d0d; color: #fff; font-family: "Courier", sans-serif; font-size: 1rem; padding-top: 50px;}

h1 {text-align: center; font-weight: bold;}
h2 {font-size: 1rem; text-align: center; display: flex; flex-direction: column;}

ul {list-style: none;}

p {margin: 0;}
figure {margin: 0;}
a {transition: all 0.25s ease; color: #cc4632;
	&:hover,
	&:focus {color: maroon;}
}

.more-info {cursor: help;}
.hidden {display: none !important;}



.animate-push {animation: push 0.4s cubic-bezier(0.175, 0.885, 0.220, 2.000);}
@keyframes push {
    0% {transform: scale3d(1, 1, 1);}
    50% {transform: scale3d(0.8, 0.8, 0.8);}
}

@keyframes progressing {
  from {transform: translateX(-100%);}
  to {transform: translateX(0);}
}

@keyframes pulsate {
	0%, 100% {background: rgb(128 0 0 / 5%);}
	50% {background: rgb(128 0 0 / 15%);}
}

@keyframes ants {
	to {background-position: 100% 100%;}
}

@keyframes glow {
	0% {color: #212529;}
	100% {color: #28a745;}
}

@keyframes bump {
	0%, 100% {transform: scale(1.0);}
	50% {transform: scale(1.2);}
}

@keyframes rotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}






img.emoji {width: 1em; height: 1em;}






body {position: relative;
	&:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0d0d0d url("stardust.png") repeat; opacity: 0.35; mix-blend-mode: lighten; animation: slide 60s infinite linear; pointer-events: none; z-index: 9999;}
	&:after {content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0d0d0d url("album.jpg") no-repeat top center / cover; filter: blur(17px); opacity: 0.65; pointer-events: none;}
}

@keyframes slide {
	from {background-position: 0 0;}
	to {background-position: 0 -100%;}
}


#intro {padding-left: 20px; padding-right: 20px;}

#content {position: relative; display: flex; flex-direction: column; align-items: center; margin: 50px auto 0 auto; padding-left: 40px; padding-right: 40px; max-width: 100%; width: 800px; text-align: center; z-index: 500; min-height: 100vh;
	@media ( max-width: 720px ){
		margin-top: 10vh;
	}

	#album {width: 600px; max-width: 70%; margin-bottom: 50px;}

	.youtube-embed {width: 1300px; height: auto; max-width: 160%; aspect-ratio: 16/9; margin-bottom: 30px; border-radius: 15px; box-shadow: 0 12px 34px 0 rgba(0, 0, 0, 0.5);
		@media ( max-width: 1300px ){
			max-width: 100%; border-radius: 5px;
		}
	}

	h1 {font-size: 2rem; font-weight: 300;
		strong {font-weight: 800; font-size: 1.75rem;} /* American Typewriter font */
	}

	#stream-embed {margin-bottom: 50px;}

	h2 {color: #999; margin-top: 30px;}

	ul#streams {margin: 0; padding: 0; list-style: none; display: flex; flex-direction: row; flex-flow: wrap; justify-content: center; gap: 35px; font-size: 56px; margin-bottom: 10px;
		@media ( max-width: 720px ){
			gap: 25px; font-size: 36px;

			.stream.deezer {display: none;}
		}

		a {color: #fff;
			&:hover,
			&:focus {color: #aaa;}

			&[href$="coming-soon"] {cursor: not-allowed;}
		}
	}

	footer {color: #999; margin-top: 75px; padding-bottom: 75px;}
}

#bg-gradient {position: absolute; left: 0; bottom: 0; width: 100%; height: 600px; background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 90%)); z-index: 400;}