* {

font-family:Arial, Helvetica, sans-serif
}


.email_button a {text-decoration:none; color:#D8E7FE}
.email_button {
	text-shadow: 1px 1px 1px #0d1014;
}

body {
background-color:#fff
}
#top{float:none;clear:both; padding:0; margin:0 auto; overflow:auto; box-sizing: border-box; display:block; text-align:center; max-width:80%}

#footer{text-align:center}

.title {
text-align:center;
width:50%;
border-bottom: solid 1px #fc3
}

.thegame {
height:61vh;
display: flex;
align-items:center;
flex-direction:column;
justify-content: space-between;
}

.theletters {
margin-bottom: 30px;
margin-left:auto;
margin-right:auto;
font-size:8em;
}

.thekeys {
width:360px;
display: flex;
flex-wrap:wrap; 
text-align:center
}

.thekeys button {
color:#000;
font-weight:bold;
width:29px;
height: 32px;
border-radius: 2px;
border:none;
background-color:#c5d0ff;
margin:3px; 
}

.thekeys button:nth-child(11) {
margin-left:20px;
}

.thekeys button:nth-child(20) {
margin-left:2px;
}

.thekeys button:nth-child(20), .thekeys button:nth-child(28) {
width:47px; padding:0;
}

.theletters div {
display:flex;
color:000;
}

.theletters .letter {
text-align:center;
width:150px;
height:150px;
border: 2px solid#3a3a3c;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;

}

.themessage{
height:35px;
}

.letter.flipit {
animation:0.5s linear flipit;
}


@keyframes flipit {
0% {
transform: rotatex(0deg);
}
50% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}



.wrong-back {
background-color:#999999 !important;
border:none !important;
}

.close-back {
background-color:#FF9900 !important;
border:none !important;
}

.yasss-back{
background-color:#2392E2 !important;
color:#fff;
border:none !important;
}

.themessage p{
background-color:#0066CC;
font-size:1.0em;
border-radius: 5px;
padding:20px;
margin-top:1em;
color:#fff !important;
}




@media all and (min-width: 550px) {
#top{max-width:20%}

.thegame {
height:65vh;
}

.thekeys {
width:490px;
}

.thekeys button {
width:40px;
height: 52px;
border-radius: 2px;
border:none;
margin:4px
}

.themessage p{
font-size:1.2em;
}

.thekeys button:nth-child(11) {
margin-left:30px;
}

.thekeys button:nth-child(20), .thekeys button:nth-child(28) {
width:66px; padding:1px
}
}