:root {
	color-scheme: only dark;
}
body {
	background-image: url("/_data/bg.gif");
	background-repeat: repeat;
	background-size: auto;
	color: #ffffff;
	font-family: monospace;
	/* black border around the text */
	text-shadow:
	-1px -1px 0 #000000,
	1px -1px 0 #000000,
	-1px 1px 0 #000000,
	1px 1px 0 #000000,
	-1px 0 0 #000000,
	1px 0 0 #000000,
	0 1px 0 #000000,
	0 -1px 0 #000000; /* Terminate with a semi-colon */
}
pre { white-space: pre-wrap; }

img { max-width: 80%; height: auto; }
a img { border: none; }
a:link { color: #8888ff; text-decoration: none; }
a:visited { color: #b35fff; text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; }

#ul-nav {
	background: #000000;
	/*position: fixed;*/
	font-size: 14px;
	top: 0;
	list-style-type: none;
	margin: -8px -8px;
	padding: 5px 7px;
	width: 100%;
	border-bottom: 5px solid white;
} /* this is upsetting */
#ul-nav a {color: white; padding: 0 5px; text-decoration: none;}
#ul-nav a:hover:not(.active) {color: #6495ed;}

/* HATE HATE HATE NOTHING BUT HATE */
/* DAMNED IF YOU DO DAMNED IF YOU DON'T */
header h1 {
	margin: 8px 0px 0px -8px;
	padding: 5px 10px 6px 12px;
	color: white;
	background: black;
	border-bottom: 5px solid white;
	width: 99.5%; /* I HATE WEBSHIT I HATE WEBSHIT */
}
#header { color: white; text-decoration: none; }
#side-bar {	display: none; min-width: 12em; }
article { margin: 0 0 40px 0; padding: 0px 30px; flex-grow: 3; }
#footer {
	/*backdrop-filter: blur(10px);*/
	background: #000000;
	position: fixed;
	bottom: 0;
	font-size: 14px;
	list-style-type: none;
	margin: -0px -8px;
	padding: 5px 7px;
	width: 101%; /* todo FIX THIS */
	border-top: 5px solid white;
	display: flex;
	/*justify-content: space-between;*/
}
#footer a { color: white; padding: 0 5px; text-decoration: none; }
#footer a:hover:not(.active) { color: #6495ed; }

.mario {
	opacity: 0;
	transition: 20s;
}
.mario:hover { opacity: 1 }

@supports (display: flex) {
  #side-bar {
    /*backdrop-filter: blur(10px);*/
    background: #000000;
    margin: 0 -8px;
    padding: 0px 5px;
    /*width: 100%;*/
    border-right: 5px solid white;
    min-height: 88vh;
    display: flex;
  }
  #side-bar a { color: white; padding: 0 5px; text-decoration: none; }
  #side-bar a:hover:not(.active) { color: #6495ed; }
}
@media screen and (max-width: 730px) {
  img { max-width: 100%; }
  header h1 { width: 99%; }
  #side-bar {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
  body { display: block; }
}
/* i hope i get hit by a train and turn into red mist */