/* Main Styles ===================================================================== */

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
	}

html {
	width: 100%;
	}

body {
	color: #3a383a;
	font: normal 16pt/1.5em "IBM Plex Mono", monospace;
	margin: 0 40px;
	text-align: center;
	width: calc(100% - 80px);
	}

::-moz-selection {
	background: #0029FF;
	color: #fff;
	color: rgba(255, 255, 255, 0.85);
	}

::selection {
	background: #0029FF;
	color: #fff;
	color: rgba(255, 255, 255, 0.85);
	}



/* Headers ========================================================================= */

h1 {
	color: #000;
	font: bold 14pt/1.5em "IBM Plex Mono", monospace;
	margin: 0 0 1em;
	text-align: left;
	}

h2 {
	color: #5244ba;
	font: bold 18pt/1.5em "IBM Plex Mono", monospace;
	margin-bottom: 20px;
	text-align: center;
	}

h3 {
	color: #5244ba;
	font: normal 14pt/1.5em "IBM Plex Mono", monospace;
	margin-top: 60px;
	margin-bottom: 20px;
	text-align: center;
	}

h4 {
	font: bold 40pt/1.5em "IBM Plex Mono", monospace;
	text-align: center;
	}

h5 {
	font: normal 24pt/1.5em "IBM Plex Mono", monospace;
	text-align: center;
	}

h6 {
	font: bold 16pt/1.5em "IBM Plex Mono", monospace;
	text-align: center;
	}




/* Text ============================================================================ */

p {
	font: normal 10pt/1.6em "IBM Plex Mono", monospace;
	margin: 0 auto 0;
	text-align: left;
	}

	p + p {
		text-indent: 1.6em;
		}

	li p {
		text-indent: 0em !important;
		}

a {
	color: #0029FF;
	text-decoration: none;
	}

a:hover {
	color: #0029FF;
	text-decoration: line-through;
	}

code {
	-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .25);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .25);
	clear: both;
	color:#3a383a;
	display: block;
	font: normal 12px/24px Consolas, Courier, monospace;
	margin-top: 26px;
	margin-bottom: 52px;
	padding: 10px 20px 10px 10px;
	white-space: normal;
	}



/* Images ========================================================================== */

img {
	}



/* Lists =========================================================================== */

ul, ol {
	font: normal 10pt/1.6em "IBM Plex Mono", monospace;
	margin: 1em 0 1em;
	text-align: left;
	}

ul {
	list-style: none;
	text-align: left;
	}

	ul li {
		margin: 0 0 0 18px;
		text-indent: 24px;
		}

	ul li:before {
		content: "• ";
		display: inline;
		margin: 0 0 0 -40px;
		padding: 0 0 0 -40px;
		}



/* Header ========================================================================== */

header {
	border-bottom: 1px solid #333;
	column-count: 2;
	column-fill: auto;
	column-gap: 20px;
	margin: 40px 0 40px;
	padding-bottom: 1em;
	}

	header p {
		font: normal 10pt/1.5em "IBM Plex Mono", monospace;
		margin: 0 0 1em;
		text-align: left;
		break-after: column;
		text-indent: 0;
		}
	
	header strong {
		color: #0029FF;
		}
	


/* Style sheet ===================================================================== */


section.nav {
	border-bottom: 1px solid #000;
	font-size: 32pt;
	line-height: 1.2em;
	padding-bottom: 40px;
	margin: 0 0 80px 0;
	text-align: left;
	width: 100%;
	}

	section.nav a {
		color: #000;
		font: normal 32pt/1em "IBM Plex Mono", monospace;
		font-weight: 300;
		text-decoration: none;
		}

	section.nav a:hover,
	section.nav-sub a:hover {
		color: #0029FF;
		background-color: #fff;
		text-decoration: underline;
		}

	section.nav a:hover em,
	section.nav-sub a:hover em {
		color: #0029FF;
		background-color: #fff;
		text-decoration: none !important;
		}

		section.nav div em {
			font-size: 24pt;
			}

		section.nav .hover-title,
		section.nav-sub .hover-title {
		    display: inline;
		    pointer-events: auto;
		    cursor: pointer;
			}
		
		section.nav .hover-image {
		    display: none;
			}
		
		body:not(.mobile) .hover-title:hover + .hover-image {
		    display: flex;
		    pointer-events: none;
			}
		
		section.nav .hover-image {
		    position: fixed;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    z-index: -1;
		    pointer-events: none;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		
			/* Change width and height to scale images */
		    width: 90vw;
		    height: 90vh;
			}
		
		section.nav .hover-image img {
		    max-width: 100% !important;
		    max-height: 100% !important;
		    width: auto !important;
		    height: auto !important;
		    margin-bottom: 0;
			}
	
	section.nav-sub {
		border-bottom: 1px solid #000;
		font-size: 16pt;
		line-height: 1.2em;
		margin: 0 0 80px 0;
		padding-bottom: 40px;
		text-align: left;
		width: 100%;
		}

		section.nav-sub a {
			font: normal 10pt/1em "IBM Plex Mono", monospace;
			font-weight: 300;
			text-decoration: none;
			}

		section.nav-sub a:hover {
			text-decoration: line-through;
			}

		section.nav-sub div em {
			font-size: 12pt;
			}

