/* @group global */

:root {
	--color-blog: #e17fae;
	--color-contact: #b5eeff;
	--color-txt-a: #e6e6e6;
	--color-txt-b: #9c9c9c;
	--content-max-width: 912px;
	--color-bg: #333;
}

@charset "UTF-8";

@font-face {

	font-family: "nav";
	src: url("../fonts/nav.eot");
	src: url("../fonts/nav.eot?#iefix") format("embedded-opentype"),
	url("../fonts/nav.woff") format("woff"),
	url("../fonts/nav.ttf") format("truetype"),
	url("../fonts/nav.svg#nav") format("svg");
	font-weight: normal;
	font-style: normal;
}

html {
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
}

*, *::before, *::after {box-sizing: inherit;}

body {
	background-color: var(--color-bg);

	margin: 1% auto 0 auto;
	min-width: 320px;
	max-width: 960px;
	font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
	font-size: 24px;
	color: var(--color-txt-a);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

input, select, textarea, button {

	font-family: inherit;
}

a {

	color: var(--color-txt-b);
	text-decoration: none;
}

a:active {

	color: var(--color-contact);
}

hr {

	margin: 1em 0 2em 0;
	border-top: 1px solid rgb(204, 204, 204);
}

img#nav {

	display: block;
	margin: 0 auto;
}

#nav {

	width: 95%;
	z-index: 2;
	position: relative;
	font-family: nav;
	margin: 0 auto 2% auto !important;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

a#monogram {

	margin: 0.2em 0 0.2em -0.1em;

	color: var(--color-txt-b);
	font-size: 3em;
}

a#monogram:hover {
	color: #ffffff;
}

div#icons a {

	margin-bottom: 0.5em;
}

div#icons {

	font-size: 1.5em;
	margin: 0 0.1em 0 0;
	display: flex;
	min-width: 0;
	justify-content: flex-end;
	align-items: flex-end;
}

div#icons a:nth-child(1) {
	font-size: 1.06em;
	margin-left: 0em;
	margin-bottom: 0.39em;
}

div#icons a:nth-child(1):hover,
div#icons a:nth-child(1):active,
div#icons a:nth-child(1).current {
	color: #ffca1e;
}

div#icons a:nth-child(2) {
	font-size: 0.95em;
	margin-left: 0.05em;
	margin-bottom: 0.45em;
}

div#icons a:nth-child(2):hover,
div#icons a:nth-child(2):active,
div#icons a:nth-child(2).current {
	color: var(--color-blog);
}

div#icons a:nth-child(3) {
	font-size: 1.04em;
	margin-left: 0.05em;
	margin-bottom: 0.375em;
}

div#icons a:nth-child(3):hover,
div#icons a:nth-child(3):active,
div#icons a:nth-child(3).current {
	color: var(--color-dlab);
}

div#icons a:nth-child(3):active,
div#icons a:nth-child(3).current {
	color: black;
}

div#icons a:nth-child(4) {
	font-size: 1.15em;
	margin-left: 0.1em;
	margin-bottom: 0.25em;
}

div#icons a:nth-child(4):hover,
div#icons a:nth-child(4):active,
div#icons a:nth-child(4).current {
	color: #accd1a;
}

div#icons a:nth-child(5) {
	font-size: 1.09em;
	margin-left: 0.08em;
	margin-bottom: 0.45em;
}

div#icons a:nth-child(5):hover,
div#icons a:nth-child(5):active,
div#icons a:nth-child(5).current {
	color: #6ea4b2;
}

div#icons a:nth-child(6) {
	font-size: 1.03em;
	margin-left: 0.15em;
	margin-bottom: 0.35em;
}

div#icons a:nth-child(6):hover,
div#icons a:nth-child(6):active,
div#icons a:nth-child(6).current {
	color: var(--color-contact);
}

ul {
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}

h1 {
	font-weight: normal;
	font-size: 1.75em;
	margin: 0 0 0.75em 0;
}

h1 a {
	color:  var(--color-txt-a);
}

h1 a:active {
	color: var(--color-blog);
}

h2 {
	font-weight: normal;
	font-size: 1.35em;
	line-height: 1.4em;
}

h3 {
	font-weight: bold;
	font-size: 1em;
}

blockquote {
	margin: -1em 0 1.4em 0;
	padding-left: 1em;
	font-size: 0.85em;
	line-height: 1.4em;
	border-left: 2px solid #eee;
}

div + blockquote {

	margin-top: 0em;
}

p + blockquote {

	margin-top: 2.4em;
}

blockquote a {

	text-decoration: underline;
}

p + p iframe {

	margin-top: 1em;
}

iframe {

	width: 100% !important;
	display: inline-block;
	border: none;
	animation-name: fadeIn;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-duration: 1s;
	animation-delay: 1s;
	opacity: 1;
	animation-fill-mode: backwards;
	margin-bottom: 1.4em;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#portfolio, #events, #contact, #about {

	margin: 0 auto;
	width: 95%;

}

#events, #blog {

	padding-bottom: 4%;
}

#blog, #music {

	width: 100% !important;
}

/* @end */

/* @group tag cloud */

#cloud {

	color: var(--color-txt-b);
	z-index: 100;
	white-space: nowrap;
	margin: 0 auto;
	width: 50%;
	position: relative;
	top: 1em;
	height: 20em;
	font-size: 0.63rem;
}

