* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Times New Roman", Times, serif; /* Serif us used as recommended for body content */
}

.body {
  grid-area: main;
  margin-bottom: 5pt;
  padding: 0;
}

.body > h1 {
  font-family: Arial, Helvetica, sans-serif; /* San-serif is used as recommended for all forms of headings */
  font-size: 2rem;
  margin: 0 0 7pt 0;
  padding: 0;
}

.body > h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.7rem;
  margin: 0 0 7pt 0;
  padding: 0;
}

.body > p {
  margin-bottom: 17pt;
  padding: 0;
}

.body > ul {
  padding-left: 10pt;
  line-height:180%;
}

.grid-container {
  max-width: 120rem;
  /* This ensures the website is not too wide for readability on larger screens - 120rem is equal to around 1920 pixels which is the maximum recommended website width for readability according to all websearches */
  margin: auto;
  display: grid;
  background-color: white;
  padding: 76pt 0 0 0;
  border-left: 3pt solid #000000;
  border-right: 3pt solid #000000;
}

.grid-container > div {
  padding: 10pt;
  font-size: 1.3rem;
}

.header {
  grid-area: header;
  background-color: #000000;
  text-align: center;
  color: #ffffff;
  max-width: 120rem;
  width: 100%;
  position: fixed;
  top: 0;
}

.header > h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: min(5vw, 4rem);
}

.img_01 {
  width: 50%;
  float: left;
  margin: 5pt 5pt 5pt 0;
  padding: 0;
}

.img_02 {
  width: 100%;
  margin: 5pt 15pt 5pt 0;
  padding: 0;
}

.img_97 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 120pt;
  padding: 0;
}

.img_98 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 200pt;
  padding: 0;
}

.img_99 {
  width: min(3.5vw, 40pt);
  margin: 0 5pt 0 5pt;
  padding: 0;
}

.menu {
  grid-area: menu;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: static;
  top: 0;
}

.menu li {
  margin-bottom: 7pt;
  background-color: #f0e68c;
  padding: 15pt 30pt 15pt 15pt;
  font-family: Arial, Helvetica, sans-serif;
  font-size: max(0.5vw, 1.3rem);
  /* This ensures that screens wider than 3770pt see the menu slightly larger so the menu doesn't look too small for the larger screen but limits font size reduction of the menu to 16pt on reduced size of screen for smaller devices to 14pt so they are still usable on smaller mobile devices */
}

.menu li:hover {
  background-color: #c0c0c0;
}

a:link,
a:visited {
  color: #0000ff;
  text-decoration: none;
}

a:hover,
a:active {
  color: #ff0000;
}

.container {
  grid-area: right;
  border-top: 0 solid #000000;
  border-bottom: 0 solid #000000;
  border-left: 0 solid #000000;
  border-right: 0 solid #000000;
  /* Having seperated border CSS allows for future changes easily incase the website owner decides to change whether the borders appear or not */
  margin-bottom: 0;
  background-color: white;
  padding: 5pt;
  color: #000000;
  text-align: center;
  height: 410pt;
}

.container > h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  padding-bottom: 10pt;
}

table { /* A table is used to neatly layout contact information as per the requirements of the text */
  border: 0;
  padding: 0;
}

.th_01 {
  border: 0;
}

.td_01 {
  border: 0;
  width: 130pt;
  font-weight: bold;
}

.footer {
  text-align: center; /* This centers the content within the footer */
  padding: 20pt 0; /* This allows for a neat vertical alignment of the footer text */
  background-color: #000000;
  width: 100%;
  max-width: 120rem;
  color: #c0c0c0;
}

.footer > p {
  margin-bottom: 17pt;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffff00;
  font-size: 1.2rem;
}

@media only screen and (max-width: 640pt) {
  .header {
    grid-area: 1 / span 8;
  }

  .menu {
    grid-area: 2 / span 8;
  }

  .body {
    grid-area: 3 / span 8;
  }

  .container {
    grid-area: 4 / span 8;
  }

  .footer {
    grid-area: 5 / span 8;
  }
}

@media only screen and (min-width: 640pt) {
  .header {
    grid-area: 1 / span 8;
  }

  .menu {
    grid-area: 2 / span 2;
  }

  .body {
    grid-area: 2 / span 6;
  }

  .container {
    grid-area: 3 / span 8;
    padding: 0 0 0 160pt;
  }

  .footer {
    grid-area: 4 / span 8;
  }

  .menu ul {
    position: fixed;
    top: 0;
    padding: 86pt 0 0 0;
  }

  .body > h1 {
    padding: 0 0 0 160pt;
  }

  .body > h2 {
    padding: 0 0 0 160pt;
  }

  .body > p {
    padding: 0 0 0 160pt;
  }

 .body > ul {
  padding-left: 180pt;}

  .img_01 {
    padding: 0 0 0 160pt;
  }

  .img_02 {
    padding: 0 0 0 160pt;
  }

  .img_98 {
    width: 350pt;
    padding: 10pt 0 0 160pt;
  }

  table {
    border: 0;
    padding: 0 0 0 160pt;
  }
}

@media only screen and (min-width: 768pt) {
  .header {
    grid-area: 1 / span 8;
  }

  .menu {
    grid-area: 2 / span 2;
  }

  .body {
    grid-area: 2 / span 4;
  }

  .container {
    grid-area: 2 / span 2;
  }

  .footer {
    grid-area: 3 / span 8;
  }

  .container {
    border-top: 0;
    border-left: 0;
    text-align: left;  }
}