@import url('https://rsms.me/inter/inter.css');
 /*Reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block; box-sizing: border-box;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
/* @font-face */
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:900;src:local('Titillium Web Black'),local('TitilliumWeb-Black'),url(https://fonts.gstatic.com/s/titilliumweb/v6/NaPDcZTIAOhVxoMyOr9n_E7ffEDBGIVzY4SY.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Titillium Web';font-style:normal;font-weight:900;src:local('Titillium Web Black'),local('TitilliumWeb-Black'),url(https://fonts.gstatic.com/s/titilliumweb/v6/NaPDcZTIAOhVxoMyOr9n_E7ffEDBGItzYw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* BEGIN Variables */
:root {
	--font-size: calc(100vw / 72);
	--line-height: calc(var(--font-size) * 1.6);
	--column-gap: calc(var(--line-height) * 2);
	--row-gap: var(--column-gap);
	--full-span: span 9;
	--template-col: repeat(9, 1fr);

	--brown: #65441a;
	--purple: #281D39;
	--cream: #FBCB9A;
	--pink: #744594;
	--blue: #89c4f4;
}
/* END Variables */

/* BEGIN Global */
html {
	font-size: var(--font-size);
	line-height: var(--line-height);
}

body {
	font-family: 'Inter var experimental','Inter', 'Arial', sans-serif;
	font-weight: 400;
	line-height: var(--line-height);
	overflow-x: hidden;
	scroll-behavior: smooth;
	color: var(--purple);
	background-color: var(--brown);
	height: 100%;
	position: relative;
	min-height: 460px;
}

body:after {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(18, 16, 16, 0.1);
	opacity: 0;
	z-index: 1;
	pointer-events: none;
}

body:before {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
	z-index: 1;
	background-size: 100% 4px, 6px 100%;
	pointer-events: none;
}

/* BEGIN Typography */
h1, h2, h3, h4, h5, h6, header {
	font-weight: 700;
}

h1 {
	font-family: 'Titillium Web', sans-serif;
	text-transform: uppercase;
	font-size: 3.6rem;
}

h1, h3 {
	letter-spacing: .02em;
}

h2 {
	font-size: 1.6rem;
	margin: var(--line-height) 0 0;
}

h3 {
	font-size: 1.8rem;
	font-family: 'Titillium Web', sans-serif;
	text-transform: uppercase;
}

h4 {
	font-size: 1.2rem;
	margin: calc(var(--line-height) / 4) 0;
}

h5 { 
	font-size: 1rem; 
}

h6 { 
	font-size: .8rem; 
	text-transform: uppercase;
}

strong {
	font-weight: 650;
	color: var(--blue);
}

em {
	font-style: italic;	
  font-variation-settings: 'slnt' 10deg;
}

p, ul, ol {
	margin: var(--line-height) 0;
}

p, ul, ol, a, footer {
	color: var(--cream);
}

a {
	text-decoration-color: var(--blue);
  font-weight: 400;
	transition: .2s ease font-variation-settings;
	font-variation-settings: 'wght' 400;
}

a:hover, a:active {
	color: var(--blue);
  font-weight: 700;
	font-variation-settings: 'wght' 700;
}

.content ul li {
	position: relative;
}

.content ul li:before {
    content: "\25A0";
    color: var(--blue);
    position: relative;
    margin-right: calc(var(--line-height) / 2);
}

nav ul li a {
	font-family: 'Titillium Web', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: calc(var(--line-height) / 16);
    text-decoration: none;
    display: inline-block;
    position: relative;
    height: calc(var(--line-height) );
    transition: .2s ease-in color;
    will-change: color;
}

nav ul li a .nav__link-bar {
    height: 10%;
    width: 110%;
    background: #89c4f4;
    position: absolute;
    bottom: 0;
    left: -5%;
    z-index: -10;
}

nav ul li a:hover {
	color: var(--purple);
}

nav ul li a:active .nav__link-bar{
	color: var(--purple);
	height: 100%;
}

.footer__email--small-caps {
	color: var(--blue);
	text-transform: uppercase;
	font-size: 0.8rem;
	font-weight: 700;
}
/* END Typography */

::selection {
	background-color: var(--cream);
	color: var(--purple);
}


/* BEGIN Utility classes */
.is-hidden, 
.container:not(.container--home) .bg-container {
	display: none;
	visibility: hidden;
	opacity: 0;
}

.is-loading article,
.is-loading .bg-container {
  opacity: .6;
}
/* END Utility classes */

/* BEGIN Layout */
.container {
	position: relative;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	padding: calc(var(--line-height) * 1.5);
	height: 100%;
	min-height: 100vh;
}

.container.container--home {
	height: 100vh;
}

.container :first-child {
	margin-top: unset;
}

.grid-layout {
	display: grid;
	grid-column-gap: var(--column-gap);
	grid-template-columns: var(--template-col);
}

.grid-layout > * {
	align-self: start;
}

/* This is so the nested grids line up. Obey the grid, dammit! */
/* grid-column: <start> / <end> */
.container * { 
	grid-column: 1 / -1;
}

.container, .content {
	grid-template-rows: auto;
	grid-row-gap: var(--row-gap);
}

.container {
	grid-template-rows: calc(var(--line-height) * 2) auto calc(var(--line-height) * 3);
}

.container > header {
	height: 100%;
	grid-column-end: var(--full-span);
}

.container > header nav {
	display: inherit;
	justify-self: end;
	align-self: end;
	margin: auto 0 0;
}

.content__container .content__left {
	grid-column: 1 / 6;
}

.content__container .content__right {
	grid-column: 6 / 10;
}

footer {
	height: 100%;
	overflow: hidden;
}

footer > * {
	align-self: end;
}

footer .footer__logo {
	grid-column: 1 / 4;
	width: 18vw;
}

footer .footer__logo img {
	width: 100%;
}

footer .footer__email{ 
	grid-column: 4 / 7;
}

footer .footer__not-social {
	grid-column: 7 / 10;
}

/* END Layout */

/* BEGIN Loading Icon */
.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.loading__animation {
  animation: pulse 1s infinite;
  color: var(--blue);
  font-size: 2.4rem;
  text-transform: uppercase;
  font-weight: 700;
}
/* END Loading Icon */

/* BEGIN Background Animation */
.container .bg-container {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	min-height: 460px;
}

.container .bg-container > * {
	display: flex;
	align-items: center;
	justify-content: center;
}

.container .bg-container .bg-container__anim {
	display: inherit;
	overflow: hidden;
	flex-direction: row-reverse;
	margin: auto auto var(--line-height);
}

.container .bg-container .bg-container__anim > * {
	position: relative;
	width: 20vw;
	height: 15vw;
	margin: 0;
}

.container .bg-container .bg-container__anim > * svg {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}
/* END Background Animation */

/* BEGIN Media Queries */
@media (min-width: 1600px) {
	:root {
		--font-size: 23px;
	}

	.container {
		max-width: 1600px;
	}

	footer .footer__logo {
		width: 288px;
	}

	.container .bg-container .bg-container__anim > * {
		width: 324px;
		height: 242px;
	}
}

@media (max-width: 812px) {
	:root {
		--font-size: 18px;
	}

	.container {
		padding: var(--line-height);
		grid-template-rows: calc(var(--line-height) * 2) auto 140px;
	}

	.content__container .content__left , 
	.content__container .content__right{
		grid-column: 1 / 10;
	}

	h1 {
		font-size: 2.6rem;
	}

	h2 {
		margin: calc(var(--line-height) / 2) 0 0;
	}

	.container .bg-container .bg-container__anim > * {
		width: 104px;
		height: 74px;
	}

	footer .footer__logo {
		grid-column: 1 / 10;
		width: 100%;
		max-width: 220px;
		margin: auto;
	}

	footer .footer__email{ 
		grid-column: 1 / 5;
	}

	footer .footer__not-social {
		grid-column: 5 / 10;
	}
}

@media (max-width: 480px) {
	:root {
		--font-size: 14px;
		--template-col: repeat(4, 1fr);
		--full-span: span 4;
	}

	.content__container .content__left , 
	.content__container .content__right,
	footer .footer__logo,
	footer .footer__email,
	footer .footer__not-social{
		grid-column: 1 / 5;
	}

	.container.container--about {
		grid-template-rows: calc(var(--line-height) * 2) auto auto;
	}

	h1 {
		font-size: 2rem;
	}

	footer {
		grid-row-gap: calc(var(--row-gap) / 4);
		text-align: center;
	}

	footer .footer__logo {
		max-width: 110px;
		text-align: left;
	}


	.footer__not-social br {
		display: none;
	}
}
/* END Media Queries */