html,
body {
	height:100%;
	margin:0;
	padding:0;
}
button {
	transition:transform 200ms;
}
button:hover {
	transform:scale(1.04);
}
button:active {
	transform:scale(0.96);
}
button[disabled] {
	transform:scale(1) !important;
}



div#titlescreen {
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color:black;
	text-align:center;
}
div#titlescreen-header {
	text-align:center;
	height:50%;
	color:white;
}
div#titlescreen-menu {
	height:50%;
	min-width:25%;
	max-width:calc(100% - 40px);
	display:inline-block;
}
div#titlescreen-menu button {
	position:relative;
	display:block;
	width:100%;
	height:30%;
	background-color:deeppink;
	border:none;
}
div#titlescreen-menu button:nth-child(1) {
	top:2.5%;
}
div#titlescreen-menu button:nth-child(2) {
	top:5%;
}
div#titlescreen-menu button:nth-child(3) {
	top:7.5%;
}

div.line {
	height:16.66666%;
	padding:0 4px;
}
div.line#red {
	background-color:rgba(255,0,0,1);
}
div.line#yellow {
	background-color:rgba(255,255,0,1);
}
div.line#green {
	background-color:rgba(0,127,0,1);
}
div.line#blue {
	background-color:rgba(0,0,255,1);
}
div.line#legend {
	background-color:#eee;
}
div.line#results {
	background-color:#bbb;
}

button.number,
button.fail {
	height:calc(100% - 8px);
	margin:4px 0 0 0;
	border-radius:10px;
	border-width:2px;
	border-style:solid;
	vertical-align:top;
}

button.number {
	width:8.33333%;
}
div.line#red button.number {
	background-color:rgba(255,223,223,1);
	border-color:rgba(127,0,0,1);
}
div.line#yellow button.number {
	background-color:rgba(255,255,223,1);
	border-color:rgba(127,127,0,1);
}
div.line#green button.number {
	background-color:rgba(223,255,223,1);
	border-color:rgba(0,63,0,1);
}
div.line#blue button.number {
	background-color:rgba(223,223,255,1);
	border-color:rgba(0,0,127,1);
}

button.fail {
	width:22.91666%;
}