body {
	padding-left: 15px;
	background-color: #FFF;
	font-family: "Lucida-Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
	background-color: #111;
	text-align: center;
	color: #0D0;
}
 
a {
	color: #00D;
	transition: 0.2s ease;
}
a:hover {
	color: #
}
.main {
	display: flex;
	justify-content: center;
}

@media (max-width: 767px) {
	.navigation {
		display: block;
		width: 100%;
		background-color: #666;
		border-radius: 12px;
		padding: 5px;
		margin-right: 20px;	
	} 
	.wrapper {
		display: block;
		width: 100%;
		background-color: #666;
		margins: 40px 3%;
		border-radius: 12px;
		padding: 5px;
		clear: both;
		margin-right: 20px;
	}
}

@media (min-width: 768px) {	
	.navigation {
		width: calc(25% - 100px);
		background-color: #666;
		border-radius: 12px;
		padding: 5px;
		margin-right: 20px;
	} 
	.wrapper {
		width: 75%;
		background-color: #666;
		margins: 40px;
		margin-right: 20px;
		border-radius: 12px;
		padding: 5px;
	}
}

.navigation-list {
	text-align: left;
}

/* BLOGS! */

.blog-post {
	display: block;
	width: 85%;
	margin: auto;
	margin-bottom: 10px;	
	background: #888;
	box-shadow:  0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 6px rgba(0, 0, 0, 0.08);
	text-align: center;	
	transition: transform 0.3s ease;
	padding: 5px;
	border-radius: 15px;
}

.blog-post:hover {
	transform: translateY(-5px);
}	

.blog-time .blog-title .blog-description{
	width: 100%;
}	

.blog-wrapper {
	background-color: #777;
	width: 75%
}

.comments {
	margin: 20px 0px 20px 20px;
}

.post {
	text-align: left;
}
 
/* Forms */

.author {
	font-family: "Lucida-Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
	width: 20%;
}

.comment {
	font-family: "Lucida-Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
	width: 80%;
    	height: 200px;
	padding: 12px;
}