@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  background-color: #BEC1B0; 
  margin: 0;
}

/* fonts and text */

h1 {
  font-family: 'Libre Caslon Text', serif
}

p, li {
  font-family: 'Libre Caslon Text', serif;
}

figure { 
  display: table;
}

figcaption {
  display: table-caption;
  caption-side: bottom;
  font-style: italic;
  padding: 2px;
  width: 100%;
}

.title {
  text-align: center;
}

.subtitle {
  text-align: center;
}

.pcentred {
  text-align: center;  
}

/* navigation bar */

#navBar {
  position: fixed;
  left: 0;
  top: 0;
  right: 0; 
}

#navBar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #818988;
}

#navBar li {
  float: left;
}

#navBar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navBar li a:hover {
  color: black;
}

#navBar ul .active {
  background-color: #F2CF79;
}

#navBar ul .active > a {
  color: black;
}

/* Custom divs */

.responsiveImage {
  width: 100%;
  height: 348px;
  object-fit: cover;
  padding-top: 48px;
}

.responsiveTwoColumnGrid {
  padding: 25px 25px 25px 25px;  
  display : grid;
  grid-template-columns: 1fr 1fr;
}

.responsiveTwoColumnGrid img {
  max-width: 100%
}

.responsiveTwoColumnGrid > * {
  padding:1rem;
}

.responsiveContainer {
  margin: auto;
  max-width: 60em;
}

.responsiveContainer img {
  width: 100%;
  display: block;
  margin: auto;
  border: 1px #000000 solid;
}

.responsiveNarrowContainer {
  margin: auto;
  max-width: 30em;
}

.main {
  padding-top: 40px
}

.main a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.main a:hover {
  text-decoration-line: underline;
}

.wideOnly {
  display:block;
}

.frame {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive design */

@media screen and (max-width: 920px) {
  .column {
      width: 100%;
  }
  .floatContainer {
      width: 100%;
  }
  table {
      width: 100%;
  }
  .responsiveContainer {
      width: 100%;
      max-width: 85%;
  }
  .responsiveTwoColumnGrid {
    display: block;
  }
  .responsiveImage {
    height: 174px;
  }

}

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