body {
  height            : 100vh;
  font-family       : Merriweather, sans-serif;
  background        : #226293;
  background        : -webkit-radial-gradient(center, ellipse cover, #226293 0%,#1b4f79 100%);
  background        :    -moz-radial-gradient(center, ellipse cover, #226293 0%, #1b4f79 100%);
  background        :         radial-gradient(ellipse at center, #226293 0%,#1b4f79 100%);
  filter            : progid:DXImageTransform.Microsoft.gradient(
                              startColorstr='#226293',
                              endColorstr='#1b4f79',
                              GradientType=1 
                              );
  color             : #eee;
  display           : flex;
  justify-content   : center;
  align-items       : center;
}

footer {
  position          : fixed;
  bottom            : 0;
  background        : #000;
  color             : #eee;
  height            : 1.4rem;
  width             : 100%;
  padding           : .2rem;
  text-align        : center;
  font-size         : .8rem;
  z-index           : 999;
}

  footer a:link, footer a:visited {
    text-decoration : none;
    color           : #eee;
    transition      : color 0.5s ease;
  }

  footer a:hover {
    color           : #fc0;
  }

  footer .love {
    color           : #b10;
    font-size       : 1rem;
    vertical-align  : baseline;
  }

/* App.css */
.App {
  text-align          : center;
  display             : flex;
  flex-direction      : column;
  opacity             : 1;
  -webkit-transition  : opacity 500ms ease-in;
     -moz-transition  : opacity 500ms ease-in;
       -o-transition  : opacity 500ms ease-in;
          transition  : opacity 500ms ease-in;
}

.App-hidden {
  text-align          : center;
  display             : flex;
  flex-direction      : column;
  opacity             : 0;
}

.Game {
  display             : flex;
  justify-content     : center;
  align-items         : center;
}

  #Menu.display {
    display             : flex;
    flex-direction      : column;
    justify-content     : center;
    align-items         : center;
    background-color    : #1b4f79;
    background-color    : #1b4f79;
     -webkit-box-shadow : 0 0 2rem #00000080;
        -moz-box-shadow : 0 0 2rem #00000080;
             box-shadow : 0 0 2rem #00000080;
    padding             : 5rem;
    width               : 25vh;
    height              : 25vh;
    border-radius       : 50%;
    border              : 6px solid #fc0;
    position            : absolute;
    text-align          : center;
    top                 : 50%;
    left                : 50%;
    opacity             : 1;
    -webkit-transform   : translate(-50%, -50%);
        -ms-transform   : translate(-50%, -50%);
            transform   : translate(-50%, -50%);
    -webkit-transition  : opacity 300ms ease-in 1.5s;
       -moz-transition  : opacity 300ms ease-in 1.5s;
         -o-transition  : opacity 300ms ease-in 1.5s;
            transition  : opacity 300ms ease-in 1.5s;
  }

    #Menu.hidden {
      z-index             : -100;
      opacity             : 0;
      -webkit-transition  : opacity 300ms ease-in;
         -moz-transition  : opacity 300ms ease-in;
           -o-transition  : opacity 300ms ease-in;
              transition  : opacity 300ms ease-in;
    }

    #Menu .title {
      font-family         : 'Indie Flower';
      color               : #fc0;
      margin-bottom       : 0;
    }

    #Menu hr {
      color               : #eee;
      margin-bottom       : 1rem;
      width               : 100%;
    }

    #Menu .menu-text {
      font-size           : 1rem;
      font-weight         : bold;
      margin              : .2rem 0rem;
    }

    #Menu .token {
      color               : #fc0;
      margin              : 1rem;
      font-size           : 1rem;
      cursor              : pointer;
    }

    #Menu button {
      background-color    : white;
      color               : #1b4f79;
      border              : none;
      width               : 3rem;
      height              : 3rem;
      margin              : 1rem .3rem;
      border-radius       : 50%;
      font-size           : 1.5rem;
      cursor              : pointer;
    }

table {
  width               : 50vh;
  height              : 50vh;
  border-collapse     : collapse;
}
td {
  text-align          : center; 
  vertical-align      : middle;
  border              : transparent;
}

@media (max-height: 600px) {
  #Menu .title {
    font-size         : 1.5rem;
    margin-bottom     : 0;
  }

  #Menu .menu-text {
    font-size         : .8rem;
    font-weight       : bold;
    margin            : .2rem 0rem;
  }

  #Menu button {
    width             : 2rem;
    height            : 2rem;
    margin            : .3rem .3rem;
    font-size         : 1rem;
  }
}

