* {
  padding:0; margin:0;
}
body {
  background-color: ivory;
  font-family: sans-serif;
}
textarea {
  background-color: lightyellow;
  padding:.5vmin 0 .5vmin 1vmin;
}
#head {
  width:90vmin;
  margin:.2vmin auto;
  display:flex;
  justify-content: space-around;
  align-items: center;
}
#title {
  font-size:2.5vmin;
  color:blue;
  font-style: italic;
}
#head img {
  height:4vmin;
}
#panel0 {
  display:flex;
  justify-content: center;
}
#panel1 {
  display:flex;
  flex-direction:column;
}
#buttons {
  width:100%;
  display:flex;
  justify-content: space-evenly;
}
button {
  padding:.5vmin 1vmin;
  margin:.5vmin 0;
}
#panel2 {
  display:flex;
  align-items: flex-start;
}
#panel2 {
  flex-direction: column;
}
#panel3 {
  flex-direction:row;
  align-items: flex-start;
  display:none;
}
#info, #table, pre {
  padding:2vmin;
}
#info {
  background-color: azure;
  border:2px solid blue;
}
#info span {
  color:blue;
  font-weight: bold;
}
#info #aa {
  text-align: center;
  font-style: italic;
}
#table {
  background-color: lavenderblush;
  border:2px solid violet;
}
table, th, td {
  border: 1px solid;
}
th, td {
  padding:.5vmin;
}
td:nth-child(2) {
  text-align: right;
}
pre {
  background-color: honeydew;
  border:2px solid green;
  font-size:130%;
}
mark {
  color:green;
  font-weight: bolder;
}
#back, #title, #again, #home, button {
  cursor: pointer;
}
@media (orientation:landscape) {
  #panel2 {
    flex-direction: row;
  }
}
@media (orientation:portrait) {
  body {
    font-size:2.2vmin;
  }
}