body {
   margin: 0 0;
   text-align: center;
   padding: 0;
   background-color: #EEEEEE;
   touch-action: manipulation;
}

#view {
   height: 80vw;
   width: 80vw;
   max-width: 80vh;
   max-height: 80vh;
   overflow: auto;
   display: block; 
   margin:0 auto;
}

li.selected {
  background-color: #888800;
}

li.movable {
  background-color: #cc8800;
}

.white_square {
   background-color: #dddddd;
}

.black_square {
   background-color: #444444;
}


.white_square:hover {
  background-color: #f7f7f7;
}

.black_square:hover {
  background-color: #5c5c5c;
}

li.movable:hover {
  background-color: #f8a500;
}

li.selected:hover {
  background-color: #a0a000;
}
.white_pawn {
  background-image: url("pieces/white_pawn.svg");
}
.white_knight {
  background-image: url("pieces/white_knight.svg");
}
.white_bishop {
  background-image: url("pieces/white_bishop.svg");
}
.white_rook {
  background-image: url("pieces/white_rook.svg");
}
.white_queen {
  background-image: url("pieces/white_queen.svg");
}
.white_king {
  background-image: url("pieces/white_king.svg");
}

.black_pawn {
  background-image: url("pieces/black_pawn.svg");
}
.black_knight {
  background-image: url("pieces/black_knight.svg");
}
.black_bishop {
  background-image: url("pieces/black_bishop.svg");
}
.black_rook {
  background-image: url("pieces/black_rook.svg");
}
.black_queen {
  background-image: url("pieces/black_queen.svg");
}
.black_king {
  background-image: url("pieces/black_king.svg");
}

ul {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   border-style: solid;
   border-width: 5px;
   margin: auto;
   padding: 0;
   transition: width 250ms ease-in-out, height 250ms ease-in-out;
}

li {
   box-sizing: border-box;
   cursor: pointer;
   display: block;
   width: 8.333333333%;
   height: 8.333333333%;
   float: left;
   padding: 0;
   border-style: solid;
   border-width: 2px;
   border-color: #222222;
   margin: 0;
   transition: background-color 100ms ease-in-out, background-image 100ms ease-in-out;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.btn {
   border-radius: 50%;
   border-color: #e7e7e7;
   background: #ffffff;
   color: black;
   display:inline-block;
   height: 32px;
   width: 32px;
   line-height: 32px;
   text-align: center;
   vertical-align: middle;
   padding: 5px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.btn:hover {
   background: #e7e7e7;
}

.btn2 {
  border-radius: 20%;
  border-color: #e7e7e7;
  background: #ffffff;
  color: black;
  display:inline-block;
  height: 24px;
  width: auto;
  line-height: 24px;
  text-align: center;
  vertical-align: middle;
  padding: 5px;
  margin: 6px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn2:hover {
  background: #e7e7e7;
}

.together {
   display: inline-block;
}

#overlay {
  position: absolute; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}