* { font-family: 'Roboto', sans-serif; margin: 0; }
.haha { font-family: 'Fredoka One', sans-serif; }

body { image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; background: url(https://piskel-imgstore-b.appspot.com/img/4f972882-913c-11ea-87b8-5db88dc99caa.gif); background-size: 64px; }

::selection { background: white; color: #f33; }

.page-content {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 500px;
	max-width: calc(100% - 20px);
	text-align: center;
	padding: 10px;
	color: white;
	font-size: 1.5em;
}

button {
	background: #f33;
	color: white;
	cursor: pointer;
	outline-color: #fff;
	border: 2px solid #fff;
	padding: 5px 40px;
	text-transform: uppercase;
	font-family: 'Fredoka One';
	font-size: 1.05em;
	border-radius: 5px;
	transition: .2s linear
}

button:hover {
	background: #ff2243;
	border-color: #fff;
	background: #ff2243
}

button[disabled] {
	filter: opacity(0);
}

#bars {
	margin: 0 auto;
	width: 200px;
}

.bar {
	width: calc(100% - 2px);
	height: 1em;
	margin: 10px 0;
	background: #fff;
	border: 1px solid #fff;
	white-space: nowrap;
	font-size: .8em;
}

.bar span {
	font-size: .8em;
	display: block;
	color: #fff;
}

.bar div {
	height: 100%;
	background: #f33;
	transition: .2s ease;
}