/*::-moz-selection {
	background: #d6facd
}

::-ms-selection {
	background: #d6facd
}

::-o-selection {
	background: #d6facd
}

::-webkit-selection {
	background: #d6facd
}

::selection {
	background: #d6facd
}*/

@font-face {
	font-family: 'GoodHexSans';
	src: url('/assets/fonts/GoodHexSansRegular.woff2') format('woff2'), url('/assets/fonts/GoodHexSansRegular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

* {
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
	color: inherit
}

	*, *::before, *::after {
		box-sizing: border-box
	}

:root {
	font-size: 16px
}

img {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 0;
	display: block;
	vertical-align: middle;
	max-width: 100%
}

html {
	position: relative;
	height: 100%;
	margin: 0;
	background: linear-gradient(rgba(180,255,196,1) 0%, rgba(175,232,255,1) 100%);
	background-attachment: fixed;
}

body {
	min-height: max-content;
	padding: 0 2rem;
	overflow: auto;
	background-color: rgba(255, 255, 255, 0.8);
	font-family: Georgia,serif;
	line-height: 1.5;
	margin: 0 auto;
	max-width: 1280px;
	width: 95%;
	word-wrap: break-word;
	display: grid;
	grid-template-columns: 1fr 3fr;
	column-gap: 1rem;
}

h1 {
	font-size: 4rem;
}

h1, h2 {
	font-family: GoodHexSans, "Lucida Grande","Lucida Sans",Verdana;
	font-weight: 700
}

h1, h2, h3 {
	line-height: 1.05
}

h1, h3 {
	letter-spacing: -0.02em
}

h2 {
	letter-spacing: -0.03em;
	margin: 0 0 1rem 0;
	font-size: 2.5em
}

h3 {
	margin-bottom: .5rem;
	font-size: 1.25rem;
	font-weight: 600
}

a {
	color: rgba(0,0,0,0.8);
	text-decoration: none
}

main a {
	border-bottom: 1px solid rgba(0,0,0,0.2);
	color: rgba(0,0,0,0.8)
}

	main a:hover, main a:focus {
		border-bottom: 1px solid rgba(0,0,0,0.5)
	}

p {
	margin-bottom: 1.5rem;
}

p, address, ul, blockquote {
	font-size: 1.2rem;
	line-height: 1.6
}

address {
	font-style: normal
}

blockquote p {
	margin: 0
}

blockquote, blockquote ul {
	margin-bottom: 0
}

	blockquote li {
		margin-bottom: 1rem
	}

body > nav {
	top: 4rem;
	align-self: start;
	position: sticky;
}

	body > nav h1 {
		font-size: 2.25rem;
		margin-bottom: 0
	}

	body > nav a {
		line-height: 1.75
	}

	body > nav ul {
		margin: 0;
		padding: 0
	}

		body > nav ul ul {
			padding-left: 1rem
		}

li {
	margin-top: .25rem;
	padding-left: .5rem;
	padding-right: .5rem
}

body > nav li {
	list-style: none
}

main {
	padding: 1rem 0rem;
}

	main > header > img {
		margin: 0 auto
	}

	main > * {
		float: left;
		width: 100%
	}

		main > *:not(:last-child) {
			margin-bottom: 1.5rem;
			padding-bottom: 1rem
		}

		main > *:not(:first-child):not(:last-child) {
			border-bottom: 1px solid rgba(0,0,0,0.1)
		}

	main > #intro-details > div:first-child, main > #outro-details > div:first-child {
		padding-right: 1.5rem
	}

	main > #intro-details > div:last-child, main > #outro-details > div:last-child {
		padding-left: 1.5rem
	}

	main > #intro-details > div:first-child p {
		margin-top: 0
	}

	main > #images > div, main > #logo-icon > div {
		margin: 0 auto;
		text-align: center
	}

		main > #images > div a, main > #images > div a:hover, main > #images > div a:focus, main > #logo-icon > div a, main > #logo-icon > div a:hover, main > #logo-icon > div a:focus {
			border-bottom: 0
		}

	main > #images img {
		display: inline-block;
		padding: 0 .5rem 1rem
	}

	main > #logo-icon img {
		display: inline-block;
		padding: 0 .5rem .5rem
	}

.embed-responsive {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	margin-bottom: 1.5rem
}

	.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0
	}

.embed-responsive-16by9 {
	padding-bottom: 56.25%
}

.external {
	border-bottom: 0
}

	.external::after {
		color: rgba(0,0,0,0.4);
		content: "↗";
		font-size: .6rem;
		font-weight: 800;
		padding-left: .1rem;
		vertical-align: text-top
	}

	.external:hover::after, .external:focus::after {
		color: rgba(0,0,0,1)
	}

main > footer {
	color: rgba(0,0,0,0.2);
	padding-bottom: .5rem
}

	main > footer a {
		color: rgba(0,0,0,0.2)
	}

		main > footer a:hover, footer a:focus {
			border-bottom: 1px solid rgba(0,0,0,0.4)
		}

	main > footer p {
		margin: 0
	}

.w-2 {
	float: left;
	position: relative;
	width: 20%
}

.w-3 {
	float: left;
	position: relative;
	width: 30%
}

.w-33 {
	float: left;
	position: relative;
	width: 33.33%
}

.w-4 {
	float: left;
	position: relative;
	width: 40%
}

.w-5 {
	float: left;
	position: relative;
	width: 50%
}

.w-6 {
	float: left;
	position: relative;
	width: 60%
}

.w-66 {
	float: left;
	position: relative;
	width: 66.66%
}

.w-7 {
	float: left;
	position: relative;
	width: 70%
}

.w-8 {
	float: left;
	position: relative;
	width: 80%
}

.w-9 {
	float: left;
	position: relative;
	width: 90%
}

.w-10 {
	float: left;
	position: relative;
	width: 100%
}

.i-5 {
	position: relative;
	max-width: 49.5%
}

.i-10 {
	position: relative;
	max-width: 100%
}

.grid-screenshots {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
	row-gap: 1rem;
}

	.grid-screenshots a {
		border: none;
	}

		.grid-screenshots a:hover, main a:focus {
			border: none;
		}

	.grid-screenshots > * {
		align-self: center;
	}


@media(max-width:80em) {
	body {
		grid-template-columns: 1fr;
	}

	nav {
		display: none
	}

	main {
		padding: 1.5rem;
		width: 100%
	}
}

@media(max-width:48em) {
	main {
		padding: 1.5rem
	}

		main > #intro-details > div:first-child {
			padding-right: 0rem
		}

		main > #intro-details > div:last-child {
			padding-left: 0rem
		}

		main > #images img {
			padding: 0 0 1rem 0
		}

	.w-s-10 {
		float: left;
		position: relative;
		width: 100%
	}

	.i-s-10 {
		position: relative;
		max-width: 100%
	}
}

@media(max-width:34em) {
	main {
		padding: .5rem
	}

		main > #outro-details > div:first-child {
			padding-right: 0rem
		}

		main > #outro-details > div:last-child {
			padding-left: 0rem
		}

	.w-xs-10 {
		float: left;
		position: relative;
		width: 100%
	}
}