/* weather forecast and webcam 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
    "camera advert" auto
    "wind 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: 75vw;
  height: auto;
  margin-left: 5vw;
  margin-right: auto;
}
.cameragrid {
  grid-area: camera;
  margin-left: 5vw;
  height: auto;
}
.windforecastgrid {
  grid-area: wind;
  margin-left: 5vw;
}
.advertgrid {
  grid-area: advert;
  margin: 0;
  padding: 0;
}
#cameraImage {
  display: block;
  margin: 0 auto;
}
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*/
}
.paragraph .highlightedtext {
  font-weight: bolder;
}
.sideimage {
  display: block;
  max-width: 90%;
  margin: 1em auto;
}
.forecastbox {
  min-height: 480px;
}
.footergrid {
  grid-area: footer;
}
.hyperLink a:link {         /* hyperlink style */
  color: var(--bluegreen3);
  background-color: transparent;
  text-decoration: none;
}
.hyperLink a:visited {
  color: var(--browndark);
  background-color: transparent;
  text-decoration: none;
}
.hyperLink a:hover {
  color:var(--browntan);
  background-color: transparent;
  text-decoration: underline;
}
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
    "camera camera" auto
    "wind wind" auto
    "footer footer" / minmax(150px, 4fr) 1fr;
  }
  .sideimage {
    max-height: 50vh;
  }
  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
    "camera camera" auto
    "wind wind" auto
    "footer footer" / minmax(150px, 4fr) 1fr;
  }
  .sideimage {
    max-height: 50vh;
  }
  h1 {
    font-size: 1.875rem; /*30px*/
  }
}
/*--------------------------------------------------------------*/