@font-face {
	font-family: 'iA Writer Mono';
	src: 	url(fonts/iAWriterMonoS-Regular.woff) format('woff'),
			url(fonts/iAWriterMonoS-Regular.woff2) format('woff2'),
			url(fonts/iAWriterMonoS-Regular.eot) format('eot'),
			url(fonts/iAWriterMonoS-Regular.ttf) format('ttf');
	font-display: fallback;
}

@font-face {
	font-family: 'iA Writer Mono';
	src: 	url(fonts/iAWriterMonoS-Bold.woff) format('woff'),
			url(fonts/iAWriterMonoS-Bold.woff2) format('woff2'),
	    	url(fonts/iAWriterMonoS-Bold.eot) format('eot'),
			url(fonts/iAWriterMonoS-Bold.ttf) format('ttf');
	font-weight:bold;
	font-display: fallback;
}

@font-face {
	font-family: 'iA Writer Mono';
	src: 	url(fonts/iAWriterMonoS-Italic.woff) format('woff'),
			url(fonts/iAWriterMonoS-Italic.woff2) format('woff2'),
			url(fonts/iAWriterMonoS-Italic.eot) format('eot'),
			url(fonts/iAWriterMonoS-Italic.ttf) format('ttf');
	font-style:italic;
	font-display: fallback;
}

body {
	background-color: var(--background-color);
	margin:0;
	display:flex;
	align-items:center;
	justify-content:center;
	color: var(--text-color);
	font-family: "iA Writer Mono", "Courier New", monospace;
	font-weight:500;
	font-size:1.1em;
	
	--background-color: #323232;
	--text-color: #fffff7;
	--link-color: #85d3dc;
	--link-hover-color: #d55b71;
	--secondary-text-color: #dbdad4;
	--secondary-text-color-light: #6a6a6a;
}

a {
	/* color: #4186d1; */
	color:var(--link-color);
}

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

/* a:visited {
	color: #c570ba;
} */

#container {
	margin:10px;
	height:100%;
	/* background-color:red; */
	max-width:1000px;
}

#title {
	font-weight:bold;
	margin-bottom:0px;
	text-align:right;
}

#header {
	/* background-color:yellow; */
	margin-bottom:10px;
	display:flex;
	flex-direction:row;
}

#headerColumnLeft {
	/* background-color:orange; */
	width:350px;
	margin-right:15px;
	display:flex;
	align-items:flex-end;
	justify-content:flex-end;
}

#headerColumnRight {
	margin-left:15px;
}

#columnContainer {
	display:flex;
	flex-direction:row;
}

#columnLeft {
	/* background-color:orange; */
	width:350px;
	flex-shrink:0;
	text-align:right;
	margin-right:15px;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	justify-content:flex-start;
}

#columnRight {
	/* background-color:green; */
	flex-grow:1;
	text-align:left;
	margin-left:15px;
	display:flex;
	align-items:flex-start;
	justify-content:flex-start;
	flex-direction:column;
}

.backButton {
	margin-top:0px;
	font-weight:bold;
}

#about {
	margin-top:0px;
	/* background-color:gray; */
}

#aboutItemFirst {
	margin-top:10px;
}

.section {
	width:100%;
	margin-bottom:15px;
}

.aboutItem {
	margin-top:5px;
	margin-bottom:5px;
	color:var(--secondary-text-color);
}

.sectionTitle {
	margin-top:5px;
	margin-bottom:5px;
}

.firstSectionTitle {
	margin-top:0px;
}

.sectionItem {
	margin-top:10px;
	margin-bottom:15px;
}

.sectionItemTitle, .sectionItemLink, .sectionItemDescription {
	margin-top:5px;
	margin-bottom:5px;
}

.sectionItemTitle {
	margin-bottom:8px;
}

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

.sectionItemTitleLink:hover {
	text-decoration:none;
	color: var(--link-hover-color);
}

.sectionItemLink {
	font-style:italic;
	margin-bottom:8px;
}

.sectionItemDescription {
	color: var(--secondary-text-color);
}

#container404 {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display:flex;
	align-items:center;
	justify-content:center;
}

#content404 {
	margin:20px;
}

@media screen and (prefers-color-scheme:light) {
	body {
		background-color:var(--text-color);
		color:var(--background-color);
	}
	
	a {
		color:var(--link-hover-color);
	}
	
	a:hover {
		color:var(--link-color);
	}
	
	.sectionItemTitleLink {
		text-decoration:none;
		color: var(--background-color);
	}
	
	.sectionItemTitleLink:hover {
		text-decoration:none;
		color: var(--link-color);
	}
	
	.aboutItem {
		color:var(--secondary-text-color-light);
	}
	
	.sectionItemDescription {
		color:var(--secondary-text-color-light);
	}
}

@media screen and (orientation: portrait), screen and (max-width:1020px) {
/* @media screen and (orientation:portrait) { */
	body {
		font-size:4vw;
	}
	
	#container {
		margin:20px;
		width:100%;
		/* margin-bottom:15vw; */
	}
	
	#header {
		flex-direction:column;
		margin:0px;
	}
	
	#columnContainer {
		flex-direction:column-reverse;
	}
	
	#columnLeft {
		width:100%;
		text-align:left;
	}
	
	#columnRight {
		margin-left:0px;
		margin-bottom:10px;
	}
	
	.section:last-child {
		margin-bottom:0px;
	}
	
	#headerColumnLeft {
		justify-content:left;
		width:100%;
	}
	
	.aboutItem {
		margin-bottom:15px;
	}
	
	#title {
		margin-top:0px;
		margin-bottom:20px;
		text-align:left;
	}
}