body, html {
  height: 100%;
  margin: 0;
  font-family: 'Arial';
    background-color: #323232;
    overflow-x: hidden;
    font-weight: lighter;
    -webkit-transition: fadeIn 2s;
    -moz-transition: fadeIn 2s;
    -o-transition: fadeIn 2s;
    -ms-transition: fadeIn 2s;
    transition: fadeIn 2s;
    scroll-behavior: smooth;
    -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
}

.hero-image {
  background-image: linear-gradient(rgba(255, 255, 255, 0), #262726), url("IMG_Hero_Image.jpg");
  height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
  
  .hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    border-color: white;
    padding: 10px 10px;
    font-weight: 100;
  }
  
  @keyframes swipe {
      0% {
          opacity: 0;
          transform: translateY(10px);
      }
  
      100% {
          opacity: 1;
      }
      
  }
  .hero-text h1 {
      font-size: 50px;
      animation: swipe 0.6s;
  }
  
  .hero-text p {
    animation: swipe 0.6s;
  }

.footer {
    text-align: center;
    font-size: 20px;
    margin-top: 100px;
    height: auto;
    color: white;
}

.footer p {
    color: white;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

h2 {
    font-weight: 200;
}

#overview {
    width: 80%;
    font-size: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 5%;
    color: white;
}

.nextmeeting {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #262726;
    width: 100%;
    margin: 30px auto;
    text-align: center;
    padding: 20px 5px; /* add some padding to create space around the elements */
  }
  
  .meetingicon {
    width: 75px; /* adjust the width to your liking */
    height: 75px; /* adjust the height to your liking */
    margin-bottom: 10px; /* add some space between the icon and the text */   
    padding: 5px; /* add some padding to create space around the icon */
    margin-left: auto;
    margin-right: auto;
  }
  
  .meetingheader {
    font-size: 18px; /* font size for the "NEXT MEETING" text */
    font-weight: bold; /* make the "NEXT MEETING" text bold */
    color: white;
    text-align: center;
    margin-bottom: 10px; /* add some space between the header and the details */
  }
  
  .meetingdetails {
    font-size: 16px; /* font size for the date and location */
    color: white;
    text-align: center;
  }
  
  .date, .location {
    text-align: center;
    margin-bottom: 10px; /* add some space between the date and location */
  }
  

@media (max-width: 1000px) {
    .description {
        width: 75%;
    }   
}

@media (max-width: 650px) {  
    .hero-text h1 {
        font-size: 20px;
    }
}

@media (max-width: 500px) {  
    .hero-text h1 {
        font-size: 16px;
    }
}

@media (max-width: 400px) {  
    .hero-text h1 {
        font-size: 16px;
    }
}





#councillors {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background-color: #262726;
  box-sizing: border-box; /* add this to include padding in width calculation */
}

.header {
  margin-bottom: 50px;
}

.header i {
  font-size: 50px;
  margin: 0 auto; /* add this to center the icon */
}

.header h1 {
  font-size: 36px;
  margin: 10px auto;
  color: white;
}

.members {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.member {
  width: 33%;
  margin-bottom: 100px;
  color: white;
  text-align: center; /* add this to center the text */
}

.member h2 {
  font-size: 24px;
  margin: 10px auto;
}

.member p {
  font-size: 16px;
  margin: 5px auto;
  color: white;
  text-decoration: none;
  text-align: center; /* add this to center the text */
}

.contact-button {
  display: inline-block;
  margin: 10px auto;
  padding: 10px 20px;
  border: 2px solid #fff;
  border-radius: 25px;
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}

.contact-button:hover {
  background-color: #fff;
  color: #333;
}

/* Media queries for mobile devices */

/* For screens with a maximum width of 768px (tablets and smaller) */
@media only screen and (max-width: 1200px) {
  #councillors {
      padding: 15px; /* reduce padding for smaller screens */
  }
  .header i {
      font-size: 40px; /* reduce icon size for smaller screens */
  }
  .header h1 {
      font-size: 28px; /* reduce header font size for smaller screens */
  }
  .members {
      flex-direction: column; /* stack members vertically on smaller screens */
  }
  .member {
      width: 100%; /* increase member width for smaller screens */
      margin-bottom: 50px; /* reduce margin bottom for smaller screens */
  }
  .member h2 {
      font-size: 20px; /* reduce member header font size for smaller screens */
  }
  .member p {
      font-size: 14px; /* reduce member paragraph font size for smaller screens */
  }
  .contact-button {
      padding: 8px 16px; /* reduce button padding for smaller screens */
      font-size: 14px; /* reduce button font size for smaller screens */
  }
}

