body {
	font-family: "Bitter", serif;
	padding: 20px;
	background-color: #E3BC81;
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12c0-.622-.095-1.221-.27-1.785A5.982 5.982 0 0 0 10 12c1.67 0 3.182-.683 4.27-1.785A5.998 5.998 0 0 0 14 12h2a4 4 0 0 1 4-4V6c-1.67 0-3.182.683-4.27 1.785C15.905 7.22 16 6.622 16 6c0-.622-.095-1.221-.27-1.785A5.982 5.982 0 0 0 20 6V4a4 4 0 0 1-4-4h-2c0 .622.095 1.221.27 1.785A5.982 5.982 0 0 0 10 0C8.33 0 6.818.683 5.73 1.785 5.905 1.22 6 .622 6 0H4a4 4 0 0 1-4 4v2c1.67 0 3.182.683 4.27 1.785A5.998 5.998 0 0 1 4 6c0-.622.095-1.221.27-1.785A5.982 5.982 0 0 1 0 6v2a4 4 0 0 1 4 4h2zm-4 0a2 2 0 0 0-2-2v2h2zm16 0a2 2 0 0 1 2-2v2h-2zM0 2a2 2 0 0 0 2-2H0v2zm20 0a2 2 0 0 1-2-2h2v2zm-10 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z' fill='%23928e98' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

header {
	text-align: center;
}

header h2 {
	font-size: 40px;
}

header h1 {
	font-size: 60px;
	letter-spacing: 5px;
}

.counter {
	height: 120px;
	max-width: 200px;
	margin: 40px 20px;
	text-align: center;
	border: 1px dashed black;
	box-shadow: 0 0 0 3px #E3BC81, 0 0 0 5px black, 0 0 0 10px #E3BC81, 0 0 2px 10px black;
}


#winCounter{
    -ms-transform: rotate(-15deg); /* IE 9 */
    -webkit-transform: rotate(-15deg); /* Safari */
    transform: rotate(-15deg); /* Standard syntax */
}

#lossCounter{
    -ms-transform: rotate(15deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Safari */
    transform: rotate(15deg); /* Standard syntax */
}

.counter h3{
	font-size: 25px;
}

#winsCount {
	border: 1px black solid;
	padding: 0px 5px;
	background-color: #FFFFFF;
	font-size: 40px;
}

#lossesCount {
	border: 1px black solid;
	padding: 0px 5px;
	background-color: #FFFFFF;
	font-size: 40px;
}

/* main section */
main {
	margin: 20px;
}

#answer {
	font-size: 20px;
	text-align: center;
	padding-bottom: 10px
}

img {
	border: 2px black solid;
	padding: 2px;
	margin: 10px;
}

#quote {
	margin: 20px 10px 10px 10px;
	height: 100px;
	font-size: 17px;
}

#blanks {
	margin: 50px 10px;
	padding: 10px;
	text-align: center;
	border: 1px dashed black;
	box-shadow: 0 0 0 3px #E3BC81, 0 0 0 5px black, 0 0 0 10px #E3BC81, 0 0 2px 10px black;
}

#blankSpaces {
	letter-spacing: 15px;
	font-size: 40px;
}


#remainingGuesses {
	text-align: center;
	margin: 40px;
}

#guessesLeft {
	border: 1px black solid;
	padding: 5px;
	background-color: #FFFFFF;
	font-size: 40px;
}

#lettersGuessed {
	text-align: center;
}