/* To-Do: Finish Footer, make mobile compatible */
html, body {
    width: 100%;
    height: 100%;
    background-color:#e4e4e4;
    }
    body {
        margin: 0;
        padding: 0;
        }
/* NavBar */
ul {
  list-style-type: none;
  background-color: #ececec;
  overflow: hidden;
  padding: 1%;
  margin: 0%;
}

li {
  display: inline;
}

li a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-size: 200%;
  padding: 2.5%;
  
} 

li a:hover {
  background-color: #9c9c9c;
}

#navBarParent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  text-align: right;
  box-shadow: 0px 2px 5px rgb(0, 0, 0, .5);
  max-height: 300px;
}

#navBarChild {
  flex-basis: 100%;
    float: right;
}

#navBarImage {
    float: left;
 max-width: 7%;
 margin: 0%;
 padding: 0%;
 flex-basis: 10%;
}


#imageButton:hover {
  background-color: #ececec;
}
#imageButton:hover {
  background-color: #ececec;
}
/* White House Image */
img {
  z-index: -1;
}

#wHouseImageParent {
  flex-basis: 100%;
}

#wHouseImage {
width: 100%;
}

/* Lower Nav Bar */
#wHouseSideButtons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  text-align: center;
  box-shadow: 0px 5px 5px rgb(0, 0, 0, .5);
}

#wHouseSideButtonsChild {
  flex-basis: 100%;
  background-color: rgb(8, 0, 83);
}
.SideButton {
  padding-left: 7%;
  padding-right: 7%;
  color: white;
  font-size: 250%;
  font-family: Arial, Helvetica, sans-serif;
}
.SideButton:hover {
  background-color:rgb(7, 0, 44);
}
#wHouseSideButtonsList {
  display: inline;
}

/* Latest News! */
h1 {
  text-align: center;
  font-size: 350%;
}

h2 {
  font-size: 300%;
}

#latestNews {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: auto;
  height: auto;
}

#newsImage1, #newsImage2, #newsImage3{
  width:90%;
  border-radius: 1em;
}
#newsSection1, #newsSection2, #newsSection3  {
  flex-basis: 33%;
  text-align: center;
  background-color: rgb(170, 170, 170);
  margin: 1%;
  padding: 1%;
  padding-top: .1%;
  padding-bottom: 1%;
  border-radius: 1em;
  margin-bottom: 2%;
}

.newsButton {
  font-size: 150%;
  border: 10px solid rgb(255, 255, 255);
  border-radius: 1em;
  padding: 2%;
  padding-left: 5%;
  padding-right: 5%;
}
.newsText {
  font-family:Georgia, 'Times New Roman', Times, serif;
}

/* Footer */
#footer {
  background-color: rgb(0, 0, 53);
  height: 16%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  float: bottom;
}

#proudRepParent {
  flex-basis: 100%;
  flex-shrink: 1;
}

#proudRep {
  color: white;
  font-size: 300%;
  text-overflow: none;
  margin-top: 7.5%;
  margin-left: 1%;
}

#footerButtonsParent {
  flex-basis: 100%;
  flex-shrink: 1;

}

#footerButton {
  width: 35%;
  min-width: 100px;
  max-height: 100px;
  padding-top: 2%;
  padding-bottom: 2%;
  margin: 1%;
  font-size: 150%;
  background-color: rgb(0, 0, 77);
  color:#f7f7f7;
  font-weight: bold;
  border-color: rgb(0, 0, 10);
}

#footerImage {
  flex-basis: 10%;
  max-height: 140px;
  margin-top: 5px;
  margin-right: 5px;
  flex-shrink: 1;
}
#customNews1Heading {
  font-size: 215%;
}
#customNews2Heading {
  font-size: 210%;
}

/* NavBar SizeAdjustments */

@media only screen and (max-width: 1000px) {
li a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-size: 100%;
  padding: 2.5%;
}
} 

/* LowerNavBar SizeAdjustments */
@media only screen and (max-width: 1000px) {
  .SideButton {
  margin: 10%;
  font-size: 200%;
  margin-top: 5%;
  margin-bottom: 5%;
}
}