@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500;700&display=swap');

body {
  font-family: Work Sans, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;

  background-color: #ffffff;
  color: #000000;
  margin: 72px auto 72px auto;
  width: 600px;
}


header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 100px 0 0;
}


h2 {
  font-size: 24px;
  font-weight: 700;
  color: #007264;
}

h3 {
  font-size: 18px;
  font-weight: 700;
  color: #007264;
}



nav {
  font-family: Work Sans, sans-serif;
	font-size: 24px;
	color: #007264;
}

nav a {
  	margin: 0 0 0  32px;
}

nav a.selected {
  	font-weight: 700;
}

a {
  font-family: Work Sans, sans-serif;
  font-weight: 500;
	color: #007264;
  text-decoration: none;
}

a:hover {
  font-family: Work Sans, sans-serif;
  font-weight: 700;
  color: #007264;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  line-height: 1.5;
  max-width: 500px;
  padding: 20px 0 20px 0;
}


section h1, h2 {
  grid-column:  3 / span 8;
}

section h4, h5 {
  grid-column: 2 / span 10;
}



section.centred img {
  max-height: 500px;
  padding: 10px 0 20px 0
}



section.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  line-height: 1.5;
  font-size: 12px;
  color: #007264;
}

section.footer a.home {
  margin: 16px 0 32px 0;
}

section.footer div.credit {
  margin: 0 0 0 0;
  font-size:  12px;
}

section.footer img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  max-width: 25%;
}






@media (max-width:1280px) {
  body {
    width:  auto;
    margin: 72px 32px 72px 32px;
  }
  

  @media (max-width:1180px) {
   section.featured {
 display: none;
}
  section.featured img:hover {
    max-height: 178px;
  }
}
  
  @media (max-width:950px) {
    header {
      flex-direction: column;
      align-items: center;
 } 
 header img {
    width: 100%;
  }
    }
    nav {
      margin: 24px 0 0 0;
    }
    nav a {
      margin: 0 8px 0 8px;
    }
    h1 {
      font-size: 36px;
    }
    h2 {
      font-size: 24px;
    }
}

@media (max-width:660px) {
  body {
  }
  section {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 16px;
  }
section h1, h2, h4, h5, 
  section.about div.description,
  section.about div.photo,
  section.contact div.form
  {
  grid-column:  1 / span 4;
}
}
  
@media (max-width:524px) {
  nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  nav a {
    margin: 8px 0 0 0;
  }
  section.work div.credited {
    font-size: 10px;
}
section.work video {
  visibility: hidden;
}
section.about {
   display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}