body{
  font-family: Verdana, Geneva, sans-serif;
  background-color:#eeeeee;
  width: 100%;
  min-height:100%;
  margin: 0;
  padding:0;
  line-height:2em;
}

.logo a{
  font-size:1em;
  vertical-align:top;
}

.logo {
  height:2em;
}

.logo img{
    height:1em;
    vertical-align:top;
    padding-top:.4em;
    padding-bottom:.6em;
    padding-left:.5em;
}

.header {
  background-color:#1e1e1e;
  color: #ffffff;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  height:2em;
  width: 100%;
  box-shadow: 0em .5em 3em  0em #1e1e1e; 
}

.nav 
{ 
  position:absolute;
  height:2em;
  top:0;
  right:0;
}

.nav a{
  vertical-align:top;
  padding:7px;
  height:16px;
  font-size:15px;
}

.nav a:link{
  color:#ffffff;
}

.nav a:hover{
  background-color:#8C75D4;
}

.nav a:visited{
  color:#ffffff;
}

.navmenu{
  display:none;
  position:absolute;
  top:0;
  right:.5em;
  vertical-align:middle;
}

.navmenu:hover > .item{
  display:block;
}


.item{
  display:none;
  position:absolute;
  top:2em;
  right: -.5em;
  background-color:#1e1e1e;
  box-shadow: 0em .5em 3em  0em #1e1e1e;
  text-align:center;
}

.item ul{
  padding:0;
  margin:0;    
}

.item li, .item a:link{
  text-decoration:none;
  list-style-type:none;
  text-align:center;
  padding:.5em;
  color:#ffffff;
}

.item li:hover{
  background-color:#8C75D4;
}

.item a:visited{
  color:#ffffff;
}


h1,h4,h2,h6{
  margin:0;
}

h4{
  margin-bottom:1em;
}

.flex-wrapper{
  display:flex;
  min-height:100vh;
  flex-direction:column;
  justify-content:space-between;
}

.content{
 padding-top: 2em;
 color: #000000;

}

.spacer{
margin:2em;
}

code{
  font-family: monospace;
  font-size: 1.1em;
  color: #ffffff;
  background-color:#1d1d1d;
}

blockquote{    
  background-color: #1d1d1d;    
}

.excerpt {
  border:0px solid white;
  border-radius: 1em;
  background-color:#ffffff;
  padding:2em;
  width: 80%;
  margin-left:auto;
  margin-right:auto;
  max-width: 600px;
  margin-bottom: 2em;
  box-shadow: 1em 1em 1em 0em #999999;
}

.article {
  border:0px solid white;
  border-radius: 1em;
  background-color:#ffffff;
  padding:2em;
  width: 80%;
  margin-left:auto;
  margin-right:auto;
  max-width: 600px;
  margin-bottom: 2em;
  box-shadow: 1em 1em 1em 0em #999999;
}



a:link{
  text-decoration:none;
  color:#2B91AF;
}
a:visited{
  color:#2B91AF;
}
a.contbutton{
  background-color:#CCCCCC; 
  color:#000000;
  padding:.5em;
  border-radius: .5em;
}

a.contbutton:hover{
  background-color:#8C75D4;
}

a.contbutton:visited{
  color:#ffffff;    
}

.continue{
  padding: .5em;
  margin-top: 1.5em;
  text-align: center;
}

hr{
  width: 80%;
  margin-left:auto;
  margin-right:auto;
}

.mediaIcon {
  width: 20px;
  padding: .125em;
}


.flex404{
  display:flex;
  flex-direction:row;
  justify-content:center;
  padding-bottom:2em;
}

.msg404{
  padding: 1em;
  width: 18em;
  max-width:600px;
}

.img404{
  align-self:center;
}

footer{
  background-color:#1e1e1e;
  margin-left:none;
  color:#ffffff;
  font-size:.75em;
  width:100%;
}

.footFlex{
  display: flex;
  flex-direction:row;
  align-items: flex-end;
  justify-content: center;
  text-align:center;
}

.footLeft{
  padding: 1em;
  flex:30%;
}

.footMiddle{
  padding: 1em;
  flex: 30%;
}

.footRight{
  padding:1em;
  flex:30%;
}

.badge{
  height: 20px;
  padding: .124em;
  margin-left:auto;
  margin-right:auto;
}

.license{
  text-align:center;
  padding-bottom: 1em;
  margin: none;
}

/*About page layout*/

.about-container{
  border:0px solid white;
  border-radius: 1em;
  background-color:#ffffff;
  padding:2em;
  width: 80%;
  margin-left:auto;
  margin-right:auto;
  max-width: 600px;
  margin-bottom: 2em;
  box-shadow: 1em 1em 1em 0em #999999;
}

.about-content{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.about-bio{
  
}


.bio-header{
  display:flex;
  flex-direction:row;
  justify-content:center;
  margin:1em;
  align-items:center;

  
}
.portrait{
  border-radius:100%;
  height:10em;
  width:10em;
  margin:1em;
}

.about-proficiencies{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    margin:1em;
}

.center{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    align-items:center;
    margin:2em;
}


.proficiency{
    max-width:5em;
    max-height:3em;
}

.about-networkLinks{
    margin-top:5em;
    margin-bottom:5em;
    display:flex;
    flex-direction:row;
    justify-content:space-around;
}

.networkLink{
  display:flex;
  flex-direction:column;
}

.networkLink img{
  display:block;
  width:5em;
  height:5em;
  max-width:5em;
  max-height:5em;
  margin: 0;
}

.networkLink a{
 margin:1em;
}

.networkLink b{
  text-align:center;
}

.git-networkLink{
  display:flex;
  flex-direction:column;
}

.git-networkLink img{
  width:5em;
  height:5em;
  max-width:5em;
  max-height:5em;
  margin: 0;
  order:1;
}


.git-networkLink a{
 margin:1em;
}

.git-networkLink b{
  text-align:center;
  order:2;
}

.about-project{
    display:flex;
    flex-direction:column;
  
}

/*End of About Page Layout*/





/*Mobile layout*/

@media (max-width: 800px) {
  .flex404{
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
    
   footer{
    font-size: 1em;
  }

  .footFlex {
    flex-direction:column;
    justify-content:center;
    align-items:center;
  } 

  .excerpt {
    border:0px solid white;
    border-radius: 1em;
    background-color:#ffffff;
    padding:2em;
    min-width:80%;
    margin-left:auto;
    margin-right:auto;
    max-width: 80%;
    margin-bottom: 2em;
    box-shadow: 1em 1em 1em 0em #999999;
  }
  
  .nav {
    display:none;
  }
  
  .navmenu {
    display:inline;
  }

  .navmenu img{
    height:1em;
    padding:.5em;
  }
  
  .about-networkLinks{
    margin-top:5em;
    margin-bottom:5em;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
}

.git-networkLink a{
 order:2;
}

.git-networkLink b{
  order:1;
}

}