html,
body {
	position: absolute;
	margin: 0 0;
	font-size: 16px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.timer {
	position: absolute;
	width: 100%;
	height: 2vw;
	min-height: 3vh;
	background-color: #ddd;
}
.timer-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #f00;
	transform-origin: 0 0;
	transform: scaleX(0);
}
#restart-timer {
	bottom: 0;
}
#restart-timer-bar {
	background-color: #00f;
}
#display {
	position: absolute;
	left: 0;
	top: 25%;
	width: 100%;
	transform: translateY(-50%);
}
#display:after {
	content: '';
	clear: both;
	display: table;
}
.display-num {
	float: left;
	width: 50%;
	text-align: center;
	font-size: max(16vw, 22vh);
}
#display-sign {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: max(10vw, 12vh);
}
#blocks {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	text-align: center;
}
.block {
	display: inline-block;
	width: 1vw;
	height: 1vw;
	min-width: 1vh;
	min-height: 1vh;
	background-color: #ddd;
	margin: 0.1em;
	border-radius: 0.5em;
}
.block.is-active {
	background-color: #00f;
}
#ans {
	position: absolute;
	left: 0;
	top: 75%;
	width: 100%;
	transform: translateY(-50%);
	text-align: center;
	font-size: max(16vw, 22vh);
}

#ans span {
	opacity: 0.3;
}