@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Nerko+One&display=swap&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0px;
    margin: 0px;
    font-family: 'Comic Neue';
}

html {
    overflow-x: hidden;
}

br {
    user-select: none;
}

a {
    color: #0000aa;
    text-decoration: none;
}

a:hover {
    color: #0000ff;
}

img {
    max-width: 100%;
    image-rendering: pixelated;
}

h1 {
    text-align: center;
    font-size: 24pt;
    font-weight: normal;
    font-family: 'Nerko One';
    z-index: 1;
}

h2 {
    font-family: 'Nerko One';
    font-weight: normal;
    z-index: 1;
}

h3 {
    color: #9a9a9a;
    font-size: 10pt;
    font-weight: bold;
    z-index: 1;
}

h4 {
    color: #9a9a9a;
    font-size: 10pt;
    font-weight: bold;
    text-align:center;
    z-index: 1;
}

p {
    color: #000000;
    font-size: 12pt;
    z-index: 1;
}

zero-md {
    padding: 15px;
}

.hidden {
    visibility: hidden;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

body, header, footer {
    background-color: #FFDDFF;
}

.container {
    background-color: #aaddff;
    width: 640px;
    margin: auto;
    border-left: 1px;
    border-right: 1px;
}

header {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header img.banner {
    padding: 0px;
    width: 100%;
    user-select: none;
}

header nav {
    position: relative;
    width: 100%;
    font-size: 14pt;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
    user-select: none;
    line-height: 16px;
    font-weight: 700;
    font-family: 'Comic Neue';
}

header nav .navbg {
    position: absolute;
    z-index: 0;
}

header nav a {
    padding: 8px 12px;
    color: #000000;
    text-decoration: none;
    z-index: 1;
    font-weight: bold;
}

header nav a:hover {
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    color: #FFDDFF;
}

/*
.nav-divider {
    margin: 0px 4px;
    content: url('/images/div.png');
    width: 16px;
}
*/

main {
    border-style: outset;
    border-color: #cceeff;
    padding: 0px 8px;
    position: relative;
}

main hr {
    border-color: #aaddff;
}

main h1 {
    padding: 12px 0px 8px 0px;
}

main h2 {
    padding: 15px 0px 0px 20px;
    white-space: nowrap;
}

main h3 {
    padding: 0px 0px 0px 30px;
}

main p {
    padding: 15px;
}

main h1#page-heading {
    min-height: 7px;
    user-select: none;
}

main h3#page-num, main h3#page-status, main div.page-account {
    color: #000000;
    position: absolute;
    padding: 0px;
    top: 6px;
    user-select: none;
}

main div.page-account {
    right: 8px;
}

main h3#page-login, main h3#page-logout, main h3#page-register, main h3#page-me {
    color: #696969;
    position: relative;
    display: inline-block;
    padding: 0px;
    vertical-align: top;
    user-select: none;
}

main h3#page-num {
    color: #696969;
    left: 8px;
}

main h3#page-status {
    left: 140px;
    right: 140px;
    width: fit-content;
    margin: auto;
    text-align: center;
}

main h3#page-num.page-with-heading, main div.page-account.page-with-heading {
    top: 38px;
}

main h3#page-status.page-with-heading {
    top: 8px;
    right: 8px;
    left: auto;
    text-align: right;
}

main h3#page-login a, main h3#page-logout a, main h3#page-register a, main h3#page-me a {
    padding: 0px 4px 0px 0px;
}

main h3#page-login a {
    text-decoration: none;
    color: #008800;
}

main h3#page-login a:hover {
    color: #00cc00;
}

main h3#page-logout a {
    text-decoration: none;
    color: #880000;
}

main h3#page-logout a:hover {
    color: #cc0000;
}

main h3#page-register a {
    text-decoration: none;
    color: #000088;
}

main h3#page-register a:hover {
    color: #0000cc;
}

main h3#page-me a {
    text-decoration: none;
    color: #000088;
}

main h3#page-me a:hover {
    color: #0000cc;
}

main section {
    background-color: #ffffff;
    border-color: #cceeff;
    border-style: inset;
    margin: 8px 0px 8px 0px;
    position: relative;
}

main section .notes {
    position: absolute;
    user-select: none;
    width: 100%;
    height: 100%;
    z-index: 0;
}

main section p, main section h1, main section h2, main section h3 {
    position: relative;
    z-index: 1;
}

main section hr {
    margin: 0px 8px;
    border-color: #ffffff;
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    user-select: none;
}

footer span.copyright {
    margin: 24px 24px 12px 24px;
    font-size: 12pt;
    color: #000000;
    text-align: center;
}

footer span.copyright a {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}

footer span.copyright a:hover {
    color: #888888;
}

.story-links {
    font-size: 14pt;
    text-align: center;
    user-select: none;
    height: fit-content;
}

#story-back {
    float: left;
    padding: 12px;
}

#story-next {
    float: right;
    padding: 12px;
}

#story-timestamp {
    position: absolute;
    font-size: 10pt;
    color: #696969;
    left: 72px;
    right: 72px;
    margin: auto;
    margin-top: 20px;
    text-align: center;
}

audio::-webkit-media-controls-panel {
    background-color: #EEEEEE;
    padding: 4px 0px 0px;
    margin: 0px;
}

span.spoiler {
    background-color: #000;
}

span.spoiler:hover {
    cursor: pointer;
}

span.spoiler.active {
    background-color: #eee;
}
                
ol, ul {
    margin-left: 48px;
}

ul {
    list-style-type: "> ";
}