body {
  background-color: black;
  display:flex;
  justify-content:center;
  margin:0;
}
#box {
  margin-top:10px;
  width:1024px; height:768px;
}
#game {
  width:100%; height:100%;
  display:grid;
  grid-template-columns: repeat(1024,1fr);
  grid-template-rows:repeat(768,1fr);
}
#game img {
  height:100%;
  display:inline-grid;
}
#bgd, #cover {
  grid-column:1/span 1024; grid-row:1/span 768;
}
#info_img {
  grid-column:15/span 90; grid-row:18/span 84;
}
#back_img {
  grid-column:15/span 90; grid-row:580/span 84;
}
#home_img {
  grid-column:905/span 90; grid-row:18/span 84;
}
#again_img {
  grid-column:905/span 90; grid-row:652/span 84;
  visibility:hidden;
}
#message {
  grid-column:1/span 1024; grid-row:680/span 50;
  color:ivory;
  font-family: sans-serif;
  text-align: center;
}
.dish {
  opacity:.1;
}
#dish_left, #dish_right, #dish_wizard, .green, .blue {
  visibility:hidden;
}
#dish_left, #dish_wizard, #dish_blue_left {
  grid-column:53/span 89; grid-row:239/span 215;
}
#dish_right, #dish_blue_right {
  grid-column:890/span 89; grid-row:239/span 215;
}
#target_left, #target_right, .number {
  grid-row:455/span 40;
  text-align: center;
  color:ivory;
  opacity:.8
}
#target_left {
  grid-column:58/span 89;
}
#target_right {
  grid-column:885/span 89;
}
#info {
  background-color: #cee;
  width:100%; height:100%;
  font-family: sans-serif;
  display:none;
}
#mancala_head {
  font-style: italic;
  color:blue;
}
#top {
  display:flex;
  justify-content: space-between;
  align-items:center;
  width:80%; height:30%;
  margin:0 auto;
  padding-top: 10px;
}
#x {
  padding:0 5%;
  height:30%;
}
#pic {
  height:100%;
}
p {
  margin: 1% 5%;
  font-size:65%;
}