/*Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');

body { 
  font-family: "Barlow", sans-serif;
  background-color: #0D021C;
  color: #fff;
  transition: background-image 0s ease;
  background-repeat: no-repeat;
  background-position: center; 
  background-size: cover;
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute; 
  background-attachment: fixed; /* Keeps the background image fixed in place */
  text-align: center;
  cursor: url('../images/favicon.png'), auto; 
}

#menuContainer {
  display: flex; /* Use flexbox */
  background-color: rgba(22, 34, 57, 0);
  position: fixed;
  width: 100%;
}

/* Style for the menu divs */
.menu {
  background-color: rgba(22, 34, 57, 0); 
  padding: 10px 20px;
  text-align: center;
  flex: 1 1 33%;
}

  .menu a {
    color: #fff;
    text-decoration: none;
    margin: 0 3%;
    font-size: 22px;
    font-family: "Barlow", sans-serif;
  }

.content {
  padding: 60px 0px 300px 0px;
  background-color: rgba(22, 34, 57, 0.4);
  color: rgb(255, 255, 255);
  font-size: 60px;
}


/* Style for the logo div */
.logo { 
  padding: 10px;
  position: fixed; /* Position the container */
  right: 0;
  bottom: 100px;
  display: inline-block; 
}

#logo {
  max-width: 150px;
}

#livestream {
  z-index: 4;
  position: fixed; /* Position the container */
  bottom: 26px; /* Align the container to the bottom of the viewport */
  right: 0;
  text-align: left; /* Center the image horizontally */
  cursor: pointer;
  display: inline-block; 
}
  
#podcast {
  z-index: 3;
  position: fixed; 
  bottom: 0;
  left: 0;
  text-align: center; 
  cursor: pointer;
}

  #podcast img {
    border-radius: 50px;
    box-shadow: 1px 3px 12px 4px #fff;
  }

  @media (max-width: 768px) {
    .logo { 
      position: unset;
      top: 100px;
      display: block;
      text-align: center;
      margin-top: 100px;
    }
    #livestream { 
      position: unset;
      display: block;
      margin: 20% 0 0 30%;
    }
    #podcast {
      position: unset;
      display: block;
      margin: 44% auto 22% auto;
    }
  }

  @media (max-width: 540px) {
    #livestream { 
      margin: 20% 0 0 15%;
    }
  }


.headline {
  width: 100%;
  max-width: 100%;
}

  .headline img {
     
    max-width: 600px;
  }
  
.scrollButton { /* down arrow */
  margin: 10% 0;
  position: relative;
  bottom: 0;
  border: 0;
  background-color: rgba(22, 34, 57, 0);
  cursor: pointer;
}

  .scrollButton img {
    color:rgb(228, 225, 225);
    width: 25%;
  }
    
h1 {
  color:rgb(207, 207, 172);
}

a {
    color: #ecebeb;
}

  a:hover {
    color:#e9be3c !important;
    text-decoration: underline;
  }

@keyframes spinning {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spinning 16s infinite linear;
}

.darken:hover {
  opacity: 0.8;
}

#embedVideo {
  width: 80%;
  max-width: 80%;
}

.videoContainer {
    position: relative;
    padding-bottom: 30.25%; /* Aspect ratio: 16:9 */
    overflow: hidden;
    margin: 5% auto; /* Center horizontally */    
  }

  .videoContainer iframe {
    margin: 0 auto;
  }
 
.mobile {
  display: none;
  visibility: hidden;
  height: 0; width: 0;
}

#q96fm {
  max-width: 100%;
}

  #q96fm1, #q96fm2 {
    margin-bottom: 5%;
    max-width: 100%;
  }

.content img {
  max-width: 700px;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  body {
    background-size: contain;
    background-position: center; 
  }

  .desktop {
    display: none;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: -9999px;
    height: 0; width: 0;
  }

  .mobile {
    visibility: unset;
    height: unset; width: unset;
    display:unset;
  }

  #logo {
      width: 90%
  }
  
  .videoContainer iframe {
      width: 95%;
  }

  .content img {
    max-width: 320px;
  }
}

footer { 
  z-index: 1;
  position: absolute;  
  bottom: 0;
  width: 100%;
  padding-top: 10%;
  background-color: #0D021C;
  color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 14px;
}
  .socialMedia {
    margin-top: 10px;
  }
    .socialMedia a {
      display: inline-block;
      margin: 0 10px;
      color: #fff;
      font-size: 20px;
      text-decoration: none;
    }

    .socialMedia > a:hover {
      color:#e9be3c;
    }

  .donate {
    position: relative;
    float: right;
   
  }

    .donate button {
      background-color: #F2B90C;
      font-weight: bold;
      border-radius: 12px;
      padding: 8px 10px;
    }

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
.blinking {
  animation: blink 4s infinite;
}

.carousel-caption h3 {
  font-size: 34px ;
  font-weight: bold;
  margin-bottom: 40px;
}