ul {
  display: block;
}
/****************************************************************/
/* 
/****************************************************************/
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: none;
  background-color: #F0E68C;
  height: calc(100vh - 24px);
  width: calc(100vw - 24px);
  margin: 0;
  padding: 12px;
  position: absolute;
}
header {
  border: double;
  border-width: 3px;
  font-weight: bold;
  width: calc(100% - 22px);
  margin: 4px;
  padding: 4px;
  position: relative;
}
main {
  width: calc(100% - 8px);
  margin: 4px;
  position: relative;
}
footer {
  text-align: center;
  background-color: silver;
  width: calc(100% - 8px);
  margin: 4px;
  position: relative;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.note {
  border: groove;
  padding: 2px;
}
.syntax {
  border: inset;
  padding: 4px;
}
.remarks {
  border: inset;
  padding: 4px;
}