@import url("reset.css");
@import url("fonts.css");
@import url("pygments.css");


/* General element styles */
* {
	box-sizing: border-box;
}

a {
	transition: all 300ms ease-in-out;
	text-decoration: none;
}

a:link, a:visited {
	color: #afb;
}
a:focus {
	text-decoration: underline;
}
a:hover {
	color: #afb;
	text-shadow: 0 0 6px #00aa18;
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Play", sans-serif;
	font-weight: 700;
	font-style: normal;
	clear: both;
}
h1 {
	font-size: 250%;
}

ul > li {
	list-style-type: disc;
}

dl {
	margin-top: 0;
	margin-bottom: 0;
	overflow: hidden;
}
dt {
	position: relative;
	width: 25%;
	float: left;
	clear: both;
	margin: 0.7em 0 0;
	padding-right: 4em;
	color: #afb;
	font-weight: bold;
	text-align: right;
	page-break-inside: avoid;
}
dt a[href] {
	position: relative;
	z-index: 1;
	color: #afb;
	text-decoration-line: underline;
	text-decoration-color: #afb8;
}
dt a[href]:hover,
dt a[href]:focus {
	color: #afb;
	text-decoration-color: #afb;
}
dt em {
	display: block;
	font-weight: normal;
	font-size: 8pt;
	color: #afb8;
}
dt + dd {
	margin: 0.7em 0 0;
}
dt:last-of-type {
	margin-bottom: 0.9em;
}
dt svg {
	margin-right: 0.2ex;
}
dd {
	float: right;
	clear: right;
	padding: 0 0 0.25em 1em;
	width: 75%;
	margin: 0;
	page-break-inside: avoid;
}
dd:last-child {
	margin-bottom: 0.9em;
}
dd em {
	font-size: 11pt;
}

code, pre {
	font-family: "Share Tech Mono", monospace;
	font-weight: 400;
	font-style: normal;
}


/* Page structure */
html {
	background: #111110 url('../images/page.png');
	background-attachment: fixed;
	color: #eee;
	font-family: "Cairo", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "slnt" 0;
	min-height: 100%;
	height: 100%;
}


body {
	min-height: 100%;
	height: 100%;
}

body > * {
	max-width: 1024px;
	margin: 0 auto;
	padding: 1.5rem;
	box-shadow: 2px 1px 8px 1px black;
}
@media screen and (max-width: 720px) {
	body > * {
		max-width: 680px;
	}
}
@media screen and (max-width: 1064px) and (min-width: 721px) {
	body > * {
		margin: 0 20px;
	}
}
body > header {
	position: relative;
	z-index: 1;
	background-color: #333330cc;
	background-image: url("../images/lynx-designs-bg.svg");
	background-repeat: no-repeat;
	background-position: left;
	background-size: 20%;
	color: #eee;
}
@media screen and (max-width: 680px) {
	body > header {
		background-size: 60%;
	}
}
body > header > nav > ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 1rem;
	margin: 1rem 0 -1.5rem;
}
body > header > nav > ul > li {
	display: block;
	position: relative;
	height: 2rem;
	list-style: none;
}
body > header > nav > ul > li > a {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.2);
	text-align: center;
}
body > header > nav > ul > li > a[aria-current=page] {
	background: rgba(0, 0, 0, 0.5);
}
body > header > nav > ul > li > a::first-line {
	vertical-align: middle;
	line-height: 2rem;
}
@media screen and (max-width: 680px) {
	body > header > nav > ul {
		grid-template-columns: 1fr 1fr;
	}
}

body > main {
	background: #22222088;
	color: #eee;
}

body > footer {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 0;
	position: relative;
	z-index: 1;
	padding: 0.5rem 1.5rem;
	background: #333330cc;
	color: #eee;
	font-family: "Khand", sans-serif;
	font-weight: 400;
	font-style: normal;
	align-items: center;
}
body > footer > .copyright {
	text-align: left;
}
body > footer > .powered-by {
	text-align: right;
}
body > footer > .powered-by img {
	height: 20px;
	vertical-align: middle;
}
body > footer > .powered-by > a:hover > img,
body > footer > .powered-by > a:focus > img {
	fill: #5da545;
}


/* Article styles */
article > footer {
	font-family: "Khand", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 75%;
	color: #888;
	text-align: right;
	margin: 0.2rem -1rem -1.2rem;
}

article > header > h2, article > h2, article > h3, article > h4, article > h5, article > h6 {
	position: relative;
	margin: 1rem -1.5rem;
	padding: 0.5rem 1.5rem;
}
article > header:first-child > h2:first-child, article > h2:first-child, article > h3:first-child, article > h4:first-child, article > h5:first-child, article > h6:first-child {
	margin-top: -1rem;
}
article h2 {
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 200%;
}
article h3 {
	background: rgba(0, 0, 0, 0.6);
	color: #eee;
	font-size: 160%;
}
article h4 {
	background: rgba(0, 0, 0, 0.5);
	color: #ddd;
	font-size: 140%;
}
article h5 {
	background: rgba(0, 0, 0, 0.4);
	color: #ccc;
	font-size: 120%;
}
article h6 {
	background: rgba(0, 0, 0, 0.3);
	color: #bbb;
	font-size: 110%;
}

article h2 > em, article h3 > em, article h4 > em, article h5 > em, article h6 > em {
	display: block;
	position: absolute;
	right: 1rem;
	top: 50%;
	font-size: 60%;
	margin-top: -0.5em;
}

article *+p {
	margin-top: 0.5em;
}


