/* @group Blink */
.blink {
  -webkit-animation: blink .75s linear infinite;
  -moz-animation: blink .75s linear infinite;
  -ms-animation: blink .75s linear infinite;
  -o-animation: blink .75s linear infinite;
   animation: blink .75s linear infinite;
}
@-webkit-keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 1; }
  50.01% { opacity: 0; }
  100% { opacity: 0; }
}
@-moz-keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 1; }
  50.01% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 1; }
  50.01% { opacity: 0; }
  100% { opacity: 0; }
}
@-o-keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 1; }
  50.01% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 1; }
  50.01% { opacity: 0; }
  100% { opacity: 0; }
}
/* @end */


td{
  border: 5px solid black;
  width: 40px;
  height: 40px;
}

#aiTracker, #humansTracker {

    text-align: center;
    font-weight: 400;
}

#board, #aiBoard {
  border-collapse: collapse;
  margin: 10px auto 20px auto;
  background-color: #ccd9ff

}


h1 {
  text-align: center;
}

.torpedoed {
  background-color: #0040ff
}

.hit{
  /*background-color: #cc0000*/
  background-image: url("shipXed.png");

  background-size: contain;
}

#blue {
  width: 30px;
  height: 30px;
  background-color: #0040ff;
  color: white;
}

#red {
  width: 30px;
  height: 30px;
  background-color: #cc0000;
  color: white;
}

#green {
  width: 30px;
  height: 30px;
  background-color: #5cd65c;
}

#purple {
  width: 30px;
  height: 30px;
  background-color: #884dff;
}

#yellow {
  width: 30px;
  height: 30px;
  background-color: #ffff80;
}

#orange {
  width: 30px;
  height: 30px;
  background-color: #ff751a;
}

#pink {
  width: 30px;
  height: 30px;
  background-color: #ff4dd2;
}



#torpedoTracker, #shipTracker, #hitTracker, #aiTorpedoTracker, #aiShipTracker, #aiHitTracker, #instructionsToHit, #noHitHere  {
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  color: gray;
}

#instructionsToHit, .blink{

  color: red ;
}

#noHitHere {

  color: red;
}

#instructions {
    font-size: 1.5em;
    text-align: center;
    color: #960909;
}


#legend {
  font-size: 1em;
}

#winLose {
  text-align: center;
  color: #8c0404;
}


.shipSunk {
  background-color: #2a2f38;
  background-image: url("ship.png");
  /*z-index: 2*/
  background-size: contain;
}
.showShip {
  background-color: gray;
  background-image: url("ship.png");
  /*z-index: 2*/
  background-size: contain;
}

.ship5show {
  background-color: #5cd65c;
  background-image: url("ship.png");
  /*z-index: 2*/
  background-size: contain;
}
.ship4hshow {
  background-color: #884dff;
  background-image: url("ship.png");
  /*z-index: 2*/
  background-size: contain;
}

.ship4vshow {
  background-color: #884dff;
  background-image: url("ship.png");
  /*z-index: 2*/
  background-size: contain;
}
.ship3hshow {
  background-color: #ffff80;
  background-image: url("ship.png");
  /*z-index: 2*/
  background-size: contain;
}
.ship3vshow {
  background-color: #ffff80;
  background-image: url("ship.png");
  /*z-index: 2*/
  background-size: contain;
}
.ship2hshow {
  background-color: #ff751a;
  background-image: url("ship.png");
  /*z-index: 2*/
  background-size: contain;
}
.ship2vshow {
  background-color: #ff751a;
  background-image: url("ship.png");
  /*z-index: 2*/
  background-size: contain;
}
.ship1show {
  background-color: #ff4dd2;
  background-image: url("ship.png");
  background-size: contain;
}
.btn {
  margin: auto;
}

.hit2{
  /*background-color: #cc0000*/
   background-image: url("shipXed.png");

  background-size: contain;
}