/* COLORS */

body { background-color:#151515; color:springgreen; }
p a { color:orchid; border-bottom:2px solid orchid; }
p a:hover { color:aquamarine; border-bottom:2px solid aquamarine; }
h1 { color:white; }
strong { color:orange; }
.logo { background-color:slategray; color:white; }
.slogan { color:white; }
.slogan a:hover { color:orchid; }
.menu { background-color:slategray; color:white; }
.post { border-top:4px solid orchid; }
.post { border-bottom:4px solid aquamarine; }
.post-date { color:slategray; }
.post-image { background-color:aquamarine; }
.post-image:hover { background-color:orchid; }
.footer { background-color:slategray; color:black; }

/* SHADOWS */

.logo { text-shadow:2px 2px 0px orchid, 4px 4px 0px orchid, 4px 4px 10px orchid, -2px -2px 0px aquamarine, -4px -4px 0px aquamarine, -4px -4px 10px aquamarine; }
.logo:hover { text-shadow:2px 2px 0px aquamarine, 4px 4px 0px aquamarine, 4px 4px 10px aquamarine, -2px -2px 0px orchid, -4px -4px 0px orchid, -4px -4px 10px orchid; }
.menu-element, h1 { text-shadow:2px 2px 0px orchid, 4px 4px 0px orchid, 4px 4px 10px orchid, 4px 4px 10px orchid; }
.menu-element:hover, h1 a:hover { text-shadow:2px 2px 0px aquamarine, 4px 4px 0px aquamarine, 4px 4px 10px aquamarine, 4px 4px 10px aquamarine; }
.slogan { text-shadow:none; }

/* ANIMATIONS */

@keyframes blink {
	to { visibility:hidden; }
}

@-webkit-keyframes blink {
	to { visibility:visible; }
}

.blink {
	animation:blink 1s steps(5, start) infinite;
	-webkit-animation:blink 1s steps(5, start) infinite;
}

/* FONTS */

@font-face {
    font-family:"Upheaval TT";
    src:url("../fonts/upheavaltt.ttf");
    src:url("../fonts/upheavaltt.eot") format("truetype");
    src:url("../fonts/upheavaltt.woff") format("woff");
    src:url("../fonts/upheavaltt.woff2") format("woff2");
}

@font-face {
    font-family:"Consolas";
    src:url("../fonts/consolas.eot") format("eot");
    src:url("../fonts/consolas.ttf") format("truetype");
    src:url("../fonts/consolas.woff") format("woff");
}

/* HTML ELEMENTS */

body {
	font-family:"Consolas", sans-serif;
	font-size:15px;
}

h1, h2, h3 {
	padding-bottom:7px;
	font-family:"Upheaval TT", sans-serif;
	line-height:60%;
}

h1 {
	font-size:2rem;
}

h2 {
	font-size:1.5rem;
}

p {
	text-align:justify;
	line-height:120%;
}

h1, h2, h3, p {
	margin-bottom:1rem;
}

h1:last-child, h2:last-child, h3:last-child, p:last-child {
	margin-bottom:0rem;
}

p a {
	display:inline-block;
	margin-bottom:-2px;
}

sup {
	position:relative;
	top:-0.5rem;
	font-size:60%;
}

/* CLEAR */

.cb:after {
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	height:0;
	line-height:0;
}

/* HEADER */

.logo {
	margin:0rem;
	padding-bottom:0.5rem;
	text-align:center;
	line-height:100%;
	font-size:3.5rem;
}

.slogan-container {
	padding:1rem;
	text-align:center;
}

.menu {
	margin-top:0.2rem;
	padding:0.5rem;
	font-family:"Upheaval TT", sans-serif;
	text-align:center;
}

.menu-element {
	display:inline-block;
	margin-right:2rem;
	font-size:1.5rem;
	cursor:pointer;
}

.menu-element:last-child {
	margin-right:0rem;
}

/* BODY */

.content {
	padding:4rem;
	max-width:990px;
	margin:0px auto;
}

.post {
	padding-top:4rem;
	position:relative;
	padding-bottom:4rem;
}

.post:first-child {
	padding-top:0rem;
	border-top:none;
}

.post:last-child {
	padding-bottom:0px;
	border-bottom:none;
}

.post-image {
	display:block;
	float:left;
	width:33%;
	max-width:15rem;
	height:auto;
	margin-top:0.4rem;
	margin-right:2rem;
	margin-bottom:1rem;
}

.post-date {
	margin-bottom:1rem;
}
.post-date:before { content:"["; }
.post-date:after { content:"]"; }

/* FORMS */

.form input[type=text], .form textarea {
	display:block;
	width:100%;
	margin-bottom:8px;
	padding:5px;
	border:2px solid slategray;
	background:slategrey;
	color:white;
	font-family:inherit;
	font-size:15px;
}

.form input[type=text]:hover, .form textarea:hover {
	border:2px solid aquamarine;
}

.form input[type=text]:focus, .form textarea:focus {
	border:2px solid orchid;
}

.form .err {
	border:2px solid red !important;
}

.form textarea {
	height:150px;
}

.form input[type=button], .form input[type=submit], .form button {
	padding:6px 15px;
	background:slategray;
	border:2px solid slategray;
	font-family:inherit;
	color:white;
	cursor:pointer;
}

.form input[type=button]:hover, .form input[type=submit]:hover, .form button:hover {
	border:2px solid aquamarine;
}

.form input[type=button]:active, .form input[type=submit]:active, .form button:active {
	border:2px solid orchid;
}

/* FOOTER */

.footer {
	padding:1rem 0rem;
	line-height:120%;
	text-align:center;
}

.copy-left {
	display:inline-block;
	text-align:right;
	margin:0px;
	-moz-transform:scaleX(-1);
	-o-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	transform:scaleX(-1);
	filter:FlipH;
	-ms-filter:"FlipH";
}

/* RESPONSIVE */

@media screen and (max-width:800px) {
	p {
		text-align:left;
	}

	.post-image {
		float:none;
		width:100%;
		margin:1rem auto 1rem auto;
	}

	.content {
		padding:2rem 1rem;
	}

	.form {
		width:auto;
	}
}