body {
  background-color: green;
  overflow: hidden; /* Hide scrollbars */
}
#head {
  width:95vw;
  height:10vmin;
  display:flex;
  justify-content: space-around;
  align-items: center;
}
#head img {
  height:80%;
  cursor: pointer;
}
#panel {
  margin-top: 3vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  color:lime;
}
#box {
  margin:0 auto;
  width:15px; height:10px;
  display:flex;
  align-items: center;
}
#left, #right, #bottom {
  font-style: italic;
}
#left, #right {
  margin: 0 2vmin;
}
#bottom {
  margin-top:3vmin;
}
.highlight {
  outline:1vmin solid black;
  outline-offset:-1vmin;
}
#puzzle {
  width:100%; height:100%;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  border:2vh groove gold;
  grid-template-rows:repeat(6,1fr);
}
#smiley_div {
  width:100%;
  height:100%;
  grid-column:1/span 4;
  grid-row:1/span 6;
  display:flex;
  justify-content: center;
  align-items: center;
  visibility:hidden;
}
#smiley {
  height:30vmin;
}
.square {
  border:1px solid grey;
  color:white;
  display:flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
@media (orientation:portrait) {
  #panel {
    margin-top: 5vmin;
  }
  #bottom {
    margin-top:4.5vmin;
  }
}