body, textarea {
  background-color: white;  /* Bisque (very light brown) */
  color: #140505;  /* Darkest brown */
  font-size: 1.25em;
  font-family: sans-serif;
}
body.recipe {
  background-color: #FFE4C4;  /* Bisque (very light brown) */
}

a {
  color: #0066cc;  /* Dark blue */
  text-decoration-line: none;  /* No underline. */
}

h2 {
  font-size: 1.25em;  /* Default was x-large. */
}

ul, ol {
  /* Indentation of list item content, not including the bullet or number. */
  padding-inline-start: 3ex;
}


/* MENU */
ul.menu, ul.submenu {
  /* Remove the indentation. */
  margin: 0;
  padding: 0;
  /* Remove the bullets. */
  list-style-type: none;
  /* Make the menu a horizontal row. */
  display: flex;
  /* Do not allow line breaks within menu items. */
  white-space: nowrap;
}

ul.menu > li {
  /* Set list items' position to relative so that submenus can be positioned
     absolutely below them. */
  position: relative;
}

ul.submenu {
  /* Position the submenus below the parent menu. */
  position: absolute;
  left: -0.05em;
  top: 97%;
  display: none;  /* Submenus are invisible by default. */
}

/* Style the links within each menu item. */
ul.menu li a {
  display: block;  /* Cause each link to take up all the available space
                      of its containing list item. */
  text-decoration: none;  /* Remove the underline. */
  /* The anchor is 1.5em in height and has additional right and left padding. */
  padding: 0.25em 1em;
  /* Solid border. */
  border-style: solid;
  /* Colors. */
  background: LightSalmon;
  color: black;  /* text */
  border-color: black;
}

/* Create a 2-pixel border around each menu item. */
ul.menu > li > a {
  border-width: 0.1em 0.05em;
}
ul.menu > li:first-child > a {
  border-left-width: 0.1em;
}
ul.menu > li:last-child > a {
  border-right-width: 0.1em;
}

/* Create a 2-pixel border around each submenu item. */
ul.submenu > li > a {
  border-width: 0.05em 0.1em;
}
ul.submenu > li:first-child > a {
  border-top-width: 0.1em;
}
ul.submenu > li:last-child > a {
  border-bottom-width: 0.1em;
}

/* Make the submenus appear when the mouse hovers over the menu items. */
li:hover ul.submenu {
  display: block;
}


@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: LavenderBlush;
  }
  body.recipe {
    background-color: black;
  }
  
  a {
    color: DeepSkyBlue;
  }
  
  /* Style the links within each menu item. */
  ul.menu li a {
    /* Colors. */
    background: DarkGray;
    color: white;  /* text */
    border-color: white;
  }
}