/* Set height of body and the document to 100% to enable "full page tabs" */



/* Style the header with a grey background and some padding */



  /* background-size: 1em 1em; */
  /* padding: 20px 10px; */


  body, html {
    height: 100%;
    width: 100%;
   /* width: auto; */
    font-size: 24px;

}

/* .banner {
  /*background-image: url("/Users/david41/My Drive/02_areas_dh/0290_0299_work_writing/0292_oth_prgrm_lang_py/html_css/f4wb/f4wb_files/pics_logos/nnwny_head_600by400.png");
  /* background-position-y: top; */
 /* background-repeat: no-repeat;
  /* height: 10%; */
  /*height: 30%;
  width: 100%;
 position: relative; 
  top: 0; 
  padding-bottom: 30%;
  margin: 0;
/* background-size: 100% 30%; */
 /*z-index: 1; */
 /* background-size: cover; */
/* } */

header {
  position: relative;
  height: 45%;
  background-image: url("pics_logo/nnwny_head.png");
  background-size: cover; 
  background-position: top; 
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
header h1 {
  position: absolute; 
  top: 10%;
  left: 22%;
   font-size: 3em;
   text-transform: uppercase;
   font-family: Comic Sans MS, Arial;
  /*margin-left: auto;
  margin-right: auto;
 /* position: absolute; 
/* background-size: cover; 
 /* left: 2.5%;
 /* position:fixed; */
 /* margin-top:  1em; */
 /* margin-left: 1em; */
}

#sub {
  position: absolute; 
  top: 65%;
  left: 25%;
   font-size: 1.5em;
   color: blue;
   font-family: Comic Sans MS, Helvetica;
}

#sub2 {
  position: absolute; 
  top: 85%;
  left: 15%;
   font-size: .64em;
   color: black;
   font-family: Comic Sans MS, Helvetica;
   font-weight: bold;
}

body.about-mission-html, div.panel {
   font-size: 1em;
   font-family: Comic Sans MS, Helvetica;
}


img.f4wb-logo {
  position: flex; 
  top: 5%;
  left: -5%;
  max-width: 100%;
  height: auto;
}


button.tablink {
  font-size: 1.4em;
  font-family: Comic Sans MS, Helvetica;
}

button.accordion {
   font-size: 1.5em;
   font-family: Comic Sans MS, Helvetica;
}



#B {
  color: red;
}

#R {
  color: orange;
}

#A {
  color: yellow;
}

#I {
  color: green;
}

#N {
  color: blue;
}

#S {
  color: indigo;
}


.buttons {
  width: 100%;
  top: 55%;
}

  
  /* Style tab links */
  .tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5% 5%;
    font-size: 1.5em;
    width: 20%;
  }
  
  .tablink:hover {
    background-color: #777;
  }
  
  /* Style the tab content (and add height:100% for full page content) */
  .tabcontent {
    color: black;
    display: none;
    padding: 100px 20px;
    height: 75%;
  }
  
  #Home {background-color: rgb(240, 240, 240);}
  #About {background-color:rgb(240, 240, 240);}
  #News {background-color:rgb(240, 240, 240);}
  #Blog {background-color:rgb(240, 240, 240);}
  #Contact {background-color:rgb(240, 240, 240);}


 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 40px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .accordion:hover {
    background-color: #ccc;
  }
  
  /* Style the accordion panel. Note: hidden by default */
  .panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
  }