:root {
--accentcolour:  hsl(130, 20%, 48%);	/* used for headings, nav link gradients. Green.  */
--primarycolour:  hsl(130, 40%, 60%);	/* Links. A bit brighter green */
--desatcolour:  hsl(130, 40%, 60%);
--brightcolour: hsl(130, 60%, 60%); 
--activenav: hsl(360, 20%, 10%); 		/* link of the page we're on */
--activenavbg: hsl(30, 60%, 90%); 		/* background of the active link */
--navbg: hsl(30, 50%, 80%); 		/* background of the regular nav */
  --navhover: hsl(30, 40%, 60%); 		/* hover of the regular nav */
--backgroundmode: hsl(60, 60%, 94%);	/* cream */
--formbgcolour: #c3f2b0;
--highlightcolour: #9ccc88;
--textcolour: hsl(360, 20%, 10%);	/* deep brown */
--contrastcolour: hsl(180, 50%, 50%);
}

BODY {
background: var(--backgroundmode) ;
font-family: Montserrat, Roboto, Futura, Calibri, Verdana, sans-serif;
color: var(--textcolour);
}

A:link {	COLOR: var(--primarycolour)}
A:visited {	COLOR: var(--desatcolour)}
A:hover {	COLOR: var(--brightcolour)}
A:active {   COLOR: var(--brightcolour)}

HR {COLOR: #2c2c2c; WIDTH: 80%}

H1 {COLOR: var(--accentcolour); text-decoration: none; font-size: 1.8em; text-align: center; text-transform: uppercase; }
H2 {COLOR: var(--accentcolour); text-decoration: none; font-size: 1.6em;}
H3 { COLOR: var(--desatcolour); text-decoration: none; font-size: 1.4em;}
H4 {COLOR: var(--desatcolour); font-family: Montserrat, Roboto, Futura, Calibri, Verdana, sans-serif;}

.sitename {
  font-family: Britannic, Harrington; 
  font-size: 2.2em; 
}

* {  box-sizing: border-box;}

.box {
border-style:solid;
border-width:4px;
border-color: var(--desatcolour);
background-color: var(--backgroundmode);
border-radius: 7px;
padding: 0.5em 0.3em 0.6em 0.3em;
box-sizing: border-box;
text-align: left;
min-width: 70px;
}

.img-center {display: block;
  margin-left: auto;
  margin-right: auto;
width: 80%;
}

.quoteimg { shape-outside: circle(); float: inline-start;
transform: rotate(0deg);
transition: transform 8s ease-in-out;
}

.quoteimg:hover { 
/* animation: tumble 15s ease-in-out 400ms normal forwards running;
animation-delay: 0.3s;
*/
transition-delay: 0.3s;
  transform: rotate(180deg);
}

@keyframes tumble {
  from { rotate: 0deg; }
 50% { rotate: 180deg; }
  to { rotate: 0deg; }
}



.quotebox {display: grid ;
grid-template-columns:  1fr ;
justify-content: space-evenly;
box-sizing: border-box;
margin: 0.5em 1em 0.5em 1em;
grid-gap: 1em;
border: 1px solid var(--primarycolour);
padding: 1rem 3rem;
border-radius: 5px;
}

.small {font-size: 0.8em;}

nav {
margin: 0rem auto;
  text-align: center;
width: 100%;
font-size: 1em;
line-height: 200%;
font-family: Montserrat, Roboto, Futura, Calibri, Verdana, sans-serif;
box-sizing: border-box;
 background-color: var(--navbg); 
}

nav a {
text-decoration:none;
 color: var(--backgroundmode);
font-size: 1.5rem;
font-weight: 700;
display: inline-block;
padding: 0.3rem 0.5rem;
word-spacing: 0.2em;
width: 100%; 
}
nav a:link, nav a:visited {color: var(--accentcolour);}

nav a:hover {
 background-color: var(--navhover);
}


nav a:focus {
  background-color: var(--brightcolour);
  color: var(--textcolour);
}


.activenav {
color: var(--activenav);
background-color: var(--activenavbg);
}

nav ul {
  list-style-type: none;
margin: 0; 
padding: 0;
display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
nav li {
  display: inline-block;

}

.spacer {
width: 95%;
height: 56px;
border-style:solid;
border-color: var(--backgroundmode);
border-width: 0em;
background: var(--backgroundmode);
padding: 2em;
}


.highlight {
font-size: 1.1em;
color: var(--highlightcolour);
}

.contrast { font-size: 1.1em; color: var(--contrastcolour); }
.quote {
font-family: georgia, helvetica, sans-serif;
font-size: 1.1em;
}

img {
  max-width: 100%;
min-width: 60px;
  height: auto;
}

.featureimage {
  background-size: cover; 
  background-position: center ; 
  width: 100%; 
  margin: 0;
  padding: 0; 

}

div .featureimage img   {
  filter: saturate(110%) ;
}


/*	Layout section	*/

#content-container {
  display: grid;
grid-template-areas: "topbanner topbanner topbanner"
  "imagebox imagebox imagebox"
  "main main main "
  "footer footer footer";

grid-template-columns:  1fr 1fr minmax(min-content, 1fr) ;
grid-template-rows: auto;
grid-gap: 0em;
box-sizing: border-box;
padding: 0em;

 }

#top-banner {
 grid-area: topbanner;
text-align: center; 
  max-width: 100%;
  height: auto;
}
  
