body{
background-color:#8BE5D4;
font-family: 'Comic Sans MS', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .header {
    background-color: #3E7166;
    padding: 10px 16px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    row-gap: 10px;
  }

  .flag {
    height: 36px;
  }

  .nav-links {
    display: inline-block;
  }

  .nav-link {
    display: inline-block;
    margin: 8px 12px;
    color: white;
    text-decoration: underline;
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s;
  }

  .nav-link:hover {
    color: #8BE5D4;
  }

  .nav-links{
    text-align: left;
  }

  @media (min-width: 900px) {
    .header {
      grid-template-columns: auto auto auto auto auto auto;
      justify-content: center;
      justify-items: center;
      column-gap: 40px;
      text-align: center;
    }

    .nav-links {
      display: contents;
    }

    .nav-link {
      margin: 0;
    }
  }

.just-me-again-down-here-regular {
        font-family: "Just Me Again Down Here", cursive;
        font-weight: 400;
        font-style: normal;
      } 

      h2{
        color: #2A6D61;
        font-family: "Just Me Again Down Here";
        font-size: 96px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: center
        } 
      
        .banner {
            width: 100%;
          }
      
          .banner img {
            width: 100%;
            height: auto;
            display: block;
          }
      
          .about-section {
            color: white;
            padding: 40px 20px;
            font-size: 25px;
            line-height: 1.6;
          }
      
          .about-section h2 {
            font-family: "Just Me Again Down Here";
            font-size: 96px;
            color: #2A6D61;
            margin-bottom: 20px;
          }
      
          .about-section p {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
          }
      
          hr {
            border: none;
            height: 2px;
            background-color: #ccc;
            margin: 0;
          }

          html {
            scroll-behavior: smooth;
          }

          .beach-section {
            text-align: center;
            color: white;
            padding: 40px 20px;
          }
      
          .beach-section h2 {
            font-family: "Just Me Again Down Here";
            font-size: 96px;
            color: #2A6D61;
            margin-bottom: 20px;
          }
      
          .beach-section p {
            max-width: 900px;
            margin: 30px auto 0 auto;
            font-size: 25px;
            line-height: 1.6;
            text-align: center;
          }

          .orphanage-section {
            text-align: center;
            color: white;
            padding: 40px 20px;
          }
      
          .orphanage-section h2 {
            font-family: "Just Me Again Down Here";
            font-size: 96px;
            color: #2A6D61;
            margin-bottom: 20px;
          }
      
          .orphanage-section p {
            max-width: 900px;
            margin: 30px auto 0 auto;
            font-size: 25px;
            line-height: 1.6;
            text-align: center;
          }

          .animal-section {
            text-align: center;
            color: white;
            padding: 40px 20px;
          }
      
          .animal-section h2 {
            font-family: "Just Me Again Down Here";
            font-size: 96px;
            color: #2A6D61;
            margin-bottom: 20px;
          }
      
          .animal-section p {
            max-width: 900px;
            margin: 30px auto 0 auto;
            font-size: 25px;
            line-height: 1.6;
            text-align: center;
          }

          .accordion {
            display: grid;
            justify-content: center;
            border-radius: 20px;
            overflow: hidden;
          }
      
          .accordion section {
            flex: 1;
            transition: 0.5s ease;
            overflow: hidden;
          }
      
          .accordion section:hover {
            flex: 4;
          }
      
          .accordion img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
          }
      
          .accordion section:hover img {
            transform: scale(1.05);
          }

          footer{
          text-align: center;
          color: #FFF;
          font-size: 36px;
          font-style: normal;
          font-weight: 400;
          line-height: 150%; /* 54px */
          letter-spacing: -0.684px;
          color: #2A6D61;
          }