/* You can add your CUSTOM CSS HERE */

/* Typography */
 /* Optional, include a web font  */
 @import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100;600&family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&display=swap');

 /* The html and body selectors below set the base font for the entire page */
 html {font-size: 1rem;}
 
 /* Note: this sheet uses Serif font for body and sans for headings. You will want to change this to fit your site */
 
 body {
   font-family: 'EB Garamond', serif;
   font-weight: 400;
   line-height: 1.5;
   color: #333;
 }
 
 /* This adds space between paragraphs and list items
    NOTE: most Navigations use list items so you will need to 
    explicity set the margins on those so this rule doesn't 
    mess up your navigation styling */
 p, li {
   margin-top: 0;
   margin-bottom: 1rem;
 }
 
 /* LINKS: these should also have color and styles changed to fit your site */
 /* A link that has not been visited */
   a:link {
     color: #000080;
     text-decoration: none;
     border-bottom: 1px solid #000080;
   }
   /* A link that has been visited */
   a:visited {
     color: purple;
     border-bottom: 1px dashed purple;
   }
   /* A link that is hovered on */
   a:hover {
     color: red;
     border-bottom: 1px solid red;
   }
   /* A link that is selected */
   a:active {
     color: green;
     border-bottom: 1px solid green;
   }
 
  /* Base Styling for headings  */
   h1, h2, h3, h4, h5, h6 {
     font-weight: 600;
     font-family: 'Antonio', sans-serif;
   }
 
   /* For each of your headings at minimum set the margin, size, line-height. Adjust font-weight and other properties as needed. */
   h1 {
     font-size: 5.063em;
     line-height: 1;
     margin: 0 0 0.5em 0;
   }
 
   h2 {
     font-size: 3.375em;
     line-height: 1.2;
     margin: 1.5em 0 0.5em 0;
   }
 
   h3 {
         font-weight: 100;
     font-size: 2.25em;
     line-height: 1;
     margin: 1.5em 0 0.25em 0;
   }
 
   h4 {
     font-size: 1.5em;
     line-height: 1;
     margin: 1.5em 0 0.5em 0;
   }
 
   h5 {
     font-size: 1em;
     line-height: 1;
     margin: 1.5em 0 0.5em 0;
 
   }
 
   h6 {
     font-size: 1em;
     line-height: 1.5;
     margin: 1em 0 0 0;
     font-weight: 400; /* normal */
     text-transform: uppercase;
   }






  /* Homepage */
  /* philosophy section */
  
  .philosophy{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  
  .mission{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
  }
  
  .mission h2, .missionDescription{
    grid-column: span 3;
    text-align: center;
  }


  /* Basic Responsive Images and Video */
img,video{
  width: auto; 
  height: auto;
  max-width: 100%; 
}

/* Show Flickr Images */
#images{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}
  

  /* Fields grid */
.fields{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  grid-gap: 15px;
}
  
  /* Leaflet Map CSS */
  #mapid { height: 500px; }


  /* Image card styling */
  /* Basic Responsive Images and Video */
img,video{
  width: auto; 
  height: auto;
  max-width: 100%; 
}


.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}

.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));;
  grid-gap: 1rem;
}

/* =======
single image page styling
======= */
.prev-next{
  display:flex;
  justify-content: space-between;
}

.gallery-list ul{
  list-style-type: none;
}
.gallery-list li{
  list-style-type: none;
  display: inline-block;
  margin-right: 15px;
}