:root {
    --bg_white: #FCFCFF;
    --a_lightBlue: #7CA3E2;
    --TXT_blue: #0D2D6D;
    --TXT_white: #CECEEF;
    --a_activeRed: #AA0222;
    --bg_lightBlue: #5876AC;
    --hl_red: #FF0010;
/* layer colors */
    --bg_weird: #7ca3e2;
    --txt_weird: #DDDDDD;
    --bg_girls: #7397d4;
    --bg_psyche: #6a8cc7;
    --bg_religion: #6181b9;
    --bg_distortion: #5876ac;
    --bg_kids: #506b9e;
    --bg_society: #406294;
    --bg_rumors: #3e5484;
    --bg_protocol: #364976;
    --bg_love: #2d3e69;
    --bg_infornography: #24335b;
    --bg_landscape: #1b284e;
    --bg_ego: #121c40;
}

@font-face {
    font-family: 'Courier-Prime';
    src: url('Courier_Prime/CourierPrime-Regular.tff') format ('truetype');
    src: url('Courier_Prime/courier-prime-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Courier-Prime';
    src: url('Courier_Prime/CourierPrime-Italic.tff') format ('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Courier-Prime';
    src: url('Courier_Prime/CourierPrime-Bold.tff') format ('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Courier-Prime';
    src: url('Courier_Prime/CourierPrime-BoldItalic.tff') format ('truetype');
    font-weight: bold;
    font-style: italic;
}

/* setting the box model - ränder sollen zum Inhalt gehören*/
*, ::before, ::after {
  box-sizing: border-box;
}

.omnipresence,.program {
    color: var(--TXT_blue);
    background-color: var(--bg_white);
}

.weird {
    color: var(--txt_weird);
    background-color: var(--bg_weird);
}

.weird a, .weird a:visited {
    color: var(--TXT_blue);
}

.girls {
    color: var(--TXT_white);
    background-color: var(--bg_girls);
}

.girls a, .girls a:visited {
    color: var(--TXT_blue);
}

.jp-quote::before {
    content: '『';
    font-size: 1.3em;
}

.jp-quote::after {
    content: '』';
    font-size: 1.3em;
    position: relative;
    bottom: -3px;
}

.question {
    font-family: serif;
    font-style: italic;
    font-size: 1.2em
}

.question::before {
    content: '– –';
    position: relative;
    left: -0.5em;
}

.psyche {
    color: var(--TXT_white);
    background-color: var(--bg_psyche);
}

.psyche a , .psyche a:visited {
    color: var(--TXT_blue);
}

.religion {
    color: var(--TXT_white);
    background-color: var(--bg_religion);
}

.religion a , .religion a:visited {
    color: var(--TXT_blue);
}

.distortion {
    color: var(--TXT_white);
    background-color: var(--bg_distortion);
}

.distortion a , .distortion a:visited {
    color: var(--TXT_blue);
}

.kids {
    color: var(--TXT_white);
    background-color: var(--bg_kids);
}

.kids a , kids a:visited {
    color: var(--TXT_blue);
}

.society {
    background-color: var(--bg_society);
    color: var(--TXT_white);
}

.rumors {
    background-color: var(--bg_rumors);
    color: var(--TXT_white);
}

.protocol {
    background-color: var(--bg_protocol);
    color: var(--TXT_white);
}

.log-row::after {
    content: "";
    display: table;
    clear: both;
}

.log-date {
    width; 20%;
    min-width: 12%;
    float: left;
    padding: 0.5em;
}

.log-msg {
    width: 88%;
    float: left;
    padding: 0.5em;
    border-left-width: 1px;
    border-left-style: dashed;
}

.log-msg > p:last-of-type {
    text-align: right;
    margin-top: 0.2em;
    font-size: 80%;
}

.log-row p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.love {
    background-color: var(--bg_love);
    color: var(--TXT_white);
}

.infornography {
    color: var(--TXT_white);
    background-color: var(--bg_infornography);
}

.calvin {
    color: var(--a_lightBlue);
}

.landscape {
    color: var(--TXT_white);
    background-color: var(--bg_landscape);
}

.ego {
    color: var(--TXT_white);
    background-color: var(--bg_ego);
}

.pic-container {
    margin: auto;
    width: 250px;
    border-color: var(--TXT_white);
    border-style: solid;
    background-color: var(--a_lightBlue);
    text-align: center;
    padding-top: 20px;
    padding-bottom: 1em;
    margin-bottom: 1.5em;
}

.pic-container img {
    width: 200px;
    height: auto;
    border-color: var(--TXT_blue);
    border-style: solid;
}

.pic-container p {
    font-size: 0.6em;
    text-align: justify;
    font-family: Courier-Prime;
    color: var(--TXT_white);
    padding-left: 25px;
    padding-right: 25px;
    text-shadow: var(--TXT_blue) 1px 1px 0.5em;
}


.tbl-left {
    color: var(--TXT_white);
    text-align: right;
    padding-right: 0.1em;
}

.tbl-right {
    color: var(--TXT_blue);
    text-align: left;
    padding-left: 0.1em;
}

.ox-dict {
    width: 90%;
    margin: auto;
    font-family: serif;
}

.ox-dict i {
    font-family: serif;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

.ox-dict b {
    font-family: serif;
    font-size: 1.1em;
}

.tbl-layers {
    text-align: right;
}
.arrows {
    width: 2em;
    text-align: center;
}

.up {
    font-weight: bold;
}

.down {
    font-weight: normal;
}

body {
    padding: 1rem;
    font: normal 1em Helvetica, Arial, sans-serif;
}

nav ul {
    list-style-type: none;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    padding: 0;
}
footer ul {
    list-style-type: none;
    display: flex;
    flex-flow: wrap-reverse;
    justify-content: center;
    padding: 0;
}

nav li, footer li {
    flex: 0 0 16%;
    align-self: center;
}

a::before,a::after {
    content: '\2236\2236';
    font-family: sans-serif;
    font-size: 1.4em;
    margin-left: 0.1em;
    margin-right: 0.1em;
}

a, a:visited, a:active {
    font-family: Courier-Prime;
    text-decoration: none;
    color: var(--a_lightBlue);
    display: inline-block;
}


a:hover {
    /*text-shadow: var(--a_lightBlue) 0 0 1em;*/
    animation: jitter 0.4s ease-in-out;
    animation-iteration-count: infinite;
}

a.flow-link::after, a.flow-link::before {
    content: '';
    margin: inherit;
}

a.flow-link {
    font-family: inherit;
    text-decoration: underline;
}

.message-container {
    position: relative;
    border-style: solid; 
    border-radius: 0.3em;
    border-width: 1px;
    padding: 0.5em;
    padding-top: 1em;
    width: 100%;
    margin-top: 1.5em;
}

.message-container > p:first-child {
    display: block;
    margin: 0;
    position: absolute;
    top: -0.8em;
    left: 1em;
    background-color: var(--bg_society);
    padding: 2px;
}

.message-container > p:nth-child(2) {
    display: block;
    margin: 0;
    font-family: monospace;
    position: absolute;
    top: -0.7em;
    right: 2em;
    text-align: right;
    border-style: solid;
    border-width: thin;
    border-radius: 0.2em;
    background-color: var(--bg_society);
    padding: 0em 0.2em;
}

a.device-link ,a.device-link:visited {
    font-family: sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    text-decoration: none;
    color: var(--hl_red);
}

a[href^=mailto] {
    color: var(--hl_red);
    font-weight: bold;
    font-size: 1.2em;
}

a[href^=mailto]::after, a[href^=mailto]::before {
    content: '';
    margin: inherit;
} 

a[aria-current="page"] {
    color: var(--a_activeRed);
}

.nav-menu {
    width: 80%;
    display: inline-block;
    text-align: center;
    align-items: center;
}

footer,nav {
    text-align: center;
    align-items: center;
}

.footer-date {
    font-size: 0.7em;
}

@keyframes jitter {
    0%, 100% {
        transform: translate(0, 0);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }

    10% {
        transform: translate(-3px, -3px);
        filter: drop-shadow(3px 0 0 rgba(254, 44, 85, 0.7)) drop-shadow(-3px 0 0 rgba(37, 244, 238, 0.7));
    }

    20% {
        transform: translate(0, 0);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }

    30% {
        transform: translate(3px, -3px);
        filter: drop-shadow(3px 0 0 rgba(254, 44, 85, 0.7)) drop-shadow(-3px 0 0 rgba(37, 244, 238, 0.7));
    }

    40% {
        transform: translate(0, 0);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }

    50% {
        transform: translate(-3px, -3px);
        filter: drop-shadow(3px 0 0 rgba(254, 44, 85, 0.7)) drop-shadow(-3px 0 0 rgba(37, 244, 238, 0.7));
    }

    60% {
        transform: translate(0, 0);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }

    70% {
        transform: translate(3px, -3px);
        filter: drop-shadow(3px 0 0 rgba(254, 44, 85, 0.7)) drop-shadow(-3px 0 0 rgba(37, 244, 238, 0.7));
    }

    80% {
        transform: translate(0, 0);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }

    90% {
        transform: translate(-3px, -3px);
        filter: drop-shadow(3px 0 0 rgba(254, 44, 85, 0.7)) drop-shadow(-3px 0 0 rgba(37, 244, 238, 0.7));
    }

    100% {
        transform: translate(0, 0);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
}

pre b, pre u, pre i, pre big, pre span {
    font-family: inherit;
}