@counter-style mf {
  system: cyclic;
  symbols: "\2764\FE0F" "\1F451" "\1F525" "\1F680" "\1F911" "\1F4AF" "\1F449" "\1F4AA" "\1F340" "\2728";
  suffix: "";
}

body {
  background-color: #fd7e14;
  font: 1rem "Lucida Grande", Helvetica, Arial, sans-serif;
  margin-left: 10px;
  margin-right: 10px;
}

nav {
  position: fixed;
  background-color: #333;
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  left: 0;
  right: 0;
}

nav a {
  color: #f8f9fa;
  padding-right: 0.5rem;
  text-decoration: none;
}

nav a:hover, nav a:focus {
  color: cyan;
}

ul {
  padding-left: 17px;
  list-style: mf outside;
}

li { margin-bottom: 10px; }

@media screen {
  @media (orientation: portrait) {
    body { margin-bottom: 36px; }

    nav { bottom: 0; }
  }

  @media (orientation: landscape) {
    body { margin-top: 40px; }

    nav { top: 0; }
  }
}