:root {
	/* Base */
  	--bg: #121212;
	--util-panel: #2A2F3A;
	--surface: #4169E1;
	--surface-hover: #5B84F0;
	--surface-elevated: #4F78EC;

	/* Accent */
  	--accent: #DAA520;
	--accent-light: #E6B84A;
	--accent-dark: #B8860B;

	/* Text */
	--text-primary: #F3F3F3;
	--text-secondary: #C7C7C7;
	--text-muted: #8A8A8A;

	/* States */
	--success: #4CAF50;
	--warning: #FFB300;
	--error: #E53935;
	--info: #42A5F5;
}

body {
	background: var(--bg);
	background-image: url("data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
		<filter id='noise'>\
		<feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/>\
		</filter>\
		<rect width='100%' height='100%' filter='url(%23noise)' opacity='0.1'/>\
		</svg>");
	background-repeat: repeat;
	font-family: fantasy sans-serif;
	width: 95%;
	padding: 1rem;
	margin: auto;
}
nav {
	background-color: rgba(65, 105, 205, 0.8);
	backdrop-filter: blur(6px);
	/* Alt Colors: #1E3A5F #2A2F3A */
	position: sticky;
	top: 0;
	margin: auto;
	padding: 10px;
	border: 5px solid var(--accent);
	border-radius: 25px;
	display: flex;
	justify-content: center;
	gap: 1rem;
	button {
		border: 2px solid var(--accent);
		border-radius: 25px;
		padding: 1rem;
		background: linear-gradient(to bottom right, #f5deb3, #d4af37);
		/* Alt Color: #4169E1 */
		color: var(--text-primary);
		width: clamp(75px, 150px, 225px);
		transition: all 0.2s ease;
	}
	button:hover {
		transform: scale(1.1);
		background-color: linear-gradient(to bottom right, #ffd700, #b8860b);
		box-shadow: 0 0 10px rgba(240, 193, 75, 0.5);
		/* Alt Color: #5B7EE5 #1f3c94 */
	}
}
#spotifyEmbed {
	border: 5px solid var(--accent);
	border-radius: 20px;
	padding: 1rem;
	gap: 1rem;
	background-color: #383838;
	color: var(--text-primary);
}
.banner {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #383838;
	border: 5px solid var(--accent);
	border-radius: 20px;
	padding: 1rem;
}
.bannerImage {
	height: auto;
}
.content {
	border: 5px solid var(--accent);
	border-radius: 20px;
	padding: 1rem;
	gap: 1rem;
	background-color: var(--surface);
	color: var(--text-primary);
}
.contentGrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.spotifyGrid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	.miniPanel {
		border: 2px solid var(--accent);
		border-radius: 12px;
	}
	iframe {
		box-sizing: border-box;
	}
}
.fullPanel {
	grid-column: span 4;
}
.halfPanel {
	grid-column: span 2;
}
.miniPanel{
	grid-column: span 1;
}
.gibbousPanel{
	grid-column: span 3;
}

/*
	Color Guide
	#383838; Dragon Shield Slate-Grey
	#4169E1; Royal blue
	#F3F3F3; Smokewhite
	#DAA520; Goldenrod
*/

/*
Secondary

Background:     #121212
Cards:          #1E1E1E
Primary Accent: #4169E1
Secondary:      #DAA520
Text:           #F5F5F5
Muted Text:     #A0A0A0

#DC143C
*/