  

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;600&display=swap');


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



    body, html {
      height: 100%;
      font-family: 'Poppins', sans-serif;
    }

    .container {
      display: flex;
      min-height: 100vh;
      flex-direction: row;
      flex-wrap: wrap;
    }

    
    .left-tyj {
      flex: 1;
      min-width: 300px;
      background-image: url('../img/Image.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
    }
    
    .left-showbread {
      flex: 1;
      min-width: 300px;
      background-image: url('../img/showbread.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
    }


    .left-mountain {
      flex: 1;
      min-width: 300px;
      background-image: url('../img/mountain.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
    }

    .left-bipolar {
      flex: 1;
      min-width: 300px;
      background-image: url('../img/lionofjudah.JPG');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
    }

    .left-bofl {
      flex: 1;
      min-width: 300px;
      background-image: url('../img/showbread.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
    }

    .left-mission {
      flex: 1;
      min-width: 300px;
      background-image: url('../img/pgfracingdesigns.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
    }

    .left-hope {
      flex: 1;
      min-width: 300px;
      background-image: url('../img/hope.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
    }

    .left-ldespair {
      flex: 1;
      min-width: 300px;
      background-image: url('../img/ldespair.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
    }

    .left-elife {
      flex: 1;
      min-width: 300px;
      background-image: url('../img/heavensdoor.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
    }

    .left-withus {
      flex: 1;
      min-width: 300px;
      background-image: url('../img/jesuswithus.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
    }

    .left-fajs {
      flex: 1;
      min-width: 300px;
      background-image: url('../img/airport.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
    }

    .left-og {
      flex: 1;
      min-width: 300px;
      background-image: url('../img/1996.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
    }


    .rainbow {
      flex: 1;
      min-width: 300px;
      background-image: url('../img/rainbow.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
    }

   


    .right {
      flex: 1;
      min-width: 300px;
      padding: 3rem;
     
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .right img {max-width:100%;}

    .right h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
     
    }

    .right h2 {margin-bottom: 1rem;}

    .right p {
      font-size: 1.2rem;
      line-height: 1.6;
   
      padding-bottom: 2em;
    }

    .bible-verse {
  font-family: 'Georgia', serif;
  font-size: 1.2rem;
  font-style: italic;
  color: #333;
  background: #f9f9f9;
  border-left: 4px solid #bfa14a;
  margin: 1.5em 0;
  padding: 1em 1.5em;
  quotes: "“" "”" "‘" "'";
  position: relative;
}

.bible-verse::before {
  content: open-quote;
  font-size: 2rem;
  color: #bfa14a;
  position: absolute;
  top: 0.2em;
  left: 0.5em;
}

.bible-verse::after {
  content: close-quote;
  font-size: 2rem;
  color: #bfa14a;
  position: absolute;
  bottom: 0.2em;
  right: 0.5em;
}

.bible-reference {
  display: block;
  text-align: right;
  font-size: 0.9rem;
  font-weight: bold;
  margin-top: 0.5em;

}

.right p.love {
  font-size: 3.33em;
  font-weight: 900;
  text-align: center;
  color: rgb(143, 68, 208);
}

.bacon {
  width: 320px;
  height: auto;
  float: left;
  margin-right: 15px; /* optional, for spacing */
  margin-bottom: 10px;
}

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
}

.video-container iframe {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;

}

/*menu*/

.menu-icon {
  display: block;
  background: #333;
  color: white;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  text-align: left;
}

.menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  background: #222;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  border-top: 1px solid #444;
}

.menu a {
  display: block;
  padding: 12px 20px;
  color: white;
  text-decoration: none;
  background: #222;
}

.menu a:hover {
  background: #444;
}

/* Toggle menu when checkbox is checked */
#menu-toggle:checked + .menu-icon + .menu {
  max-height: 600px; /* adjust based on number of links */
}

/* Optional: make it responsive */
@media(min-width: 1222px) {
  .menu-icon {
    display: none;
  }

  .menu {
    max-height: none;
  }

  .menu ul {
    display: flex;
    flex-wrap: wrap;
  }

  .menu li {
    border: none;
  }

  .menu a {
    padding: 15px;
    border-right: 1px solid #444;
  }

  .menu a:last-child {
    border-right: none;
  }
}


@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #ffffff;
  }
  
  a {
    color: #bb86fc;
  }
}

    @media (max-width:1222px) {
      .container {
        flex-direction: column;
      }

      .left {
        min-height: 50vh;
      }

      .right {
        padding: 2rem;
      }

      .bacon {float: none; max-width: 100%;}
    }