@import url("https://fonts.googleapis.com/css?family=Comfortaa");

*, *:before, *:after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Comfortaa', cursive;
	font-size: 16px;
	background: #0f0c09;
	color: #fafaff;
	-webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

pre {
	text-align: center;
	color: #8c8987;
}

.content {
	max-width: 500px;
	margin: 20px auto;
}

.game__input, .game__end {
	text-align: center;
}

.game__end {
	margin-top: 40px;
}

input {
	outline: none;
	border: none;
	margin: 0 0 20px 3px;
	padding: 10px 5px 0px 0;
	background: transparent;
	color: #fafaff;
	font-size: 20px;
	border-bottom: 1px dotted #5b727f;
}

button {
	background: transparent;
	border: 1px dashed #fafaff;
	outline: none;
	cursor: pointer;
	color: #fafaff;
	padding: 8px 30px 9px;
	font-size: 14px;
	text-transform: uppercase;
}

.game__gen-number {
	text-align: center;
}

.game__divider {
	color: #5b727f;
	margin: 20px 0;
}

.game__number {
	font-size: 36px;
	color: #f45957;
}

.game__info:before,
.game__info:after {
	content: ' ';
	display: table;
}

.game__info:after {
	clear: both;
}

.game__info {
	margin: 20px 0;
}

.game__level {
	float: left;
	color: #f4c025;
}

.game__wrong {
	float: right;
	color: #f45957;
}