*{
	padding: 0;
	margin: 0;
}

html, body{
	height: 100%;
}

.header{
	width: 100%;
	height: 15vh;
	background-color: rgb(0, 0, 0, 0.5);
	position: fixed;
}

.header{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.header > img{
	margin: 10px;
	width: 7vw;
	height: 13vh;
}

.myButton {
	background-color:transparent;
	position: fixed;
	top: 6%;
	right: 5%;
	cursor:pointer;
	color:#ffffff;
	font-family:Courier New;
	font-size:25px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:transparent;
	color: #FF2D00;
}

.header > h1{
	color: rgb(255, 255, 255, 0.9);
	text-shadow: 0 1px 1px #bbb,
			   0 2px 0 #999, 
			   0 3px 0 #888, 
			   0 4px 0 #777, 
			   0 5px 0 #666, 
			   0 9px 7px #302314;
}

.container{
	text-shadow: 0 1px 1px #bbb,
			   0 2px 0 #999, 
			   0 3px 0 #888, 
			   0 4px 0 #777, 
			   0 5px 0 #666, 
			   0 6px 0 #555, 
			   0 7px 0 #444, 
			   0 8px 0 #333, 
			   0 9px 7px #302314;
    -webkit-transition: all 1.5s ease-out;
	width: 100%;
	height: 100%;
	display: inline-block;
	background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
	
}

.container > h1[class*="title"]{
	color: rgb(255, 255, 255, 0.9);
	letter-spacing: 5px;
	margin-top: 20vh;
	font-size: 60px;
	text-align: center;
}

div[class="jogo"]{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	width: 50%;
	height: 50vh;
	border-radius: 20px;
	margin: 40px auto;
	background-color: rgb(0, 0, 0, 0.5);
}

.letters{
	color: #FFF;
	font-size: 60px;
	margin: 0 10px 50px 10px;
	letter-spacing: 10px;
}

.inputLetter{
	color: #FFF;
	width: 40px;
	font-size: 30px;
	border: none;
	background-color: transparent;
  	border-bottom: 1px solid #FFF;
	height: 30px;
	text-align: center; 
}

::placeholder {
  color: #FFF;
}

.inputLetter:focus{
	outline: none;
	border: none;
	background-color: transparent;
  	border-bottom: 1px solid #000;
	height: 30px;
}

div > span{
	text-shadow: none;
	color: white;
	font-size: 30px;
}

.div2 > h3{
	color: #FFF;
	text-shadow: none;
	text-align: center;
}

.jogo > span {
	text-shadow: none;
	color: white;
	font-size: 25px;
}

.container > .imgDir{
	position: fixed;
	top: 40%;
	right: 2%;
	bottom: 30%;
	width: 300px;
	height: 300px;
}

.container > .imgEsq{
	position: fixed;
	top: 40%;
	left: 2%;
	bottom: 30%;
	width: 300px;
	height: 300px;
}