@import url('https://fonts.googleapis.com/css2?family=Beau+Rivage&family=Lora:ital,wght@1,500&family=Ms+Madi&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playwrite+AU+QLD:wght@100..400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Liter&display=swap');


html {
  background-color: black;
  /* Safari, Chrome and Opera > 12.1 */
  -webkit-animation: fadein 5s;
  /* Firefox < 16 */
  -moz-animation: fadein 5s;
  /* Internet Explorer */
  -ms-animation: fadein 5s;
  /* Opera < 12.1 */
  -o-animation: fadein 5s;
  /* Everything else */
  animation: fadein 5s;

  overflow-x: hidden;
}




.banner {
  background: white;
  color: black;
  padding: 1vh;
  font-family: 'Beau Rivage';
  font-size: 3em;
}

.header {
  position: sticky;
  top: 0em;
  background-color: black;
  padding: 0.2em;
  z-index: 100000;
  width: 97vw;
}
.sep {
  color: white;
  border-color: white;
  font-weight: bold;
}

.header-tag {
  display: inline;
  font-size: 2em;
  position: absolute;
  margin: 0.4em 0em 0em 1em;

  font-family: 'Beau Rivage';
}

h1, h2, h3, h4, p, pre {
  color:white;
  text-align: center;
  margin: 0 auto;
}

p {
  width: 70vw;
  max-width: 70vw;
}

.menu-header {
  margin: 0;
  font-family: sans-serif;
  width: 95%;
  height: 5em;
  box-sizing: border-box;
}
.logo {
  float: left;
  padding: 0.5em 0em 0em 0em;
  margin-left: 2em;
  height: 2em;

}
.logo > img {
  height: 4em;

  border-radius: 50%;
}


.menu-nav {
  height: 5em;
}
.menu-nav > ul {
  margin: 0;
  padding: 0;
  display: flex;
  float: right;
  overflow-x: hidden;
}

.menu-list {
  list-style-type: none;
}
.menu-list > a {
  line-height: 3em;
  padding: 0 20px;
  color: #fff;
  padding: 1em;
  color: white;
  float: right;
  font-family: "Liter", serif;
}

.menu-toggle {
  float: right;
  margin: 0em;
  color: #fff;
  float: right;
  font-size: 1.7em;
  line-height: 50px;
  display: none;
}


.liberty336-ascii {
  display: block;
  margin: 0 auto;
  width: 50vw;
}

.ungovernable-image {
  display: block;
  margin: 0 auto;
  width: 60vw;
}

.home-intro {
  width: 94vw;
  font-size: 1.5em;
}


.aspire-section {
  height: 1rem;
  max-height: 1rem;
}

/* Begin index section */

.index {
  font-size: 1.2em;
  width: 50vw;
}

.image-link {
  display: block;
  color:#37a649;
  font-size: 1.2em;
  text-align: center;
  margin: 0 auto;
  width: 80vw;

}

.image-link:visited {
  display: block;
  color:#37a649;
  font-size: 1.2em;
  text-align: center;
  margin: 0 auto;

}


.quoting-images {
  display: block;
  margin: 0 auto;
  width: 60vw;
  height: auto;

}

/* End index section */
/* Begin faq section */


.faq-section {
  width: 90vw;
  margin: 0 auto;
  padding:1em;


}

.reference-wrap {
}

.faq-reference-list {
  list-style-type: none;
}

.ref-li {

}
.ref-li > * > a {
  color: white;
}

.faq {


}

.qa {
  display: block;
  margin: 0 auto;
  border: 1px solid white;
  padding: 3em;
  text-align: center;
  background-color: #2a2a2b;
}

.qah3 {
  width: 50vw;
}

.faq-li {
}

.faq-li > * > a {
  color: white;
}

.faq-video {
  width: 70vw !important;
}

#what-is-liberty336 {

}


.faq-trumpers {
  display: block;
    margin: 0 auto;
    width: 60vw;
}

/* End faq section */


/* Begin about section */

.about-page {
  border: 1px solid white;
  background-color: black;
}


.about-page-h {
  color: white;
  font-family: "Playwrite AU QLD", serif;
  font-optical-sizing: auto;
  font-weight: 1200;
  font-style: normal;
}


.about-page-p {
  color:white;
  font-family: "Liter", serif;
  font-weight: 600;
  font-size: 1.2rem;
  font-style: normal;
}

.about-index {
  font-size: 1.25rem;
}

