/* Style global attributes and text elements */
@font-face {
  font-family: 'PT Sans Caption';
  src: url('https://www.anapana.net/fonts/ptsanscaption-regular-webfont.woff2') format('woff2'),
       url('https://www.anapana.net/fonts/ptsanscaption-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PT Sans Caption';
  src: url('https://www.anapana.net/fonts/ptsanscaption-bold-webfont.woff2'),
          ('https://www.anapana.net/fonts/ptsanscaption-bold-webfont.woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: hsl(270, 94%, 25%);
}


html {font-size: 100%;
    font-family: Verdana, Tahoma, sans-serif;
}

h1, h2, h3, h4, a {
  font-size: 100%;
  font-family: 'PT Sans Caption', Geneva, Verdana, Tahoma, sans-serif;
}


h1 { 
  font-size: 2.25rem;
  font-weight: bold;
  letter-spacing: -0.5px;
  color:hsl(270, 75%, 30%);
  padding-bottom: 0px;
}

h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color:hsl(270, 75%, 40%);
  margin-top: 2rem;
  margin-bottom: 0rem;
}

h3 {
  font-size: 1.25rem; 
  font-weight: bold;
  margin-bottom:  0rem; 
  color: hsl(270, 75%, 50%);
}

h4 {
  font-size: 1.15rem;
  font-weight: bold;
  margin-bottom: 0rem;
  margin-top: 1rem;
  color: hsl(270, 75%, 60%);
}

p {margin-top: 0rem ;
  font-size: 1.15rem;
  line-height: 1.5;
}

a:link {color:black; text-decoration: none;}
a:visited {color:black; text-decoration: none;}
a:hover {color:hsl(90, 75%, 50%); font-weight:bold; text-decoration:none;}
a:active {color:hsl(90, 75%, 50%); text-decoration: none}

ul {
  list-style-type: none;
}

ol {margin-left: 2vw;}

li.d {
  margin-top: 0;
  padding-top: 1vw;
  padding-right: 1vw;
  font-size: 1.15rem;
  line-height: 1.5;
}

li.d::before{
  content: "🔹";
  padding-right: 1vw;
}

img {
  max-width: 90%;
  margin-top: 0rem;
  display: block;
}

/* Style the HEADER */

header {
  min-height: 12vw;
  display: block;
  background: linear-gradient(285deg, hsl(230, 78%, 72%), hsl(260, 85%, 30%));
  background-color: hsl(260, 85%, 36%);
  padding: 2vw 0 1vw 21vw;
  text-align:left;
  color: white;
}

/* Style the floatbox for the logo */

.floatbox{
  float: left;
  padding-top: 1vw;
  padding-left: 3vw;
  margin-left: -18vw;
  margin-right: 10px;
  margin-top: 0vw;
}

@media screen and (max-width: 350px) {
  .floatbox {display: none;}
}

/* Style the TOPNAV  */

.topnav {
  overflow: hidden;
  background: linear-gradient(90deg, hsla(197, 14%, 57%, 1) 0%, hsla(192, 17%, 94%, 1) 100%);
  background: -moz-linear-gradient(90deg, hsla(197, 14%, 57%, 1) 0%, hsla(192, 17%, 94%, 1) 100%);
  background: -webkit-linear-gradient(90deg, hsla(197, 14%, 57%, 1) 0%, hsla(192, 17%, 94%, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#8399A2", endColorstr="#EEF2F3", GradientType=1 );;
}

/* Style the topnav links */
.topnav a {
  float: left;
  color: hsl(200, 12%, 20%);
  padding: 1rem;
  text-decoration: none;
}

.topnav a:hover {
  background-color: hsl(223, 67%, 74%);
  color: hsl(90, 75%, 35%);
}

.icon {
  height: 3rem;
  width: 7rem;
  display: block;
}

/* style active menu item */
.topnav a.active {
  background-color: hsl(261, 75%, 31%);
  color: white;
}

.topnav a:hover {color:hsl(90, 75%, 50%); font-weight:bold; text-decoration:none;}


/* hide menu icon until on narrow screen */
* .topnav .icon {
  display: none;
}

/* hide menu items on narrow screen, except first item and menu icon */
@media screen and (max-width: 700px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* Style menu items in drop-down menu on narrow screen */
@media screen and (max-width: 700px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}



/* THREE COLUMNS IN MAIN LAYOUT ON PAGE /*
/* Create a flexbox container for three columns */
.row {  
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

/* Create three unequal columns that sit next to each other */
/* Sidebar/LEFT column */

.left {
  flex: 20vw;
  background: hsl(230, 78%, 96%);
  background: linear-gradient(0deg, hsl(0, 0%, 100%), hsl(230, 78%, 96%));
  padding: 2vw 1vw; 
}

/* style left responsive menu */

@media screen and (min-width: 651px) {
  .left a {
    display: block;
    padding: 10px 0px;
    color: hsl(270, 66%, 50%);
    text-align: left;
    text-decoration: none;
  }
  .left a:hover {color:hsl(90, 75%, 50%); font-weight:bold; text-decoration:none;}
  .emphasis {font-weight: bold;}

}

@media screen and (max-width: 650px) {
  .left {
    display: none;
  }
}

/* Style the CENTRE column */
/* Style the Breadcrumbs menu */

.breadcrumb {
  padding: 0 0.5rem;
}

.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after {
  display: inline-block;
  margin: 0 .25rem;
  content: "→";
}

.center {
  flex: 48vw;
  padding: 2vw 0.5vw;
  background-color: white;
}

.center h1, .center h2 {text-align: center;}
.center h3, .center h4 {padding-left: 1vw;}
.center p {padding: 5px 1vw 0px;
  line-height: 1.5;}
.center a:link {color:black; text-decoration: underline;}
.center a:hover {color:hsl(90, 75%, 50%); font-weight:bold; text-decoration:none;}
.center a:active {color:hsl(90, 75%, 50%); text-decoration: none}
.center img {
  padding-top: 1rem;
}

.quote {
  margin-left: 2vw;
  margin-right: 0vw;
  font-size: 1.05rem;
}

.bold-quote {
  margin-left: 2vw;
  margin-right: 3vw;
  font-size: 1.15rem;
  font-weight: bold;
}

.section {
  margin-top: 2rem;
}

.section p {
  margin-left: 6vw;
  padding-top: 0rem;
  margin-top: 0rem;
  margin-bottom: 0rem;
  font-size: 1rem;
}


.next {width: 100%;}
.next th {background: hsla(197, 14%, 57%, 1);

  background: linear-gradient(90deg, hsla(197, 14%, 57%, 1) 0%, hsla(192, 17%, 94%, 1) 100%);
  background: -moz-linear-gradient(90deg, hsla(197, 14%, 57%, 1) 0%, hsla(192, 17%, 94%, 1) 100%);
  background: -webkit-linear-gradient(90deg, hsla(197, 14%, 57%, 1) 0%, hsla(192, 17%, 94%, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#8399A2", endColorstr="#EEF2F3", GradientType=1 );
}
.next td.nav {background: hsla(197, 14%, 57%, 1);
  background: linear-gradient(90deg, hsla(197, 14%, 57%, 1) 0%, hsla(192, 17%, 94%, 1) 100%);
  background: -moz-linear-gradient(90deg, hsla(197, 14%, 57%, 1) 0%, hsla(192, 17%, 94%, 1) 100%);
  background: -webkit-linear-gradient(90deg, hsla(197, 14%, 57%, 1) 0%, hsla(192, 17%, 94%, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#8399A2", endColorstr="#EEF2F3", GradientType=1 );
}
.next td.nav {font-weight: bold;}

/* Style the RIGHT column */
.right {
  flex: 30vw;
  background-color: white;
  padding: 0, 0vw;
  padding-top: 2vw;
  line-height: 1.5;
}
.right h3 {
  padding-inline-start: 1vw;
  margin-top: 0.6rem;
}

/* RESPONSIVE LAYOUT - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 650px) {
    .row {
    flex-direction: column;
    }
  }

/* style the image */
.center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: auto;
}

/* style the read-more boxes */
.grid-container {
  display: grid;
 	grid-template-columns: 50% 50%;
	}
.read-more {
  border: 0.3rem solid hsl(270, 66%, 50%);
  margin: 1vw;
  padding: 1.25rem;
	padding-inline-end: 0.5rem;
	}

.read-more a {color: black;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    }
.read-more a:hover {
      color: hsl(90, 75%, 50%);
    }

.read-more p {font-size: 1rem;}

.read-more-blue {
  border: 0.3rem solid hsl(240, 50%, 50%);
  margin: 1vw;
  padding: 1.25rem;
	padding-inline-end: 0.5rem;
}

.read-more-blue p {font-size: 1rem;}
.read-more-blue a:hover {color: hsl(90, 75%, 35%)}

/*-- Style the download boxes */
.floatbox-r {
  float: left;
  margin-right: 2rem;
}

/*.grid-container {
  display: grid;
 grid-template-columns: 50% 50%;
}*/

.download {
  border: 0.3rem solid hsl(0, 75%, 50%);
  margin: 1vw;
  margin-top: 25px;
  padding: 1.25rem;
  padding-inline-end: 0.5rem;
}

.download a {color: black;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
  }
.download a:hover {
    color: hsl(90, 75%, 50%);
  }

.download p {
  font-size: 1rem;
  margin-top: 0;
  }

/* Style the FOOTER */

footer {
    min-height: 10vw;
    background-color: hsl(270, 94%, 25%);
    padding: 10px 10px 10px 10px;
    text-align: center;
    color: white;
  }

.copyright {
  max-width: 85ch;
  text-align: center;
  font-size: 0.9rem;
  margin-left: auto;
  margin-right: auto;
}

/* Style the footer hyperlinks */
footer a {text-decoration: none;}
footer a:link {color:white; text-decoration: none;}
footer a:visited {color:white; text-decoration: none;}
footer a:hover {color:hsl(90, 75%, 45%); font-weight:bold; text-decoration:none;}
footer a:active {color:hsl(90, 75%, 45%); text-decoration: none;}