@keyframes fade_in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fade_out {
	from { opacity: 1; }
	to { opacity: 0; }
}

:root {
/* 	dis should be circle diameter, perhaps set w js */
	--crc-txt-sz: 30em;
	--h-m-factor: .7;
	--head-ftsz: calc( 2.4rem + 1.6vmin );
	--head-tmgn: calc( ( 1.8rem + 0.9vmin ) * var( --h-m-factor ) );
	--head-bmgn: calc( ( 1.2rem + 0.6vmin ) * var( --h-m-factor ) );
}

* {
	margin: 0;
	padding: 0;
	border: 0;
}

html {
	width: 100vw;
	height: 100vh;
}

body {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
 	background-color: #000;
}

.disappear-on-focus {
	position: sticky;
	width: 100%;
	height: 100%;
}

.site-header {
	position: absolute;
	text-align: center;
	width: 90vw;
	left: 5vw;
	font-size: var( --head-ftsz );
	font-family: 'M PLUS Code Latin';
	font-weight: 300;
	margin-top: var( --head-tmgn );
	margin-bottom: var( --head-bmgn );
	color: #7B5;
	user-select: none;
}

#chrome-notice {
	position: absolute;
	font-family: 'Montserrat', sans-serif;
	left: calc( 50vw + 18rem );
	top: calc( var( --head-tmgn ) - calc( 0.8rem + 0.7vmin ) * 1.35 + var( --head-ftsz ) / 2 );
	width: calc( ( 0.8rem + 0.7vmin ) * 10 );
	font-size: calc( 0.8rem + 0.7vmin );
	color: #337;
	margin-bottom: 8px;
	user-select: none;
}

#webgl-lost-notice {
	position: absolute;
	font-family: 'Montserrat', sans-serif;
	left: 10vw;
	top: calc( var( --head-tmgn ) + 1em + var( --head-bmgn ) + var( --head-ftsz ) );
	text-align: center;
	width: 80vw;
	font-size: calc( 0.9rem + 0.9vmin );
	color: #C52;
	user-select: none;
	display: none;
}

@media screen and (max-width: 1024px) {
	#chrome-notice {
		left: calc( 50vw - 12rem );
		top: calc( var( --head-tmgn ) + var( --head-bmgn ) + 0.6rem + 0.6vmin + var( --head-ftsz ) );
		width: 24rem;
		text-align: center;
	}
	#webgl-lost-notice {
		top: calc( var( --head-tmgn ) + var( --head-bmgn ) + 3rem + 2vmin + var( --head-ftsz ) );
	}
}

@media screen and (max-width: 508px) {
	#chrome-notice {
		left: calc( 10vw );
/* 		top: calc( var( --head-tmgn ) + var( --head-bmgn ) + 1em + 1vmin + var( --head-ftsz ) ); */
		width: 80vw;
	}
}

.gl_image {
	display:none;
}

.content {
	width: 100%;
	height: 100%;
/* 	initially */
	opacity: 0;
}

#screen {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}


.circle-text {
	position: absolute;
	display: block;
	text-align: center;
/* 	dis should be circle diameter, perhaps set w js */
	max-width: var( --crc-txt-sz );
	font-size: calc( var( --crc-txt-sz ) / 8 );
	font-family: 'Montserrat', sans-serif;
	pointer-events: none;
	user-select: none;
}

.over-canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.fade-in {
	opacity: 1;
	animation-name: fade_in;
	animation-duration: 0.3s;
	animation-timing-function: ease;
}

.fade-out {
	opacity: 0;
	animation-name: fade_out;
	animation-duration: 0.3s;
	animation-timing-function: ease;
}