:root {
	--brand-color: rgb(124, 0, 124);
	--brand-color-2: rgb(79, 2, 79);
	--brand-color-3: rgb(147, 209, 81);
	--brand-color-4: rgb(103, 248, 6);
	--brand-color-5: rgb(255, 123, 200);

	--brand-color-border: rgb(187, 1, 187);
	--brand-color-border-2: rgb(68, 0, 68);
	
	--brand-color-shadow: rgba(174, 0, 255, 0.25);
	--accent-color: rgb(79, 2, 79);
	--bg-color-3: rgb(40, 0, 40);
	--bg-color-2: rgb(63, 0, 63);
	--bg-color-1: rgb(27, 0, 27);
	--bg-color-1-transparent: rgb(27, 0, 27, 0.65);
	--navbar-height: 130px;
	--navbar-buttons-height: 40px;

	color: white;
}

:root, body {
	margin: 0px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 10pt;
}

:root {
	overflow-y:scroll;
}

h3 {
	font-weight: normal;
}

@supports (-moz-appearance:none) {
    :root {
		overflow-y:auto;
	}
}

@keyframes bg-anim {
	50% {
		box-shadow: 
			0px 0px 8px rgb(0, 0, 0, 0.9),
			0px 0px 16px rgb(255, 255, 255, 0.12),
			0px 0px 48px rgb(255, 255, 255, 0.235),
			0px 0px 65px rgba(255, 101, 255, 0.185),
			0px 0px 500px rgb(187, 1, 187, 0.7);
	}
	0%, 100% {
		box-shadow: 
			0px 0px 8px rgb(0, 0, 0, 1),
			0px 0px 16px rgb(255, 255, 255, 0.125),
			0px 0px 48px rgb(255, 255, 255, 0.25),
			0px 0px 65px rgba(255, 101, 255, 0.2),
			0px 0px 500px rgb(187, 1, 187, 0.75);
	}
}

content {
	display: flex;
	flex-direction: column;
	margin: 0px;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--bg-color-1-transparent);

	box-shadow: 0px 0px 500px var(--brand-color-bg-shadow);
	animation-name: bg-anim;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	z-index: 500;
}

content#mainpage {
	min-height: calc(100vh);
}

content#pageplayer {
	height: 80px;
	position: sticky;
	bottom: 0;
}

@media (min-width:1280px) {
	content {
		width: 1192px;
		margin-left: calc((100% - 1192px) / 2.0);
		border: 2px solid var(--brand-color-border);
		background-color: var(--bg-color-1);
		margin-bottom: 25px;
	}

	content#mainpage {
		margin-top: 25px;
		min-height: calc(100vh - 200px);
	}
}

#content {
	margin: 0px 0px;
	display: block;
}

a {
	color: var(--brand-color-5);
}

navbar #branding {
	display: flex;
	width: 100%;
	height: var(--navbar-height);

	background: 
		linear-gradient(0deg, var(--brand-color-shadow), transparent),
		linear-gradient(125deg, var(--brand-color), var(--brand-color-2));

	border-bottom: 1px solid var(--brand-color-border);

	padding: 10px 0;
	box-sizing: border-box;
	
	box-shadow: inset 0px 0px 16px #0004;
	display: flex;
}

flex {
	flex: 1;
	background-color: transparent;
	display: inline-block;
}

navbar #branding img[logo] {
	height: 100%;
	filter: drop-shadow(0px 0px 12px #000A);
	position: relative;
}

navbar .menubar {
	display: flex;
	background:
		linear-gradient(180deg, var(--brand-color-shadow), transparent),
		linear-gradient(0deg, var(--brand-color-2), var(--brand-color), var(--brand-color-5));

	border-bottom: 1px solid var(--brand-color-border-2);

	padding-left: 6px;
	padding-right: 6px;

	position: sticky;
	top: 0px;
}

navbar .menubar #menubar {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

navbar .menubar a {
	display: inline-flex;
	padding: 0px 19px;
	margin: 0px;
	height: var(--navbar-buttons-height);
	vertical-align: middle;
	color: white;
	text-shadow: 0px 1px 1px black;
	text-decoration: none;
	flex: 1;
	text-align: center;
	border: 1px solid transparent;
	box-sizing: border-box;
	border-left: 1px solid transparent !important;
	border-right: 1px solid transparent !important;
}

navbar .menubar a:hover {
	text-decoration: underline;
	border: 1px solid #FFF4;
}

navbar .menubar a[current],
navbar .menubar a:active {
	/* background:
		linear-gradient(0deg, var(--brand-color-border), var(--brand-color), var(--brand-color-2)); */
		
	background:
	linear-gradient(0deg, var(--brand-color-shadow), transparent),
	linear-gradient(180deg, var(--brand-color-2),     var(--brand-color), var(--brand-color-5));
	border: 1px solid #0004;

	span {
		position: relative;
		top: 1px;
	}
}

navbar .menubar span {
	margin: auto;
}

navbar .menubar separator {
	display: inline-flex;
	min-width: 1px;
	width: 1px;
	background: 
		linear-gradient(0deg, transparent, #FFF4, transparent)
		#AAA4;
	background-size: 1px var(--navbar-buttons-height);
}

#foreground, #player {
	width: 100%;
	z-index: 5000;
}