/* Grid.css */
#Grid {
  position  : absolute;
  width     : 50vh;
  height    : 50vh;
  z-index   : -500;
}

  #Grid .line {
    stroke              : #fc0;
    stroke-width        : 3px;
    stroke-dasharray    : 180px;
    stroke-dashoffset   : -180px;
    fill                : transparent;
  }

  #Grid .animate1 {
    stroke-dashoffset   : 0px;
    -webkit-transition  : stroke-dashoffset 200ms ease-in;
       -moz-transition  : stroke-dashoffset 200ms ease-in;
         -o-transition  : stroke-dashoffset 200ms ease-in;
            transition  : stroke-dashoffset 200ms ease-in;
  }
  
    #Grid .line1-shown {
      stroke-dashoffset   : 0px;
      -webkit-transition  : stroke-dashoffset 200ms ease-in 200ms;
        -moz-transition   : stroke-dashoffset 200ms ease-in 200ms;
          -o-transition   : stroke-dashoffset 200ms ease-in 200ms;
              transition  : stroke-dashoffset 200ms ease-in 200ms;
    }

  #Grid .animate2 {
    stroke-dashoffset   : 0px;
    -webkit-transition  : stroke-dashoffset 200ms ease-in 200ms;
       -moz-transition  : stroke-dashoffset 200ms ease-in 200ms;
         -o-transition  : stroke-dashoffset 200ms ease-in 200ms;
            transition  : stroke-dashoffset 200ms ease-in 200ms;
  }

  #Grid .animate3 {
    stroke-dashoffset   : 0px;
    -webkit-transition  : stroke-dashoffset 200ms ease-in 400ms;
       -moz-transition  : stroke-dashoffset 200ms ease-in 400ms;
         -o-transition  : stroke-dashoffset 200ms ease-in 400ms;
            transition  : stroke-dashoffset 200ms ease-in 400ms;
  }

  #Grid .animate4 {
    stroke-dashoffset   : 0px;
    -webkit-transition  : stroke-dashoffset 200ms ease-in 600ms;
       -moz-transition  : stroke-dashoffset 200ms ease-in 600ms;
         -o-transition  : stroke-dashoffset 200ms ease-in 600ms;
            transition  : stroke-dashoffset 200ms ease-in 600ms;
  }


/* Square.css */
.cross {
  stroke              : #fc0;
  stroke-width        : 6px;
  stroke-dasharray    : 226.274169921875px;
  stroke-dashoffset   : -226.274169921875px;
  fill                : transparent;
  transition          : stroke-dashoffset 0.3 linear;
}

.cross1-shown {
  stroke              : #fc0;
  stroke-width        : 6px;
  stroke-dasharray    : 226.274169921875px;
  stroke-dashoffset   : 0px;
  fill                : transparent;
  -webkit-transition  : stroke-dashoffset 200ms ease-in;
     -moz-transition  : stroke-dashoffset 200ms ease-in;
       -o-transition  : stroke-dashoffset 200ms ease-in;
          transition  : stroke-dashoffset 200ms ease-in;
}

.cross2-shown {
  stroke              : #fc0;
  stroke-width        : 6px;
  stroke-dasharray    : 226.274169921875px;
  stroke-dashoffset   : 0px;
  fill                : transparent;
  -webkit-transition  : stroke-dashoffset 200ms ease-in 200ms;
     -moz-transition  : stroke-dashoffset 200ms ease-in 200ms;
       -o-transition  : stroke-dashoffset 200ms ease-in 200ms;
          transition  : stroke-dashoffset 200ms ease-in 200ms;
}

.xWon1 {
  stroke              : #b10;
  stroke-width        : 6px;
  stroke-dasharray    : 226.274169921875px;
  stroke-dashoffset   : 0px;
  fill                : transparent;
  -webkit-transition  : all 500ms ease-in 100ms, stroke 500ms ease-in 1.1s;
     -moz-transition  : all 500ms ease-in 100ms, stroke 500ms ease-in 1.1s;
       -o-transition  : all 500ms ease-in 100ms, stroke 500ms ease-in 1.1s;
          transition  : all 500ms ease-in 100ms, stroke 500ms ease-in 1.1s;
}

.xWon2 {
  stroke              : #b10;
  stroke-width        : 6px;
  stroke-dasharray    : 226.274169921875px;
  stroke-dashoffset   : 0px;
  fill                : transparent;
  -webkit-transition  : all 500ms ease-in 600ms, stroke 500ms ease-in 1.1s;
     -moz-transition  : all 500ms ease-in 600ms, stroke 500ms ease-in 1.1s;
       -o-transition  : all 500ms ease-in 600ms, stroke 500ms ease-in 1.1s;
          transition  : all 500ms ease-in 600ms, stroke 500ms ease-in 1.1s;
}

.circle {
  stroke              : #fc0;
  stroke-width        : 6px;
  stroke-dasharray    : 263.93072509765625px;
  stroke-dashoffset   : -263.93072509765625px;
  fill                : transparent;
  opacity             : 0;
}

.circle-shown {
  stroke              : #fc0;
  stroke-width        : 6px;
  stroke-dasharray    : 263.93072509765625px;
  stroke-dashoffset   : 0px;
  fill                : transparent;
  -webkit-transition  : stroke-dashoffset 300ms ease-in 100ms;
     -moz-transition  : stroke-dashoffset 300ms ease-in 100ms;
       -o-transition  : stroke-dashoffset 300ms ease-in 100ms;
          transition  : stroke-dashoffset 300ms ease-in 100ms;
}

.oWon {
  stroke              : #b10;
  stroke-width        : 6px;
  stroke-dasharray    : 263.93072509765625px;
  stroke-dashoffset   : 0px;
  fill                : transparent;
  -webkit-transition  : stroke-dashoffset 800ms ease-in 600ms, stroke 500ms ease-in 1.2s;
     -moz-transition  : stroke-dashoffset 800ms ease-in 600ms, stroke 500ms ease-in 1.2s;
       -o-transition  : stroke-dashoffset 800ms ease-in 600ms, stroke 500ms ease-in 1.2s;
          transition  : stroke-dashoffset 800ms ease-in 600ms, stroke 500ms ease-in 1.2s;
}

.clickable {
  cursor  : pointer;
}