body {
  font-family: "Zilla Slab", serif;
      background-color: #0A0A0A;
      color: #f1f1f1;
    }

    .navbar {
      background-color: #0A0A0A;
    }

    .navbar-brand,
    .nav-link {
      color: #FFD700 !important;
      font-weight: 700;
      font-size: 18px;
      margin-right: 30px;
    }
    .navbar button{
      border-color: #fff;
    }
    .navbar-nav{
      justify-content: end;
      margin-top: 10px;
    }
    .nav-link:hover {
      color: #008000 !important;
    }

    .hero {
      background-size: cover;
      background-position: center;
      color: white;
      text-shadow: 1px 1px 2px #000;
    }

    h2 {
   font-family: "Zilla Slab", serif;
      font-weight: 700;
      color: #FFD700;
      border-bottom: 2px solid #008000;
      display: inline-block;
      padding-bottom: 5px;
    }

    .card {
      background-color: #1e1e1e;
      color: white;
      border: 2px solid #008000;
    }

    .btn-primary {
      background-color: #008000;
      border-color: #008000;
      font-weight: bold;
    }

    .btn-primary:hover {
      background-color: #00a000;
      border-color: #00a000;
    }

    footer {
      background-color: #000;
      color: #ccc;
      border-top: 2px solid #FFD700;
    }

    .form-control {
      background-color: #2c2c2c;
      color: white;
      border: 1px solid #444;
    }

    .form-control:focus {
      background-color: #2c2c2c;
      color: white;
      border-color: #008000;
      box-shadow: 0 0 0 0.2rem rgba(0, 128, 0, 0.25);
    }

    /* Add a green-yellow gradient line under sections */
    .section-divider {
      height: 4px;
      background: linear-gradient(to right, #008000, #FFD700);
      margin: 30px auto;
      width: 80px;
      border-radius: 2px;
    }
    #story p{
    font-size: 18px;
    
    }
    #story{
        margin-top: 50px;
    }
    #story h2{
        font-size: 40px;
    }
    #story .container-fluid{
        padding-left: 80px;
        padding-right: 80px;
    }
    #story .col-md-4{
        padding: 0px 60px 0px 15px;
    }
    #story .col-md-4:last-child{
        padding-right: 0;
    }
     .albums{
        margin-top: 0px;
    }
    .albums h2{
        font-size: 40px;
    }
    .albums .container-fluid{
        padding-left: 80px;
        padding-right: 80px;
    }
    .albums .row{
        display: flex;
        flex-wrap: wrap;
               justify-content: flex-start;
    }
    .albums .col-md-4{
 
        margin-top: 25px;
        margin-bottom: 25px;
    }
    .albums img{
        object-fit: cover;
    }
    .albums .card{height: 100%;
    }
     .albums .card-img{
        text-align: center;
     }
    .albums .card-img img
        {
            width: 75%;
    }
    .albums h3{
        margin-bottom: 30px;
        color: #00a000;
        font-size: 32px;
    }
    .albums span{
      font-size: 20px;
    }
    .email{
          padding-top: 10px;
          display: flex;
    }
    .email a{
     color: #fff;
     padding-right: 10px;
    }
    .email i{
      padding-right: 5px;
      color: #FFD700;
      transform: translateY(6px);
    }
        @media screen and (max-width:991px) {
    .navbar-dark .navbar-toggler
    {
      order: 2;
    }
    .email{
      padding-top: 5px;
    }
  }
    @media screen and (max-width:767px) {
      .albums .container-fluid, #story .container-fluid {
        padding-left: 30px;
        padding-right: 30px;
    }
    .albums .card-img img{
      width: 90%;
    }
    #navbarNav {
  position: absolute;
  top: 56px; /* height of fixed navbar */
  left: 0;
  width: 100%;
  z-index: 999;
}

#navbarNav .nav-link {
  padding: 1rem;
  font-size: 1.2rem;
}
.navbar-nav{
  background-color: #505050;
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23FFD700' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-nav{
      justify-content: center;
    }
    }