div.jqcloud span {

	padding: 0;
}

div.jqcloud a,
div.jqcloud {
	animation-name: fadeIn;
	animation-duration: 1s;
}

div.jqcloud a:hover {

	color: var(--color-txt-a);
}

div.jqcloud a:active,
div.jqcloud span.active,
div.jqcloud span.active a {

	color: var(--color-txt-a);
	text-decoration: overline;
}

div.jqcloud span.w10 {
	font-size: 550%
}

div.jqcloud span.w9 {
	font-size: 500%
}

div.jqcloud span.w8 {
	font-size: 450%
}

div.jqcloud span.w7 {
	font-size: 400%
}

div.jqcloud span.w6 {
	font-size: 350%
}

div.jqcloud span.w5 {
	font-size: 300%
}

div.jqcloud span.w4 {
	font-size: 250%
}

div.jqcloud span.w3 {
	font-size: 200%
}

div.jqcloud span.w2 {
	font-size: 150%
}

div.jqcloud span.w1 {
	font-size: 100%
}

/* @end */

/* @group search */

/* hide submit button */
#search input[type=submit] {

	display: none;
}

form#search {
	margin-top: 1em;
}

/* hashtag in search bar */
#search label {

	position: absolute;
	top: 0.2em;
	left: 1em;
	font-size: 0.75em;
	color: var(--color-txt-b);
}

#search div#prefetch {

	z-index: 10;
	width: 95%;
	margin: 0 auto;
	position: relative;
	pointer-events: none;
	height: 3em;
}

#search span {

	width: 100%;
}

#search input {

	border: 0;
	font-size: 0.75em;
	pointer-events: auto;
	text-indent: 0.59em;
	color: inherit;
	transition: all 0.15s ease-out;
	background-color: #3a3a3a !important;
	margin: 0;
	padding: 0.5em 0.5em 0.75em 1.2em;
	outline: none;
	width: 33%;
}

#search input:focus {

	width: 100% !important;
}

/* @end */

/* @group blog */

#blog {

	line-height: 1.4em;
}

#blog p {

	margin-top: 0em;
	margin-bottom: 1.4em;
}

article {

	font-size: 0.926em;
	position: relative;
	z-index: 3;
	width: 95%;
	margin: 0 auto;
	padding: 2rem 0 0 0;
}

article.single h1 {

	color: var(--color-blog);
}

article.single h1::first-line {

	 text-decoration: overline;
}

article.secondary_tags {

	padding-top: 0;
	margin-bottom: 1.5rem;
}

article.secondary_tags span {

	font-size: 1rem;
}

.bandcamp {

	height: 120px !important;
/*	width: 100%;*/
}

.bcTrack {
	height: 42px;
	width: 100%;
}

pre {
	padding: 1em;
	line-height: 100%;
	border: 1px dashed #ccc;
}

pre code {
	font: 0.75em Menlo, mono;
	line-height: 1.25em;
	white-space: pre-wrap;
}

article img {

	border: 0;
	width: 100% !important;
	display: inline-block;
}

.vid {

	position: relative;
	height: 0;
	overflow: hidden;
	margin-bottom: 1em;
}

.vid iframe {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

article img {

	height: auto;
}

.post_content {
	font-size: 0.9em;
	padding-bottom: 0.75rem;
	width: 100% !important;
}

.post_content ul {
	margin-bottom: 1.4em;
}

.post_footer {
	color: #aaa;
	font-size: 0.8rem;
	margin: 0 !important;
}

a.tag {

	text-decoration: overline;
}

a.tag:hover {

	outline: 1px solid;
}

.post_tags li a {

	display: inline-block;
	padding: 0.2em 0.3em 0.4em 0.3em;
	margin: 0 0.1em 0 0;
}

.post_tags {

	line-height: 1.4em;
}

.post_tags li {

		display: inline;
		margin-right: 0.5rem;
		margin-bottom: 0.25em;
	}

.post_footer p {

	margin: 0;
}

ul.pagination {

	width: 95% !important;
	margin: 1em auto 0 auto !important;
	font-size: 1.5rem;
}

ul.pagination a {

	padding: 0 0.65rem 0.25rem 0.65rem;
	border-radius: 50%;
	background-color: #222;
	transition: background-color .2s linear;
}

ul.pagination a:hover,
ul.pagination a:active {
	color: #fff;
	background-color: var(--color-blog);
	transition: background-color .2s linear;
}

.pagination li {
	display: inline-block;
	float: none;
}

.pagination li.back_home,
.pagination li.left_arrow {
	float: left;
}

.pagination li.right_arrow,
.pagination li.random {
	float: right;
}

/* @end */

/* @group syntax */

.hljs {
	display: block;
	overflow-x: auto;
	padding: 0.5em;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-name,
.hljs-strong {
	font-weight: bold;
}

.hljs-keyword {
	color: var(--color-blog);
}

.hljs-comment,
.hljs-meta,
.hljs-subst,
.hljs-symbol,
.hljs-regexp,
.hljs-attribute,
.hljs-deletion,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-bullet {
	color: var(--color-txt-b);
}

.hljs-emphasis {
	font-style: italic;
}

/* @end