/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
  margin: px;
  padding: px;
}

header{
  font-family:timesnewroman;
  text-align: center;
  align-content: center;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  max-height: 100px;
  min-width: 100px;
}
header p{
  text-align: center;
  align-content: center;
  font-size: 25px;
  margin: auto;
  height: 75px;
  width: 100px;
  border-style: solid;
  border-width: 1px;
}
header img {
  height: 5%;
  width: 5%;
  margin: auto;
}
.subheader{
  display: flex;
  flex-direction: row;
  text-align: center;
  margin: auto;
  border-style: solid;
  border-width: 2px;
  border-left: 0px;
  border-right: 0px;
  padding-left: 10px;
}
.subheader h6 {
  text-align: center;
  display: flex;
  margin: auto;
  margin-left: 500px;

  }
.subheader p{
font-size: small; 
  margin: auto;
    margin-left: 600px;
}
  
section{
  display:flex;
  flex-direction: row;
  margin: auto;
  padding: auto;
}
div{
  margin: auto;
}
 .navbar ul {  
  list-style-type: none;
  background: rgb(0, 0, 0);
   margin: 10px 10px;
  margin-left: 50px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 600px;
  }
  .navbar li{
  color: white;
  padding: px;
  margin: px;
  text-align: center;
  display: flex
}
  .navbar a{
    Color: white;
    text-decoration: none;
    padding-top: px;
    padding: 0.5rem 0.5rem;
    display: block;
    Text-align: left;
  }
  .navbar a:hover{
    background-color: #575757;
    border-radius: 5px
}
 iframe{
  min-width: 830px;
  min-height: 400px;
  margin-left: px;
  margin-right: px;
  display: flex;
  position: absolute;
  top: 165px;
  left: 345px;
  right: 345px;
}
.caption{
  position: absolute;
  top: 570px;
  left: 350px;
}
.container{
  display: flex;
  flex-direction: row;
  margin-top: 420px;
  margin-left: 9px;
  margin-right: 9px;
  justify-content: space-evenly;
}
.column2{
  width: 255px;
  padding: 10px;
  margin: auto;
  text-wrap: wrap;
  text-align: justify;

}
.column3{
  width: 255px;
  padding: 10px;
  margin: auto;
  text-wrap: wrap;
  text-align: justify;
}
.column4{
  width: 255px;
  padding:10px;
  margin: auto; 
  text-wrap: wrap;
  text-align: justify;
}
.homecenter {
  background-color: rgb(212, 212, 212);
  display:block;
  margin: 10px 10px;
  text-align: center;
  min-height: px;
  max-height: px;
  min-width: px;
  max-width: px;
  text-wrap: wrap;
overflow-y:scroll;
}
.column5{
  list-style-type: none;
  background-color: #949494;
  margin: 10px 10px;
  margin-right: 50px;
  padding: 10px;
  float: right;
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 600px;
}
footer{
  background-color: #949494;
  text-align: center;
  align-content: center;
  padding: 55px;
  height: 50px;
}
.blognav ul {  
  list-style-type: none;
  display: flex;
  flex-direction: row;
  }
.blognav li{
  color: black;
  padding: px;
  margin: auto;
  text-align: center;
  display: flex
}
.blognav a{
    Color: black;
    text-decoration: none;
    padding-top: px;
    padding: 0.5rem 0.5rem;
    display: block;
    Text-align: left;
  }
.blognav a:hover{
    background-color: #575757;
    border-radius: 5px
}