html {
	font-size: clamp(8px, 1.5vw, 12px);
}

:root {
	/* Brand Colors */
	--color-cyan: rgb(0, 250, 250);
	
	/* Background Colors */
	--color-bg-black: rgb(0, 0, 0);
	--color-bg-dark: rgb(30, 30, 30);
	
	/* Text Colors */
	
	--color-white: rgb(250, 250, 250);
	--color-gray-bright: rgb(220, 220, 220);
	--color-gray-light: rgb(200, 200, 200);
	--color-gray: rgb(140, 140, 140);
	--color-gray-dark: rgb(80, 80, 80);
	--color-gray-darker: rgb(40, 40, 40);
	--Color_Gray_30: rgb(30, 30, 30);
	--Color_Gray_20: rgb(20, 20, 20);
	
	
	/* Accent Colors */
	--color-cover-bright: rgb(130, 190, 100);
	--color-cover: rgb(30, 70, 30);
    --color-cover-dark: rgb(20, 50, 20);
	--color-cover-gold: rgb(220, 170, 30);
	--color-cover-gold-dark: rgb(80, 60, 20);
	--color-time: rgb(250, 0, 250);
	--color-time-dark: rgb(200, 0, 200);
	
	/* Event Colors */
	--Color_Green_200: rgb(60, 200, 90);
	--Color_Green_230: rgb(150, 230, 170);
	--Color_Event_Disco: var(--Color_Green_200);
	--Color_Event_Disco_Glow: var(--Color_Green_230);
	
	/* Month Colors */
	--color-month-january: rgb(140, 210, 250);
	--color-month-february: rgb(220, 20, 60);
	--color-month-march: rgb(40, 170, 70);
	--color-month-april: rgb(190, 90, 210);
	--color-month-may: rgb(250, 110, 180);
	--color-month-june: rgb(250, 220, 0);
	--color-month-july: rgb(220, 40, 40);
	--color-month-august: rgb(250, 170, 0);
	--color-month-september: rgb(220, 170, 30);
	--color-month-october: rgb(250, 140, 0);
	--color-month-november: rgb(140, 70, 20);
	--color-month-december: rgb(220, 20, 60);
	
	/* Typography Sizes */
	--Text_Mega: 6.0rem;
	--Text_5rem: 5.0rem;
	--Text_Larger: 3.5rem;
	--Text_Large: 2.5rem;
	--Text_Mid: 1.75rem;
	--Text_Small: 1.0rem;
	
	/* Spacing */
	--Text_Margin_Vertical: 0.5em;
	
	/* Event Layout */
	--event-height: 30vw;
	--event-height-collapsed: 12vw;
	--event-date-month-height: 4vw;
}

body {
	background: var(--color-bg-black);
	color: var(--color-white);
	font-family: Arial, sans-serif;
	padding-top: 5rem;
	font-size: 1rem;
}

.NavBar {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	align-items: center;
	color: var(--color-white);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: var(--Color_Gray_20);
	height: 80px;
	font-size: 80px;
	z-index: 100;
}

.NavBar_Artist {
	grid-column: 2;
	grid-row: 1;
	font-size: 25%;
	text-align: center;
	padding-left: 0;
	height: 25%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.NavBar_Page {
	grid-column: 2;
	grid-row: 2;
	font-size: 70%;
	text-align: center;
	height: 60%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#Btn_Mute {
	grid-column: 3;
	grid-row: 1 / 3;
	cursor: pointer;
	background: transparent;
	border: none;
	color: white;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding-right: 16px;
}

#Btn_Mute img {
	width: 48px;
	height: 48px;
}

.Equalizer {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 32px;
}

.Equalizer_Bar {
	width: 6px;
	background: var(--color-cyan);
	animation: equalizer 1s ease-in-out infinite;
	border-radius: 2px;
}

.Equalizer_Bar:nth-child(1) {
	animation-delay: 0s;
	animation-duration: 0.8s;
}

.Equalizer_Bar:nth-child(2) {
	animation-delay: 0.2s;
	animation-duration: 1.1s;
}

.Equalizer_Bar:nth-child(3) {
	animation-delay: 0.4s;
	animation-duration: 0.9s;
}

.Equalizer_Bar:nth-child(4) {
	animation-delay: 0.1s;
	animation-duration: 1.2s;
}

.Equalizer_Bar:nth-child(5) {
	animation-delay: 0.3s;
	animation-duration: 1s;
}

.Equalizer.Paused .Equalizer_Bar {
	animation: none;
	height: 4px;
}

@keyframes equalizer {
	0%, 100% {
		height: 4px;
	}
	50% {
		height: 28px;
	}
}



footer {
	margin-top: 2rem;
	font-size: 0.9rem;
	color: var(--color-gray);
	text-align: center;
}

a {
	color: var(--color-cyan);
}

a:hover {
	color: var(--color-time);
}

@media (max-width: 480px) {
	.NavBar {
		height: 60px;
		font-size: 60px;
	}
}