/* I'll come back through here and make everything less henious once I get a good idea of what my site should look like, but everything will be jank until then. */

:root{
--symbos1: #ffff8d;
--symbos2: #ff8b00;
--symbos3: #8d0000;
--symbos4: #000;}

@font-face{
font-family: "IBM VGA 8x16";
src: url(/fonts/Px437_IBM_VGA_8x16.ttf)}

@font-face{
font-family: "DOS/V re. ANK30";
src: url(/fonts/Px437_DOS-V_re_JPN30.ttf)}

@font-face{
font-family: "IBM BIOS";
src: url(/fonts/Px437_IBM_BIOS.ttf)}

::selection{
background: var(--symbos1);
color: var(--symbos3)}

html{
cursor: url(/img/cursors/default.png) 1 0, auto;
display: flex;
height: 100%;
scrollbar-color: var(--symbos3) var(--symbos4);
background-color: var(--symbos3);
background-image: url(/img/1485979619425.png);
background-attachment: fixed;
background-position: center;
font-family: "Hermit", monospace;
font-size: 14px;
image-rendering: crisp-edges;}

body{
max-width: 800px;
width: fit-content;
margin: auto;
padding-bottom: 1px}

a{
color: var(--symbos2);
text-decoration: none}

a, .sitenav li, summary{cursor: url(/img/cursors/click.png) 5 0, auto;}

audio{
max-width: 100%;
filter: invert(0) hue-rotate(180deg) contrast(150%)}

.sitenav ul{
padding-left: 0;
margin: 0}

.sitenav li{
width: 64px;
height: 64px;
margin-bottom: 10px;
background-image: url(/img/navicons/navbg.png);
position: relative;
list-style: none}

.sitenav li a{
width: 100%;
height: 100%;
display: flex;
justify-content: center}

.sitenav li a img{
height: min-content;
align-self: center}

.sitenav li a span{
position: absolute;
top: 21.5px;
left: 100%;
color: var(--symbos2);
background-color: var(--symbos4);
border-style: solid;
border-color: var(--symbos4);
border-width: 2px 2px 2px 0;
border-radius: 0 5px 5px 0;
box-shadow: 3px 3px 0 var(--symbos4);
font-size: 12px;
width: 0%;
max-width: fit-content;
white-space: pre;
overflow: hidden;
transition: width .25s, padding .25s, border-color .5s}

.sitenav li:hover a span{
z-index: 1;
left: 100%;
width: 400%;
padding: 0px 10px;
border-color: var(--symbos3);
transition: width .5s, padding .5s, border-color 0s}

.sitenav{
position: sticky;
top: 10px;
margin-top: 64px;
transform: translateX(-96px);
z-index: 10;
float: left;
width: 0}

body{padding-left: 96px}
main, .notice, footer{margin: 10px auto}

main, .sitenav li{box-shadow: 5px 5px 0 var(--symbos4)}
.notice, footer{filter: drop-shadow(5px 5px 0 var(--symbos4))}

main{
position: relative;
padding: 16px;
background-color: var(--symbos4);
background-image:
url(/img/windowgfx/topleft.png),
url(/img/windowgfx/topright.png),
url(/img/windowgfx/bottomleft.png),
url(/img/windowgfx/bottomright.png),
linear-gradient(to bottom, var(--symbos1) 0px, var(--symbos1) 2px, var(--symbos2) 2px, var(--symbos2) 5px, var(--symbos3) 5px, var(--symbos3) 6px, transparent 6px),
linear-gradient(to right, var(--symbos1) 0px, var(--symbos1) 2px, var(--symbos2) 2px, var(--symbos2) 5px, var(--symbos3) 5px, var(--symbos3) 6px, transparent 6px),
linear-gradient(to left, var(--symbos3) 0px, var(--symbos3) 2px, var(--symbos2) 2px, var(--symbos2) 5px, var(--symbos1) 5px, var(--symbos1) 6px, transparent 6px),
linear-gradient(to top, var(--symbos3) 0px, var(--symbos3) 2px, var(--symbos2) 2px, var(--symbos2) 5px, var(--symbos1) 5px, var(--symbos1) 6px, transparent 6px);
background-position: top left, top right, bottom left, bottom right;
background-repeat: no-repeat;
color: var(--symbos1);
overflow: hidden}

main hgroup, .windowlabel{text-indent: 0}

.windowlabel{
position: absolute;
width: calc(100% - 14px);
top: 6px;
left: 6px;
background-color: var(--symbos2);
color: var(--symbos4);
border: 1px solid;
border-color: var(--symbos1) var(--symbos3) var(--symbos3) var(--symbos1);
height: 18px;}

.windowlabel span{
display: block;
transform: translateY(-1px) translateX(4px)}

.notice, footer{
color: var(--symbos1);
text-align: center;
padding: 8px;
font-size: 12px;
max-width: 600px;
width: fit-content;
border-image: url(/img/coolborder.png) 15 fill / 15px}

.specialheader{
font-family: "DOS/V re. ANK30";
text-shadow: 1px 1px var(--symbos4);
font-weight: 100;
font-size: 32px;
text-align: center;
margin: 20px auto 0;
width: calc(100% - 200px);
background-image: url(/img/Rhodo2.png);
background-attachment: fixed;
animation: rhodoscroll 10s linear infinite}

hgroup audio{
display: block;
margin: auto}

hr{
color: transparent;
border-top: 3px double var(--symbos2)}

.home{text-indent: 2em}

.about{width: 400px}

.about .specialheader{width: calc(100% - 50px); margin-bottom: 10px}

.about .specialheader:after{
content: "";
animation: randomnums .5s infinite}

.about figure{margin: 0 10px 0 0 ; float: left}

.about p, .about li, .about summary, footer p{
font-family: "IBM BIOS";
font-size: 8px}

.about p, .about li, .about summary{margin: 0}

.about p, .about summary{margin-top: 16px}

.about p:first-of-type{margin-bottom: 16px}

.about strong{display: block}

.about strong, .about summary{font-weight: 100; color: var(--symbos2)}

.about summary::marker{color: var(--symbos3)}

.about ul{list-style: "- "; margin: 0}

.about li{margin-top: 4px}

.windowlabel, figcaption, .linktitle{
font-family: "IBM VGA 8x16";
font-size: 16px}

figcaption{
width: fit-content;
margin: auto;
color: var(--symbos2)}

.links, .post{max-width: 640px}

.linktitle, .blog strong{color: var(--symbos2)}

.linktitle, .linkdesc p{margin: 0}

.linkdesc{margin: 0 0 8px 24px}

.doom hgroup ul{
margin: auto;
width: fit-content;
padding: 0;
list-style-type: none;
font-size: 1.5em}

.doom hgroup li{position: relative}
.doom hgroup li:hover:before{
position: absolute;
content: url(/img/skull.png);
left: -28px}

.blog{
max-width: 500px;
padding-left: 32px;
padding-right: 32px}

.blog ul{padding-left: 16px}

.blog li p, .blog li h3{margin: 0}

.blog li::marker{color: var(--symbos3)}

.blog li:not(:first-of-type){border-top: 1px solid var(--symbos3)}

.blog h2:not(:first-of-type){border-top: 3px double var(--symbos3)}

.blog li:not(:first-of-type), .blog h2:not(:first-of-type){
padding-top: 5px;
margin-top: 5px}

.blog h2{margin-bottom: -16px}

.post .windowlabel span{padding-left: 14px}

.post .windowlabel img{
position: absolute;
top: 2px;
left: -3px}

.postcontent{
width: calc(100% - 40px);
margin: auto;
text-indent: 1em;
border-top: 1px dotted var(--symbos2);
/*overflow-x: scroll I can't remember why I set this*/
overflow: hidden}

.postcontent img{max-width: 100%}

.post hgroup h1{margin-bottom: 0}
.post hgroup p{margin: 0}
.post hgroup time{
display: block;
margin-bottom: 10px;
font-weight: bold;
color: var(--symbos2)}

/* links page */
.categories{
padding-bottom: 1em;
border-bottom: 3px double var(--symbos3)}
.categories a:not(:last-child):after{
color: var(--symbos3);
content: " |"}
.links div p{margin: 0 auto 5px}
.links li::marker{color: var(--symbos3)}

@keyframes rhodoscroll{
from{background-position: -256px 0}
to{background-position: 0 0}}

@keyframes randomnums{
0%{content: "896348"}
10%{content: "968452"}
20%{content: "681345"}
30%{content: "120937"}
40%{content: "019523"}
50%{content: "349012"}
60%{content: "134589"}
70%{content: "293640"}
80%{content: "537264"}
90%{content: "028364"}
100%{content: "364456"}}

@media only screen and (max-width: 500px){
.specialheader{
width: -moz-fit-content;
width: fit-content;
padding: 0 10px}}

/* mostly only doing this so that my site looks good on seamonkey
 * I would've used @-moz-document url-prefix() but that doesn't work on seamonkey
 * I'm probably the only person in the entire world using seamonkey but idgaf
*/
body, .notice, footer, figcaption, .doom hgroup ul{width: -moz-fit-content}
.sitenav li a span{max-width: -moz-fit-content}