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

@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", 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;
	white-space: nowrap;
}

a:active {
	color: var(--color-contact);
}

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

/* @group navigation */

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: var(--color-music);
}

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.08em;
	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.03em;
	margin-left: 0.20em;
	margin-bottom: 0.28em;
}

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

/* @end */

strong {
	font-weight: 500;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}

p + p iframe {
	margin-top: 1em;
}

iframe {
	max-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;
}

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

.vid iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}