:root {
	--body-bg: #dcdcdc;
	--header-bg: #ffffff49;
	--header-noblur-bg: #ffffffd9;
	--main-bg: #eee;
	--shadow-color: #0000004d;
	--text-color: #1b1b1b;
	--sub-text-color: #333333;
	--em-text-color: #000;
	--header-blur: contrast(0.3) brightness(1.8) blur(16px);
}

body, html {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.04em;
	margin: 0;
	padding: 0;
	background: var(--body-bg);
	height: fit-content;
/*   height: 100%; */
	color: var(--text-color);
}

header {
	position: relative;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 3.2em;
	color: var(--em-text-color);
	border-bottom: 1px solid var(--text-color);
	/* background-color: #eee; */
	background-color:var(--header-bg);
	-webkit-backdrop-filter:var(--header-blur);
	backdrop-filter:var(--header-blur);
	box-sizing: border-box;
	padding: 0.5em;
	box-shadow:0px 2px 16px -5px var(--shadow-color);
	z-index: 3;
	/* padding-top: 1em; */
}
@supports (not (backdrop-filter:blur(1px))) and (not (-webkit-backdrop-filter:blur(1px))){header{background-color: var(--header-noblur-bg);}}

header * {
	display: inline-flex;
	flex-direction: row;
	flex-grow: 1;
	margin: 0.25em 0.5em 0 0.5em;
}

header #smlogo {
	user-select: none;
	font-size:  1.3em;
	font-family: 'Josefin Sans', sans-serif;
	pointer-events: none;
	text-decoration: none;
}
header #smlogo:any-link {
	color: inherit;
}
header a {
	text-decoration: none;
}
header a:any-link {
	color: inherit;
}

.sqbuttoncontainer {
	margin: 0;
	position: relative;
}

.sqbutton {
	display: inline-block;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	appearance: none;
	border: none;
	background: none;
	outline: 1px solid var(--text-color);
	color: var(--text-color);
	transition: color 0.1s;
	margin: 0;
/*   padding: 0.1em 04em 0.1em 0.4em; */
	text-align: center;
	cursor: pointer;
	/* z-index: 2; */
}
.sqbutton:hover {
	color: #fff;
}
.sqbutton:hover span {
	color: #fff;
	z-index: 2;
}
.sqbutton::after {
	content: ' ';
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.1s, transform 0.1s;
	opacity: 0%;
	transform: scale(0.5, 0.5);
	z-index: 0;
}
.sqbutton:hover::after {
	transform: scale(1, 1);
	opacity: 100%;
}


main {
	position: relative;
	top: 0;
	left: 50%;
	min-width: 66vw;
	max-width: 90vw;
	/* min-width: 30em; */
	transform: translate(-50%, 0%);
	background-color: var(--main-bg);
	margin: 1em 0.25em 1em 0.25em;
	padding: 0.3em 3em 0.3em 3em;
	box-sizing: border-box;
	box-shadow:2px 4px 16px -4px var(--shadow-color);
}


.trackdivider {
	height: 2em;
	margin-bottom: 2em;
	border-bottom: 1px solid var(--sub-text-color);
}

