body {
	background: #f4f4f4 url('../img/bg.jpg') no-repeat fixed center;
	font-size: 1.6vw;
	font-family: monospace;
}

h1{
	text-align:center;
}

li,
pre {
	border: .1vw solid rgb(200, 200, 200);
	border: .1vw solid rgba(0, 0, 0, 0.2);
	border-radius: 1vw;
	box-shadow: .2vw .3vw 2vw rgba(0, 0, 0, 0.2);
	color: white;
	background: #efeae2;
	display: block;
	margin: 0.1vw 0 0 0;
	padding: 0.3vw 1vh;
}

a{
	color: #a6abef;
}

a:visited {
	color: #efa6ab;
}

a:hover{
	color: white;
}

pre {
	font: 0.9em monospace;
	font-weight: bold;
	background: #ddd;
	color: #555;
}

br {
	clear: both;
}

button{
	border-radius: 2%
}

connection {
	z-index: -1;
	border: .2vw solid;
	border-radius: 7em;
	color: rgb(128, 128, 128);
	color: rgba(0, 0, 0, 0.5);
}

connection.odd {
	border-radius: 100;
}

connection.dashed {
	color: black;
	border: 1vw dashed;
}

connection.timePeriod{
	border-style: ridge outset;
	border-width: .8vw;
	border-bottom-left-radius: 70;
	border-color: #86909f;
}

inner {
	border: .25vw solid;
	border-radius: 1vw;
	color: #668;
}

.node {
	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, 0.96);
	float: left;
	margin: 3vw;
	padding: 2vw;
	border: .1vw solid rgb(200, 200, 200);
	border: .1vw solid rgba(0, 0, 0, 0.2);
	border-radius: 1vw;
	box-shadow: .2vw .3vw 2vw rgba(0, 0, 0, 0.2);
}

.anchor {
	display: block;
	width: 0;
	margin-top: 0.1em;
	margin-left: 1em;
}

.personal {
	float: right;
	font-weight: bold;
}

.projects{
	float: right;
	max-width: 30vw;
	font-size: 1.4vw;
}
.overview{
	font-size: 1.5em;
	max-width:50vw;
}

.title{
	max-width: 50vw;
	cursor:pointer;
	font-size: 1.5em;
	background-color: rgba(200,200,200,.7)
}


.sidenav {
	height: 60%; 
	width: 0;
	position: fixed; 
	z-index: 1;
	top: -6vh; 
	left: -7vw;
	background-color: #9ea7e4;
	overflow: hidden;
	transition: .17s;
	padding: 2vw;
	border: .1vw solid rgb(200, 200, 200);
	border: .1vw solid rgba(0, 0, 0, 0.2);
	border-radius: 1vw;
	box-shadow: .2vw .3vw 2vw rgba(0, 0, 0, 0.2);
}


.sidenav a {
	padding: 4vh .5vw 2vh 6vw;
	text-decoration: none;
	font-size: 3.5vh;
	color: #111;
	display: block;
}

.sidenav .closebtn {
	position: absolute;
	bottom: -2.75vh;
	right: 0vw;
	font-size: 3vw;
}

#mainContent {
	transition: margin-left .5s;
	padding: .5vh;
	z-index: -10;
	flex: 1;
	overflow-y: hidden;
	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, 0.4);
}

.container{
	padding: .5vw 0;
	margin: 0 auto;
	width: 100vw;
	height: 55vh;
}


.gallery-wrap {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	justify-content: left;
	flex-direction: row;
	width: 95%;
	height: 50vh;
}

.item {
	display:block;
	flex: 1;
	overflow: hidden;
	transition: flex 0.17s;
	border: .1vw solid rgb(200, 200, 200);
	border: .1vw solid rgba(0, 0, 0, 0.2);
	border-radius: 1vw;
	box-shadow: .2vw .3vw 2vw rgba(0, 0, 0, 0.2);
}
	
.item p{
	padding: 0 4vw 0;
	text-align: justify;
	display: none;
}
	

.item-1{ 
	background-color: #e3e7f1;
}
.item-2{ 
	background-color: #e1edf1;
}
.item-3{ 
	background-color: #def1ec;
}
.item-4{ 
	background-color: #dcf1e1;
}
.item-5{ 
	background-color: #dff0d9;
}
.item-6{ 
	background-color: #e9f0d7;
}
.item-7{ 
	background-color: #f0ead4;
}

button{
	position:relative;
}
	
button span {
	position: absolute;
	top: 0;
	left: 1vw;
}

.item-1 p, .item-2 p, .item-3 p, .item-4 p, .item-5 p, .item-6 p, .item-7 p{
	font-size: 2vw;
}


@media screen and (orientation:portrait){
	
	button{
		position:relative;
	}
	
	button span {
		position: absolute;
		top: 0;
		left: 3vw;
	}
	
	.item-1, .item-2, .item-3, .item-4, .item-5, .item-6, .item-7 {
		font-size: 1.5vh;
		
	}
	
	.item-1 p, .item-2 p, .item-3 p, .item-4 p, .item-5 p, .item-6 p, .item-7 p{
		font-size: 4vw;
		position: absolute;
		top:3vh;
		left:1vw;
	}
	
	
	.gallery-wrap {
		overflow-y:scroll;
		flex-direction: column;
		height: 70vh;
		width: 90vw;
		
	}
	
	.sidenav {
		height: 75%;
		position: fixed; 
		z-index: 1;
		top: -6vh; 
		left: -10vw;
		transition: .17s;
		margin: 3vw;
		padding: 2vw;
	}
	
	.sidenav .closebtn {
		position: absolute;
		bottom: -2vh;
		right: .25vw;
		font-size: 4vh;
	}
}