@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
* {
  margin: 0;
  padding: 0; }

html {
  width: 100%;
  height: 100%;
  background: #F2F3F4; }

.enemy, .player {
  width: 330px;
  height: 330px;
  margin: 25px;
  background: #3C6478;
  display: inline-block; }

.board {
  position: absolute;
  width: 300px;
  height: 300px;
  margin-left: 30px;
  font-size: 0; }

.numbers {
  display: table-cell;
  vertical-align: middle; }

.letters {
  position: relative;
  display: block;
  line-height: 29px; }

.numbers, .letters {
  width: 29px;
  height: 29px;
  font-weight: bold;
  color: white;
  text-align: center;
  border-top: 1px solid #8DEEEE;
  border-right: 1px solid #8DEEEE; }

.points {
  position: relative;
  width: 29px;
  height: 29px;
  border-top: 1px solid #8DEEEE;
  border-right: 1px solid #8DEEEE;
  display: inline-block; }

.target {
  background: #FA0A0A; }

.l-ship {
  background: #242424; }

.i-ship {
  background: #313131; }

.dot {
  background: #404040; }

.successful-hit, .failed-hit {
  position: relative;
  margin: 1.5px;
  width: 15px;
  height: 15px;
  top: 5px;
  left: 5px;
  border-radius: 100%;
  overflow: hidden;
  display: table;
  animation: expand;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: none; }

.successful-hit {
  background: #dc0a0a;
  border: 1px solid red; }

.failed-hit {
  background: #fafafa;
  border: 1px solid white; }

@keyframes expand {
  0% {
    width: 0px;
    height: 0px;
    top: 12.5px;
    left: 12.5px; }
  50% {
    width: 25px;
    height: 25px;
    top: 0px;
    left: 0px; }
  100% {
    width: 15px;
    height: 15px;
    top: 5px;
    left: 5px; } }


/*# sourceMappingURL=bundle.css.map*/