body {
  width: 100vw;
  background-color: lightcyan;
  margin: 0;
}

main {
  padding-left: 10%;
  padding-right: 10%;
  margin-left: 10%;
  margin-right: 10%;
}

header {
  display: flex;
  position: relative;
  color: orange;
  background: black;
  border: double orange 5px;
  text-align: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* Include the borders in the box size. */
  width: 100%;
}

header heading {
  align-items: center;
  justify-content: center;
  width: 80vw;
}

.header-h1 {
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}

nav {
  width: 10vw;
}

#menu-button {
  color: orange;
  background-color: black;
  anchor-name: --menu-anchor;
  font-size: 100%;
  border: double orange 5px;
  border-radius: 15%;
  text-align: center;
  justify-content: flex-start;
  position: fixed;
  width: auto;
}

#menu-popover {
  position-anchor: --menu-anchor;
  margin: 0;
}

.menu a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: black;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.menu a:hover {
  background-color: #009bff;
  color: white;
}

summary {
  font-size: 200%;
}


/*
#menu-button {
  position: fixed;
}

#menu-button .bar {
  display: block;
  width: 100%;
  height: 3px;
}

.menu {
  position: fixed;
  border: dotted green 1px;
  border-radius: 10%;
  color: green;
  width: 100px;
  margin: 0;
  padding: 5px;
}
*/