.deck {
  display: grid;
  grid-template-columns: auto auto auto auto;
  padding: 9px;
  width: 600px;
  margin: auto;
  height: 600px;
  background-color: black;
  background-size: contain;
  background: url(image/deck-background-light.png);
  border-radius: 10px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  position: relative;
}

.deck .card {
  border-style: solid;
  border-color: #1a1a1d;
  border-width: 4px;
  border-radius: 50%;
  opacity: 0.5;
}

.deck .card:hover {
  opacity: 0.8;
  border-color: transparent;
  border-width: 0px;
  padding: 4px;
}

.deck .card:focus {
  opacity: 1;
  border-color: transparent;
  border-width: 0px;
}

.grid {
  display: grid;
  padding: 9px;
  width: 600px;
  margin: auto;
  height: 600px;
  background-color: black;
  border-radius: 10px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  position: relative;
}

.col {
  display: grid;
  grid-template-columns:
    auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

.col .cell {
  border-style: solid;
  border-color: #292929;
  border-width: 1px;
  opacity: 0.5;
}

.alive {
  background-color: white;
}

.dead {
  background-color: black;
}

.canvas {
  border-color: Gray;
  border-width: thin;
  position: absolute;
  top: 0px;
  left: 0px;
}

.canvas2 {
  background-color: #f5f5f5;
}


.bar {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color: #323332;
  padding: 9px;
  width: 600px;
  margin: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.bar>div {
  width: auto;
  color: white;
}

.chess-board {
  display: grid;
  min-width: 40%;
  max-width: 700px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 1px;
  vertical-align: middle;
}

.chess-board::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.chess-board>*:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.chess-board>div {}

@media only screen and (max-width: 800px),
screen and (max-height: 700px) {

  .deck,
  .grid {
    transform: scale(0.9);
    transform-origin: left top;
  }

  .bar {
    transform: scale(0.9);
    transform-origin: left bottom
  }
}

@media only screen and (max-width: 600px),
screen and (max-height: 600px) {

  .deck,
  .grid {
    transform: scale(0.8);
    transform-origin: left top
  }

  .bar {
    transform: scale(0.8);
    transform-origin: left bottom
  }
}

@media only screen and (max-width: 550px),
screen and (max-height: 500px) {

  .deck,
  .grid {
    transform: scale(0.7);
    transform-origin: left top;
  }

  .bar {
    transform: scale(0.7);
    transform-origin: left bottom
  }
}

@media only screen and (max-width: 480px),
screen and (max-height: 450px) {

  .deck,
  .grid {
    transform: scale(0.6);
    transform-origin: left top;
  }

  .bar {
    transform: scale(0.6);
    transform-origin: left bottom
  }
}

@media only screen and (max-width: 410px),
screen and (max-height: 450px) {

  .deck,
  .grid {
    transform: scale(0.55);
    transform-origin: left top;
  }

  .bar {
    transform: scale(0.55);
    transform-origin: left bottom
  }
}

@media only screen and (max-width: 380px),
screen and (max-height: 450px) {

  .deck,
  .grid {
    transform: scale(0.5);
    transform-origin: left top;
  }

  .bar {
    transform: scale(0.5);
    transform-origin: left bottom
  }
}

@media only screen and (max-width: 350px),
screen and (max-height: 450px) {

  .deck,
  .grid {
    transform: scale(0.5);
    transform-origin: left top;
  }

  .bar {
    transform: scale(0.5);
    transform-origin: left bottom
  }
}