/* Special-case classes */
.project-thumbs {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1rem;
}
.project-thumbs > a {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	text-align: center;
	padding: 1rem 0;
	text-decoration: none;
	transition: all 300ms ease-in-out;
	container-type: inline-size;
	overflow: hidden;
}
.project-thumbs > a > img {
	display: block;
    width:  100%;
    height: 60cqw;
	margin: -1rem auto 1rem;
    object-fit: cover;
}
.project-thumbs > a > h3 {
	margin-bottom: 1rem;
}
.project-thumbs > a > em {
	display: block;
	font-size: 0.7rem;
	font-style: italic;
}
.project-thumbs > a > h3 > em {
	position: relative;
	top: 0;
	right: 0;
	margin-top: 0;
	font-size: 0.7rem;
}
.project-thumbs > a > p {
	display: block;
	margin: 0.5em;
}
.project-thumbs > a > small {
	display: block;
	font-size: 0.7rem;
}
.project-thumbs > a:hover, .project-thumbs > a:focus {
	background: rgba(0, 0, 0, 0.8);
}
.project-thumbs > a:hover {
	scale: 101%;
}
@media screen and (min-width: 681px) {
	.project-thumbs {
		grid-template-columns: 1fr 1fr;
	}
	.project-thumbs > a > img {
	}
}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1rem;
}
@media screen and (max-width: 680px) {
	.grid {
		grid-template-columns: 1fr 1fr;
	}
}
.grid > a {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	text-align: center;
	padding: 2rem 0;
	text-decoration: none;
	transition: all 300ms ease-in-out;
}
.grid > a > i, .grid > a > svg, .grid > a > img {
	display: block;
	fill: #afb;
	font-size: 5rem;
	width: 80px;
	text-decoration: none;
	margin: 0 auto 1rem;
	transition: all 300ms ease-in-out;
}
.grid > a:hover, .grid > a:focus {
	background: rgba(0, 0, 0, 0.8);
}

.grid > a:hover > i.fa-github, .grid > a:focus > i.fa-github,
.grid > a:hover > i.fa-codepen, .grid > a:focus > i.fa-codepen,
.grid > a:hover > i.fa-stack-overflow, .grid > a:focus > i.fa-stack-overflow,
.grid > a:hover > i.fa-keybase, .grid > a:focus > i.fa-keybase,
.grid > a:hover > i.fa-xing, .grid > a:focus > i.fa-xing {
	color: #ffffff;
}
.grid > a:hover > i.fa-gitlab, .grid > a:focus > i.fa-gitlab {
	color: #e65328;
	text-shadow: 0 0 6px #666;
}
.grid > a > img.social-codeberg-svg {
	-webkit-filter: contrast(120%) brightness(200%) saturate(36%) hue-rotate(315deg);
	filter: contrast(120%) brightness(200%) saturate(36%) hue-rotate(315deg);
}
.grid > a:hover > img.social-codeberg-svg, .grid > a:focus > img.social-codeberg-svg {
	-webkit-filter: drop-shadow(0 0 6px #666);
	filter: drop-shadow(0 0 6px #666);
}
.grid > a:hover > svg.social-osdn-svg path, .grid > a:focus > svg.social-osdn-svg path {
	fill: #5da545;
}
.grid > a:hover > svg.social-osdn-svg, .grid > a:focus > svg.social-osdn-svg {
	-webkit-filter: drop-shadow(0 0 6px #666);
	filter: drop-shadow(0 0 6px #666);
}
.grid > a:hover > svg.social-hackaday-svg path, .grid > a:focus > svg.social-hackaday-svg path {
	fill: #fff;
}
.grid > a:hover > svg.social-hackaday-svg, .grid > a:focus > svg.social-hackaday-svg {
	-webkit-filter: drop-shadow(0 0 6px #00aa18);
	filter: drop-shadow(0 0 6px #00aa18);
}
.grid > a > svg.social-flux-svg {
	width: 61px;
}
.grid > a:hover > svg.social-flux-svg path, .grid > a:focus > svg.social-flux-svg path {
	fill: #1dfdc0;
}
.grid > a:hover > svg.social-flux-svg, .grid > a:focus > svg.social-flux-svg {
	-webkit-filter: drop-shadow(0 0 6px #666);
	filter: drop-shadow(0 0 6px #666);
}
.grid > a:hover > i.fa-mastodon, .grid > a:focus > i.fa-mastodon {
	color: #5d4fe7;
	text-shadow: 0 0 6px #666;
}
.grid > a:hover > i.fa-linkedin, .grid > a:focus > i.fa-linkedin {
	color: #0073b1;
	text-shadow: 0 0 6px #666;
}
.grid > a > i.fa-soundcloud {
	width: 100px;
}
.grid > a:hover > i.fa-soundcloud, .grid > a:focus > i.fa-soundcloud {
	color: #ff5500;
	text-shadow: 0 0 6px #666;
}
.grid > a > i.fa-youtube {
	width: 90px;
}
.grid > a:hover > i.fa-youtube, .grid > a:focus > i.fa-youtube {
	color: #ff0000;
	text-shadow: 0 0 6px #666;
}


.underlay {
    opacity: 8%;
    font-size: 270%;
    position: absolute;
    right: 0.5em;
    top: 50%;
    margin-top: -0.5em;
    margin-right: -0.5em;
}
.fas.fa-comments.underlay {
	top: 0;
    margin-top: 0;
}


.print-only {
    display: none;
}
@media print {
    .print-only {
        display: block;
    }
	.pagebreak {
		page-break-before: always;
	}
}