* {
	 box-sizing: border-box;
}
 body {
	 background-color: #e4e4e4;
	 font-family: "Merriweather Sans", sans-serif;
	 color: #333;
	 line-height: 1.5;
}
 .container {
	 max-width: 768px;
	 width: 100%;
	 margin: 0 auto;
	 background-color: #f1f1f1;
	 padding: 1rem;
}
 .timer {
	 text-align: center;
	 font-weight: bold;
	 font-size: 3rem;
}
 .words {
	 color: #999;
	 text-overflow: clip;
	 overflow: hidden;
	 white-space: nowrap;
	 font-size: 1.5rem;
	 position: relative;
}
 .words .word.current {
	 color: #333;
}
 .words .word {
	 margin-right: 0.5rem;
}
 .words:after {
	 position: absolute;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 width: 100px;
	 content: "";
	 background: linear-gradient(to right, transparent, #f1f1f1);
}
 .word-input {
	 width: 100%;
	 font: inherit;
	 color: inherit;
	 border: none;
	 border-bottom: 2px solid #ccc;
	 background-color: transparent;
	 padding: 0.5rem;
	 font-size: 1.5rem;
}
 .stats {
	 display: flex;
	 flex-wrap: wrap;
}
 .stats .stat {
	 min-width: 200px;
	 flex-grow: 1;
}
 .btn {
	 border: 2px solid #3f51b5;
	 color: white;
	 background-color: #303f9f;
	 font: inherit;
	 padding: 0.5rem 1rem;
	 border-radius: 4px;
}
 .btn.btn-replay {
	 font-weight: bold;
	 margin: 0 auto;
	 display: none;
}