@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Orbitron&display=swap');

body {
	font-family: 'Fira Code', monospace;
	height: 90vh;
	align-items: center;
	background-color: #202124;
	color: #515151;
}

h1 {
	padding: 5%;
	font-size: 3rem;
	text-align: center;
	color: #dcdcdc;
}

/* SHOW TEXT CONTAINER */

.container {
	display: block;
	text-align: center;
	margin-bottom: 5%;
}

.show-text {
	font-size: 1.4rem;
}

.hide {
	display: none;
}

.correct-text {
	display: inline;
	color: #f0ffff;
	margin: 0px;
	padding: 0px;
	border-width: 0px;
}

.incorrect-text {
	display: inline;
	color: #c93b03;
	margin: 0px;
	padding: 0px;
	border-width: 0px;
}

.on-finish {
	display: inline;
	color: #1db954;
	margin: 0px;
	padding: 0px;
	border-width: 0px;
}

/* SHOW TEXT CONTAINER */

/* /////////////////////////////////////////////////// */

/* INPUT-W-WPM */

#input {
	width: 70%;
	line-height: 30px;
	font-family: 'Fira Code', monospace;
	font-size: 1.1rem;
}

#input:focus {
	outline-style: none;
}

#wpm {
	font-size: 150%;
	font-weight: 600;
	margin-top: 6%;
	color: #dcdcdc;
}

/* INPUT-W-WPM */