:root {
	/*--bgColor : hsla(242, 86%, 6%, 1);*/
	--bgColorLight: hsla(242, 86%, 24%, 1);
	--textColor: hsla(242, 86%, 88%, 1);
	--textColorDark: hsla(242, 36%, 0%, 1);
	--paperColor: rgba(34, 152, 195, 0.84);
	--paperColorDark: rgba(255, 255, 255, 0.2);
	--shadowColorFaint: hsla(0, 0%, 0%, 0.2);
}
::selected {
	color: var(--textColorDark);
}
html, body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
	background: var(--bgColor);
	background: linear-gradient(135deg, var(--bgColor), var(--bgColorLight));
	color: var(--textColor);
	font-family: 'Saira', sans-serif;
	position: relative;
}
* {
	box-sizing: border-box;
	transition: all 0.12s cubic-bezier(0.42, 0.54, 0.22, 1.26);
}
#canvas {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
audio {
	position: relative;
	margin: 0 0 0 0px;
	width: 500px;
}
audio.active {
	position: relative;
	margin: 0 0 0 0px;
	width: 500px;
}
#thefile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
label.file {
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 75%;
	transform: translate3d(-50%, -50%, 0);
	padding: 1rem 2rem;
	border-radius: 4px;
	background: var(--paperColor);
	color: var(--textColor);
	font-size: 1.25em;
	font-weight: 700;
	box-shadow: 0 20px 60px var(--shadowColorFaint);
	cursor: pointer;
}
label.file:hover {
	background: var(--paperColorDark);
	transform: translate3d(-50%, -55%, 0);
}
label.file:active {
	background: var(--paperColorDark);
	transform: translate3d(-50%, -45%, 0);
}
label.file.normal {
	transform: /*translate3d(10%, 50%, 0)*/ ;
	padding: 0.2rem 2rem;
	font-size: 1rem;
	top: 10%;
	left: 50%;
}