:root {
  --virtual-screen-scale: 98;

  --main-grid-area: "nav-grid-area main-content-grid-area";
  --main-grid-rows: auto;
  --main-grid-columns: 1fr 3fr;
  --main-grid-row-gap: 0;
  --main-grid-col-gap: 10px;

  --footer-grid-area: "footer-tl-grid-area footer-br-grid-area";
  --footer-grid-rows: auto;
  --footer-grid-columns: 1fr 1fr;
  --footer-grid-row-gap: 0;
  --footer-grid-col-gap: 2%;

  --main-content-div-padding: 0 5px;

  --nav-div-width: 280px;
  --nav-div-padding: 0px 10px;

  --nav-button-margin: 5px 0;
  --nav-button-width: 260px;
  --nav-button-padding: 10px;
  --nav-button-radius: 10px;

  --footer-padding: 5px 0;

  --serif-typeface:   "Times New Roman", serif;
  --sans-serif-typeface: Arial, sans-serif;

  --h1-fontsize: 1.65em;
  --h2-fontsize: 1.4em;
  --h3-fontsize: 1.3em;
  --h4-fontsize: 1.1em;
  --p-fontsize: 13pt;

/* Background images and colours */
  --header-bg-colour: #27448c;
  --title-text-colour: #99b;
  --body-bg-colour: #99b;
  --nav-bg-colour: #99b;
  --footer-bg-colour: #99b;
  --nav-button-bg-colour: #aab;
  --nav-button-bg-hover-colour: #acb;
  --nav-button-border-colour: #889;
  --footer-text-colour: #333;

  --alert-margin: 0;
  --alert-padding: 6px 10px;
  --red-alert-font-colour: white;
  --red-alert-bg-colour: crimson;
  --yellow-alert-font-colour: black;
  --yellow-alert-bg-colour: yellow;
  --offwhite-alert-font-colour: black;
  --offwhite-alert-bg-colour: #f0eaf6;
}
@media screen and (max-width: 800px) {
:root {
  --main-grid-area:
    "nav-grid-area"
    "main-content-grid-area";
  --main-grid-rows: 1fr auto;
  --main-grid-columns: auto;
  --main-grid-row-gap: 20px;
  --main-grid-col-gap: 0;

  --nav-div-width: var(--virtual-screen-scale)%;

  --footer-grid-area: 
    "footer-tl-grid-area"
    "footer-br-grid-area";
  --footer-grid-rows: auto 1fr;
  --footer-grid-columns: auto;
  --footer-grid-row-gap: 5px;
  --footer-grid-col-gap: 0;
 }
}
body {
  margin: 0; /* Set to 0 to help eliminate any scrollbars */
  background-color: var(--body-bg-colour);
  /* overflow-x: hidden; /* ---> Hide horizontal scrollbar */
}
h1, h2, h3, h4, h5 { font-family: var(--sans-serif-typeface); }
h1 { font-size: var(--h1-fontsize); }
h2 { font-size: var(--h2-fontsize); }
h3 { font-size: var(--h3-fontsize); }
h4 { font-size: var(--h3-fontsize); }
p, li, td { font-size: var(--p-fontsize); }

#body-div {
 /* Set the following to help eliminate any scrollbars */
 /* min-height: 96vh; */
  height: var(--virtual-screen-scale)vh;
  width: var(--virtual-screen-scale)vw;
  margin: 6px;
  background-color: var(--body-bg-colour);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: auto;
  grid-row-gap: 5px;
  grid-template-areas:
    "header-area"
    "main-area"
    "footer-area";
}
#header-div {
  grid-area: header-area;
  text-align: center;
  background-color: var(--header-bg-colour); 
}
#main-grid-div {
  grid-area: main-area;
  display: grid;
  grid-template-areas: var(--main-grid-area);
  grid-template-rows: var(--main-grid-rows);
  grid-template-columns: var(--main-grid-columns);
  grid-row-gap: var(--main-grid-row-gap);
  grid-column-gap: var(--main-grid-col-gap);
}
#main-content-div {
  padding: var(--main-content-div-padding);
  grid-area: main-content-grid-area;
  /* overflow-x: auto; /* ---> Do not hide horizontal scrollbar */
}
#main-content-div img {
  width: 99%;
  object-fit: cover;
}
.title-text {
  font-weight: bold;
  font-size: var(--h2-fontsize);
  text-align: center;
  color: var(--title-text-colour);
}
/* Floats for photos etc to the left or right of text on blog posts etc*/
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
#nav-div {
  grid-area: nav-grid-area;
  width: var(--nav-div-width);
  padding: var(--nav-div-padding);
  text-align: center;
  align-items: center;
  background-color: var(--nav-bg-colour);
}
.nav-button {
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  border-style: inset;
  margin: var(--nav-button-margin);
  padding: var(--nav-button-padding);
  width: var(--nav-button-width);
  border-width: 5px;
  border-radius: var(--nav-button-radius);
  border-color: var(--nav-button-border-colour);
  background: var(--nav-button-bg-colour);
}
.nav-button:hover {
  background: var(--nav-button-bg-hover-colour);
}
.nav-button a {
  text-decoration: none;
}
#footer-div{
  display: grid;
  grid-area: footer-area;
  grid-template-areas: var(--footer-grid-area);
  grid-template-rows: var(--footer-grid-rows);
  grid-template-columns: var(--footer-grid-columns);
  grid-row-gap: var(--footer-grid-row-gap);
  grid-column-gap: var(--footer-grid-col-gap);
  text-align: center;
  padding: var(--footer-padding);
  font-family: var(--sans-serif-typeface);
  background-color: var(--footer-bg-colour);
  color: var(--footer-text-colour);
}
#footer-div-tl {
  grid-area: footer-tl-grid-area;
}
#footer-div-br {
  grid-area: footer-br-grid-area;
}
#footer-div-br a {
  text-decoration: none;
}
#footer-div-br a:link, #footer-div-br a:visited {
  color: #406840;
  font-weight: 700;
}
#footer-div-br a:hover {
  color: #186818;
}

.centred {
  text-align: center;
}
.alert {
  margin: var(--alert-margin);
  padding: var(--alert-padding);
}
.offwhite-alert {
  margin: var(--alert-margin);
  padding: var(--alert-padding);
  color: var(--offwhite-alert-font-colour);
  background-color: var(--offwhite-alert-bg-colour);
}
.yellow-alert {
  margin: var(--alert-margin);
  padding: var(--alert-padding);
  color: var(--yellow-alert-font-colour);
  background-color: var(--yellow-alert-bg-colour);
}
.red-alert {
  margin: var(--alert-margin);
  padding: var(--alert-padding);
  color: var(--red-alert-font-colour);
  background-color: var(--red-alert-bg-colour);
}