html,body{
    height: 80%;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}

div *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#turn{
    max-width: 448px;
    max-height: 30px;
    width: 100%;
    height: 100%;
    float: right;
    border-right: 5px;
    border: 1px solid black;
    text-align: center;
    background-color: white;
    transition: 0.85s;
    border-radius:20px;
    padding-top: 3px;
}
.turnheightlight{
    background-color: green;
    color: white;
}
#game{
    max-height: 504px;
    max-width: 504px;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 20px 675px;
}
.cellprefix{
    width: 100%;
    height: 100%;
    max-height: 50px;
    max-width: 50px;
    float: left;
    margin: 3px;
    padding: 15px 0 0 20px;
    color: white;
}
.gamecell{
    border: 1px solid black;
    width: 100%;
    height: 100%;
    max-width: 50px;
    max-height: 50px;
    float: left;
    margin: 3px;
    transition: all 0.5s ease-in-out;
    border-radius: 5px;
    padding: 0 0 0 6px;
    font-size: 30px;
    cursor: pointer;
    z-index: 1;
}
.gamecell:hover{
    color: white;
    background-color: blue;
    z-index: 2;
    transform: translate(10px,-10px);
    animation: neonBlueText 0.5s ease-in-out alternate;
}

.grey{
    background-color: darkgrey;
}

.white{
    background-color: aliceblue;
}

.green{
    background-color: greenyellow !important;
}

.neonblue_text{
    animation: neonBlueText 1.5s ease-in-out infinite alternate;
}
.neonorange_text{
    animation: neonOrangeText 1.5s ease-in-out infinite alternate;
}

.neongreen_text{
    animation: neonGreenText 1.5s ease-in-out infinite alternate;
}

@keyframes neonBlueText{
    from{
        text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 40px #228dff, 0 0 70px #228dff, 0 0 80px #228dff, 0 0 100px #228dff, 0 0 150px #228dff;
    }
    to{
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px #228dff, 0 0 35px #228dff, 0 0 40px #228dff, 0 0 50px #228dff, 0 0 75px #228dff;
    }
}

@keyframes neonOrangeText {
    from{
        text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 40px #ff9900, 0 0 70px #ff9900, 0 0 80px #ff9900, 0 0 100px #ff9900, 0 0 150px #ff9900;
    }
    to{
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px #ff9900, 0 0 35px #ff9900, 0 0 40px #ff9900, 0 0 50px #ff9900, 0 0 75px #ff9900;
    }
}

@keyframes neonGreenText {
    from{
        text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 40px #b6ff00, 0 0 70px #b6ff00, 0 0 80px #b6ff00, 0 0 100px #b6ff00, 0 0 150px #b6ff00;
    }
    to{
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px #b6ff00, 0 0 35px #b6ff00, 0 0 40px #b6ff00, 0 0 50px #b6ff00, 0 0 75px #b6ff00;
    }
}

.shake-little{
    display: inline-block;
    transform-origin:center center ;
}

.shake-freeze:hover,
.shake-constant.shake-constant--hover:hover,
.shake-trigger:hover .shake-constant.shake-constant--hover{
    animation-play-state: running;
}

.shake-freeze:hover,
.shake-trigger:hover .shake-freeze, .shake-little:hover,
.shake-trigger:hover .shake-little{
    animation-play-state: running;
}

@keyframes shake-little{
    2%{
        transform: translate(1px,0px) rotate(0.5deg);
    }
    4%{
        transform: translate(1px,0px) rotate(0.5deg);
    }
    6%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    8%{
        transform: translate(0px,0px) rotate(0.5deg);
    }
    10%{
        transform: translate(1px,0px) rotate(0.5deg);
    }
    12%{
        transform: translate(0px,0px) rotate(0.5deg);
    }
    14%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    16%{
        transform: translate(0px,1px) rotate(0.5deg);
    }
    18%{
        transform: translate(1px,0px) rotate(0.5deg);
    }
    20%{
        transform: translate(0px,1px) rotate(0.5deg);
    }
    22%{
        transform: translate(1px,0px) rotate(0.5deg);
    }
    24%{
        transform: translate(0px,0px) rotate(0.5deg);
    }
    26%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    28%{
        transform: translate(0px,1px) rotate(0.5deg);
    }
    30%{
        transform: translate(0px,0px) rotate(0.5deg);
    }
    32%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    34%{
        transform: translate(0px,1px) rotate(0.5deg);
    }
    36%{
        transform: translate(0px,1px) rotate(0.5deg);
    }
    38%{
        transform: translate(0px,0px) rotate(0.5deg);
    }
    40%{
        transform: translate(1px,0px) rotate(0.5deg);
    }
    42%{
        transform: translate(0px,1px) rotate(0.5deg);
    }
    44%{
        transform: translate(0px,1px) rotate(0.5deg);
    }
    46%{
        transform: translate(0px,0px) rotate(0.5deg);
    }
    48%{
        transform: translate(1px,0px) rotate(0.5deg);
    }
    50%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    52%{
        transform: translate(0px,0px) rotate(0.5deg);
    }
    54%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    56%{
        transform: translate(0px,1px) rotate(0.5deg);
    }
    58%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    60%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    62%{
        transform: translate(0px,1px) rotate(0.5deg);
    }
    64%{
        transform: translate(0px,0px) rotate(0.5deg);
    }
    66%{
        transform: translate(1px,0px) rotate(0.5deg);
    }
    68%{
        transform: translate(0px,0px) rotate(0.5deg);
    }
    70%{
        transform: translate(1px,0px) rotate(0.5deg);
    }
    72%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    74%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    76%{
        transform: translate(0px,0px) rotate(0.5deg);
    }
    78%{
        transform: translate(0px,0px) rotate(0.5deg);
    }
    80%{
        transform: translate(1px,0px) rotate(0.5deg);
    }
    82%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    84%{
        transform: translate(0px,1px) rotate(0.5deg);
    }
    86%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    88%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    90%{
        transform: translate(0px,1px) rotate(0.5deg);
    }
    92%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    94%{
        transform: translate(1px,0px) rotate(0.5deg);
    }
    96%{
        transform: translate(1px,0px) rotate(0.5deg);
    }
    98%{
        transform: translate(1px,1px) rotate(0.5deg);
    }
    0%, 100%{
        transform: translate(0,0) rotate(0);
    }
    
}

.shake-little,
.shake-trigger:hover .shake-little, .shake-little.shake-freeze,
.shake-little.shake-constant{
    animation-name: shake-little;
    animation-duration: 100ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}