body {
  font-family: sans-serif;
  background-color: navy;
}
b {
  color:brown;
  font-size: 150%;
}
ul {
  padding-inline-start:3vmin;
  margin-top:-1vmin;
  margin-bottom:-1vmin;
}
li {
  margin-bottom:.5vmin;
}
#main {
  width: 130vmin;
  height: 98vmin;
  margin: .5vmin auto 0 auto;
  background-color:rgb(207,242,254);
}
#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:74%;
  display:flex;
  flex-direction: column;
  xoutline:10px solid lime;
}
#task_panel {
  width:27%; height:85%;
  font-size:3vmin;
  font-family: sans-serif;
  color:black;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:2vmin;
}
#task_panel img {
  width:90%;
  object-fit:cover;
}
#table {
  padding:2vmin;
  width: 97%; height: 68vmin;
  display: grid;
  grid-template-rows: repeat(8,1fr);
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(4,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;
  font-size:2.9vmin;
}
#buttons {
  display:flex;
  justify-content: space-around;
  background-color: rgb(181,235,254);;
  margin:0 1vmin 2vmin 1vmin;
}
#menu_panel div, #buttons div, #task, #close {
  font-family: 'Montserrat', sans-serif;
  font-size:2.6vmin;
	background-color: #fcc;
	border: double 1.2vmin grey;
	padding: .8vmin 2.5vmin;
	border-radius: 7vmin;
  cursor:pointer;
}
#buttons div {
	background-color: #cfc;
}
#buttons #clear {
  background-color: red; color:ivory;
}
#buttons #help {
  background-color: yellow;
}
.highlight {
  outline:.7vmin solid blue;
}
.centre {
  display:flex;
  justify-content: center;
  align-items: center;
}
.txt_centre {
  text-align: center;
}
#menu_panel {
  width:27%; height:68vmin;;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:2vmin;
  xpadding:5vmin 0 0 2vmin;
  xoutline:2px solid purple;
  display:none;
}
#task_panel #smiley {
  width:50%; height:auto;
}
#task_container {
  margin: 1vmin 0;
  display:flex;
  justify-content: center;
}
#task {
  color:black;
  background-color: rgb(181,235,254);
  border-radius: 0;
  cursor:default;
}
.wide {
  width:95%;
}
#message {
  grid-row: 4 / span 4;
  grid-column: 2 / span 2;
  background-color: rgb(181,235,254);
  border:.8vmin groove gold;
  font-size:2.5vmin;
  display:none;
  cursor:pointer;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding:0 2vmin;
}

@media (orientation:portrait) {
  #main {
    width:98vw; height:125vmin;
  }
  #rest {
    width:100%;
    flex-direction: column;
  }
  #panel1, #task_panel, #menu_panel {
    width: 100%;
  }
  .cell {
    font-size:3vmin;
  }
  #task_panel {
    height:40vmin;
    gap:1vmin
}
  ul {
    padding-inline-start:5vmin;
    margin:-1vmin 0 .5vmin 0;
  }
  #head {
    height:6%;
  }
  #head img {
    height:75%;
  }
  #rest {
    height:90%;
  }
  #task_panel img {
    height:60%; width:auto;
  }
  #menu_panel {
    height:auto;
    flex-direction: row;
    gap:0;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  #menu_panel div {
    margin-bottom: 2vmin;
  }
  #buttons {
    margin-bottom: 0;
  }
  #task_panel #smiley {
    width:15%;
    margin: 1vmin 0;
  }
}