* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --bg: #000;
    --text: #e9e9e9;
    --accent: #008080;
    --hover: #00ffff;
    --warn: #ff4141;

    --margin: 10px;
    --line-ht: 1.2;
}
::selection {
    color: var(--bg);
    background-color: var(--text);
}
html {
    background: var(--bg) url(/assets/media/bg/main-new.png) no-repeat bottom right fixed;
    scrollbar-color: var(--accent) var(--bg);
    font-family: "Consolas", monospace;
    font-size: 15px;
    color: var(--text);
}
body {
    position: relative;
    width: 650px;
    margin: 8px;
    background-color: var(--bg);
}
.main, .top {
    width: 650px;
    min-height: fit-content;
    margin: 0;
}
/* NAVIGATION ON TOP & PAGE TITLES */
header {
    img {
        position: relative;
        z-index: 1;
        outline: 1px solid var(--accent);
        outline-offset: -1px;
    }
    h1 {
        position: relative;
        z-index: 2;
        font-family: "the-typewriter-hell";
        font-size: 51px;
        font-weight: normal;
        margin-top: -10px;
        margin-bottom: -6px;
        text-shadow: 2px 2px var(--bg), -2px -2px var(--bg), 2px -2px var(--bg), -2px 2px var(--bg);
        background: linear-gradient(to right, #008080, transparent 30%) no-repeat center;
        background-size: 100% 31px;
    }
    ul.navigate, ul.navigate li {
        list-style: none;
        display: inline-block;
        font-size: 20px;
        font-weight: bold;
        a {
            color: var(--text);
            text-decoration: none;
            &:hover, &:focus, &:active {
                color: var(--text);
            }
        }
    }
    p {
        border-top: 1px dotted;
        font-family: "MS Gothic", monospace;
        font-size: 12px;
        text-transform: uppercase;
        color: var(--accent);
        margin-top: -3px;
        padding-top: 1px;
    }
}
/* MAIN CONTENT */
.main {
    background-color: var(--bg);
    /* INTERNAL ELEMENTS */
    h2.title {
        font-size: 18px;
        &:first-of-type {
            margin-top: var(--margin);
        }
    }
    h3.date {
        font-size: 16px;
        &:first-of-type {
            margin-top: var(--margin);
        }
    }
    p {
        margin: var(--margin) 0;
        line-height: var(--line-ht);
        &:last-of-type {
            margin-bottom: 0;
        }
    }
    a {
        color: var(--accent);
        text-decoration: none;
        &:hover, &:active, &:focus {
            color: var(--hover);
            font-weight: bold;
        }
    }
    hr {
        margin: 10px 0;
        border: 1px dashed var(--text);
        border-width: 1px 0 0 0;
    }
    ul {
        list-style: none inside;
        line-height: var(--line-ht);
        &.with-style {
            list-style: "⯀ " inside;
        }
    }
    ol {
        list-style: decimal inside;
        line-height: var(--line-ht);
    }
    dl {
        margin: var(--margin) 0;
    }
}
/* INDIVIDUAL ELEMENTS */
#me {
    height: 130px;
    margin-right: 10px;
    float: left;
    img {
        border: 1px solid var(--accent);
    }
}
/* FONTS */
@font-face {
    font-family: "the-typewriter-hell"; /* from https://www.dafont.com */
    src: url(/assets/fonts/the-typewriter-hell.otf) format(opentype);
    font-weight: normal;
    font-style: normal;
}
/* EXTERNAL - WEBRINGS */
#akira-club a, #neo-nihongo a {
    font-weight: normal;
    &:hover {
        font-weight: normal;
    }
}
#neo-nihongo a {
    color: #FF4D41;
}
#noai img {
    filter: hue-rotate(-45deg) sepia(15%) contrast(150%) saturate(150%);
}