@import url('https://fonts.googleapis.com/css?family=Unica+One');

@font-face {
	font-family:'PixelOperator';
	src: url('fonts/PixelOperator.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family:'PixelOperator';
	src: url('fonts/PixelOperator-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'dos437';
	src: url('fonts/dos437.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, em, hr, img, small, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tr, th, td {
	border:0;
	margin:0;
	padding:0;
	vertical-align:baseline;
}

* {
	box-sizing: border-box;
}

section {
	font-family:"PixelOperator";
	height:100%;
	width:100%;
	position:absolute;
	top:0;
}

	section > div {
		position:absolute;
		margin:14vh 0 0 10vw;
		z-index:1;
	}

	section div.flex-center {
		display:flex;
		align-items:center;
		margin-bottom:1em;
	}

	section b {
		background: #fffb;
		color: #000;
		padding: 2px;
		text-transform: uppercase;
		font-size: 12px;
	}

	section h1, 
	section h4 { 
		font-family:"Unica One";
		line-height:1;
	}

		section h1 {
			font-size:2.5rem;
			letter-spacing:.09em;
			text-transform:uppercase;
		}

			section h1:before,
			section h1:after {
				content:"~";
				opacity:.3;
				display:inline-block;
				position:absolute;
				margin:0 .09em 0 -35px;
			}

			section h1:after {
				content:" ";
				margin:0 0 0 .09em;
			}

		section h4 {
			font-size:1.1rem;
			letter-spacing:.09em;
			color:rgba(255,255,255,.6);
			margin-left:1rem;
		}

			section h4 span {
				color:rgba(255,255,255,1);
			}

	overlay {
		position: absolute;
		height: 100%;
		width: 100%;
		background: linear-gradient(-45deg, #0000, #000a);
	}

	section > img {
		position: fixed;
	  	width: 100%;
	  	height: 100%;
	  	object-fit: cover;
	}

		[data-pos="bot"] { 
			object-position:bottom;
		}

/*
nav {
	font-family:'PixelOperator';
	position:absolute;
	bottom:15px;
	right:15px;
	opacity:0;
}

	nav a {
		display:inline-block;
		background: #fff4;
		width: 10px;
		height:10px;
		margin-left: 4px;
		border-radius:100%;
	}

		nav a.active {
			background:#fff9;
		}
*/		

nav {
	display:block;
	position:absolute;
	bottom:20px;
	right:20px;
	width:25px;
	height:25px;
	text-align:center;
	font-family: "PixelOperator";
}

	nav svg {
		position:absolute;
		width:25px;
		height:25px;
		left:0;
		top:0;
		opacity:.35;
		transition:opacity .3s,fill .3s, transform .5s;
	}

		nav:hover svg {
			opacity:1;
			fill:#fb5;
			transform:rotate(-90deg);
		}

	nav:before {
		content: "~";
		font-size: 2rem;
		color: black;
		line-height: 25px;
		position:relative;
		z-index:1;
		top:6px;
	}

	nav div {
		display:flex;
		flex-direction:column;
		position:absolute;
		bottom:25px;
		transition:opacity .75s ease, max-height .5s cubic-bezier(0.1, 0.7, 1, 0.1);
		padding-bottom:4px;
		opacity:0;
		max-height:0;
		overflow:hidden;
	}

		nav div a {
			width:25px;
			color:#000;
			opacity:.5;
			text-decoration:none;
			font-size:1rem;
			line-height:25px;
			background:url(images/squircle-white.svg);
			background-size:cover;
			margin-bottom:5px;
			transition:opacity .3s;
		}

			nav div a:first-child {
				border:none;
			}

			nav div a.active {
				opacity:.75;
			}

			nav div a:hover {
				opacity:1;
			}

			nav div a:after {
				content:attr(data-label);
				position:absolute;
				right:32px;
				white-space:nowrap;
				color:#fff;
			}

		nav:hover > div {
			opacity:1;
			overflow:initial;
			max-height:200px;
		}
		
	overlay + nav {
		filter:invert(1);
	}

	nav small {
		position: absolute;
		line-height: 25px;
		white-space: nowrap;
		right: 40px;
		opacity:0;
		transition:opacity .3s;
	}

		nav:hover > small {
			opacity:.5;
		}

ol {
	margin:.5em 0;
}

	ol li {
		margin:0 0 .25em 1em;
	}

		ol li span {
			display:block;
			opacity:.5;
		}

hr {
	border:none;
	background:rgba(255,255,255,.5);
	height:1px;
	margin:30px 0 10px;
}

video {
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	object-fit:cover;
}

pre {
	font:16px/1 "dos437";
}

i {
	color:#aaa;
	background:#000;
	font-style:normal;
	display:inline-block;
}

main {
	max-width:750px;
	margin:0 auto;
	padding-top:5em;
}

@media only screen and (max-width: 768px) {
	nav div {
		opacity:1;
	}
}