* {
  	margin: 0;
  	padding: 0;
}
body {
	font-family: 'Hind' sans-serif;
	background-color: #0c1633;
	color: white;
}
header {
	background-color: #0f1a3e;
	color: white;
	text-align: center;
	padding: 30px;
	border-bottom: 2px solid white;
}
span {
	color: #5C430D;
	/* border-bottom: 3px solid #162458; */
}
header h1 {
	border-left: 2px solid white;
	border-right: 2px solid white;
	font-size: 4.0rem;
}
button {
	background-color: #0f1a3e;
	color: white;
	border: 2px solid #162458;
	border-radius: 70px 5px;
	font-size: 1.7rem;
	font-family: 'Hind' sans-serif;
	width: 150px;
	height: 50px;
}
button:Hover {
	background-color: white;
	color: #0f1a3e;
	border: 2px solid #162458;
	border-radius: 70px 5px;
	font-size: 1.7rem;
	font-family: 'Hind' sans-serif;
	width: 150px;
	height: 50px;
	cursor: pointer;
}
.container {
	font-size: 1.3rem;
	margin-top: 3%;
	text-align: center;
}
.row {
	background-color: #0f1a3e;
}
#current-word {
	font-size: 6.5rem;
}
.border_box {
	margin-left: 25%;
	margin-right: 25%;
	margin-top: 2%;
	height: 50%;
	border: 4px solid #162458;
	background-color: #0f1a3e;
}
.input_words {
	color: #0c1633;
	margin-top: 5%;
	width: 300px;
	height: 40px;
	font-size: 1.5rem;
}
.instruction p{
	font-size: 1.1rem;
}
.instruction h5{
	font-size: 1.5rem;
}
.game_over {
	margin-top: 2%;
}
.time_left {
	margin-top: 2%;
}
.score {
	margin-top: 2%;
}
	
@media screen and (max-width: 1040px) {
	#current-word {
		font-size: 4.5rem;
	}
	.border_box {
		margin-left: 15%;
		margin-right: 15%;
	}
	.input_words {
		margin-top: 5%;
		width: 250px;
		height: 35px;
		font-size: 1.3rem;
	}
	.container {
		margin-top: 5%;
		font-size: 1.2rem;
	}
	.row {
		margin-top: 3%;
	}
	.instruction p{
		font-size: 0.9rem;
	}
	.instruction h5{
		font-size: 1.3rem;
	}
	.game_over {
		margin-top: 3%;
	}
	.time_left {
		margin-top: 2%;
	}
	.score {
		margin-top: 2%;
	}
	button {
		font-size: 1.1rem;
		width: 100px;
		height: 30px;
	}
	button:Hover {
		font-size: 1.1rem;
		width: 100px;
		height: 30px;
	}
}

@media screen and (max-width: 800px) {
	.border_box {
		margin-left: 10%;
		margin-right: 10%;
		margin-top: 2%;
	}
	#current-word {
		font-size: 3.5rem;
	}
	.input_words {
		margin-top: 5%;
		width: 200px;
		height: 30px;
		font-size: 1.2rem;
	}
}	

@media screen and (max-width: 410px) {
	header h1 {
		border-left: 4px solid white;
		border-right: 4px solid white;
		font-size: 3.0rem;
	}
	.container {
		margin-top: 15%;
		font-size: 1.2rem;
	}
}