.about-image {
  width: 50%;
  display: block;
  margin: 0 auto;
}




.mission-section {

}

.mission-div {
    background-image: url('https://raw.githubusercontent.com/Liberty336/Liberty336.github.io/refs/heads/main/lib/images/green-mountain-boys-militia-men-transported-weapons-powder-and-ammunition-from-fort-ticondera.jpg');
    background-size: cover;          /* Scales image to cover the entire section */
    background-position: top;     
    background-repeat: no-repeat;    /* Prevents image tiling */
    min-height: 50vh;              /* Optional: ensures section has height */
  
  
  padding:1em;
}

.mission-div > p {
  background-color: RGB(17, 14, 14, 0.3) ;
  -webkit-text-stroke: 1px white;  /* Width and color of outline */
  color: white;       /* Fill color of text */
  -moz-text-stroke: 1px green;    /* Rarely needed now */
  text-stroke: 1px black;         /* Future standard */
  font-size: 2rem;
  
  text-align:center;
}

.mission-div > h2 {
  background-color: RGB(17, 14, 14, 0.3) ;
  font-size: 3rem;
}

.structure-section {

}

.structure-div {

}

.structure-top {
  
}

.top-vid {
  margin: 0 auto;
  text-align: center;
  
  width: 100%;
  height: 23rem;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}


.citizen-section {
  
}

.organized-section {
  
}


.directorate-of-service-and-rescue-section {
  width: 100vw; /* Full viewport width */
}

.dsr-p {
  color: white;
  font-size: 1.2rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6); /* Add some transparency to make the text stand out */
  padding: 20px;
}

.dsr-list-div {
  text-align: center;
  color: white;
  width: 80vw;
  margin: 0 auto;
}

.dsr-list > * {
  color: white;
  text-align: center;
}


.directorate-of-operations {
  border: 1px solid white;
  position: relative;
  overflow: hidden;
}

.do-vid {
  position: absolute; /* Absolute positioning within the .do section */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the entire section without distortion */
  z-index: 1; /* Places the video behind the text */
  opacity: 0.5; /* Adjust the opacity for readability */
  
}

.short-overview-section {

}

.short-overview-div {
  
}

.history-section {
  
}


.history-div {
  
}

.tweets >* {
  text-align: center !important;
  margin: 0 auto;
}


/* End about section */







/*** Begin Mobile ***/

@media (max-width: 1000px)
{

  html{

  }
  
  
  h2 {
    font-size: 1.5rem;
  }

  .header {
    width: 100vw;
    margin-left: -1rem;
  }
  .home-intro {
    width: 50vw;
    font-size: 1.5rem;
  }
  .liberty336-ascii {
    display: block;
    margin: 0 auto;
    width: 90vw !important;
  }



  .menu-header {
    padding: 0 20px;
  }
  .logo {
    line-height: 3em;
    margin: 0em 0em 0em 2em !important;
  }
  .menu-nav {
    position: absolute;
    width: 100%;
    background: #333;
    top: 3em;
    left: -120%;
    transition: 0.5s;
    height: calc(100vh - 50px);
  }
  .menu-nav-active {
    position: absolute;
    width: 100%;
    background: #0a0808;
    top: 5em;
    left: 0%;
    transition: 0.5s;
    height: calc(100vh - 50px);
    color:white;
  }

  .menu-nav > ul {
    display: block;
    text-align: center;
  }
  .menu-list > a {
    border-bottom: 1px solid black;
    text-align: center;
    margin: 0 auto;
    width: 100vw;
  }
  .menu-list > a:hover {
    background-color: grey;
  }

  .menu-toggle {
    display: block;
    line-height: 3em;
    z-index: 10;
  }

  img {
    margin-left: -5vw;
  }



  /* begin mobile index section */


  .index {

    width: 70vw;

  }

  .image-link {
    display: block;
    margin: 0 auto;
    text-align: center;
  }


  .quoting-images {
    display: block;
    margin: 0 auto;
    width: 90vw;
    height: auto;
  }
  /* end mobile index section */



  /* begin mobile faq section */
  .faq-trumpers{
    display: block;
    margin: 0 auto;
    width: 60vw;
  }
  /* end mobile faq section */

  /* begin mobile about section */

  .about-image {
    width: 60%;
  }

  /* end mobile about section */
}
/* End mobile toggle-menu */

@media (width: 1000px)
{
  html {
    width: 99vw;
    overflow-x: hidden;
  }
}