body {
  margin: 0;
  color:#873b77;
  font-family: Georgia,serif;
}

section{
    margin-bottom: 8%;
    padding:2em;
}
p
{
    font-size: 16pt;
}
figcaption
{
    color:#3b73f3;
}
a {
  color: #289a1c;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 170px;
    position: fixed;
    height: 100%;
    overflow: auto;
    background-color: #786ED4;
}

li a {
    font-family: Georgia;
    font-size: 24pt;
    display: block;
    color: #c362ae;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a:visited {
    background-color: #4CAF50;
    color: #FFFFFF;
}

li a:hover {
    background-color: #78cecb;
    color: #000000;
}
h1.header
{
    width:75%;
    text-align:center;
    position:relative;
    color:#786ED4;
    float:left;
    font-size:36pt;
    margin-top:auto;
}

.wrap {
  position: relative;
}


.wrap:before {
  content: ' ';
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  background-image: url("images/codecat.jpg");
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.content {
  overflow:hidden;
  position: relative;
  width:75%;
  float:right;
  padding:12px;
}

img.portrait
{
    padding-left: 230px;
    margin-left: auto;
    margin-right: auto;
    width:850px;
    height:1100px;
    position:relative;
}

img.photo
{
    width:500px;
    height:500px;
    position:relative;
}
#sidebar
{
    width: 200px;
    float: left;
    
}
.WP
{
    width:75%;
    text-align:center;
    position:relative;
    float:left;
    font-size:24pt;
    margin-top:auto;
}