@charset "utf-8";
/*
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
=-=-=-=- DESIGNED AND BUILT BY IAN BESLER =-=-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/

html,body,main,section,h3,h4 {
	margin: 0;
	padding: 0;
}

html,body,main {
	width: 100%;
	height: 100%;
}

/*
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=-=- HEADER AND FOOTER -=-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/

.position-off-screen {
	position: absolute;
	left: -200vw;
	top: -200vh;
}

/*
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=-=- CONTROL PANEL -=-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/

#control-panel-hover-listener {
	position: fixed;
	z-index: 1;
	width: 20vw;
	height: 15vw;
	border-radius: 50%;
}

#control-panel-hover-listener:hover #control-panel button {
	font-size: 24pt;
}

#control-panel {
	transition: padding 0.2s;
}
	#control-panel button {
		background: #fff;
		border: 0.1em solid #000;
		border-radius: 50%;
		cursor: pointer;
		font-size: 12pt;
		height: 1.5em;
		margin: 1em 0 0 1em;
		transition: font-size 0.2s;
		width: 1.5em;
	}

		#control-panel button:hover {
			background: #000;
			border-color: #fff;
			color: #fff;
			box-shadow: 0.1em 0.1em 0.1em #000;
		}

		#control-panel button:active {
			background: #ff0;
			color: #000;
		}

/*
-=-=-=-=-=-=-=-=-=-=-=
=-=-=-=- MAIN =-=-=-=-
-=-=-=-=-=-=-=-=-=-=-=
*/

.position-off-screen {
	position: absolute;
	left: -200vw;
	top: -200vh;
}

section {
	float: left;
	width: 33.33%;
	height: 100%;
}

h3,h4 {
	font-family: sans-serif;
	text-align: center;
}

h3 {
	margin-top: 40vh;
	font-size: 4vw;
}

h4 {
	font-weight: normal;
	font-size: 3vw;
}