:root{
/*primary colors*/
--lightest-yellow-color: #fef074;
--Medium-yellow-color: #ffe500;
--Darkest-Yellow-color: #ffb800;

--Darkest-Blue-color: #4c5a9e;

/*nav*/
--navbthvbgc-color: #3c75af;
--navborder-color: #ffffff;
--navstbg-color: #ec2d2d;

/*main*/
--background-color: #203d59;

/*footer*/
    --background2-color: #2e5b86;

--Mcu2s1BG-color: #2e5b86;
--formBG-color: #3b6791;
--submitBG-color: #569def;
--submithoverBG-color: #3e80d7;
--font-color: #ffffff;
--borderboxsd-color: black;

}

body{
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: 
"navbar"
"main"
"footer";
}

nav{
  background-color:   var(--background2-color);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100px; 
}

.links-container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

nav svg{
  fill: #fff;
}

#sidebar-active{
  display: none;
}
.open-sidebar-button, .close-sidebar-button{
  display: none;
  margin: 20px;
}


@media(max-width: 850px){
  .links-container {
  flex-direction: column;
  align-items: flex-start; 
  justify-content: flex-start; 
  
  padding-top: 20px;
  padding-left: 20px;
  position: fixed;
  top: 0;
  right: -100%;
  z-index: 10;
  width: 300px;
  background-color: #2e5b86;
  transition: 300ms ease-out;
  height: 100vh; 
  }

  nav a{
  height: auto;
  width: 100%;
  }
.open-sidebar-button{
  margin: 0;
  margin-top: 0px;
}
.open-sidebar-button, .close-sidebar-button{
  padding: 10px;
  padding-right: 20px;
  display: block;
}
#sidebar-active:checked ~ .links-container{
  right: 0;
}
#sidebar-active:checked ~ #overlay{
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}
}

.HB, .AB, .CB, .BB{
  border-radius: 10px;
  color: aliceblue;
  background-color: #2e5b86;
  font-size: 30px;
  margin: 20px;
  border: none;
  
  transition: 200ms ease-in-out;
}

.HB{
  background-color: var(--background2-color);
  border-bottom: solid 3px var(--navborder-color);
}

nav button:hover{
  border: var(--navborder-color);
  background-color: var(--navbthvbgc-color);
  box-shadow: var(--navborder-color) 0px 1.5px 1.6px 2.3px;
}

main{
  padding: 0px;
  margin: 0px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 70vh 80vh 60vh;
  background-color: var(--background-color);
}



footer{
  display: flex;
  flex-direction: column;
  height: auto;
  color: #c6c6c6;
  background-color: rgb(39, 39, 39);
}


footer .grid-container-FOOTER{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  justify-content: center;
  align-items: top;
  gap: 50px;
  padding: 20px;
}
.footer1{
  display: flex;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  text-align: left;
  padding: 10px;
}

.footer2{
  display: flex;
  justify-content: center;
  color: #b6b6b6;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  padding: 8px;
}
@media (max-width: 500px){
  .footer2{
    font-size: 14px;
  }
}

.footer2 a p{
  margin-bottom: 0px;
}

.footer3{
  padding-top: 20px;
  margin: 10px;
  margin-right: 10%;
  font-size: 18px;
  color: #b6b6b6;
  text-align: left;
}

.footer4{
  display: flex;
  justify-content: center;
  color: #d4d4d4;
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  padding: 8px;
}

.grid-container-FOOTER1{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #141414;
}
@media (min-width: 2000px){
  .grid-container-FOOTER1{
    padding-left: 200px;
    padding-right: 200px;
  }
}
@media (min-width: 2500px){
  .grid-container-FOOTER1{
    padding-left: 350px;
    padding-right: 350px;
  }
}
@media (min-width: 3000px){
  .grid-container-FOOTER1{
    padding-left: 1000px;
    padding-right: 1000px;
  }
}
.grid-container-55{
    background-image: url(/123/In\ Light\ Of\ Prophecy\ Fulfilled.png);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 150px;
}
@media(max-width: 850px){
  .grid-container-55{
  background-image: none;
  width: 0;
  height: 0;
  }
  .footer3{
  text-align: center;
  }
}
.footer2 a{
  color: #b6b6b6;
  text-underline-offset: 1000vh;
  transition: 150ms ease-in-out;
}
.footer2 a:hover{
  color: #d4d4d4;
  scale: 1.1;
}

.footer-pngs{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 40px;
}


.png1 img{
  height: 100px;
  width: auto;
 transition: 150ms ease-in-out;
}

.png2 img{
  height: 60px;
  width: 60px;
  transition: 150ms ease-in-out;
}

.png1 img:hover, .png2 img:hover{
  scale: 1.1;
}



select{
  background: #323232;
  border: solid #cacaca 1px;
  border-radius: 8px;
  padding: 6px;
  color: #c5c5c5;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  width: 240px;
  transition: 200ms;
}

select:hover{
  scale: 1.1;
}

footer .Email-to-clipboard{
  background: #323232;
  border: solid #cacaca 1px;
  border-radius: 8px;
  padding: 8px;
  color: #c5c5c5;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  transition: 200ms;
}
footer .Email-to-clipboard:hover{
  scale: 1.1;
}

footer button.copied {
  background-color: #486e4a;
  color: white;
}