body {
  margin:0; padding:0; box-sizing:border-box;
  background-color:saddlebrown;
}
i {
  color:yellow
}
ul {
  padding-inline-start:3vmin;
}
li {
  text-align: left;
  margin-bottom: .8vmin;
}
#main {
  width: 130vmin;
  height: 98vmin;
  margin: .5vmin auto 0 auto;
}
#head {
  width: 100%; height: 8%;
  display:flex;
  justify-content: space-around;
  align-items: center;
}
#head img {
  height:80%; width:auto;
}
#head #title {
  height:60%; width:auto;
}
#rest {
  width: 100%; height: 92%;
  display:flex;
}
#panel1 {
  width: 150vmin; height: 100%;
  display:flex;
  flex-direction: column;
}
#table {
  width: 100%; height: 68vmin;
  display: grid;
  grid-template-rows: repeat(6,1fr);
  grid-template-columns: repeat(5,1fr);
  gap:.5vmin;
}
.cell {
  display:flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border:.8vmin groove gold;
  background-color: beige;
  cursor:pointer;
}
#buttons {
  margin-top: 2vmin;
  display:flex;
  justify-content: space-around;
  background-color: sienna;
}
#panel2 {
  width: 48vmin; height: 100%;
  font-size:3vmin;
  font-family: sans-serif;
  color:ivory;
  padding:5vmin 0 0 2vmin;
  text-align: center;
  display:none;
}
#panel3 {
  width: 48vmin; height: 100%;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:2vmin;
  padding:5vmin 0 0 2vmin;
}
#panel3 div, #task, #buttons div {
  font-family: 'Montserrat', sans-serif;
  font-size:2.6vmin;
	background-color: #fcc;
	border: double 1.2vmin grey;
	padding: .8vmin 2.5vmin;
	border-radius: 7vmin;
}
#buttons div {
	background-color: #cfc;
	cursor:pointer;
  visibility: hidden;
}
#panel3 div, #home, #back {
	cursor:pointer;
}
.ac {
  color:saddlebrown;
  font-size:2.2vmin;
}
.nc {
  color:forestgreen;
  font-size:3vmin;
  font-family: sans-serif;
}
.sc {
  color:crimson;
  font-size:2.3vmin;
  font-family: monospace;
  visibility: hidden;
}
#smiley {
  width:20vmin; height:auto;
}
#task_container {
  margin: 1vmin 0;
  display:flex;
  justify-content: center;
}
#task {
  color:black;
}
#buttons #clear {
  background-color: red; color:ivory;
}
#buttons #help {
  background-color: yellow;
}
.highlight {
  outline:.5vmin solid yellow;
}
@media (orientation:portrait) {
  ul {
    padding-inline-start:5vmin;
    margin-top: -.01vmin;
  }
  li {
    margin-left: 2vmin;
  }
  #main {
    width: 98vmin;
  }
  #rest {
    flex-direction: column;
  }
  #panel1, #panel2, #table, #panel3 {
    width:100%;
  }
  #table {
    font-size:2.8vmin;
  }
  .ac {
   font-size:2vmin;
  }
  .nc {
   font-size:3vmin;
  }
  .sc {
   font-size:2.5vmin;
  }
  #panel2 {
   font-size:3.6vmin;
    margin:0; padding:2vmin 0 0 0;
  }
  #panel3 {
    margin:0; padding:4vmin 0 0 0;
    margin-top:-1.8vmin;
    gap:1vmin;
  }
  #smiley {
    margin: -2.5vmin 0;
  }
}