div,h2,h3,li,ul,ol,audio { 
    margin: 0 0 1em 0;
}

body {
    background-color: black;
    font-family: /* Ubuntu,Univers,Helvetica,Ariel,"Liberation Sans",*/ sans-serif;
    color: #FFE;
    padding: 0 2em 0 2em;
}

h1 {
    font-size: xx-large;
    padding: 0.5em 0 0 0;
    text-align: center;
}

h2 {
    font-size: x-large;
    padding: 1em 0 0 0;
    text-align: left;
}

h3 {
    text-align: left;
}

p { 
    line-height: 24pt; /* ie3 fix, ideally would be 2 */
    text-align: left;
}

a {
    color: #ADE;
}

ol {
    list-style-position: inside;
}

li {
    text-align: left;
}

img,video,videos {
    float: right;
    border: solid;
    width: 300px;
    text-align: center;
    clear: right;
    margin: 0 0 1em 1em;
}

img p,video p,videos p {
    text-align: center;
    margin: 1em;
}

video.centered,img.centered {
    margin: 0 auto;
    float: none;
    display: block;
}

th,td {
  border: 1px solid;
  padding: 0.2em;
}

span.cl {
    border-bottom: 1px dashed #FFE;
}

span.np {
    border-bottom: 1px dashed #FFE;
}

.hidden {
    display: none;
}

.clear {
    clear: both;
}

.list {
    text-align: left;
    line-height: 16pt; /* ie3 fix ? */
    padding-left: 2em; /* ie6 fix */
}

.bump {
    padding-left: 3em;
}

.nobr {
    white-space: nowrap;
}

menu {
    float: right;
    text-align: left;
    font-size: 1.25em;
    clear: right;
}

menu li {
    padding: 0.5em 1em 0.5em 1em;
    list-style-type: none;
}

menu li a {
    display: block;
}

#index,#error {
    padding-left: 0; /* ie fix */
    margin-left: 0; /* ie fix */
    float: none;
    text-align: center;
}

#index li {
    margin: 0 auto; /* ie4 fix */
    margin-bottom: 1em; /* ie4 fix */
    width: 12.5em;
    padding: 0.5em 1em 0.5em 1em;
    list-style-type: none;
    text-align: center;
}

#error li {
    margin: 0 auto; /* ie4 fix */
    margin-bottom: 1em; /* ie4 fix */
    width: 25em; /* 80%? */
    padding: 0.5em 1em 0.5em 1em;
    list-style-type: none;
    text-align: center;
}

li.item-1 { background: #711; }
li.item-2 { background: blue; }
li.item-3 { background: #FD0; } li.item-3 a { color:#333 }
li.item-4 { background: #159; }
li.item-5 { background: #0D0; } li.item-5 a { color:#333 } 
li.item-6 { background: #9CF; } li.item-6 a { color:#333 }
li.item-7 { background: #707; }
li.item-8 { background: #FD0; } li.item-8 a { color:#333 }

.footer,address {
    font-family: monospace;
    text-align: center;
    margin: 1em;
    line-height: 24pt; /* ie3 fix */
    font-style: italic;
}

#rss {
    display: inline;
    float: none;
    margin: 0;
    border: solid 2px;
    width: 1em;
    clear: none;
}

#character-image {
    display: inline;
    float: none;
    margin: 0;
    border: none;
    width: 1em;
    clear: none;
}

.skip {
    color: black;
    text-align: center;
    font-size: 1pt; /* better alternative for minimal possible size? */
}

/*
.js {
    display:none;
}
*/

noscript {
    text-align: center;
}

/* fancy shit from here on down */

.skip:focus { /* is it literally impossible to implement a button which shows up on focus in css1? :active is fucking useless... */
    color: #FFE;
    font-size: x-large;
}

a:hover, li.item-1 a:hover, li.item-2 a:hover, li.item-3 a:hover, li.item-4 a:hover, li.item-5 a:hover, li.item-6 a:hover {
    color: red;
}

@counter-style funny {
    system: fixed;
    symbols: "A" "2" "III" "四" "Fifth" "ζ̅" "Ж" "ち" "ט" "1010";
    suffix: ".) ";
}

ol.funny {
     list-style-type: funny; 
}

@media only screen and (max-width: 690px) {
    h1 {
        margin: 0;
    }

    img,video {
        float: none;
        margin: 0 auto;
        display: block;
    }  

    menu {
        float: none;
        margin-right: 0;
        padding-left: 0;
    }

    menu li {
        text-align: center;
        width: 12em;
        margin: auto auto 1em auto;
    }

    body {
        padding: 0 1em 0 1em;
    }
    
    #error li {
        width: 15em; /* 80%? */
    }
}

@media (prefers-color-scheme: light) {
    body {
        background-color: #FFE;
        color: black;
    }

    a {
        color: blue;
    }

    .skip {
        color: #FFE;
    }

    .skip:focus { /* is it literally impossible to implement a button which shows up on focus in css1? :active is fucking useless... */
        color: black;
    }

    span.cl {
        color: #FFE;
        border-bottom: 1px dashed #FFE;
    }

    span.np {
        border-bottom: 1px dashed black;
    }

    li menu a {
        color: green;
    }

    li.item-1 a { color:#FFE; }
    li.item-2 a { color:#FFE; }
    li.item-3 a { color:#333; }
    li.item-4 a { color:#FFE; }
    li.item-5 a { color:#333; }
    li.item-6 a { color:#333; }
    li.item-7 a { color:#FFE; }
    li.item-8 a { color:#333; }

}

@media (prefers-contrast: less) {
    body {
    background-color: #222;
    color: #FFE;
    }

    a {
        color: #ADE;
    }

    .skip {
        color: #222;
    }

    .skip:focus { /* is it literally impossible to implement a button which shows up on focus in css1? :active is fucking useless... */
        color: #FFE;
    }

    a:hover, li.item-1 a:hover, li.item-2 a:hover, li.item-3 a:hover, li.item-4 a:hover, li.item-5 a:hover, li.item-6 a:hover {
        color: red;
    }

    span.cl {
        color: #FFE;
        border-bottom: 1px dashed #FFE;
    }

    span.np {
            border-bottom: 1px dashed #FFE;
        }

    li.item-1 { background: #711;    }
    li.item-2 { background: blue;    }
    li.item-3 { background: #FD0;    } li.item-3 a { color:#333     }
    li.item-4 { background: #159;    }
    li.item-5 { background: #0D0;    } li.item-5 a { color:#333     }
    li.item-6 { background: #9CF;    } li.item-6 a { color:#333     }
    li.item-7 { background: #707;    }
    li.item-8 { background: #FD0;    } li.item-8 a { color:#333     }
}

@media (pointer: coarse) {
    menu li a {
        margin: -1em;
        padding: 1em;
    }
    #rss {
        /* margin: -0.5em; */
        /* padding :0.5em; */
    }
}