body {
  background-color: #091833;
  color: #ffffff;
  caret-color: transparent;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

nav {
  display: flex;
}
a {
  color: #8787a4;
  text-decoration: underline;
}
a:hover {
  background: #8787A4;
  color: #ffffff;
}
a.selected {
  background: #8787A4;
  color: #ffffff;
}
nav > a {
  margin: 0 3px;
}
nav > form > button {
  color: #8787a4;
  text-decoration: underline;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font-family: inherit;
  font-size: inherit;
  margin: 0 3px;
}
nav > form > button:hover {
  background: #8787A4;
  color: #ffffff;
}

@media (min-width: 768px) {
  #qr > a > img {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  #qr > a > img {
    width: 30%;
  }
}
#qr > a:hover {
  background: none;
}

hr {
  border: none;
  height: 1px;
  background: repeating-linear-gradient(90deg,#fff,#fff 6px,transparent 1px,transparent 8px);
}

ul {
  text-align: left;
}

.container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  -ms-box-sizing:     border-box;
  -o-box-sizing:      border-box;
  box-sizing:         border-box;
  margin: 1em auto;
  padding: 0 1em;
  min-width: 40vw;
  max-width: 100vw;
}

@media (min-width: 640px) {
  .container {
    max-width: 100vw;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 80vw;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 60vw;
  }
}

.flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}

.font-bold {
  font: bold;
}
.font-mono {
  font-family: "Lucida Console", "Courier New", monospace;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.h-100vh {
  height: 100vh;
}

.w-100p {
  width: 100%;
}

.m-auto {
  margin: auto;
}
.mb-1 {
  margin-bottom: 1em;
}
.mb-s {
  margin-bottom: 0.2em;
}
.mr-s {
  margin-right: 0.2em;
}
.pt-1 {
  padding-top: 1em;
}
.mx-1 {
  margin: 0 .2em;
}

.word-wrap {
  word-wrap: break-word;
}

.align-left {
  text-align: left;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
.scroll-x {
  overflow-x: scroll;
}