header {
  color: white;
  background-color: black ;
  font-family: 'Prata', serif;
  padding: 20px 20px;
  box-shadow: 5px 5px 8px #888888;

}
header p {
 text-align: left;
 
}

div h2{
  margin-top: 50px;
  font-family: 'Prata', serif;
  width: 100%
}
p {
  font-family: 'Prata', serif;
  text-align: center;
  margin: 40px auto;
  width: 200px;
}

h1 {
  font-family: 'Prata', serif;
}
article{
  height: 400px;
  margin-top: 200px;
}

ul{
  text-align: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

li {
  list-style: none;
  display: inline;
  justify-content: space-around;
  text-align: center;
  font-family: 'Prata', serif;
  color: white;
  text-decoration: none;
  margin: 0 auto;
}
li a {
  color: white;
  text-decoration: none;
  }





/* CLASSES */

.seals{
  height: 100px;
  width: 100px;
  
}


.category-main{
  display: flex;
  justify-content: center;
  text-align: center;
  font-family: 'Prata', serif;
  margin-top: 100px;
}  





/* ID's */

#left-potus h1 {
  background-color: #2e598f;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
  
}
#mid-potus h1 {
  background-color: #53239c;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}
#right-potus h1 {
  background-color: #940f15;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}  

#left-potus h2 {
  background-color: #2e598f;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
  
}
#mid-potus h2 {
  background-color: #53239c;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
 
}
#right-potus h2 {
  background-color: #940f15;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;

}  

#left-potus{
  width: 100%;
}
#mid-potus{
  width:100%;
}
#right-potus{
  width:100%;
}


  


#left-potus a {
  color: #0015BC;
  width: 75px;
}
#mid-potus a {
  color: #53239c;
  width: 75px;

}
#right-potus a {
  color: red;
  width: 75px;

}

#left-house{
  width:100%;
}
#mid-house{
  width:100%;
}
#right-house{
  width:100%;
}

#left-house h1 {
  background-color: #2e598f;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}
#mid-house h1 {
  background-color: #53239c;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}
#right-house h1 {
  background-color: #940f15;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}
#left-house h2 {
  background-color: #2e598f;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
  
}
#mid-house h2 {
  background-color: #53239c;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
 
}
#right-house h2 {
  background-color: #940f15;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;

}  

#left-house a {
  color: #0015BC;
  width: 75px;

}
#mid-house a {
  color: #53239c;
  width: 75px;

}
#right-house a {
  color: red;
  width: 75px;

}

#left-senate{
  width:100%;
}
#mid-senate{
  width:100%;
}
#right-senate{
  width:100%;
}

#left-senate h1 {
  background-color: #2e598f;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}
#mid-senate h1 {
  background-color: #53239c;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}
#right-senate h1 {
  background-color: #940f15;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}
#left-senate h2 {
  background-color: #2e598f;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}
#mid-senate h2 {
  background-color: #53239c;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}
#right-senate h2 {
  background-color: #940f15;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}  

#left-senate a {
  color: #0015BC;
  width: 75px;

}
#mid-senate a {
  color: #53239c;
  width: 75px;

}
#right-senate a {
  color: red;
  width: 75px;

}

#left-scotus{
  width:100%;
}
#mid-scotus{
  width:100%;
}
#right-scotus{
  width:100%;
}

#left-scotus h1 {
  background-color: #2e598f;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}
#mid-scotus h1 {
  background-color: #53239c;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}
#right-scotus h1 {
  background-color: #940f15;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
}
#left-scotus h2 {
  background-color: #2e598f;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
  
}
#mid-scotus h2 {
  background-color: #53239c;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;
 
}
#right-scotus h2 {
  background-color: #940f15;
  color: white;
  width: 100%;
  box-shadow: 5px 5px 8px #888888;

}  

#left-scotus a {
  color: #0015BC;
  width: 75px;

}
#mid-scotus a {
  color: #53239c;
  width: 75px;

}
#right-scotus a {
  color: red;
  width: 75px;

}

#content-potus {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  text-align: center; 
}

#content-potus img {
  height: 150px;
  width: 200px;
  box-shadow: 5px 5px 8px #888888;
  border-radius: 5%;
}

#content-house {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  text-align: center;  
}

#content-house img {
  height: 150px;
  width: 200px;
  box-shadow: 5px 5px 8px #888888;
  border-radius: 5%;
}

#content-senate {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  text-align: center;  

}

#content-senate img {
  height: 150px;
  width: 200px;
  box-shadow: 5px 5px 8px #888888;
  border-radius: 5%;
}

#content-scotus img {
  height: 150px;
  width: 200px;
  box-shadow: 5px 5px 8px #888888;
  border-radius: 5%;
}

#content-scotus {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  text-align: center;  

}

#navbar{
  width: 100%;
  background-color: slategray;
  margin: 0 auto;
  box-shadow: 5px 5px 8px #888888;

 
}

#about p {
  width: 400px;
}
#disclaimer p {
  width: 400px;
}


@media screen and (max-width: 500px){
  .seals{
    height: 60px !important;
    width: 60px !important;
  }

  .category-main{
    display: flex;
    justify-content: center;
    font-size: 70% !important;
    font-family: 'Prata', serif;
    margin-top: 100px;
  }
  
  #content-potus img{
    height: 75px !important;
    width: 125px !important;
    box-shadow: 5px 5px 8px #888888;
    border-radius: 5%;
  }

  #content-potus{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    font-size: 80% !important;
  }

  #content-potus p {
    font-size: 16px;
  }

  #content-house{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    font-size: 80% !important;
  }

  #content-house img{
    height: 75px !important;
    width: 125px !important;
    box-shadow: 5px 5px 8px #888888;
    border-radius: 5%;
  }

  #content-house p {
    font-size: 16px;
  }

  #content-senate img{
    height: 75px !important;
    width: 125px !important;
    box-shadow: 5px 5px 8px #888888;
    border-radius: 5%;
  }

  #content-scotus img{
    height: 75px !important;
    width: 125px !important;
    box-shadow: 5px 5px 8px #888888;
    border-radius: 5%;
  }

   
  #content-senate{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    font-size: 80% !important;
  }

  #content-senate p {
    font-size: 16px;
  }

  #content-scotus{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    font-size: 80% !important;
  }

  #content-scotus p {
    font-size: 16px;
  }
}