@font-face {
	font-family: shavian;
	src: url('/f/NotoSansShavian-Regular.ttf'); /* Have to do this instead of how images are through res because https://stackoverflow.com/questions/33208474/why-do-font-files-have-to-abide-by-cors-rules-but-images-dont */
}

* {
	font-family: shavian;
	margin: 0;
	overflow-wrap: break-word;
	padding: 0;
}
body {
	padding: 0 10%;
	padding-bottom: 3em;
}
code
{
	color: #7e7;
}

a,
a:visited
, h1 code 
, h2 code 
, h3 code 
{
	color: #78e;
	text-decoration: none;
}
a:hover,
a:visited:hover {
	color: #89f;
}
img {
	max-width: 16em;
}
b
,strong {
	color: #ec8;
}
footer {
	bottom: 0;
	padding: 1em;
	pointer-events: none;
}
header {
	background: #fafafa;
 	position: fixed;
	left: 0;
	width: 100%;
}
header ~ *:first-child() {
	margin-top: 2em;
}
footer img,
footer svg {
	float: right;
	height: 2em;
	padding: 0.5em;
}
code
,h1, h2, h3, h4, h5, h6
{
	font-family: monospace;
}
em
, i {
	color: #7e7;
}
h1, h2, h3, h4, h5, h6 {
	color: #87e;
	padding: 1em 0 0.75em 0;
}
header {
	top: -2px;
	z-index: 4;
}
header,
header *,
header a,
header a:visited {
	color: #222;
}
header + * {
	padding-top: 8rem;
}
header h1 {
	padding: 0;
	position: relative;
	top: -0.2em;
}
header * {
	display: inline-block;
}
header h1 img {
	height: auto;
	padding: 0 0.5em;
	position: relative;
	top: 0.5em;
	width: auto;
}
@media (min-aspect-ratio:4/3) and (orientation:landscape) {
}
@media screen and (orientation:portrait) {
header a, footer a {
	font-size: 150%;
}
}
@media screen-only and (orientation:portrait) {
h1, h2, h3, h4, h5, h6 {
	border-bottom: solid 1px #000;
	padding: 3em 0 1em 0;
	width: 100%;
}
header a {
	font-size: 420%;
}
img {
	width: 100% !important;
}
.nav-to-top img {
	width: 5em;
}
}
.nav-to-top img {
	bottom: 0;
	padding: 0.5em;
	position: fixed;
	right: 0;
	width: 3em;
	
}
.nav-to-top img:hover {
	transform: scale(1.5);
}

p {
	padding: 1em 0;
}
ul {
	padding: 1em;
}
.artImg {
	width: 80%;
}