@font-face {
	font-display: swap;
	font-family: 'Roboto Flex';
	font-style: normal;
	font-weight: 100;
	src: url('fonts/RobotoFlex-Variable.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Roboto Flex';
	font-style: normal;
	font-weight: 300;
	src: url('fonts/RobotoFlex-Variable.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Roboto Flex';
	font-style: normal;
	font-weight: 500;
	src: url('fonts/RobotoFlex-Variable.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Roboto Flex';
	font-style: normal;
	font-weight: 800;
	src: url('fonts/RobotoFlex-Variable.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Roboto Black';
	font-style: normal;
	font-weight: 900;
	src: url('fonts/Roboto-Black.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'FontAwesome';
	font-style: normal;
	src: url('fonts/FontAwesome.woff2') format('woff2');
}
* {
	margin:0px;
	padding:0px;
	color:inherit;
}
html {
	background-color:rgb(0,0,0);
	background-image:url(daw.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
}
body {
	color:rgb(192,192,192);
	font-family:"Roboto Flex";
}
img {
	background-color:rgb(0,0,0);
}
#cover > img {
	box-sizing: border-box;
	padding:3px;
	border:2px solid rgb(139,41,48);
}
a.song {
	color:rgb(96,96,96);
	display:block;
	text-decoration:none;
	font-size: 1.5rem;
}
a.song:hover > span:first-child {
	color:rgb(192,192,192);
}
a.song > span:first-child {
	transition:color 0.23s ease-out 0s;
}
a.song > span:last-child {
	font-size:10px;
	color:rgb(96,96,96);
	vertical-align:top;
	padding-left:15px;
}
a.active > span:last-child {
	display: inline-block;
	animation-name: blink2;
	animation-delay: 0.5s;
	animation-duration: 1s;
    animation-iteration-count: infinite;
	animation-direction: alternate;
}
a.active > span:first-child {
	color:rgb(139,41,48);
	display: inline-block;
	animation-name: blink;
	animation-duration: 1s;
    animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes blink {
    from {
		color:rgb(192,192,192);
		transform: scale(1.1,1) translateX(2%);
	}
    to {
		color:rgb(139,41,48);
		transform: scale(1,1.1)
	}
}
@keyframes blink2 {
    from {
		transform: scale(1.2,1) translate(1.5ch,-1ch);
	}
    to {
		transform: scale(1,1.2)
	}
}
#page {
	box-sizing: border-box;
	padding: 0.5rem;
	background-color:rgba(0,0,0,0.88);
	box-shadow:0px 0px 123px rgba(255,255,255,0.23);
}
p {
	margin:0 0 0.5rem 0;
	font-size:1.5rem;
	font-weight: 100;
}
@media screen and (min-width: 900px) {
	body {
		padding:2cm;
	}
	#page {
		display:table;
	}
	#cover {
		display:table-cell;
		vertical-align:top;
	}
	#player {
		display:table-cell;
		vertical-align:top;
	}
	#songs {
		display:table-row;
	}
	#control {
		display:table-row;
	}
	#cover > img {
		width:10cm;
		height:10cm;
	}
	a.song {
		padding:0.25rem 1rem;
	}
	#audio {
		margin:1rem 0px 0px 0px;
		width:10cm;
	}
	h1, p {
		padding:0 1rem 0.5rem 1rem;
	}
}
@media screen and (max-width: 900px) {
	body {
		padding:0.5cm;
	}
	#page {
		display:block;
		width:100%;
	}
	#cover {
		display:block;
		width:100%;
	}
	#cover > img {
		width:100%;
		height:auto;
	}
	a.song {
		width:100%;
		font-size:5vw;
		padding:2px 0px 2px 0px;
	}
	a > span:last-child {
		margin-left:0px;
	}
	#audio {
		margin:23px 0px 0px 0px;
		width:100%;
	}
}