#mainbox {
  grid-area: main;
    height: 100%;
box-sizing: border-box;
padding: 1rem;
 justify-self: center;
max-width: 70ch; 	/* keeps the text easier to read */
}


#imagebox {
grid-area: imagebox;
box-sizing: border-box;
min-width: 70px;
overflow: hidden; 
height: clamp(250px, 300px, 550px) ;
display: grid;
justify-content: center;
  align-content: center;
  height: 200px;
  overflow: hidden;

  background-image: url("im/apr-25-5-1000.jpg");
   background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;


}
#footer {
  grid-area: footer;
    height: 100%;
box-sizing: border-box;
padding: 1em 1em 1em 2em;
 justify-self: center;
text-align: center;
}



.articlegrid {
display:grid;
grid-template-columns: minmax(95px, 105px) minmax(100px, 1fr);
column-gap: 1em;
}

img.rounded {border-radius: 30%;}

.trustees {
  list-style-type: none;
margin: 0; 
padding: 1em 1.5em ;
  line-height: 300%; 
display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr;
}



/* Responsive layout - makes a one column layout instead of a two-column layout */

@media (max-width: 700px) {
  nav ul {
   display: grid; 
  grid-template-columns: 1fr 1fr  ;  
      }

  #mainbox figure picture img{
	display: block;
	 margin: auto;
   padding: 0.1em 0em;
   }	
  .quotebox {padding: 1rem 2rem;} 
 .trustees {  
     grid-template-columns:  1fr 1fr; } 
}



@media (max-width: 400px) {
   nav ul {
   display: grid; 
  grid-template-columns: 1fr  ;  
      }
 .quotebox {padding: 1rem ;} 
.articlegrid { display: block;}
 .trustees {      grid-template-columns:  1fr 1fr; } 

}

/* wider borders for desktop */
@media (min-width: 1000px) {
#content-container { padding: 1em 0em; }
.gallerybox figcaption {max-width:250px;}
}




input[type=submit] {
  background-color: var(--formbgcolour);
  color: var(--textcolour);
  padding: 1em 3em;
  margin: 1.5em 1em 1.5em 1em;
  border: none;
  border-radius: 4px;
}

input[type=email] {
  width: calc(100% - 1em);
  margin: 0em 1em;
  padding: 1em;
  border: 3px solid var(--accentcolour);
  border-radius: 6px;
  box-sizing: border-box;
  resize: vertical;  
}

input[type=text], textarea{
  width: calc(100% - 1em);
  margin: 0em 1em;
  padding: 1em;
  border: 3px solid var(--accentcolour);
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
 select{
  background-color: var(--formbgcolour);
  color: var(--textcolour);
  padding: 1.5em 3em;
  border: none;
  border-radius: 4px;
  }
 figure {
margin:0;
padding: 0em;
}
img.survey {
  border-radius: 15px;
   border: 2px solid var(--highlightcolour);
   overflow: hidden;
}
figure figcaption {
 padding-top: 1rem;
}

/* cards layout */
.cards {
display: grid; gap: 2em; justify-content: center; 
  @media screen and (min-width: 660px) {
    grid-template-columns: repeat(2, minmax(300px, 360px));
  }
    @media screen and (min-width: 1100px) {
    grid-template-columns: repeat(3, minmax(300px, 360px));
  }

}
.card {
  border: 5px solid var(--accentcolour); max-width: 360px; 
 border-radius: 1.2rem; overflow: hidden;
  box-shadow: 2px 1px 10px rgba(0, 0, 0, .35);
background: hsla(360, 40%, 30%, 0.7);

}
.cardinfo { padding: 2em;
color: white;
}
.card:hover, .card:focus {
  background: hsla(360, 55%, 35%, 0.8);
}

.cardimage {
max-height: 400px; width: auto;
}
.cardimage img {
max-width: 110%;
display: block;
}

@media (prefers-color-scheme: dark) {
  :root {
   --accentcolour:  hsl(130, 20%, 58%);	/* used for headings, nav link gradients. Green.  */
--primarycolour:  hsl(130, 50%, 60%);	/* Links. A bit brighter green */
--desatcolour:  hsl(130, 40%, 60%);
--brightcolour: hsl(130, 60%, 60%); 
--backgroundmode: hsl(340, 20%, 5%);	/* chocolate-black */
     --formbgcolour: #436e31;
  --highlightcolour: #9ccc88;
 --textcolour: hsl(60, 80%, 92%);	/* cream */ ;
--contrastcolour: hsl(180, 50%, 50%);
   }

hr { color: var(--textcolour); }
  body {font-size: 1.1em;}
  #top-banner img { box-shadow: 0em 0em 35px #ffffff; border-radius: 7px;}
}