@charset "UTF-8";
/* CSS Document */
:root {
	--letter-spacing: 0.01rem;
	--leading: 1.25em;
	--gap: 1em;
		}

::selection {
	color: #000;
	background-color: #A1A1A1;
}

::-moz-selection {
	color: #000;
	background-color: #A1A1A1;
}
		
html {
    font-size: 28px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	scrollbar-gutter: auto;
}

body {
	color: #FFF;
	background-color: #000;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	line-height: var(--leading);
	letter-spacing: var(--letter-spacing);
	font-family: "forma-djr-text", sans-serif;
	font-weight: 400;
	font-style: normal;
	margin: 0;
	padding: 0;
	pointer-events: auto;
	scroll-behavior: smooth;
}

@media only screen and (max-width: 1400px) {
	body {
        font-size: 0.9em;
    }
}

/* Universal Styles
   ========================================================================== */

h1, h2 {
	display: inline-block;
	padding: 0;
	vertical-align: baseline;
	font: inherit;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: calc(var(--leading)*1);
	margin-left: 0;
	}

p, a, ul, li {
	padding: 0;
	vertical-align: baseline;
	font: inherit;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: calc(var(--leading)*1);
	margin-left: 0;
	}

	p:last-child {
		margin: 0;
	}

ul {
	font: inherit;
	list-style-type: none;
	padding: 0;
	margin: 0;
	}

.italic {
	font-family: "forma-djr-text", sans-serif;
	font-weight: 400;
	font-style: italic;
	}

a:active, a:visited, a:link {
	color: #FFF;
	text-decoration: underline;
	border: none;
}

a:hover {
	color: #A1A1A1;
	text-decoration: underline;
	border: none;
}

/* Structure
   ========================================================================== */
.site-container {
	display: grid;
	gap: 0 var(--gap);
	text-align: left;
	position: relative;
	padding: 0;
	overflow: hidden;
	width: auto;
}

@media only screen and (max-width: 767px) {
	.site-container {
		grid-template-columns: repeat(6, 1fr);
		margin: 0 1.5em;
	}
	.main {
		grid-column: span 6; }
}

@media only screen and (min-width: 768px) {
	.site-container {
		grid-template-columns: repeat(12, 1fr);
		margin: 0 2em;
	}
	.main {
		grid-column: span 12; }
}


@media only screen and (min-width: 1400px) {
	.main {
		grid-column: span 6; 
	}
}

.main {
	margin-top: calc(var(--leading)*1);
}