@charset "UTF-8";
/* Poppins-Regular */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Poppins-Regular.woff") format("woff");
  font-display: swap;
}

html,
body {
  max-width: 720px;
  margin: 1em auto;
  padding: 0 0.7em;
  font-family: "Poppins", sans-serif;
  background-color: white;
}

a {
  color: #1a27c9;
  text-decoration: none;
  transition: all 75ms ease-in;
  display: inline;
}

a:hover {
  color: #fff;
  background-color: #1a27c9;
}

/* We have a single navigation element, in a different colour, that links back
   to the home page. The rest have the normal link styling. */
header {
  margin-bottom: 1.5em;
  font-size: 1.4em;
}

/* This is a hack to clear the header floats. */
header:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

header nav ul {
  margin: 0;
  padding: 0;
}

header nav ul li {
  float: left;
  list-style-type: none;
}

header nav ul.home {
  float: left;
}

header nav ul.extra {
  float: right;
}

header nav ul.home li a {
  color: #fff;
  background-color: #1a27c9;
  border-radius: 2px;
}

header nav ul.home li a:hover {
  color: #1a27c9;
  background-color: rgba(26, 39, 201, 0.1);
}

header nav ul.extra li:last-child a {
  margin-right: 0;
}

header nav ul.extra li a {
  margin: 0 0.6em;
  color: #aaa;
  text-transform: lowercase;
}

header nav ul.extra li a:hover {
  color: #1a27c9;
  background-color: transparent;
}

header nav ul.home li a {
  margin-left: 0; /* Since this navigation element is always the leftmost, we
                       override it to not have any left margin (whereas the
                       other links in the nav area do. ) */
  padding: 0 0.4em;
}

h1 {
  font-size: 1.6em;
  margin: 1em 0;
}

h2 {
  font-size: 1.6em;
  padding-bottom: 0.1em;
  border-bottom: 1px solid #ccc;
}

h3 {
  font-size: 1.2em;
  padding-bottom: 0.1em;
  border-bottom: 1px solid #ccc;
}

footer {
  border-top: 2px solid #eee;
  margin-top: 2em;
  margin-bottom: 2em;
  overflow: hidden;
  font-size: 0.8em;
  line-height: 1.4;
  opacity: 0.6;
  transition: opacity 100ms ease-in;
}

footer:hover {
  opacity: 1;
}

footer div.info {
  float: left;
}

footer div.contact {
  float: right;
}

footer div.contact a {
  font-style: normal;
}

footer div.contact p {
  text-align: right;
}

footer div p {
  margin: 1em 0 0;
}

article p {
  text-align: justify;
}

.screen-reader-text {
  position: absolute;
  /* The next two lines are among the worst shite I've ever written. */
  top: -9999px;
  left: -9999px;
}

@media screen and (max-width: 600px) {
  article p {
    text-align: justify;
  }

  .extra {
    display: none;
  }

  footer div.info,
  footer div.contact {
    float: none;
  }

  footer div.contact p {
    text-align: left;
  }
}