@import url(http://fonts.googleapis.com/css?family=Lato:100,300);
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400);
/*some general fiddling*/
h1{
	color: #3B99C5;
	font-size: 3em;
	margin: 0;
}

h2{
	margin: 0;
}

h3{
	margin: 0;
}

code {
	color: #d3d0c8;
	background: #2d2d2d;
}

/*canvas things*/
#c{
	position: fixed;
	z-index: -1;
}

/*menu*/
.menu{
	width: 130px;
	position: fixed;
	background: #4B4B4B;
	color: #32A5DB;
	padding: 10px;
	left: -150px;
	top: 0px;
	height: 100%;
	z-index: 3;
}

.menu span{
	background: #4B4B4B;
	padding: 5px;
	position: fixed;
	top: 8px;
	left: 8px;
}

.menu span, .menu{
	transition: all 0.2s ease;
}

.menu span:hover, .menu:hover{
	left: 0px;
	transition: all 0.2s ease;
}

.menu:hover + .main{
	margin-left: 130px;
	transition: all 0.2s ease;
}

.menu span:hover{
	padding: 5px;
	left: 5px;
}

.menu ul{
	padding: 0;
	margin: 0;
	margin-top: 40px; 
	list-style: none;
}

.menu li{
	margin: 0;
	padding: 5px;
}

.menu li:hover{
	background: #5A5A5A;
}

/*mainpage stuff*/
body{
	color: #444242;
	font-size: 20px;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	display: flex;
	flex-direction: column;
}

.main{
	margin-top: 40px;
	transition: all 0.2s ease;
	background: rgba(255, 255, 255, 0.3);
	padding: 10px;
}

a:link, a:visited{
	text-decoration: none;
	/*color:#57A7C7;*/
	color: #32A5DB;
}

.list div{
	padding: 5px;
	margin-top: 10px;
	max-width: 800px;
	background: white;
}

.list div:hover{
	background: #69FF9B;
	cursor: pointer;	
}

.blog-list{
	list-style: none;
	padding: 0;
}

.blog-item{
	max-width: 800px;
	padding: 5px;
	/*box-shadow: 1px 1px silver, 
				2px 2px silver, 
				3px 3px silver, 
				4px 4px silver, 
				5px 5px silver;
	border-top: 1px solid silver;
	border-left: 1px solid silver;*/
	margin-top: 10px;
	background: white;
}

.blog-item h3{
	
}

.excerpt{
}

.excerpt p::after{
	content: '...';
	display: inline-block;
}

.desktop{
	display: block;
}

.tablet, .mobile{
	display: none;
}

/*post styles*/
.post{
	display: flex;
	flex-direction: column;
}

.post-title{
	align-self: center;
}

.post-title h1{
	margin: 0;
}

.post-body{
	max-width: 800px;
}

.highlight{
	padding: 5px;
	overflow: auto;
	background: #4B4B4B;
}

pre{
	margin: 0;
}

/*media queries*/
@media (min-width:501px) and (max-width:1050px){
	.tablet{
		display: block;
	}
	
	.desktop, .mobile{
		display: none;
	}

	.menu:hover + .main{
		margin-left: 160px;
	}
}

@media (max-width:500px){
	.list div{
		border-top: #E2E2E2 1px solid;
	}
	
	.mobile{
		display: block;
	}
	
	.desktop, .tablet{
		display: none;
	}
	
	.post{
		margin-top: 50px;
	}
	
	.menu{
		z-index: 1;
	}

	.menu span{
		position: inherit;
		left: 8px;
	}

	.menu:hover, .menu span:hover{
	}
	
	.menu:hover + .main{
		margin-left: 0px;
	}
}

@media (min-width: 1200px){
	.post-body{
		align-self: center;
		width: 800px;
	}
	.main{
		align-self: center;
	}
}