/* For screens with a maximum width of 480px (mobile phones) */
@media only screen and (max-width: 480px) {
  #councillors {
      padding: 10px; /* reduce padding for mobile phones */
  }
  .header i {
      font-size: 50px; /* reduce icon size for mobile phones */
  }
  .header h1 {
      font-size: 22px; /* reduce header font size for mobile phones */
  }
  .members {
      flex-direction: column; /* stack members vertically on mobile phones */
  }
  .member {
      width: 100%; /* increase member width for mobile phones */
      margin-bottom: 30px; /* reduce margin bottom for mobile phones */
  }
  .member h2 {
      font-size: 18px; /* reduce member header font size for mobile phones */
      margin: 0 auto;
  }
  .member p {
      font-size: 12px; /* reduce member paragraph font size for mobile phones */
      margin: 0 auto;
      overflow-wrap: break-word; /* change this from 'normal' to 'break-word' */
      word-wrap: break-word;
      text-align: center; /* add this to center the text */
  }
  .contact-button {
      padding: 6px 12px; /* reduce button padding for mobile phones */
      font-size: 12px; /* reduce button font size for mobile phones */
  }
}












  #minutes-container {
    text-align: center;
    width: 100%;
    margin: 30px auto;
    background-color: #262726;
    padding: 20px;
    box-sizing: border-box; /* add this to include padding in width calculation */
}

#minutes-container h1 {
    font-size: 36px;
    color: white;
    margin: 20px auto;
}

#minutes-container i {
    font-size: 3em;
    margin-bottom: 10px;
}

#minutes-list {
    list-style: none;
    padding: 0;
    margin: 0; /* reset margin */
    text-align: center; /* center the list */
}

#minutes-list li {
  margin: 10px auto;
  width: 70%;
  list-style: none;
}

#minutes-list a {
    display: block;
    padding: 10px 20px;
    border: 0.5px solid grey;
    border-radius: 25px;
    text-decoration: none;
    color: #ffffff;
    transition: background-color 0.3s, color 0.3s;
}

#minutes-list a:hover {
    background-color: #ffffff;
    color: #1c1c1c;
}

/* Media queries for mobile devices */

/* For screens with a maximum width of 768px (e.g., iPads) */
@media only screen and (max-width: 768px) {
  #minutes-container {
    margin: 20px auto;
    padding: 15px;
  }
  #minutes-container h1 {
    font-size: 28px;
  }
  #minutes-list li {
    margin: 5px auto;
    width: 80%; /* adjust width to reduce offset */
  }
  #minutes-list a {
    padding: 8px 15px;
    font-size: 14px;
  }
}

/* For screens with a maximum width of 480px (e.g., smartphones) */
@media only screen and (max-width: 480px) {
  #minutes-container {
    margin: 15px auto;
    padding: 10px;
  }
  #minutes-container h1 {
    font-size: 22px;
  }
  #minutes-list li {
    margin: 3px auto;
    width: 90%; /* adjust width to reduce offset */
  }
  #minutes-list a {
    padding: 6px 10px;
    font-size: 12px;
  }
}









#agenda-container {
  text-align: center;
  width: 100%;
  margin: 30px auto;
  background-color: #262726;
  padding: 20px;
  box-sizing: border-box; /* add this to include padding in width calculation */
}

#agenda-container h1 {
  font-size: 36px;
  color: white;
  margin: 20px auto;
}

#agenda-container i {
  font-size: 3em;
  margin-bottom: 10px;
}

#agenda-list {
  list-style: none;
  padding: 0;
  margin: 0; /* reset margin */
  text-align: center; /* center the list */
}

#agenda-list li {
margin: 10px auto;
width: 70%;
list-style: none;
}

