body {
	background-color:#fff9f1;
	font-family: helvetica, arial, sans-serif;
	font-size: 17px;
	line-height: 20px;
}

p {
	margin-top:0;
	margin-bottom:0;
	max-width: 350px;
}

img {
	height: 100%;
	margin-right: 10px;
	vertical-align: middle;	
}

.home {
 height: 75%;
}

.nav {
	text-align: left;
	position: fixed;
	top:0;
	left:0;
	padding:25px 40px;
	width: 200px;
	height: 100vh ;
	background-color: #fff9f1;
	overflow: hidden;
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}


.navlink {
	color: black;
	font-style:bold;
	font-weight:bold;
	text-decoration:nonez;
	
}

a:link {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color:  #76acc7 ;
}



.project {
	padding: 25px 200px 25px 210px;
	height: 100vh;
	left:0;
    vertical-align: top;
	white-space: nowrap;
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}


.about {
	font-family: helvetica, arial, sans-serif;
	font-size: 17px;
	line-height: 1.3;
	padding: 25px 200px 25px 260px;
	height: 100vh;
	left:0;
    vertical-align: top;
	white-space: nowrap;
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}


.vert {
	height:100%;
	margin-bottom: 20px;
}

.horz {
	max-height:70%;
	height:auto;
	margin-bottom: 20px;
}

.space {
    width: 30px;
    display: inline-block;
    height: 30px;
}

.morespace {
    width: 150px;
    display: inline-block;
    height: 30px;
}

@media (max-width: 800px) {
    .project,
    .about {
        height: auto;
        white-space: normal;
        position: static;
        padding: 10px 25px 120px 25px;
    }

    img {
        display: block;
    }

    .nav {
        position: static;
        height: auto;
        padding: 10px;
    }


    .vert,
    .horz
  {
        max-height: 90vh;
        max-width: 100%;
        width: auto;
        height: auto;
    }

    
    }