#menuBar{
    position: fixed;
    background-color: #2d2d2d;
}
#history{
    position: absolute;
    background-color: #1a1a1a;
}
#currentGuess{
    position: absolute;
    background-color: #404040;
}
#playWindow{
    position: absolute;
}
#keyboard{
    position: fixed;
    box-sizing: border-box;
    background-color: #2d2d2d;
    touch-action: manipulation;
}
#hamburger{
    cursor: pointer;
}
#bonusKeys{
    position: fixed;
    box-sizing: border-box;
    background-color: #2d2d2d;
}
#currentGuess{
    box-sizing: border-box;
}
#title{
    position:relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: none;
    border: none;
    box-sizing: border-box;
}
#endscreen{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2d2d2d;
}
#shareButton{
    cursor: pointer;
}
.enticing:hover{
    filter: brightness(75%);
}
.enticing:active{
    filter: brightness(100%);
}
#menu{
    background-color: #2d2d2d;
    color: white;
}
#menuHint{
    cursor: pointer;
    display: block;
}
#menuRules{
    cursor: pointer;
    display: block;
    float: left;
}
#menuClose{
    cursor: pointer;
    display: block;
}
#soundButton{
    cursor: pointer;
    background-image: url("sound_on.png");
    position:absolute;
    background-size: cover;
}
@keyframes blink{
    0% {opacity: 100%;}
    50% {opacity: 0%}
    100% {opacity: 100%;}
}
@keyframes turn-red{
    0% {background-color: #218976;}
    25% {background-color: #631f1f;}
    75% {background-color: #631f1f;}
    100% {background-color: #218976;}
}
@keyframes appear{
    0% {opacity: 0%;}
    100% {opacity: 100%;}
}
@keyframes shake{
    0% {transform: translateX(0%);}
    25% {transform: translateX(-10%);}
    50% {transform: translateX(0%);}
    75% {transform: translateX(10%);}
    100% {transform: translateX(0%);}
}
@keyframes grow{
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}
@keyframes slide-left {
    0% {transform: translateX(-100vw);}
    100% {transform: translateX(0vw);}
}
@keyframes leave-left {
    0% {transform: translateX(0vw);}
    100% {transform: translateX(-100vw);}
}
@keyframes slide-right {
    0% {transform: translateX(100vw);}
    100% {transform: translateX(0vw);}
}
#cursor{
    background-color: #218976;
    border: none;
    padding: none;
    float: left;
    display: flex;
    flex-direction: column;
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
#endscreenX{
    order: none;
    padding: none;
    position: absolute;
    cursor: pointer;
}
body{
    margin: 0;
    padding: 0;
    background-color: #1a1a1a;
    font-family: 'Quicksand', sans-serif;
    color: White;
}
.button:hover{
    background-color: #2d2d2d;
}
#Enter{
    background-color: #B9D8C6;
}
.button{
    background-color: #631f1f;
    color: #B9D8C6;
    border: none;
    padding: 0;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    touch-action: manipulation;
    font-family: 'Quicksand', sans-serif;
    -webkit-text-size-adjust: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    outline: none;
}
.letter{
    background-color: #218976;
    color: White;
    border: none;
    padding: none;
    text-align: center;
    float: left;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    font-family: 'Quicksand', sans-serif;
}
.guessBox{
    background-color: #1a1a1a;
    box-sizing: border-box;

}
.answerBox{
    background-color: #1a1a1a;
    box-sizing: border-box;
    border-bottom: dashed #404040;
}