@media all and (orientation:landscape) {
  * {
    font-size: 1em;
  }
}
@media all and (orientation:portrait) {
  * {
    font-size: 3vw;
  }
}
header .top-navigation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
div .top-navigation {
  background-color: lightgray;
}
.top-navigation {
  display: table;
  width: 100%
}
.nav-item {
  position: relative;
  padding: 1ex;
}
.nav-item * {
  display: inline-block;
}
.nav-left {
  float: left;
}
.nav-right {
  float: right;
}
main {
  max-width: 980px;
  background-color: #eee;
  padding: 1ex;
  margin-left: auto;
  margin-right: auto;
}
pre:has(> code) {
  padding: 1ex;
  background-color: black;
  color: white;
  overflow-x: auto;
  min-height: 1em;
  border-radius: 1ex
}
.rounded {
  border-radius: 1ex
}
.helptext {
  margin-left: 1ex;
  color: gray;
}
div.messages {
  display: flex;
}
div.message {
  margin: 8px auto;
  border-radius: 1ex;
  border-width: .5ex;
  padding: 1em;
  border: .5ex dashed;
}
div.message.small {
  padding: 2px;
  margin: 2px;
}
.message.info {
  background-color: #AAAAFF;
  border-color: #0000FF;
}
.message.info::before {
  content: "\2139\fe0f ";
}
.message.success {
  background-color: #88FF88;
  border-color: #00AA00;
}
.message.success::before {
  content: "\2705 ";
}
.message.warning {
  background-color: #FFFF88;
  border-color: #DD8800;
}
.message.warning::before {
  content: "\26a0\fe0f ";
}
.message.error {
  background-color: #FF8888;
  border-color: #FF0000;
}
.message.error::before {
  content: "\1f6a8 ";
}