html {
  color-scheme: light dark;
  font-family: Tahoma, Verdana, Arial, sans-serif;
}

#content {
  display: flex;
}

/* Mobile device */
@media (max-width: 450px) {
  #content {
    flex-direction: column;
  }
}

main {
  padding: 10px;
}

footer {
  display: block;
  text-align: center;
}

nav.nav-main {
  padding: 10px;
  min-width: min-content;
}

@media (prefers-color-scheme: light) {
  nav.nav-main {
    background-color:lavender;
  }
}

@media (prefers-color-scheme: dark) {
  nav.nav-main {
    background-color:darkslateblue;
  }
}

.nav-main__title {
  text-align: center;
}

.nav-main__list {
  list-style: circle inside;
  padding-right: 10px;
  text-wrap: nowrap;
  padding-left:0;
  margin-left: 1em;
}

.nav-main__sublist {
  list-style: "\25AB  " inside;
  text-wrap: wrap;
  padding-left: 0;
  margin-left: 1em;
}

.nav-main__listitem, .nav-main__sublistitem {
  position: relative;
}

.nav-main__listitem--active {
  list-style-type: disc;
}

.nav-main__sublistitem--active {
  list-style-type: "\25AA  ";
}