body {
  background-color: darkgreen;
  font-family: sans-serif;
}
#head {
  width:80vw;
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin:2vmin auto 0 auto;
}
#head img {
  height:5vmin;
}
#head div {
  color:white;
  font-size:3vmin;
}
#main, #black, #white {
  display:flex;
  justify-content: center;
  align-items: center;
}
#black, #white {
  width:11vmin;
  height:11vmin;
  margin:5vmin;
  border:1vmin solid darksalmon;
  border-radius: 50%;
  font-size: 6vmin;
}
#black {
  background-color: black;
  color:white;
}
#white {
  background-color: white;
  color:black;
}
#board,#info {
  margin-top:3vmin;
  width:80vmin;
  height:80vmin;
  border:2vmin darksalmon ridge;
}
.row4 {height:25%;}
.row6 {height:16.6%;}
.row8 {height:12.5%;}
.row {
  display:flex;
}
.cell4 {width:25%;}
.cell6 {width:16.6%;}
.cell8 {width:12.5%;}
.cell {
  display:flex;
  justify-content: center;
  align-items: center;
  height:100%;
  outline:1px solid black;
}
.cell img {
  width:80%;
  height:80%;
}
#info {
  display:none;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  font-size:3.5vmin;
  background-color:wheat;
}
#info button {
  font-size: 4vmin;
  padding: 0 2vmin 1vmin 2vmin;
  background-color:cyan;
  color:black;
}
#info p {
  margin:1.5vmin 2vmin 0 3.5vmin;
}
#blue {
  background-color:lightblue;
  padding:0 .5vmin;
}

@media (orientation:portrait) {
  #main {
    flex-wrap: wrap;
  }
  #board, #info {
    order:0;
    width:98vmin;
    height:98vmin;
  }
  #black, #white {
    margin-top: 3vmin;
  }
  #black {
    order:1;
  }
  #white {
    order:2;
  }
}