header { padding:0; border-bottom:1px solid silver; }
main { padding:0.5rem; }
footer { margin-top:1rem; padding:0.5rem 1rem; border-top:1px solid #303030; }

a { text-decoration:none; color:blue; }
a:visited { text-decoration:none; color:blue; }
a:hover { text-decoration:underline; }

ul.breadcrumb { display:inline-block; margin:0; padding:0; }
ul.breadcrumb li { display:inline; vertical-align:middle;}
ul.breadcrumb li:not(:last-child)::after { content:"\2022"; margin-left:5px; margin-right:5px; }

.mid-dark { background-color:#707070; color:white; }
.dark { background-color:#333; color:white; }
.red { color:red; }

.d-none { display:none; }
.visually-hidden { visibility: hidden; }

.width-auto { width:auto; display:inline-block; }
.width-25 { width:25%; }
.width-15rem { width:15rem; }

.fs-small { font-size:small; }
.fs-large { font-size:large; }

.fw-bold { font-weight:bold; }
.fst-italic { font-style:italic; }
.text-decoration-line-through { text-decoration: line-through; }
.border { border:1px solid black; }

.text-black { color:black !important; }
.text-white { color:white; }

.align-middle { vertical-align:middle; }
.text-end { text-align:right; }
.float-right { float:right; }

.mt-0 { margin-top:0; }
.mt-0-25 { margin-top:0.25rem; }
.mt-1 { margin-top:1rem; }
.ms-2 { margin-left:2rem; }
.mb-0 { margin-bottom:0; }
.mb-1 { margin-bottom:1rem; }
.p-0-5 { padding:0.5rem; }
.p-1 { padding:1rem; }
.p-2 { padding:2rem; }
.pt-0 { padding-top:0; }
.ps-2 { padding-left:2rem; }
.pe-2 { padding-right:2rem; }

.navbar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* brand styling */
.navbar .brand {
  font-size: 1.3em;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1px;
}

/* make sure brand isn't treated like a normal link */
.navbar .brand a {
  color: inherit;
  text-decoration: none;
  pointer-events: none; /* optional: makes it not clickable */
}

.navbar > li {
  position: relative;
  height: 100%;
}

.navbar > li > a {
  display: block;
  padding: 14px 20px;
  color: white;
  text-decoration: none;
}

.navbar > li > a:hover {
  background: #444;
}

.submenu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #444;
  margin: 0;
  padding: 0;
  display: none;

  min-width: 100%;
  white-space: nowrap;
}

.submenu.flip {
  left: auto;
  right: 0;
}

.submenu li a {
  display: block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

.submenu li a:hover {
  background: #555;
}

.push-right {
  margin-left: auto; /* pushes this li and everything after it to the far right */
}