* {
  font-family: "Stickmation Regular";
}

nav input#menu {
  display: none;
}

nav label { display: none; }

body {
  margin: 0;
  font-size: 16pt;
  color: #002366;
}

h1 {
  font-size: 30pt;
  text-align: center;
  text-shadow: #FFFF00 1px 1px, #FFFF33 2px 2px, #FFFF66 3px 3px, #ffff99 4px 4px, #ffffcc 5px 5px;
  /* margin: 2vh 0vw; */
  /* text-emphasis: open; */
}

nav ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-left: 0;
  margin: 0px auto;
}
nav ul li {
  border: 0px solid black;
  padding: 0vw 1.5vw;
  /* cursor: pointer; */
}
nav ul li#current {
  color: yellow;
  text-shadow: #002366 -1px -1px 4px;
}

nav ul li a {
  text-decoration: none;
}

nav ul li details div {
  font-style: italic;
  /* font-size: 1vw; */
}

details > summary {
  list-style-type: none;
  cursor: help;
}

header {
  /* height: 20vh; */
  overflow: hidden;
}
main {
  height: 88vh;
  overflow-y: hidden;
  border: 0px solid green;
}
footer {
  height: 0;
  overflow: hidden;
  background-color: green;
}

input { font-size: 16pt; }

@media screen and (max-width: 1000px) {
  body { font-size: 12pt; }
  input { font-size: 12pt; }
}

@media screen and (max-width: 650px) {
  h1 { font-size: 18pt; }
  body { font-size: 12pt; }

  nav {
    position: absolute;
    top: 12px;
    left: 0;
  }

  nav label { display: block; }
  nav #menu-content {
    display: none;
  }

  nav input:checked ~ #menu-content {
    display: block;
  }

  nav ul {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background: white;
  }

}