.overpass-regular {
  font-family: "Overpass", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.roboto-slab-regular {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  --font-family-allpage: 'Overpass', serif;
  --font-family-links: 'Poppins', serif;
  --font-family-welcome-h1: 'Roboto Slab', serif;
  --headerColour: #003366;
  --navColour: white;
  --navColourHighlight: green;
  --welcomeAreaColour: #d1dde9;
  --linkcolour: #069;
  --blackcolour: black;
  --backgroundColourOfChildPages: #eae9ee;
  --H1Colour: var(--linkcolour);
  --H2Colour: var(--navColourHighlight);
  --borderColour: #ddd;
  font-display: swap;
}

body {
  font-family: var(--font-family-allpage);
  background: var(--backgroundColourOfChildPages);
}

.container {
  max-width: 90%;
  margin: 40px auto;
  padding: 20px;
  background-color: var(--navColour);
  border: 1px solid var(--borderColour);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.nav-bar-on-small-screen {
  display: none;
  background: black;
}

h2 {
  margin-top: 1rem;
}

.menu-bar-small {
  display: flex;
  flex-direction: row;
  margin: auto;
  /* margin-top: 1em; */
}

.menu-bar-small a {
  color: aliceblue;
  text-decoration: none;
  margin: auto;
}

.container ul,
ol {
  list-style-position: inside;
  padding-left: 20px;
}

.container li {
  margin-bottom: 1em;
}

.container strong {
  font-weight: bold;
  color: #333;
}


.container label {
  display: block;
  margin-bottom: 10px;
}


.breadcrumb {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin-top: 0.5em;
  margin-left: 5em;
}

.breadcrumb div::after {
  content: " >";
}

.breadcrumb div.active {
  color: black;
  font-weight: lighter;
}

.breadcrumb div.active::after {
  content: "";
}

.breadcrumb a {
  text-decoration: none;
  color: var(--blackcolour);
}

.breadcrumb a:hover {
  color: var(--H1Colour);
}

table {
  border-collapse: collapse;
  width: 50%;
  margin-bottom: 20px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f0f0f0;
}

@media (max-width: 760px) {
  .nav-bar-on-small-screen {
    display: block;
    height: 3em;
    align-content: center;
  }
}

@media (max-width: 427px) {

  .nav-bar-on-small-screen {
    font-size: 13px;
  }

  .breadcrumb {
    margin-left: 2em;
    font-size: 12px;
  }
}