* {
  text-align: center;
  scroll-behavior: smooth;
  font-family: "Kalam", "Trebuchet MS", cursive;
}


/* STYLE SECTIONING TAGS */

  #mainHeader {
    margin-left: -8.15%;
    margin-right: -8.15%;
    margin-top: 0%;
    margin-bottom: 0%;
    
    padding-top: 12%;
    padding-bottom: 12%;
    
    background-image: url("assets/home/pride_balloons.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }

  #homeDescBox {
    margin-left: -8.15%;
    margin-right: -8.15%;
    padding-top: 10%;
    padding-bottom: 12%;

    background-color: #397949;
  }

  body {
    background-color: white; 
    margin-left: 7%;
    margin-right: 7%;
  }

  #statsBox {
    background-image: url("assets/home/pride_parade.jpg");
    background-size: cover;
    background-repeat: no-repeat;

    margin-top: -50px;
    margin-left: -8.15%;
    margin-right: -8.15%;
    margin-bottom: 0%;

    padding-bottom: 8%;
  }

  #stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2%;
  }

  #factsBox {
    margin-left: -8.15%;
    margin-right: -8.15%;
    margin-top: -8%;
    margin-bottom: -5%;

    padding-top:0%;
    padding-bottom: 10%;
    
    background-color: #653979;
  }

  #footer {
    background-color: #393979;
    
    padding-top: .2%;
    padding-bottom: .2%;
    
    margin-top: 5%;
    margin-bottom: -1%;
    margin-left: -8.15%;
    margin-right: -8.15%;

    text-align: center;
    font-size: 100%;
  }

  #actionHeader {
    margin-left: -8.15%;
    margin-right: -8.15%;
    margin-top: 0%;
    margin-bottom: 0%;
    
    padding-top: 10%;
    padding-bottom: 10%;
    
    background-image: url("assets/action/protests.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }

  #legList li{
    text-align: left;
    margin-left: 6%;
    padding-left: 2%;
  
    
    text-decoration: none;
    font-size: 130%;
    line-height: 45px;
  }

  #aboutHeader {
    margin-left: -8.15%;
    margin-right: -8.15%;
    margin-top: 0%;
    margin-bottom: 5%;
    
    padding-top: 10%;
    padding-bottom: 10%;
    
    background-image: url("assets/skyline.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }


/* STYLE TEXT */

  h1 {
    color: #ffffff;
    font-size: 500%;
    text-shadow: black 0px 0px 20px;
  }

  /*Statistics Title*/
  h3 {
    color: #393979;
    font-size: 300%;
    padding-top: 3%;
    padding-bottom: 1%;
  }

  /*Take Action section titles*/
  h5 {
    color: #393979;
    font-size: 250%;
    padding-top: 3%;
    padding-bottom: 1%;

  }

  p {
    color:black;
    font-size: 150%;
  }

  #homeDesc {
    color:white;
    text-shadow: black 0px 0px 20px;
    padding-left: 2%;
    padding-right: 2%;
  }

  #statsDesc {
    color:white;
    background-color: #393979;
    filter: alpha(opacity=60);
    font-size: 150%;
    
    margin-top: -5%;
    margin-left: 10%;
    margin-right: 10%;
  }

  .statsNum {
    font-size: 250%;
    font-weight: 800;
    text-shadow: black 0px 0px 25px;
  }

  #stats p {
    color:white;
    text-align:center;
    font-weight: 300;
  }

  .statsP {
    margin-left: 2%;
    margin-right: 2%;
  }

  #factsTitle {
    color: #ffffff;
    font-size: 300%;
    padding-top: 3%;
    padding-bottom: 1%;
  }

  #fact {
    color: white;
    font-weight: 300;
    margin-left: 8%;
    margin-right: 8%;
  }

  #legHowHelp {
    color: #393979;
    font-size: 200%;
    font-weight: 600;
  }


  #sourcesText {
    font-size: 200%;
    margin-bottom: 0%;
    margin-top: 10%;
    
  }

/* STYLE IMAGES */



/* STYLE NAV BAR */
  /*top navigation bar*/
  #mainNavBar {
    list-style-type: none;
    background-color: #393979;
    overflow: hidden;

    padding: 1.5%;
    border: 0%;
    margin: -3% -8.15% 0% -8.15%;

    height: 60px;
  
  }

  .mainNavBarList {
    display: inline;
  }

  .mainNavBarList a {
    text-decoration: none;
    color: white;
    font-size: 150%;
    font-weight: 500;
    
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
  
  }

  .mainNavBarList a:hover {
    background-color: #202056;
  }

  .navBarLeft {
    float: left;
  }

  .navBarRight {
    float: right;
  }

  /*take action navigation bar */
  #actionNavBar {
    list-style-type: none;
    background-color: #393979;
    overflow: hidden;

    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    margin-top: 50%;
    margin-right: 90%;
    
    border-radius: 15px;
  }

 .actionNavBarList {
    background-color: #393979;
    width: 100%;
   
    margin: 0%;
    padding-top: 0%;
    padding-bottom: 0%;
  }

  .actionNavBarList a {
    display: block;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    font-size: 150%;
  }

  .actionNavBarList a:hover {
    background-color: #202056;
  }

  
  .flexWrapper {
    display: flex;
    position: relative;
  }

  .flexWrapper ul li {
    margin-bottom: -1%;
  }

  .flexWrapper .mainContent {
    width: 100%;
    margin-left: 10%;
    text-align: center;
  }

  .flexWrapper .mainContent .actionText {
    margin-top: -7%;
  }
  



/* STYLE BUTTONS */
  #factButton {
    background-color: lightpink;
    border-radius: 15px;
    border-style: solid;
    border-color: lightpink;
    
    color: black;
    text-align: center;

    padding: 15px 32px;
    font-size: 20px;
    font-weight: 400;
  }

  #advocacyNavButton {
    background-color: #202056;
  }

  #donateNavButton {
    background-color: #202056;
  }

  #educateNavButton {
    background-color: #202056;
  }
  
  #legNavButton {
    background-color: #202056;
  }


/* ADD MORE! */
  /*sources list on about page*/
  .sourceList {
    list-style-type: none;
    padding: 0;
  }

  .sourceList a {
    text-decoration: underline;
    text-align: center;
    justify-content: center;
    line-height: 200%;

    font-size: 150%;
  }