body {
	text-align: center;
	vertical-align: middle;
	margin: 0px;
	background-color: #282828;
	cursor: url('media/cursor.png'), auto;
	/* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-family: 'Courier New', Courier, monospace;
	color: white;
	user-select: none;
}

::-webkit-scrollbar {
	width: 0px;
	/* Remove scrollbar space */
	background: transparent;
	/* Optional: just make scrollbar invisible */
}

a,
a:visited {
	color: #774b27;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

@keyframes colorchange {
	0% {
		background: red;
	}
	15% {
		background: yellow;
	}
	30% {
		background: turquoise;
	}
	45% {
		background: lime;
	}
	60% {
		background: crimson;
	}
	85% {
		background: aqua;
	}
	100% {
		background: deeppink;
	}
}

#promo {
	position: absolute;
	bottom: .5rem;
	left: 0;
	width: 100%;
}


/* main */

#clocks {
	height: 100vh;
}

#display {
	font-size: 9.5vh;
	padding-bottom: 40vh;
}

#clock {
	font-size: 5vh;
	padding-top: 40vh;
}

#audio {
	position: fixed;
	left: 0;
	right: 0;
	margin: auto;
	transition: bottom ease-in-out 0.5s;
	bottom: -25vh;
}

/* during event */
body.event {
	animation: colorchange 1.1s infinite;
}

body.event > #clocks > #clock {
	font-size: 12vh;
}

body.event > #clocks > #display {
	font-size: 3vh;
}

#audio.event {
	bottom: 5%;
}


/* footer */

#drawer {
	width: 100vw;
	height: 1em;
	background: #7289da;
	padding: .7rem 0px;
}

#drawer:active {
	bottom: 0;
}

#ver {
	font-size: .6rem;
	padding: 4px 5px;
	border-radius: 4px;
}

#ver.dev {
	background-color: #af3517;
}

#ver.stable {
	background-color: #f1e7e7;
	color: #1b0c0c;
}