* {
  margin:0; padding:0;
}
#ruler {visibility:hidden; white-space:nowrap; width:auto;}
body {
  font-family: sans-serif;
  font-size: 3.5vmin;
  background-color: lightblue;
}
#main {
  display:flex;
  flex-direction: column;
  margin-top:2vmin;
}
#head {
  width:95vmin;
  height:8vmin;
  display:flex;
  justify-content: space-around;
  align-items: center;
  margin:0 auto;
}
#head img {
  height:60%;
  cursor: pointer;
}
#board {
  display:grid;
  width:80vmin; height:80vmin;
  background-size:101% 100%;
  border:1vmin outset #dcad63;
  margin:0 auto;
}
.cell {
  width:90%; height:90%;
  display:flex;
  justify-content: center;
  align-items: center;
}
#board div img {
  width:95%; height:95%;
  display:flex;
  justify-content: center;
  align-items: center;
}
#message {
  grid-column: 1/span 5;
  grid-row: 1/span 1;
  background-color: rgba(192,255,255,.7);
  color:navy;
  border:3px solid blue;
  display:none;
  text-align: center;
  align-items: center;
  justify-content: center;
}
#info {
  grid-column: 1/span 9;
  grid-row: 1/span 9;
  background-color:brown;
  color:ivory;
  flex-direction: column;
  display:none;
}
#pics {
  display:flex;
  justify-content: space-around;
  align-items: center;
}
#board #info p {
  margin:2vmin 2vmin 0 3vmin;
  font-size: 3vmin;
}
#pics {
  margin-top: 2vmin;
}
#board #info #pics img {
  width:25%;
}
#board #info button {
  margin:3vmin auto 0 auto;
  width:20%;
}
#buttons {
  width:100%;
  display:flex;
  display:none;
  flex-wrap: wrap;
  justify-content: space-around;
}
button {
  font-size: 3vmin;
  padding:.5vmin 2vmin;
  margin-top:.5vmin;
  cursor: pointer;
  color:navy;
}
.fadeout {
  opacity:0;
  transition: opacity 5s;
}
@media (orientation:landscape) {
  #main {
    width:120vmin;
    margin: 2vmin auto;
  }
  #buttons {
    flex-direction: column;
    width:25vmin;
  }
}