.battle-sea {
  background: url(../battle-sea/tablero-grid-img.jpg) top center no-repeat;
  background-size: cover;
  background-color: cadetblue;
  margin: 0;
  padding: 0;
  overflow: auto;
  min-height: 1;
  max-height: 100vh; }
  .battle-sea .tablero {
    position: fixed;
    top: 90px;
    width: 50%;
    height: 100vh;
    overflow: auto; }
    .battle-sea .tablero.izquierdo {
      background-color: transparent; }
      .battle-sea .tablero.izquierdo .left {
        opacity: 1; }
    .battle-sea .tablero.derecho {
      left: 50%; }
      .battle-sea .tablero.derecho .right {
        opacity: 1; }
    .battle-sea .tablero img {
      height: fit-content; }

.container {
  border: 2px solid #a0a0a0;
  width: 100%;
  height: 100%;
  min-height: 25vh; }
  .container .caja-1 {
    background-color: #A6206A;
    color: #fff;
    width: auto;
    font: 600 1rem 'montserrat';
    text-transform: uppercase;
    margin: .5rem;
    padding: .5rem;
    text-align: center; }
  .container .caja-2 {
    background-color: #EC1C4B;
    color: #fff;
    width: auto;
    font: 600 1rem 'montserrat';
    text-transform: uppercase;
    margin: .5rem;
    padding: .5rem;
    text-align: center; }
  .container .caja-3 {
    background-color: #F16A43;
    color: #fff;
    width: auto;
    font: 600 1rem 'montserrat';
    text-transform: uppercase;
    margin: .5rem;
    padding: .5rem;
    text-align: center; }
  .container .caja-4 {
    background-color: #f1c939;
    color: #fff;
    width: auto;
    font: 600 1rem 'montserrat';
    text-transform: uppercase;
    margin: .5rem;
    padding: .5rem;
    text-align: center; }
  .container .caja-5 {
    background-color: #299e7b;
    color: #fff;
    width: auto;
    font: 600 1rem 'montserrat';
    text-transform: uppercase;
    margin: .5rem;
    padding: .5rem;
    text-align: center; }
  .container .caja-6 {
    background-color: #1a7e80;
    color: #fff;
    width: auto;
    font: 600 1rem 'montserrat';
    text-transform: uppercase;
    margin: .5rem;
    padding: .5rem;
    text-align: center; }
  .container .caja-7 {
    background-color: #1a6e8f;
    color: #fff;
    width: auto;
    font: 600 1rem 'montserrat';
    text-transform: uppercase;
    margin: .5rem;
    padding: .5rem;
    text-align: center; }
  .container .caja-8 {
    background-color: #085297;
    color: #fff;
    width: auto;
    font: 600 1rem 'montserrat';
    text-transform: uppercase;
    margin: .5rem;
    padding: .5rem;
    text-align: center; }
