*{
	margin: 0;
}

html{
	background-color: 	azure;
	height: 			100%;
}

body{
	max-width: 	720px;
	min-height: 100%;
	height: 	auto;
	margin: 	0 auto;
	background-color: whitesmoke;
}

h1{
	background-color: 	darkcyan;
	padding: 			4px;
	color: 				whitesmoke;
}

h2{
	text-decoration: darkcyan;
	padding: 		4px;
	overflow: 		hidden;
	white-space: nowrap;
}

article{
	height: 	auto;
	padding: 	4px;
}

.centering{
	text-align: center;
	vertical-align: middle;
}

.flex{
	display: flex;
	width: 100%;
}

#start{
	display: inline;
}

#contents{
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
}

#inputbox{
	/*
	background-color: white;
	border-radius: 1%;
	border: 1px solid gray;
	*/
	width: 50%;
	flex: 1;
	transition: background-color 1s;
	background-color: white;
}

#input{
	vertical-align: middle;
}

#inputbox.wrong{
	background-color: #ff5555;
	transition-duration: 0s;
}

#inputbox.correct{
	background-color: #55ff55;
	transition-duration: 0s;
}

#inputbox.already{
	background-color: #ffff55;
	transition-duration: 0s;
}

li.prev, li.yet{
	color: red;
}

#send, #giveup{
	display: inline;
}

#counter{
	text-align: right;
}