:root{
	--back: #ffffff;
	--fore: #222222;
	--accent: #ff6011;
	--header: var(--accent);
	--header2: #111111; 
	--header3: #333333;
	--href: #0094dd;
	--code: #ffffff; }
@font-face{
	font-family: "Space Grotesk";
	src: url("/fonts/SpaceGrotesk-VariableFont_wght.ttf");
	font-weight: normal;
	font-style: normal; }
@font-face{
	font-family: "Major Mono Display";
	src: url("/fonts/MajorMonoDisplay-Regular.ttf");
	font-weight: normal;
	font-style: normal; }
.home-img{
	margin-bottom: 0;
	padding-bottom: 0;
}
.line-one{
	width: 278px;
	height: 0.5em;
	margin-bottom: 0.25em;
	background-color: var(--accent);
}
.line-two{
	width: 278px;
	height: 0.5em;
	background-color: var(--href);
}
html{
	background-color: var(--back);
	color: var(--fore); 
	font-family: "Space Grotesk",sans-serif;
	line-height: 1.8; }
body{
	font-size: 1.3195em;
	margin-left: auto;
	margin-right: auto;
	width: 40%; }
h1,h2,h3,h4,h5{ font-family: "Major Mono Display", sans-serif; line-height: 1.2;}
h1{ font-size: 2em; color: var(--header); margin: 0; }
h2{ font-size: 1.7411em; color:  var(--header2); }
h3{ font-size: 1.5157em; 
	text-align: center; 
	color: var(--header3); }
article::after{
	content: "H";
	float: right;
	background-color: var(--fore);
	color: var(--back);
	border-radius: 1em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}
a{ color: var(--href); }
p.dropcap:first-letter{
	font-family: "Major Mono Display", monospace;
	float: left;
	font-size: 3.5em; 
	line-height: 3em;
	padding-top: 0.2em;
	padding-right: 0.1em;
}
blockquote{ 
	width: 80%;
	color: #555;
	font-size: 1.125em;
	font-style: italic; }
blockquote:before{
	content: "\00201C";
	font-size: 2em;
	line-height: 0.125em; }
blockquote:after{
	content: "\00201D";
	font-size: 2em;
	line-height: 0.125em; }
pre{ 
	padding: 1em; 
	border-radius: 0 0.5em 0.5em 0;
	background-color: var(--fore); 
	border-left: solid var(--accent) 5px; 
	line-height: 1.2; }
code{ 
	color: var(--code); 
	font-family: monospace; 
	white-space: pre-wrap; }
nav.top-menu ul{
	padding: 0;
	margin: 0;
	margin-bottom: 1em;
	list-style-type: none; }
nav.top-menu ul li{ display: inline-block; 
	font-weight: bold; }
nav.top-menu ul li a{ 
	font-size: 1.5157;
	border-left: 0.18em solid var(--accent);
	padding-left: 0.25em;
	transition: 0.3s ease-in-out;
	text-decoration: none; 
	position: relative;
	color: var(--fore); }
nav.top-menu ul li a::before{ 
	content:'';
	background-color: var(--fore); 
	left: 0;
	bottom: 0;
	height: 100%; 
	width: 0;
	border-radius: 0 0.25em 0.25em 0;
	position: absolute;
	z-index: -1;
	transition: all 0.3s ease-in-out;
}
nav.top-menu ul li a:hover::before{ 
	width: 100%;
}
nav.top-menu ul li a:hover{ 
	color: var(--back); 
	padding-right: 0.25em; }

table{ width: 100%; 
	border-radius: 0 10px 10px 0;
	border: 2px solid var(--fore); }
td,th{ 
	text-align: left;
	margin: 0.125em; 
	padding: 0.125em; }
@media only screen and (max-width: 900px){ body{ width: 90%; } }