body {
	width: 100%;
	min-width: 270px;
	margin-left: 0;
	margin-right: auto;
	background-color: #e0e0d1;
	font-family: arial;
	font-size: 1em;
}

/* Prevents double tap from zooming in */
* {
	touch-action: manipulation;
}

h2 {
	margin:0px;
	text-align: center;
}

/* Used to draw the hangman */
canvas {
	border: 1px solid black;
	margin: 3px;
	margin-bottom: 10px;
	width: 30vmax;
	height: 17vmax;
	border-radius: 20px;
}

/* A container for a new row */
.row {
	display: flex;
	justify-content: center;
}

/* Moves score from canvas */
/* Misses & Lives also stored in this column */
.score-column {
	margin-left: 2px;
}


/* Header to display the score */
#scoreHeader, #highScoreHeader, #missesHeader {
/*	background-color: purple;*/
	font-size: 0.6em;
	text-align:center;
}

 #highScoreHeader, #missesHeader {
 	margin-top: 1em;
 }


/* User score */
#scoreOutput, #highScore {
	min-width: 0.5vw;
	min-height: 2.5vh;	
	border: 0.5px solid black;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:0.8em;
	padding:0px;
}

.missesOutput {
	min-width: 0.5vw;
	min-height: 2.5vh;	
	border: 0.5px solid black;
	font-size:0.7em;
	padding:2px;
	margin-bottom:-5px;
}

/* answer - Displays the answer (for testing) */
/* output - Display of the word trying to guess _A_G_MA_ */
.answer, .output {
	width: 60%;
	margin: auto;
	padding: 5px;
	border: 1px solid black;
	justify-content: center;
	margin-bottom: 10px;
}

/* Hides the answer from the user */
#answer {
	display: none;
}

/* output - Display of the word trying to guess _A_G_MA_ */
#output {
	background-color:black;
	color:white;
	padding:20px;
	padding-left:50px;
	padding-right:50px;
	font-size:1.2em;
	border-radius:20px;
	text-align:center;
	margin-bottom:5px;
}

/* Contains Label, Input Box, Button for guessing the letter */
.guess-letter {
	justify-content: center;
	align-items:center;
}

/* User enters letter here */
.inputLetter {
	margin-left: 12px;
	margin-right: 12px;
	padding-top:8px;
	padding-bottom:8px;
	font-size: 2em;
	background-color: #f5f5f0;
	width: 6vmax;
	min-height: 4vh;
	min-width:25vw;
	border-radius: 10px;
	text-align:center;
}


/* Style the buttons */
.button {
	padding:15px; /* Makes buttons larger */ 
	font-size: 0.9em;
	border-radius: 5px;
	background-color: blue;
	color: white;
}

#newGameBtn {
	font-size: 1.5em;
	background-color: red;
	font-weight: bold;
	display: none;
	margin: 10px;
}

/* Display message to player at end of game */
#messageToPlayer {
	text-align: center;
	display:none;
	font-size:  1.7em;
	color: green;
	font-weight:bold;
	margin:10px;
}

#letterAlreadyTried {
	text-align: center;
	font-size: 0.8em;
	color: red;
	margin: 3px;
}

#lives, #lives-header {
	font-size:0.6em;
	position:relative;
	display: inline;
	top:1em;
	margin-left:0px;
	
}

#nextWord {
	display: none;
	font-size: 1.5em;
	background-color: blue;
	color: white;
	font-weight: bold;
	margin: 10px;
}

.margin-top-small {
	margin-top: -10px;
}

.margin-top-mid{
	margin-top:15px;
}

.margin-top-large{
	margin-top:30px;
}

.margin-top-large{
	margin-top:30px;
}

#bs-btn {
	background:red;
	height:2.4em;
	width:2.8em;
}










/*@media screen and (max-width: 500px) {
	  
	body {
		background-color: orange;
	}

	canvas {
		border: 1px solid black;
		margin: 3px;
		margin-bottom: 7px;
		width: 30vmax;
		height: 20vmax;
		border-radius: 20px;
	}
	
}*/
@media screen and (max-width:400px) {
	#output {
		margin-top:10px;
	}
}

@media screen and (max-width: 330px) {
/*	  body {
		width: 100%;
		background-color: green;
		min-width: 270px;
		margin-left: 0;
		margin-right: auto;
		font-family: arial;
		font-size: 2vmax;
	  }

	  canvas {
		border: 1px solid black;
		margin: 3px;
		margin-bottom: 10px;
		width: 25vmax;
		height: 20vmax;
		border-radius: 20px;
	}*/

		.inputLetter {
		margin-left: 12px;
		margin-right: 12px;
		padding-top:8px;
		padding-bottom:8px;
		font-size: 1em;
		background-color: #f5f5f0;
		width: 6vmax;
		min-height: 4vh;
		min-width:5vw;
		border-radius: 10px;
		text-align:center;
	}
}