@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');

body {
    margin-top:0px;
    height:100%;
    line-height:1.88889;
    font-family:'Avenir Light';
    font-size:100%;
    background:rgb(255,255,255);
    color:rgb(30,30,30);
}
a {color:rgb(30,30,30)}
a:hover, a:active {
    color:rgb(0,0,0)
}
canvas {margin:auto; display:block}
h1, h2, h3, h4 {
    font-family:'Libre Baskerville';
    font-weight:normal;
}
h1 { /*homepage title header*/
    font-size:1.2em;
    margin-bottom:0%
}
h2 { /*other pages title header*/
    font-size:1.2em;
    white-space: nowrap
}
h3 { /*bottom copyright text */
    font-size:0.67em;
    font-weight:normal
}
p {
    font-size:0.9em;
    text-align:justify
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }  
hr {border:0px; height:1px; background:rgb(150,150,150); margin-left:16.5%; margin-right:16.5%; clear:both}
img {border:0px; padding:3%; max-width:100%; max-height:100%}
table {table-layout:auto; border-collapse:collapse; width:100%; margin-left:3%}
.banner {
    background: url(../index/top.png) top center no-repeat;
    background-size:cover;
    margin-bottom:5%;
    margin-left:-8px;
    margin-right:-8px;
    height:300px;}
.header {
    margin-bottom:5%;
    margin:auto;
    max-width:580px;
    padding-top:5%;}
.main {max-width:580px; margin-top:5%; margin-bottom:5%; margin:auto;}
.paragraph {float:left; margin-left:3%; margin-right:3%; margin-bottom:5%}
.text {width:56%; margin-left:3%; margin-right:1%}
.photo {width:38%; margin-top:2%; margin-left:2%; margin-right:0%}
.row:after {content:""; display:table; clear:both}
.footer {margin-top:15px; max-width:600px; margin:auto;}
.copyright {float:left; margin-top:6%;margin-left:3%}
.links {float:right; margin-top:10%; font-size:0.9em}
.mail:hover {color:rgb(221,75,57)}
.linkedin:hover {color:rgb(0,123,182)}
.facebook:hover {color:rgb(59,89,152)}
.twitter:hover {color:rgb(30,161,242)}
.home:hover {color:rgb(0,0,0)}
.projects:hover {color:rgb(0,0,0)}
.up:hover {color:rgb(0,0,0)}
.alignleft {float:left}
.alignright {float:right}
.aligncenter {text-align:center}


@media (max-width:600px) { /*phone display*/
  img {padding:2%}
  table {width:94%}
  .paragraph {width:94%; margin-bottom:5%}
  .text {margin-left:3%; margin-right:0%}
  .photo {margin-top:0%; margin-bottom:5%; margin-left:1%; margin-right:1%}
  .copyright {width:100%; text-align:center; margin-left:0%}
  .links {width:100%; text-align:center; margin-top:5%}
}