:root {
	--primary-font: 'Arial Narrow', sans-serif;
	--secondary-font: 'Arial', sans-serif;
	--film-title: 'Arial Black', 'Arial Narrow', sans-serif;
	--light-color: #f1fff0;
	--text-color: #000000;
	--secondary-color: #1aff00;
	--grey: #909090cc;
	--link-hover-color: #c0b1dc;
	color: var(--text-color);
	font-size: calc(0.8em + 0.25vw);
	letter-spacing: 0.025em;
	line-height: 1.3em;
	font-family: var(--primary-font);
}

* {
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	height: 100%;
	width: 100%;
}

/* landing page background setup */
.overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	pointer-events: none;
}

.overlay--noise {
	filter: opacity(0.15);
	background-image: url(../assets/noise.gif);
	background-position: center;
	/* box-shadow: 0px 0px 3rem 1rem white inset; */
	width: 100%;
	height: 100%;
	background-size: 5%;
	background-repeat: repeat;
	z-index: 10000;
	mix-blend-mode: multiply;
	position: inherit;
}

.videoloop {
	position: fixed;
	top: 0em;
	left: 0em;
	width: 100vw;
	overflow: 100vh;
	z-index: -1;
	pointer-events: none;
}

.videoloop .img {
	background-image: url(../assets/technospacesonfilm1.jpg);
	background-position: center;
	width: 100%;
	height: 100%;
	background-size: 1200px;
	background-repeat: repeat;
	position: inherit;
}

#griddrag {
	mix-blend-mode: color;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	mix-blend-mode: normal;
	z-index: 2;
	cursor: move;
	display: grid;
	width: 25%;
	min-width: 300px;
	background: #0000004d;
	/* max-width: 460px;
	background: var(--text-color-secondary); */
	touch-action: none;
	user-select: none;
	/* box-shadow: 1px 1px 12px var(--text-color-secondary); */
	border: 1px dotted var(--text-color);
}

#griddrag p,#griddrag a:not(#griddrag ul li a)  {
	color: var(--light-color);
}


#griddrag p a {
	color: var(--secondary-color);
}

#griddrag ul

#griddrag ul li a, #griddrag ul {
	color: var(--secondary-color);
}

#griddrag p a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--secondary-color);
}

p {

	margin: 0;
	padding: 1em 0.625em;
	line-height: 130%;
}

nav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

nav p a {
border: none;
}


a {
	text-decoration: none;
	color: var(--text-color);
}

a:active,
a:focus {
	text-decoration: none;
}

a:hover {
	color: var(--secondary-color);
}

 nav p, nav a:not(nav ul li a) {
	border-top: 1px dotted var(--text-color);
 }

nav ul {
margin: 0;
  padding: 0 1.25em 1em 1.25em;
  line-height: 130%;
	list-style: ">";
}

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

nav ul li a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}


nav a {
	padding: 0.2em 0.625em;
}



/* breakpoints */
@media (min-aspect-ratio: 16/9) {
	video {
		width: 100%;
		height: auto;
	}
}

/* mobile */
@media (max-width: 740px) {
	.videoloop {
		/* display: none; */
	}

	body {
		/* background-image: url(../assets/kareenax.jpg);
		background-position: center;
		background-size: 338px 530px;
		overflow-y: hidden; */
	}

	.videoloop .img {
		background-size: 110%;
	}

	#griddrag {
		/* position: initial;
		transform: translate(0, -50%);
		mix-blend-mode: normal;
		z-index: 2;
		display: grid;
		width: 86%;
		touch-action: none;
		user-select: none;
		margin: 50vh auto;
		background-color: #ffffff;
		color: black; */
		background: #00000096;
	}

	p,
	nav a {
		/* border: 0.7px solid black;
		border-bottom: none;
		padding: 1rem; */
		padding: 1rem;
		line-height: 130%;
		font-size: 16px;
	}

	nav a,
	nav a:nth-of-type(1) {
		/* color: black; */
	}

	nav a:last-child {
		/* border-bottom: 0.7px solid black; */
	}

	nav a:nth-of-type(1):hover {
		/* color: var(--secondary-color); */
	}
	nav a:nth-of-type(1):focus {
		/* font-style: oblique; */
	}
}