.tile {
  background-color: white;
  outline: 1px solid black;
  height: 2vw;
  width: 2vw;
  margin: 1px 1px 1px 1px;
  display: inline-block;
}

.center {
  text-align: center;
  min-width: 100%;
  max-width: 100%;
}

.left_side {
  max-width: calc(40% - 1em);
  min-width: calc(40% - 1em);
  display: inline-block;
}

.right_side {
  max-width: calc(60% - 1em);
  min-width: calc(60% - 1em);
  display: inline-block;
}

.game_board {
  margin-left: 1em;
  min-width: 60%;
}

.grid-container {
  display: grid;
  /* 22 autos because 22 columns; must change if you change the BOARD_WIDTH */
  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;
}

.tile.tile_on {
  background-color: black;
}

.buttons {
  text-align: center;
  width: 100%;
}

.shape_adding {
  margin-top: 3vh;
}

th {
  width: 50%;
  text-align: right;
}

td {
  width:25%;
  text-align: right;
}

.left_align {
  text-align: left;
}

.right_align {
  text-align: right;
}

td.small {
  width: 10%;
  text-align: left;
}

.half {
  width: 50%;
}


.dark-mode-text table {
  border: none;
}

.dark-mode-text th {
  border: none;
}

.dark-mode-text td {
  border: none;
}

select {
  width: 100px;
}

input[type="range"] {
  width:100px;
}

.shape_button.button_active {
  background-color: black;
  color: white;
}

.dark-mode-text .shape_button {
  background-color: black;
  color: white;
}

.dark-mode-text .shape_button.button_active {
  background-color: white;
  color: black;
}

.dark-mode-text .tile {
  background-color: black;
  outline: 1px solid white;
}

.dark-mode-text .tile.tile_on {
  background-color: white;
}

/* .dark-mode-text.game_board {
  background-color: white;
} */

@media (max-width: 650px) {

  .left_side {
    min-width: 100%;
    margin: 1em;
  }

  .right_side {
    min-width: 100%;
    margin: 1em;
  }

  .tile {
    height: 4vw;
    width: 4vw;
  } 

}