h1 {
	color: var(--brand-color-5);
	font-weight: bold;
	text-shadow: 0px 0px 2px var(--brand-color);
	font-family: var(--MVBoli);
	overflow: visible;
	font-size: 25pt;
	line-height: 35 pt;
}

body[loading] {
	navbar .menubar a {
		cursor: progress;
	}

	cursor: progress;
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--brand-color) #222;
}

.main-split-content {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	height:max-content;
}

.main-split-content panel {
	display: inline-block;
	flex: 1;
}


@media (max-width:959px) {
	*[desktop-only] {
		display: none !important;
	}

	.main-split-content panel {
		display: inline-block;
		flex: 1;
		min-width: 100%;
	}
	
	.main-split-content panel:last-of-type {
		flex: 1;
		max-width: min(100%, 380px);
	}
}

@media (min-width:960px) {
	*[mobile-only] {
		display: none !important;
	}

	.main-split-content panel:first-of-type {
		max-width: calc(100% - 380px);
	}

	.main-split-content panel:last-of-type {
		background-color: black;
		box-sizing: border-box;
		background: linear-gradient(90deg, var(--brand-color-2), transparent 4px 100%);
		max-width: 380px;
	}

	.main-split-content panel:last-of-type .panel_content {
		margin-left: 4px;
	}

}

@media (min-width:1280px) {
	.main-split-content panel:last-of-type {
		background: linear-gradient(90deg, var(--brand-color-5), transparent 4px 100%), var(--bg-color-3);
	}
}

h2 {
	background:
		linear-gradient(0deg, var(--brand-color-2) 0%, var(--brand-color) 7px calc(100% - 7px), var(--brand-color-5) 100%);
	margin: 0px;
	padding: 6px 0px 10px 0px;
	text-shadow: 0px 1px 0px black;
	text-align: center;
	font-size: 12pt;
}

h6 {
	margin: 2px 0px;
	color: #FFF8;
	font-weight: normal;
	text-align: center;
}

#top_10 .music {
	height: 50px;
	border-top: 1px solid var(--bg-color-2);
	display: inline-flex;
	width: 100%;
}

#top_10 .music img {
	min-width: 50px;
	max-width: 50px;
	height: 50px;
	flex: 1;
	display: inline-block;
}

#top_10 .music a {
	display: inline-block;
	flex: 1;
	color: white;
	text-decoration: none;
	padding: 7px;
}

#top_10 .music a[href]:hover .song_name {
	text-decoration: underline;
}

#top_10 .music a .song_name {
	font-weight: bold;
}

#top_10 .music p {
	padding: 0;
	margin: 0;
	width: 100%;
	line-height: 18px;
}



/*
	BUTTON
*/
button,
input[type="submit"] {
	background:
		linear-gradient(0deg, var(--brand-color-2) 0%, var(--brand-color) 20% 80%, var(--brand-color-5) 100%);
	border: 1px solid #FFF8;
	border-radius: 5px;
	color: white;
	padding: 5px 10px;
	display: inline-block;
	cursor: pointer;
}

button.icon,
input[type="submit"].icon {
	display: inline-flex;
}

button:hover,
input[type="submit"]:hover {
	background:
		linear-gradient(#FFF2, #FFF2),
		linear-gradient(0deg, var(--brand-color-2) 0%, var(--brand-color) 20% 80%, var(--brand-color-5) 100%);
	transition: background 0.5s ease-out;
}

button:active,
input[type="submit"]:active {
	background:
		linear-gradient(0deg, var(--brand-color-2) 100%, var(--brand-color) 20% 80%, var(--brand-color-5) 0%);
}

button:disabled,
input[type="submit"]:disabled {
	background:
		linear-gradient(0deg, var(--brand-color-2) 0%, var(--brand-color) 20% 80%, var(--brand-color-5) 100%);
	opacity: 0.5;
	cursor:default;
}

button.icon img,
input[type="submit"].icon img {
	height: 12pt;
	display: inline-block;
	margin-right: 5px;
}

::selection,
::-moz-selection {
	color: white;
	background-color: var(--brand-color-5);
}

@keyframes blink-anim {
	0%, 100% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
}

blink {
	animation: blink-anim 2s steps(1) infinite;
}

/*
	FOOTER
*/
footer {
	margin-top: auto;
	background: linear-gradient(0deg, #111 0%, #222 10%, #666 90%, #888 100%);
	border-top: 1px solid #000;
	color: #999;
	text-shadow: 0px -1px 0px #0008;
	padding: 15px;
	vertical-align: bottom;
}

footer .info .widgets {
	display: flex;
}
footer .info .widgets img[widget] {
	width: 100px;
	height: 30px;
	max-width: 100px;
	flex: 0;
	margin-right: 4px;
}

footer .info .widgets separator {
	display: inline-block;
	flex: 0;
	min-width: 1px;
	max-width: 1px;
	margin-left: 4px;
	margin-right: 4px;
	background-color: #888;
	height: 30px;
}