body {
	margin: 0;
	padding: 0;
}
h2 {
	padding: 0;
	margin: 0;
	text-align: center;
	font-style: italic;
}
/*Auto displayed none:*/

#guessed,
#guessplace,
#enterword,
#playagain,
#gallows,
#pickaword,
#deletepoints,
#showletters span:last-child {
	display: none;
}

#gamechoice {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.8);
}
#gamechoice #startup,
#gamechoice #deletepoints,
#gamechoice #pickaword{
	margin: 10px auto;
	width: 300px;
	background: #fff;
	border-radius: 10px;
}
#gamechoice p {
	padding: 20px;
}
.pointamount{
	border-radius:1000px;
	text-align:center;
	margin-top:20px;
	font-weight:bold;
	font-style:italic;
}
#startup{
	height:180px;
}
#startup span,
#deletepoints span{
	display: inline-block;
	width: 34%;
	margin: 0 5%;
	padding: 10px 2%;
	background: #000;
	color: #fff;
	border-radius: 5px;
	border: 1px solid #444;
	text-align: center;
	cursor: pointer;
}
#startup span:hover,
#deletepoints span:hover{
	color: #000;
	background: #aaa;
	transition:color .3s, background .3s;
}
#pickaword{
	height:250px;
}
#pickaword #wordlength {
	display: block;
	margin: 0 auto;
	margin-top: -20px;
	width: 50px;
	height: 30px;
	font-size: 26px;
	text-align: center;
}
#pickaword #getword,
#pickaword #gethardword{
	display: block;
	padding: 10px;
	margin:18px;
	float:left;
	background: #000;
	color: #fff;
	border-radius: 5px;
	border: 1px solid #444;
	cursor:pointer;
}
#pickaword #getword:hover,
#pickaword #gethardword:hover{
	color: #000;
	background: #aaa;
	transition:color .3s, background .3s;
}
#deletepoints{
	height:200px;
}
#hangman {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	background: #ccc;
	padding: 30px 0;
}
#hangman h1 {
	text-align: center;
	font-style: italic;
	text-decoration: underline;
	margin: 0;
	padding: 0;
}
#gallows {
	width: 300px;
	height: 390px;
	border: 1px solid;
	position: relative;
	margin: 0 auto;
}
#gallows img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	display: none;
}
#gallows #endimg{
	top:20px;
}
#gallows .active {
	display: block;
}
#messages {
	width: 300px;
	margin: 10px auto;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}
#messages span {
	text-transform: capitalize;
}
#showletters {
	width: 100%;
	margin: 5px auto;
	text-align: center;
}
#showletters span {
	border-bottom: 1px solid;
	margin: 5px;
	display: inline-block;
	width: 20px;
	font-size: 28px;
	text-transform: uppercase;
	font-weight: bold;
}
#enterword, #guessplace {
	width: 300px;
	border: 1px solid;
	margin: 0 auto;
}
#wordbox, #guessbox {
	width: 60px;
	height: 30px;
	font-size: 25px;
	margin: 10px auto;
	display: block;
	text-align: center;
}
#wordbox {
	width: 120px;
}
#guessbox {
	text-transform: uppercase;
}
#checkword, #checkletter {
	margin: 10px auto;
	display: block;
	height: 30px;
	font-size: 20px;
	width: 100px;
	background: #000;
	color: #fff;
	cursor: pointer;
}
#guessed {
	width: 300px;
	margin: 0 auto;
	border: 1px solid;
}
#guessed p {
	padding: 5px 20px;
	margin: 0;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
}
#guessed #right {
	color: #009800;
}
#guessed #wrong {
	color: #A40000;
}
#playagain {
	margin: 20px auto;
	width: 120px;
	height: 40px;
	font-size: 20px;
	background: #000;
	color: #fff;
	cursor: pointer;
}
#checkword:hover, #checkletter:hover, #playagain:hover {
	color: #000;
	background: #aaa;
	border: 1px solid #666;
}


@media only screen and (max-width:400px){
	#startup{
		padding-bottom:50px;
	}
	#gallows{
		width:49%;
		height:210px;
		float:left;
		border:none;
	}
	#showletters{
		float:right;
		width:50%;
	}
	#enterword{
		clear:both;
	}
	#messages{
		float:right;
		width:49%;
		margin-top:20px;
		height:80px;
	}
	#guessed{
		width:49%;
		float:right;
		border:none;
	}
	#guessplace{
		clear:both;
		border:none;
	}
	#guessplace h2,
	#guessed h2{
		display:none;
	}
	#guessplace #guessbox{
		float:left;
		border-radius:20px;
		margin:5px 10px 5px 60px;
	}
	#guessplace input:focus{
		outline:none;
	}
	#guessplace #checkletter{
		float:right;
		height:37px;
		margin:5px 50px 5px 10px;
	}
	.pointamount{
		margin-top:10px;
		margin-bottom:-25px;
		clear:both;
	}
	#pickaword{
		padding-bottom:20px;
	}








}