/* /activities/Nim3D/styles.css */
body {
  background-color: black;
}
#game {
  display: grid;
  grid-template-columns: repeat(256,1fr);
  grid-template-rows: repeat(192,1fr);
  margin: 0 auto;
  width:92vw;
  height:69vw;
  max-width:1024px;
  max-height: 768px;
}
img {
  width:100%;
}
#bgd {
  grid-column: 1 / span 256;
  grid-row: 1 / span 192;
  xopacity:.5;
}
#overlay {
  grid-column: 208 / span 44;
  grid-row: 89 / span 50;
}
#up {
  grid-column: 222 / span 11;
  grid-row: 86 / span 19;
  cursor:pointer;
}
#bk {
  grid-column: 239 / span 14;
  grid-row: 104 / span 18;
  visibility: hidden;
  cursor:pointer;
}
#message {
  grid-row: 170 / span 22;
  grid-column: 100 / span 156;
  background-color: lightblue;
  align-self:center;
  justify-self:center;
  padding:1vmin 2vmin;
  font-size:3vmin;
  text-align:center;
}
#info {
  grid-row: 82 / span 11;
  grid-column: 1 / span 236;
  background-color: ivory;
  align-self:center;
  justify-self:center;
  padding:1vmin 2vmin;
  font-size:3vmin;
  text-align:center;
}
.fade_out {
  opacity:0;
  transition:opacity 3s;
}
.piece {
  cursor:pointer;
  visibility:hidden;
}
#button1 {
  grid-column: 211 / span 9;
  grid-row: 138 / span 9;
  visibility: hidden;
}
#button2 {
  grid-column: 206 / span 5;
  grid-row: 147 / span 6;
  visibility: hidden;
}
#button3 {
  grid-column: 211 / span 8;
  grid-row: 161 / span 7;
  visibility: hidden;
}
#button4 {
  grid-column: 219 / span 8;
  grid-row: 153 / span 8;
  visibility: hidden;
}
#pearl {
  grid-column: 210 / span 9;
  grid-row: 148 / span 11;
  cursor:pointer;
}
#home {
  grid-column: 241 / span 15;
  grid-row: 2 / span 15;
  cursor:pointer;
}
#back {
  grid-column: 1 / span 14;
  grid-row: 1 / span 14;
  cursor:pointer;
}