custom.css

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin: 0;
}

/* Style the header section */
/* ************************ */

header {
  position: relative;
  background-image: url("images/banner-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  /* scale image with size of container */
  background-size: cover;
  height: 200px;
  color: white;
  /* here used for vertical centering of child elements */
  display: flex;
  box-sizing: border-box;
}
/* This creates a pseudo-element named "::after" as the last child of the header element.
By placing the pseudo-element relative to the header element (and giving it the same dimensions
as the header, we can essentially create a second layer! */
header::after {
  position: absolute;
  content: "";
  height: 200px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.65);
}

header div {
  /* center both heading elements inside this div horizontally */
  text-align: center;
  /* center the div vertically within the header element */
  margin: auto;
  /* to avoid that the div is overlayed by the header background (alternatively using position relative also fixes this */
  z-index: 10;
  /* position: relative; */
}

header div h1 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 8px;
}

header div p {
  display: block;
  font-weight: 300;
  font-size: 1.25rem;
  margin: 0;
}

/* container for navigation and main content */
/* ***************************************** */
.container {
  max-width: 800px;
  /* fixed width in combination with "margin: auto" centers the container on the page horizontally */
  margin: auto;
  box-sizing: border-box;
}

/* style nav bar  */
/* ************** */

nav {
  margin-top: 20px;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid lightgray;
}

nav ul li {
  margin: 0;
  padding: 0;
  /* remove bullet points from list elements */
  list-style: none;
}

nav a {
  /* remove underline from link elements */
  text-decoration: none;
  color: #0d6efd;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  /* margin: 0; */
  margin-bottom: -1px;
  /* use block display so that the surrounding content is aware of the elements padding! */
  display: block;
  /* it is crucial to provide flex: 1 to the a element and not to li, because flexing the li elements
  makes them use all of the space across the page. */
  flex: 1;
  box-sizing: border-box;
}

nav a:hover {
  border-color: #dee2e6;
}

.nav-link-active {
  color: #495057;
  border-color: #dee2e6 #dee2e6 white;
}

.nav-link-active:hover {
  border-color: #dee2e6 #dee2e6 white;
}

/* Style main section */
/* ****************** */
.main-heading {
  margin-top: 0;
}