section#work,
section.work {
/*	border-bottom: 1px solid #333;*/
/*	column-count: 2;
	column-fill: auto;
	column-gap: 20px;*/
	display: grid;
	grid-column-gap: 40px;
	grid-template-columns: 400px auto;
	height: auto;
	margin: 40px 0 40px;
	padding: 0 0 40px;
	}

	section#work.images,
	section.work images {
		border-bottom: 1px solid #333;
		column-count: 2;
		/* column-fill: auto; */
		column-gap: 20px;
		display: block;
		height: auto;
		margin: 40px 0 40px;
		padding: 0 0 40px;
		}

	section#work.books,
	section.books {
		border-bottom: 1px solid #333;
		column-count: 3;
		/* column-fill: auto; */
		column-gap: 20px;
		display: block;
		height: auto;
		margin: 40px 0 40px;
		padding: 0 0 40px;
		}

	section#work h1,
	section#work h2,
	section#work h3,
	section#work h4,
	section.work h1,
	section.work h2,
	section.work h3,
	section.work h4 {
		color: #000;
		font: normal 14pt/1em "IBM Plex Mono", monospace;
		font-weight: 700;
		margin: 2em 0 0.5em;
		text-align: left;
		}

	section#work h1,
	section.work h1 {
		color: #ff1515;
	}

	section#work h2,
	section.work h2 {
		color: #000;
		}

	section#work h3,
	section.work h3 {
		font-size: 10pt;
		font-style: normal;
		font-weight: 700;
		}

	section#work img,
	section.work img {
		border: 1px solid #000;
		margin: 0 0 20px;
		max-width: calc(100% - 2px);
		}

	section#work .no-border img,
	section#work img.no-border,
	section.work .no-border img,
	section.work img.no-border {
		border: 0px solid #000;
		margin: 0 0 20px;
		max-width: calc(100% - 2px);
		}

	section#work div,
	section.work div {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		}

		section#work div div.mobile,
		section.work div div.mobile {
			column-count: 3;
			column-fill: auto;
			column-gap: 20px;
			display: block;
			}

	section#work div:nth-of-type(1),
	section.work div:nth-of-type(1) {
		break-after: column;
		}

section.about p {
	font: normal 24pt/1.5em "IBM Plex Mono", monospace;
	margin-left: 0px;
	max-width: 1200px;
	padding-left: 0px;
	}

	section.about p + p {
		text-indent: 1.6em;
		}

form {
	font: normal 10pt/1em "IBM Plex Mono", monospace;
	}

input {
	background: #fff;
	border: 1px solid #000;
	display: inline-block;
	font: normal 10pt/1em "IBM Plex Mono", monospace;
	margin: 0 8px 0 0;
	padding: 4px 8px;
	}

input[type=submit] {
	background-color: #0029FF;
	border: 0px solid #333;
	border-radius: 0px;
	color: #fff;
	font: normal 10pt/1em "IBM Plex Mono", monospace;
	margin: 0 0 0 0;
	padding: 7px 8px;
	}

#top {
	background-color: #0029FF;
	bottom: 24px;
	color: #fff;
	display: inline-block;
	font: normal 10pt/1em "IBM Plex Mono", monospace;
	opacity: 0;
	padding: 8px 4px;
	position: fixed;
	left: 24px;
	text-align: center;
	transition: background-color .6s, opacity .6s, visibility .6s;
	visibility: visible;
	width: 50px;
	z-index: 1000;
	}

#top:hover {
	background-color: #000;
	cursor: pointer;
	}

#top:active {
	background-color: #000;
	}

#top.show {
	opacity: 1;
	visibility: visible;
	}