body {
	background-color: white;
	font-family: 'Diplomata SC', cursive;
}

h1 {
	font-family: 'Diplomata SC', cursive;
}

.mainBody {
	background-color: #2D3134;	
	background-image: url("../img/pirateGameBG.jpg");
	background-size: cover;
	height: 110vh;
}

.backBtn {
	position: fixed;
	left: -10%;
	top: -10%;
}

.paddingTreemail {
	margin-top: 5%;
	border-radius: 5%;
}

.gameField {
	margin-top: 5%;
}

.imgBox {
	background-color: none;
	float: left;
	padding-top: 5%;
}

.letterSelect {
	background-color: moccasin;
	border: 2px solid #C69C6D;
	border-radius: 5px;
}

#mainSVG {
	width: 500px; 
	height: 500px;
	background-color: none;
}

.textBox {
	margin-top: 5%;
	background-color: none;	
	background-image: url("../img/treemail.png");
	background-size: cover;
	float: left;
	padding-bottom: 5%;
	border-radius: 5px;
}

.spacedOut {
	display: flex;
    justify-content: space-around;
}

.letterSelect {
	width: 65px;
}

.verifyBtn {
	background-color: beige;	
	background-image: url("../img/verifyBtn.jpg");
	padding: 7px;
	border-radius: 7px;
	border: 2px solid #714B22;
}

.verifyBtn:hover {
	background-color: brown;	
	background-image: url("../img/verifyBtnHover.jpg");
}

.verifyBtn:active {
	background-color: navajowhite;	
	background-image: url("../img/verifyBtnActive.jpg");
	border: 2px solid white;
}

input {
	background-color: none;
}

/* * * ARROWS * * */
.leftTurn {
  border-radius: 50%;
  -webkit-transition: -webkit-transform 1.8s ease-in-out;
          transition:         transform 1.8s ease-in-out;
}

.leftTurn:hover {
  -webkit-transform: rotate(-360deg);
          transform: rotate(-360deg);
}

.rightTurn {
  border-radius: 50%;
  -webkit-transition: -webkit-transform 1.8s ease-in-out;
          transition:         transform 1.8s ease-in-out;
}

.rightTurn:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}