/* styling for top nav button pages */
/*-- common fonts and colour -----------------------------------*/
@font-face {
  font-family: "AvenirNext";
  src: url("../fonts/Avenir_Next.ttf");
}
@font-face {
  font-family: "RalewayExtraBold";
  src: url("../fonts/Raleway-ExtraBold.ttf");
}
:root {
  --bluegreenlight: rgb(162, 201, 213);
  --bluegreen2: rgb(130, 185, 195);
  --bluegreen3: rgb(74, 144, 150);
  --bluegreen4: rgb(96, 161, 175);
  --bluegreendark: rgb(1, 90, 120);
  --browntan: rgb(221, 225, 224);
  --brown2: rgb(215, 201, 175);
  --browndark: rgb(176, 143, 108);
}
/*--------------------------------------------------------------*/
body {
  display: grid;
  grid-template:
    "imghead imghead" min-content
    "intro intro" auto
    "content advert" auto
    "footer footer" / minmax(150px, 4fr) 1.2fr;
	margin: 0px;
	padding: 0px;
}
header {
  grid-area: imghead;
}
#headerImage {
  display: block;
  width: 100%;
  position: center;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0.1));
}
.introgrid {
  grid-area: intro;
  /*width: 75%;*/
  height: auto;
  margin-left: 5vw;
  margin-right: 5vw;
}
.contentgrid {
  grid-area: content;
  height: auto;
  margin-left: 5vw;
  margin-right: 5vw;
}
h1 {
  text-align: left;
  color: var(--bluegreendark);
  font-family: "RalewayExtraBold";
  font-size: 2.5rem; /*40px*/
}
h2 {
  text-align: left;
  color: var(--bluegreendark);
  font-family: "RalewayExtraBold";
  font-size: 1.375rem; /*22px*/
}
h3 {
  text-align: left;
  color: var(--bluegreendark);
  font-family: "RalewayExtraBold";
  font-size: 1.375rem; /*22px*/
}
p {
  /*line-height: 1px;   /* within paragraph */
  margin-top: 0.6em;
  margin-bottom: 0.6em; /* between paragraphs */
  }
.paragraph {
  text-justify: inter-word;
  color: var(--bluegreendark);
  font-family: "AvenirNext";
  font-size: 1.125rem; /*18px*/
}
.advertgrid {
  grid-area: advert;
  margin: 0;
  padding: 0;
}
.sideimage {
  display: block;
  max-width: 90%;
  margin: 1em auto;
}
.footergrid {
  grid-area: footer;
}
/*--------------------------------------------------------------*/
.card {
  display: grid;
  grid-template:
    "img title" min-content
    "img info" min-content
    "img content" auto / minmax(50px, 1fr) 3fr;
  grid-column-gap: 1.5em;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
  padding: 1em;           /* keeps image and text away from card border */
  margin-bottom: 1.2em;   /* vertical space between cards */
}
.card-img {
  grid-area: img;
  max-width: 100%;
}
.card-title {
  grid-area: title;
  margin: 0;              /* make text stick to top of grid area*/
  font-family: "RalewayExtraBold";
  font-size: 1.375rem; /*22px*/
  color: var(--bluegreendark);
}
.card-info, .card-info-right{
  grid-area: info;
  margin: 0;
  font-family: "AvenirNext";
  font-size: 1.25rem; /*20px*/
  color: var(--bluegreendark);
  font-weight: bolder;
}
.card-info-right {
  text-align: right;
}
.card-content {
  grid-area: content;
  margin: 0;
  font-family: "AvenirNext";
  font-size: 1.125rem; /*18px*/
  color: var(--bluegreendark);
}
.card-bold {
  font-weight: bolder;
}
.card a:link {         /* hyperlink style */
  color: var(--bluegreendark);
  background-color: transparent;
  text-decoration: none;
}
.card a:visited {
  color: var(--browndark);
  background-color: transparent;
  text-decoration: none;
}
.card a:hover {
  color: var(--bluegreen3);
  background-color: transparent;
  text-decoration: underline;
}
.card a:focus {
  outline: 3px solid var(--browndark);
}
/*--------------------------------------------------------------*/
@media screen and (max-width: 30em) {
  body {
  display: grid;
  grid-template:
    "imghead imghead" min-content
    "intro intro" auto
    "advert advert" auto
    "content content" auto
    "footer footer" / minmax(150px, 4fr) 1fr;
  }
  .sideimage {
    max-height: 50vh;
  }
  .card {
    grid-template:
    "img title" min-content
    "img info" min-content
    "img info2" min-content
    "content content" auto / minmax(50px, 1fr) 3fr;
    grid-column-gap: 0.2em;
    padding: 0.2em;
    margin-bottom: 0.5em;
  }
  .card-info p, .card-info-right p {
    font-size: 1rem; /*15px*/
    margin: 0;
  }
  .card-info-right {
    grid-area: info2;
    text-align: left;
  }
  h1 {
    font-size: 1.25rem; /*20px*/
  }
  h2 {
    font-size: 1.125rem; /*18px*/
  }
}
@media screen and (min-width: 30em) and (max-width: 62.5em) {
    body {
  display: grid;
  grid-template:
    "imghead imghead" min-content
    "intro intro" auto
    "advert advert" auto
    "content content" auto
    "footer footer" / minmax(150px, 4fr) 1fr;
  }
  .sideimage {
    max-height: 50vh;
  }
  .card {
    grid-template:
    "img title" min-content
    "img info" min-content
    "img info2" min-content
    "content content" auto / minmax(50px, 1fr) 3fr;
    grid-column-gap: 0.5em;
    padding: 0.5em;
    margin-bottom: 0.6em;
  }
  .card-info p, .card-info-right p {
    font-size: 1.125rem; /*18px*/
    margin: 0;
  }
  .card-info-right {
    grid-area: info2;
    text-align: left;
  }
  h1 {
    font-size: 1.875rem; /*30px*/
  }
}
/*--------------------------------------------------------------*/