body {
	background:tan url(images/Melamine-wood-003.png);
	color:rgba(0,0,0,0.6);
	margin:0; padding:0;
	min-height:100vh;
	font:5vw Rye;
	text-align:center;
	text-shadow:0 -0.05em 0.05em rgba(0,0,0,0.2), 0 0.05em 0.05em rgba(255,255,255,0.3);
}
#front { font-size:18px; }
header {
	position:fixed;
	bottom:0; left:0;
	width:100vw;
	background:#0006;
	box-shadow:inset 0 1vh 1vh #0009;
	padding:0.5em;
	color:white;
	text-shadow:none;
	font:bold 18px sans-serif;
}
h1 {
	font-size:1em;
	margin:0; padding:4px;
	float:left;
}
#helpicon {
	float:left;
	height:1.5em; width:1.5em;
	border:1px solid #fff5;
	border-radius:50%;
	line-height:1.5em;
	cursor:pointer;
}
#help {
	display:none;
	position:absolute;
	bottom:80px; left:40px;
	background:#000d;
	color:white;
	font-size:12px;
	border:4px solid #fff5;
	border-radius:8px;
	padding:0.5em;
}
#helpicon:hover + #help { display:block; }
#message { padding:4px; }
input[type="text"],
input[type="password"] {
	background:rgba(0,0,0,0.1);
	box-shadow:inset 0 2px 2px rgba(0,0,0,0.1);
	border:none;
	border-radius:0.5em;
	font:inherit;
	color:white;
	padding:0.2em;
}
input::placeholder { color:#0006; }
.cursor {
	position:fixed;
	top:0; left:0;
	height:36px; width:36px;
	font-size:11px;
	color:white;
	line-height:34px;
	background:#456;
	border:1px solid #678;
	border-radius:50%;
	transform:translate(-50%,-50%);
	transition:all 0.5s;
	box-shadow:0 3px 6px #0008;
	pointer-events:none;
	
}
#planchette {
	position:fixed;
	top:0; left:0;
	height:200px;
	transform:translate(-50%,-50%);
	transition:all 1s;
	filter:drop-shadow(0 3px 6px #0008);
	pointer-events:none;
}
#ouija-grid {
	display:grid;
	grid:repeat(4,1fr) / repeat(13,1fr);
	min-height:90vh;
}
#Yes { grid-column:span 5; }
#Maybe { grid-column:span 3; }
#No { grid-column:span 5; }
#FuckOut { grid-column:span 13; }
.tile {
	display:inline-block;
	vertical-align:top;
	font-size:18px;
	color:white;
	margin:0 0.2em;
	transition:all 0.2s;
}
.tile#active { opacity:0.5; }