body {
    font-family: Tahoma;
    padding:0px;
    background-color: rgb(5,5,30);
    color:white;
    font-size: 2.1em;
    background-image: url(../img/fadesky.png);
    text-align:center;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */

}

.textMenu {
    font-size: 0.65em;
    text-shadow: 2px 2px 3px black;
}

.mode, .difficulty {
    color: yellow;
}

.language {
    float:right;
    font-size: 0.7em;
    margin-top: -2px;
    margin-right: 30px;
    text-shadow: 2px 2px 3px black;
    cursor:pointer;
}

#howtoplay img {
    box-shadow: 0px 0px 10px black;
    display: inline-block;
}

.button {
    display: inline-block;
    padding:10px 20px;
    border:2px solid rgba(202, 200, 223, 0.7);
    border-bottom: 2px solid rgba(54,44,150, .7);
    border-right: 2px solid rgba(54,44,150, .7);
    background-color: rgba(54,44,150, .6);
    color: rgba(202, 200, 223, 1);
    cursor:pointer;
    box-shadow: 2px 2px 4px black;
}

.button:hover {
    display: inline-block;
    padding:10px 20px;
    border:2px solid rgba(202, 200, 223, 0.9);
    border-bottom: 2px solid rgba(54,44,150, .9);
    border-right: 2px solid rgba(54,44,150, .9);
    background-color: rgba(54,44,150, .6);
    color: white;

    animation:buttonOver 1s;
    -moz-animation:buttonOver 1s infinite; /* Firefox */
    -webkit-animation:buttonOver 1s infinite; /* Safari and Chrome */

}

@keyframes buttonOver /* Firefox */ {
    0% {font-size: 1em;}
    50% {font-size: 1.2em;}
    100% {font-size: 1em;}
}

@-moz-keyframes buttonOver /* Firefox */ {
    0% {font-size: 1em;}
    50% {font-size: 1.2em;}
    100% {font-size: 1em;}
}

@-webkit-keyframes buttonOver /* Safari and Chrome */ {
    0% {font-size: 1em;}
    50% {font-size: 1.15em;}
    100% {font-size: 1em;}
}

h1 {
    text-shadow: 3px 3px 6px black, -3px -3px 6px black;
    color:red;
    animation:title 8s;
    -moz-animation:title 8s infinite; /* Firefox */
    -webkit-animation:title 8s infinite; /* Safari and Chrome */
    margin:0;
    margin-bottom: 5px;
}

@keyframes title /* Firefox */ {
    0% {color:red;}
    25% {color:yellow;}
    50% {color:blue;}
    75% {color:yellow;}
    100% {color:red;}
}

@-moz-keyframes title /* Firefox */ {
    0% {color:red;}
    25% {color:yellow;}
    50% {color:blue;}
    75% {color:yellow;}
    100% {color:red;}
}

@-webkit-keyframes title /* Safari and Chrome */ {
    0% {color:red;}
    25% {color:yellow;}
    50% {color:blue;}
    75% {color:yellow;}
    100% {color:red;}
}

.toptext {
    font-size: 0.6em;
    text-align:center;
    margin-bottom:10px;
    text-shadow: -1px -1px 4px blue, 1px 1px 4px red;
    cursor:pointer;
}
.toptext:hover {
    
    text-shadow: -3px -3px 4px blue, 3px 3px 4px red;
}
.players {
    text-align:center;
    font-size: 0.8em;
}
.players .player1 {
    color: white;
    margin-left: 100px;
    float:left;
    border:1px solid blue;
    background-color: rgba(255,255,255,.3);
    padding:25px;
    width: 150px;
}
.players .player2 {
    margin-right: 100px;
    float:right;
    border:1px solid #777777;
    background-color: rgba(255,255,255,.3);
    padding: 25px;
    width: 150px;
}

.active {
    text-shadow: 2px 2px 5px blue;
}

.active b div {
    visibility: visible;
    display: inline-block;
    color: black;
    line-height: 32px;
    width: 44px;
    height: 44px;
    animation:activatePlayer 4s;
    -moz-animation:activatePlayer 4s infinite; /* Firefox */
    -webkit-animation:activatePlayer 4s infinite; /* Safari and Chrome */
}

@keyframes activatePlayer {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
}

@-moz-keyframes activatePlayer /* Firefox */ {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
}

@-webkit-keyframes activatePlayer /* Safari and Chrome */ {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
}

.inactive {
    text-shadow: 2px 2px 5px gray;
}

.inactive b div {
    display: inline-block;
}

.board {
    margin:0 auto;
    display: table;
    border-collapse: collapse;
}
.board .board-row {
    display: table-row;
    cursor:pointer;
}

.rowWin {
    background-color: rgba(54,44,150, .7) !important;
}

.board .board-row .board-cell {
    vertical-align:center;
    text-align:center;
    border:1px solid rgba(255,255,255,.1);
    display: table-cell;
    vertical-align: middle;
    text-shadow: -2px -2px 4px black, 2px 2px 4px #ddd;
}

.spinner {
    color:lightblue;
    text-shadow: 1px 1px 2px black;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 32px;
    width: 44px;
    height: 44px;
    cursor:pointer;
}


@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .spinner:hover {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
  }

  #PlayerName1, #PlayerName2 {
      text-shadow: 2px 2px 3px black, -2px -2px 2px black;
      font-size: 0.8em;
  }