* {
	font-family: 'Raufaser', sans-serif;
	font-variation-settings: 'wdth' 5, 'wght' 475, 'slnt' 0;
	font-feature-settings: 'ss10';

	font-size: min( 30px, 7vw );
	line-height: 1;
	color: var( --color );
}

html,
body {
	--background-color: rgb( 35, 35, 35 );
	--color: rgb( 233, 233, 233 );

	--text-stroke-width: 0.04em;
	--control-size: 2em;
	--progress-bar-height: 0.75em;

	background-color: var( --background-color );
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1em 0.5em;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.slash {
	margin: 0 0.15em;
}



#title {
	text-align: center;
	margin-bottom: 1.5em;
}

h1 {
	font-size: min( 40px, 9vw );
	font-variation-settings: 'wdth' 5, 'wght' 1000, 'slnt' 0;
	margin-bottom: 0.25em;
}

h2 {
	font-size: min( 80px, 15vw );
	font-variation-settings: 'wdth' 5, 'wght' 1000, 'slnt' 0;
	text-transform: uppercase;
}



#switch {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#switch:not( :last-child ) {
	margin-bottom: 2.5em;
}

#switch__title {
	margin-bottom: 0.5em;
}

#switch__buttons {
	display: flex;
	justify-content: center;
}



.button > a {
	display: block;
	padding: 0.25em 0.5em;
	margin: 0 0.2em; 
	border-radius: 2em;
	border: 1px solid var( --color );
	text-decoration: none;
}

.button > a:hover,
.button > a:active,
.button.is-active > a {
	color: var( --background-color );
	background-color: var( --color );
}



audio-controls {
	align-items: center;
}

	audio-control {
		width: var( --control-size );
		height: var( --control-size );
		display: flex;
		justify-content: center;
		align-items: center;
	}

	audio-control i {
		-webkit-text-stroke: var( --text-stroke-width ) currentcolor;
		-moz-text-stroke: var( --text-stroke-width ) currentColor;
		text-stroke: var( --text-stroke-width ) currentColor;
	}

	audio-progress {
		align-items: center;
		margin: 0 calc( var( --control-size ) * 0.25 );
	}

		audio-progress-bar {
			height: var( --progress-bar-height );
			border-radius: 1em;
			overflow: hidden;
			background-color: rgba( 233, 233, 233, 0.4 );
		}



@media ( max-width: 799px ) {
	audio-controls {
		flex-wrap: wrap;
	}

	audio-progress#mobile {
		flex-grow: 0;
		margin-left: auto;
	}

	audio-progress#desktop {
		min-width: 95%;
		flex-shrink: 0;
		margin-bottom: 0.25em;
	}

	audio-progress#desktop audio-display {
		display: none;
	}
}

@media ( min-width: 800px ) {
	html,
	body {
		--progress-bar-height: 1.5em;
	}

	audio-progress#desktop {
		order: 1;
	}

	audio-progress#mobile {
		display: none;
	}

	audio-progress-bar {
		margin: 0 calc( var( --control-size ) * 0.4 );
	}
}