/* Extra small devices (phones, 575px and down) */
@media only screen and (max-width: 575px) {

	#hangmanImage {
		display:  block;

		margin-top: 0.3em;
		margin-botton: 0.3em;
		margin-left: auto;
		margin-right: auto;
		padding: 0.2em;

		border-width: 1px;
		border-radius: 3%;

		width: 100%;
		min-width: 240px;
		max-width: 300px;

		min-height: 150px;
	}

	#guessRow {
		width: 100%;
		margin: auto;
		justify-content: space-between;
	}

	#alphabetRow {
		width: 100%;
		margin: auto;
		justify-content: space-between;
	}

	.scoreLabel {
		min-width: 4em;
	}
}

/* Small devices (portrait tablets and large phones, 576px and up) */
@media only screen and (min-width: 576px) and (max-width: 768px) {
	#hangmanImage {
		display:  block;

		margin-top: 0.3em;
		margin-botton: 0.3em;
		margin-left: auto;
		margin-right: auto;
		padding: 0.2em;

		border-width: 1px;
		border-radius: 3%;

		width: 100%;
		min-width: 240px;
		max-width: 500px;

		min-height: 150px;
	}

	#guessRow {
		width: 18em;
		margin: auto;
		justify-content: space-between;
	}

	#alphabetRow {
		width: 16em;
		margin: auto;
		justify-content: space-between;
	}

	.scoreLabel {
		min-width: 5em;
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 769px) and (max-width: 992px) {
	#hangmanImage {
		display:  block;

		margin-top: 0.3em;
		margin-botton: 0.3em;
		margin-left: auto;
		margin-right: auto;
		padding: 0.2em;

		border-width: 1px;
		border-radius: 3%;

		width: 100%;
		min-width: 240px;
		max-width: 500px;

		min-height: 150px;
	}

	#guessRow {
		width: 23em;
		margin: auto;
		justify-content: space-between;
	}

	#alphabetRow {
		width: 22em;
		margin: auto;
		justify-content: space-between;
	}

	.scoreLabel {
		min-width: 5em;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 993px) and (max-width: 1200px) {
	#hangmanImage {
		display:  block;

		margin-top: 0.3em;
		margin-botton: 0.3em;
		margin-left: auto;
		margin-right: auto;
		padding: 0.2em;

		border-width: 1px;
		border-radius: 3%;

		width: 100%;
		min-width: 240px;
		max-width: 500px;

		min-height: 150px;
	}

	#guessRow {
		width: 24em;
		margin: auto;
		justify-content: space-between;
	}

	#alphabetRow {
		width: 22em;
		margin: auto;
		justify-content: space-between;
	}

	.scoreLabel {
		min-width: 7em;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1201px) {

	#hangmanImage {
		display:  block;

		margin-top: 0.3em;
		margin-botton: 0.3em;
		margin-left: auto;
		margin-right: auto;
		padding: 0.2em;

		border-width: 1px;
		border-radius: 3%;

		width: 100%;
		min-width: 240px;
		max-width: 500px;

		min-height: 150px;
	}

	#guessRow {
		width: 23em;
		margin: auto;
		justify-content: space-between;
	}

	#alphabetRow {
		width: 22em;
		margin: auto;
		justify-content: space-between;
	}

	.scoreLabel {
		min-width: 8em;
	}
}

/* Styling for all elements which do not change in styling across 5 screen widths */
.cluelabel {
	display: inline-block;
	width: 10%;
	height: inherit;
	color: var(--prim-shade-dark);
}

.cluebox {
	display: inline-block;
	width: 88%;
	height:  inherit;
	color: var(--prim-shade-dim);
}

.letterbox {
	display: inline-block;
	
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	margin-left: auto;
	margin-right: auto;
	
	height: 2em;
	line-height: 2em;
	width: 2em;
	
	color: var(--prim-shade-white);
	background-color: var(--prim-shade-white);
	
	font-family: 'Oswald', sans-serif;
	font-size: 1em;
	font-weight: 300;
}

.sletterbox {
	display: inline-block;
	
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	margin-left: auto;
	margin-right: auto;
	
	height: 2em;
	line-height: 2em;
	width: 2em;
	
	color: var(--sec-shade-dark);
	background-color: var(--sec-shade-white);
	
	font-family: 'Oswald', sans-serif;
	font-size: 1em;
	font-weight: 300;
}

.fletterbox {
	display: inline-block;
	
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	margin-left: auto;
	margin-right: auto;
	
	height: 2em;
	line-height: 2em;
	width: 2em;
	
	color: var(--accent-bright);
	background-color: var(--prim-shade-white);
	
	font-family: 'Oswald', sans-serif;
	font-size: 1em;
	font-weight: 300;
}

.letterkey {
	display: inline-block;
	
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	margin-left: auto;
	margin-right: auto;
	
	height: 1.8em;
	line-height: 1.8em;
	width: 1.8em;
	
	color: var(--prim-shade-dark);
	background-color: var(--prim-shade-light);
	
	font-family: 'Oswald', sans-serif;
	font-size: 0.9em;
	font-weight: 300;
}

.dletterkey {
	display: inline-block;
	
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	margin-left: auto;
	margin-right: auto;
	
	height: 1.8em;
	line-height: 1.8em;
	width: 1.8em;
	
	color: var(--prim-shade-light);
	background-color: var(--prim-shade-white);
	
	font-family: 'Oswald', sans-serif;
	font-size: 0.9em;
	font-weight: 300;

	pointer-events: none;
}

#turns {
	color: var(--prim-shade-black);
	background-color: var(--prim-shade-light);
}

#avgScore {
	color: var(--sec-shade-black);
	background-color: var(--sec-shade-light);
}

#perfects {
	color: var(--sec-dark);
	background-color: var(--sec-bright);
}

#successes {
	color: var(--sec-dark);
	background-color: var(--sec-muted);
}

#failures {
	color: var(--accent-fluor);
	background-color: var(--prim-bright);
}

#resignations {
	color: var(--accent-fluor);
	background-color: var(--prim-muted);
}



#hits {
	color: var(--sec-dark);
	background-color: var(--sec-muted);
}

#misses {
	color: var(--accent-fluor);
	background-color: var(--prim-bright);
}

#livesleft {
	color: var(--prim-dark);
	background-color: var(--prim-light);
}

.letterkey:hover {
	color: var(--accent-bright);
	background-color: var(--prim-shade-faded);
	cursor: pointer;
}