html,
body {
  width: 100%;
  height: 100%;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 6vw;
  color: #dcdbd9;
}
/*
header {
  width: 100%;
  height: 100%;
  padding: 10%;
  background: url(../images/naturalBg.jpg) center center no-repeat;
  background-size: cover;
}
*/

.bg-image {
  /*display:flex;*/
  height: 100%;
  background: url(../images/naturalBg.jpg) center center no-repeat;
  background-size: cover;
  resize: both;
  overflow: hidden;
}

.blur-bg {
    margin: 10%;
    padding: 10%;
    background: rgba(0,0,0,.4);
    z-index:1010;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

h1 {
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-size: 10vw;
}

h2 {
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-size: 7vw;
}

.accordion {
  --bs-accordion-active-color: #dcdcdc;
  --bs-accordion-active-bg: #333333;
  --bs-accordion-color: #dcdcdc;
  --bs-accordion-bg: #777777;
  --bs-accordion-btn-color: #dcdcdc;
  --bs-accordion-btn-bg: #444444;
  /* these don't seem to work
  --bs-accordion-icon-color: #dcdcdc;
  --bs-accordion-icon-active-color: #ffffff;
  */

}

.accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0,0,0,.125);
}



/* media queries */


@media (min-width: 576px) { 
  body {
    font-size: 3vw;
  
  }

  .blur-bg {
    margin-left: 15%;
    margin-top: 5%;
    margin-right: 15%;
    margin-bottom: 5%;
    padding-left: 4%;
    padding-top: 2%;
    padding-right: 4%;
    padding-bottom: 2%;
  }

  h1 {
    font-size: 6vw;
  }
  
  h2 {
    font-size: 4vw;
  }

  .accordion-button {
    font-size: 5vw;
  }
}


@media (min-width: 768px) { 
  body {
    font-size: 2.5vw;
  
  }

  .blur-bg {
    margin-left: 15%;
    margin-top: 7%;
    margin-right: 15%;
    margin-bottom: 7%;
    padding-left: 4%;
    padding-top: 3%;
    padding-right: 4%;
    padding-bottom: 2%;
  }

  h1 {
    font-size: 5vw;
  }
  
  h2 {
    font-size: 4vw;
  }

  .accordion-button {
    font-size: 3.5vw;
    padding-left: 6%;
    padding-top: 3%;
    padding-right: 6%;
    padding-bottom: 3%;
  }

}


@media (min-width: 992px) { 
  h1 {
    font-size: 10vw;
  }
  
  h2 {
    font-size: 7vw;
  }
 }


@media (min-width: 1200px) { 
  h1 {
    font-size: 5vw;
  }
  
  h2 {
    font-size: 2vw;
  }
 }

 .accordion-button {
   font-size: 2vw;
   padding-left: 6%;
   padding-top: .5%;
   padding-right: 6%;
   padding-bottom: .5%;
 }

 .accordion {
   --bs-accordion-btn-icon-width: .75rem;
 }

 .accordion-body {
   font-size: 1.5vw;
   padding-left: 6%;
   padding-top: 2%;
   padding-right: 6%;
   padding-bottom: 2%;
 }


@media (min-width: 1400px) { 
  h1 {
    font-size: 5vw;
  }
  
  h2 {
    font-size: 2vw;
  }

  .accordion-button {
    font-size: 2vw;
    padding-left: 6%;
    padding-top: .5%;
    padding-right: 6%;
    padding-bottom: .5%;
  }

  .accordion {
    --bs-accordion-btn-icon-width: .75rem;
  }

  .accordion-body {
    font-size: 1.5vw;
    padding-left: 6%;
    padding-top: 2%;
    padding-right: 6%;
    padding-bottom: 2%;
  }

 }