#agenda-list a {
  display: block;
  padding: 10px 20px;
  border: 0.5px solid grey;
  border-radius: 25px;
  text-decoration: none;
  color: #ffffff;
  transition: background-color 0.3s, color 0.3s;
}

#agenda-list a:hover {
  background-color: #ffffff;
  color: #1c1c1c;
}

/* Media queries for mobile devices */

/* For screens with a maximum width of 768px (e.g., iPads) */
@media only screen and (max-width: 768px) {
#agenda-container {
  margin: 20px auto;
  padding: 15px;
}
#agenda-container h1 {
  font-size: 28px;
}
#agenda-list li {
  margin: 5px auto;
  width: 80%; /* adjust width to reduce offset */
}
#agenda-list a {
  padding: 8px 15px;
  font-size: 14px;
}
}

/* For screens with a maximum width of 480px (e.g., smartphones) */
@media only screen and (max-width: 480px) {
#agenda-container {
  margin: 15px auto;
  padding: 10px;
}
#agenda-container h1 {
  font-size: 22px;
}
#agenda-list li {
  margin: 3px auto;
  width: 90%; /* adjust width to reduce offset */
}
#agenda-list a {
  padding: 6px 10px;
  font-size: 12px;
}
}











#documents-container {
  text-align: center;
  width: 100%;
  margin: 30px auto;
  background-color: #262726;
  padding: 20px;
  border-radius: 15px;
  box-sizing: border-box; /* add this to include padding in width calculation */
}

#documents-container h1 {
  font-size: 36px;
  color: white;
  margin: 20px auto;
}

#documents-container i {
  font-size: 3em;
  margin-bottom: 10px;
  margin: 0 auto; /* add this to center the icon */
}

#documents-list {
  list-style: none;
  padding: 0;
  margin: 0; /* reset margin */
  text-align: center; /* center the list */
}

#documents-list li {
  margin: 10px auto;
  width: 70%; /* adjust width to reduce offset */
  list-style: none;
}

#documents-list a {
  display: block;
  padding: 10px 20px;
  border: 0.5px solid grey;
  border-radius: 25px;
  text-decoration: none;
  color: #ffffff;
  transition: background-color 0.3s, color 0.3s;
}

#documents-list a:hover {
  background-color: #ffffff;
  color: #1c1c1c;
}

/* Media queries for mobile devices */

/* For screens with a maximum width of 768px (tablets and smaller) */
@media only screen and (max-width: 768px) {
  #documents-container {
      margin: 20px auto;
      padding: 15px;
  }
  #documents-container h1 {
      font-size: 28px;
  }
  #documents-list li {
      margin: 5px auto;
      width: 80%; /* adjust width to reduce offset */
  }
  #documents-list a {
      padding: 8px 15px;
      font-size: 14px;
  }
}

/* For screens with a maximum width of 480px (mobile phones) */
@media only screen and (max-width: 480px) {
  #documents-container {
      margin: 15px auto;
      padding: 10px;
  }
  #documents-container h1 {
      font-size: 22px;
  }
  #documents-list li {
      margin: 3px auto;
      width: 90%; /* adjust width to reduce offset */
  }
  #documents-list a {
      padding: 6px 10px;
      font-size: 12px;
  }
}

















@keyframes minuteshover {
    0% {
        background-color: #262726;
    }
    
    100% {
        background-color: #353635;
        transform: translateY(-20px);
    }
}

@keyframes minuteshover {
    0% {
        background-color: #262726;
    }
    
    100% {
        background-color: #353635;
        transform: translateY(-20px);
    }
}











.footer {
    text-align: center;
    font-size: 20px;
    margin-top: 100px;
    height: auto;
    color: white;
}

.footer p {
    color: white;
}

@media only screen and (max-width: 1700px) {
    .footer {
      font-size: 18px;
    }
  }
  
  @media only screen and (max-width: 768px) {
    .footer {
      font-size: 16px;
    }
  }
  
  @media only screen and (max-width: 480px) {
    .footer {
      font-size: 14px;
    }
  }
  
  @media only screen and (max-width: 320px) {
    .footer {
      font-size: 12px;
    }
  }