@font-face {
	font-family: Afacad;
	src: url('fonts/afacad.ttf');
}

@font-face {
	font-family: Cabin;
	src: url('fonts/cabin.ttf');
}

@font-face {
	font-family: Lexend;
	src: url('fonts/lexend.ttf');
}


* {
	font-family: 'Cabin';
	font-size: min(22px, 2.8vw);
	font-weight: 200;
	line-height: 1.35;
	user-select: none;
}

body {
	background-color: #322d2c;
	color: #a9a6a5;
	margin: 2vh 2vw 2vh 2vw;
	max-width: 27cm;
	margin: auto;
}

#semitransparent {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 18vh;
	background-color: #322d2ccc;
	z-index: 98;
}

header {
	position: fixed;
	top: 2vw;
	left: 2vw;
	right: 0;
	height: 14vh;
	margin: auto;
	width: min(27cm, 96vw);
	z-index: 100;
}

header img {
	position: absolute;
	top: 0;
	left: 0;
	width: 20%;
}

#spinner {
	animation: spin 24000ms infinite linear;
	animation-play-state: paused;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(-360deg); }
}

nav {
	position: absolute;
	display: flex;
	justify-content: space-between;
	top: 5vmin;
	left: 25%;
	right: 2%;
	/*padding-bottom: 2vh;*/
	width: 73%;
	z-index: 101;
}

nav a {
	text-align: center;
}

main {
	margin-top: 19vh;
}

main section {
	display: flex;
	justify-content: center;
	align-items: start;
	scroll-margin-top: 19vh;
}

.tracks {
	max-width: 27cm;
	padding: 0;
	width: 94%;
}

aside {
	font-size: min(32px, 4vw);
	margin: 1.5vh 3vw 0 0;
	transform: rotate(180deg);
	width: 6%;
	writing-mode: vertical-lr;
}

footer {
	padding-top: 6vh;
	padding-bottom: 4vh;
	text-align: center;
}

footer img {
	height: min(13px, 2vw);
	padding: 0 0 0.05vw 0.25vw;
}

h1 {
	font-size: min(56px, 5vh);
	font-weight: bold;
	transform: scale(1.0, 0.9);
}

h2 {
	font-size: 32px;
	user-select: text;
}

h3 {
	font-size: 24px;
}

a {
	color: #999695;
	text-decoration: none;
	transition: all 150ms;
}

#soundtracksLink:hover {
	color: #fb6746;
}

#arrangementsLink:hover {
	color: #ead500;
}

#contemporaryLink:hover {
	color: #53b58a;
}

#classicalLink:hover {
	color: #5a9ce3;
}

.soundtracksActive {
	color: #fb6746;
}

.arrangementsActive {
	color: #ead500;
}

.contemporaryActive {
	color: #53b58a;
}

.classicalActive {
	color: #5a9ce3;
}

ul {
	display: flex;
	justify-content: space-between;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

li {
	display: inline-block;
	font-weight: 300;
	text-align: center;
	width: 25vw;
}

.track {
	display: flex;
	padding: 1.5vh 0 1.5vh 0;
	border-bottom: solid 1px #454241;
	scroll-margin-top: 19vh;
}

.track .metadata {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1vh 0 1vh 0;
	width: 100%;
}

.track .coverart {
	border-radius: 4px;
	height: 15vmin;
	margin-right: 3vmin;
	width: 15vmin;
}

.track .title {
	font-size: min(32px, 4vmin);
	line-height: 0;
}

.track .tag {
	background-color: #454241;
	border-radius: 4px;
	color: #fffefc;
	font-family: Lexend;
	font-size: min(14px, 2vmin);
	font-weight: 400;
	padding: 0.3vh 1.2vw 0.3vh 1.2vw;
}

.track .controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.track .controls .play {
	background-color: #e1dbdb;
	border-radius: 4px 0 0 4px;
	line-height: 0;
	padding: 0.4vmin;
	margin-right: 0.5vw;
	cursor: pointer;
}

.track .controls .play:active {
	padding: 0.5vmin 0.3vmin 0.3vmin 0.5vmin;
}

.track .controls .play img {
	width: 1.2vmin;
	padding: 0;
	margin: 0;
}

.track .controls .time {
	font-family: Afacad;
	width: min(50px, 7vw);
	margin-right: 0.5vw;
}

.track .controls .progress {
	border-top: solid 1px #a9a6a535;
	border-right: solid 1px #a9a6a57a;
	border-bottom: solid 1px #a9a6a57a;
	border-left: solid 1px #a9a6a535;
	border-radius: 2px;
	width: 100%;
	height: 1vh;
	z-index: 10;
}

.track .controls .progress .indicator {
	width: 0;
	height: 100%;
	background-image: url(images/bar.png);
	background-size: 100% 1vh;
	z-index: 9;
	pointer-events: none;
}

.track .controls .duration {
	font-family: Afacad;
	margin-left: 0.5vw;
}

.track audio {
	margin: 0;
	width: 100%;
}

#contact {
	margin: auto;
	max-width: 27cm;
	padding-top: 4vh;
	scroll-margin-top: 19vh;
	text-align: center;
}

.selectable {
	user-select: text;
}

.ly {
	height: 25px;
}

#noscript {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	color: #322d2c;
	background-color: #a9a6a5;
	text-align: center;
	padding: 1vmin;
}

#noscript a {
	color: #322d2c;
	text-decoration: underline;
}