* { 
	margin: 0; 
	padding: 0; 
	box-sizing: border-box;
}

html, body { width: 100%; height: 100%; }
canvas { 
	display: block; 
	background: 
		linear-gradient( rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0.95) 90%), 
		url(noise.jpg);
}

#splash {
	z-index: 1;
	position: fixed;
	width: 100%;
	background: white;
	top: 0;
	bottom: 0;
	padding: 2em;
	display: flex;
	align-items: center;
    justify-content: center;
}

.mobile #splash {
	padding:  0.5em;
}

#title {
	font-size: 2em;
	margin-bottom: 1em;
}

.mobile #title {
	font-size:  1.5em;
}

#splash * {
	font-family: verdana;
}

.mobile #inner-splash {
	text-align:  center;
}

#sound-splash {
	display: none;
}

#sound-splash button {
	cursor: pointer;
	padding: 0.5em;
	font-size: 1.5rem;
}

.mobile #sound-splash button {
	font-size:  1em;
	margin-bottom:  0.5em;
}


/* debug remove  */
#log {
	position: fixed;
	top: 10px;
	left: 10px;
	font-family:  monaco, monospace;
	font-size:  32px;
}