.trackcontainer {
	/* font-size: 0; */
	position: relative;
	width: 100%;
	--height: 45%;
	height: var(--height);
	content: "";
	clear: both;
	display: table;
	}
	.tracktext {
		position: relative;
		right: 0;
		top: 0;
		width: calc(100% - var(--height));
		height: 100%;
		box-sizing: border-box;
		padding: 0 1.3em 0 1.3em;
		font-size: 1.0rem;
		float: right;
		}
		.trackheader {
			text-align: center;
			position: relative;
			top: 0;
			left: 50%;
			transform: translate(-50%, 0%);
			margin-bottom: 1em;
			}
			.tracktitle {
				display: block;
				text-align: center;
				/* font-family: 'Open Sans', sans-serif; */
				/* font-size: 1.9em !important; */
				/* font-weight: 600; */
				font-family: 'Josefin Sans', sans-serif;
				font-size: 2.75em;
				font-weight: 200;
				letter-spacing: 4px;
				font-variant-caps: all-small-caps;
				margin-block-start: 0;
				margin-block-end: 0;
				color: var(--em-text-color);
			}
			.trackdate {
				font-family: 'Source Code Pro', monospace;
				font-size: 1em;
				color: var(--sub-text-color);
		}
		.trackbody {
			color: var(--text-color);
			}
			.trackdescription {
				/* font-size: 1.2em;
				font-family: 'Work Sans', sans-serif;
				font-weight: 300;
				letter-spacing: -0.05em; */
				}
				.trackdescription p {
					/* font-size: 1.1em; */
					font-family: 'Work Sans', sans-serif;
					font-weight: 300;
					letter-spacing: -0.05em;
					text-align: justify;
				}
				.trackname {
					font-style: italic;
			}
			.trackbodydivider {
				position: relative;
				left: 50%;
				transform: translate(-50%, 0%);
				margin-top: 0.75em;
				border-top: 1px solid var(--sub-text-color);
				width: 7em;
			}
			/* .tracklisten.theme.light {--social-fill-color: #000;}
			.tracklisten.theme.dark {--social-fill-color: #fff;} */
			.tracklisten {
				position: relative;
				top: 0;
				left: 50%;
				font-size: 0;
				transform: translate(-50%, 0%);
				text-align: center;
				/* white-space: nowrap; */
				opacity: 30%;
				transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1);
				z-index: 3;
				width: fit-content;
				max-width: 100%;
				--social-fill-color: var(--text-color);
				}
				.tracklisten:hover, .tracklisten:focus-within {
					opacity: 100%;
					transition-duration: 0.2s;
				}
				.tracklisten a { outline: none; }
				.tracklisten a .social {
					display: inline-block;
					width: 2.15em;
					height: 2.15em;
					font-size: 1.4rem;
					fill: var(--social-fill-color);
					transition: fill 1.5s cubic-bezier(0.19, 1, 0.22, 1);
					z-index: 3;
					}
					.tracklisten a:hover .social, .tracklisten a:focus-visible .social {
						fill: var(--brand-fill-color);
						transition-duration: 0.1s;
					}
					.tracklisten a .social::before {
						content: ' ';
						position: absolute;
						top: 0; left: 0;
						width: 2.15em;
						height: 2.15em;
						background-color: var(--text-color);
						opacity: 0%;
						transform: scale(0.25, 0.25);
						transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1), transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
						z-index: 2;
						pointer-events: none;
					}
					.tracklisten a:focus .social::before {
						opacity: 100%;
						transform: scale(1.0, 1.0);
						transition-duration: 0.1s;
	}
	.trackcover {
		position: relative;
		top: 0;
		left: 0;
		/* width: 30em;
		height: 30em; */
		/* background-image: var(--bimg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover; */
		width: var(--height);
		height: var(--height);
		user-select: none;
		/* box-shadow: 4px 4px rgb(139, 139, 139); */
		box-shadow: 4px 6px 15px -1px var(--shadow-color);
		
		float: left;
		height: auto;
		border:0.5px solid var(--sub-text-color);
		box-sizing: border-box;
}


footer {
	position: relative;
	top: 0.75em;
	bottom: 1em;
	left: 50%;
	transform: translate(-50%);
	color: var(--sub-text-color);
	width: fit-content;
}


::-webkit-scrollbar-track,::-webkit-scrollbar-corner { background: var(--body-bg); }
::-webkit-scrollbar-thumb {background: var(--sb-handle);}
	::-webkit-scrollbar-thumb:hover { background: var(--sb-handle-hover); }
	::-webkit-scrollbar-thumb:active { background: var(--sb-handle-active); }

@media screen and (max-aspect-ratio: 4/3) {
	main {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding: 0.3em 1em 0.3em 1em;
	}
}

@media screen and (max-aspect-ratio: 1/1) {
	.trackcontainer {
		--height: 85%;
		height: fit-content;
	}
	.tracktext {
		position: relative;
		top: initial;
		bottom: 0;
		width: 100%;
		/* height: calc(100% - var(--height)); */
		height: fit-content;
		margin-top: 1em;
	}
	.tracklisten a .social {
		width: 3.25em;
		height: 3.25em;
	}
	.trackcover {
		float: none;
		left: 50%;
		transform: translate(-50%, 0%);
	}
}


@media (prefers-color-scheme: light) {
	:root {
		--body-bg: #dcdcdc;
		--header-bg: #ffffff49;
		--header-noblur-bg: #ffffffd9;
		--main-bg: #eee;
		--shadow-color: #0000004d;
		--text-color: #1b1b1b;
		--sub-text-color: #333333;
		--em-text-color: #000;
		--header-blur: contrast(0.3) brightness(1.8) blur(16px);
		--sb-handle:#a3a3a3;
		--sb-handle-hover:#838383;
		--sb-handle-active:#696969;
		--select-bg-color:#b3d4fc;
		--select-text-color: #181818;
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--body-bg: #1e1e1e;
		--header-bg: #23232349;
		--header-noblur-bg: #232323d9;
		--main-bg: #2d2d2d;
		--shadow-color: #0000009c;
		--text-color: #dfdfdf;
		--sub-text-color: #969696;
		--em-text-color: #fff;
		--header-blur: contrast(0.6) brightness(0.8) blur(16px);
		--sb-handle:#383838;
		--sb-handle-hover:#464646;
		--sb-handle-active:#646464;
		--select-bg-color:#b3d4fc;
		--select-text-color: #181818;
	}
}