:root {
    --main-bg: #283015;
    --box-bg:  #1b200e;
    --main-fg: #EFE;
    --mute-fg: #AB9;
    --highlight: #D6188C;

    --a-normal: #6CFE35;
    --a-hover: #FEF135;
}

@font-face {
    font-family: "Beon";
    src: url("Beon-Regular_EG.otf");
}
@font-face {
    font-family: "FreePixel";
    src: url("FreePixel.ttf");
}
@font-face {
    font-family: "Questrial";
    src: url("Questrial-Regular.ttf");
}

html, body {
    margin: 0;
    padding: 0;
}


/*─────────────────────────────────────────────────────────────────────────────┐
│                                  MAIN LAYOUT                                 │
└─────────────────────────────────────────────────────────────────────────────*/

/* Flex? Grid? TODO!! */

body {
    height: 100vh;
    background: center / cover no-repeat var(--main-bg) url(bg.jpg);
    color: var(--main-fg);
    font-family: sans-serif;
    display: flex;
    justify-content: space-around;
    /* flex-wrap: wrap; */
}

body > div {
    background: var(--box-bg);
    padding: 1em;
    overflow-y: auto;
    overflow-x: auto;
    flex-grow: 0;
    max-height:calc(100vh - 2em);
}

#c1 {  /* left block (menu & tree) */
    margin: 2ex;
    padding: 2ex;
    border-radius: 2ex;
    border-style: inset;
    border-color: rgba(35,35,35,0.85);
    border-width: 0.25ex;
    height:fit-content;
    width: fit-content;
    min-width: fit-content;
}

#doom {
    flex-grow:0;
    background: rgba(19,19,19,0.85);
    backdrop-filter: blur(4px);
    min-width: 25em;
    width: 50%;
}

#c2 {
    background: none;
    width: 18em;
    min-width: 18em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#c2 > div {
    background: var(--box-bg);
    padding: 2ex;
    border-radius: 2ex;
    border-style: inset;
    border-color: rgba(35,35,35,0.85);
    border-width: 0.25ex;
    height:fit-content;
}


@media screen and (max-width: 1600px) {
}

@media screen and (max-width: 1200px) {
    body {
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
    }
    #c1   {
        order: 0;
        width: 18em;
    }
    #c2   {
        order: 1;
        width: calc(18em + 4ex);
        margin: 2ex;
        padding:0;
    }
    #c2 > div {
        width: calc(18em - .5ex);
        margin-top:2ex;
    }
    #doom {
        order: 2;
        width: calc(100vw - 20em - 8.5ex);
        height: calc(100vh - 2em);
    }
    /* Bestenfalls stecken wir c1 und c2 in einen gemeinsamen container für diese Ansicht */
    /* Aber kriegen wir das dann wieder auseinder bei breiterem display? Ich fürchte nicht! */
}

@media screen and (max-width: 800px) {
    body {
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        height: unset;
        min-height:100vh;
    }
    body > div {
        max-height: unset;
    }
    #c1   {
        order: 0;
        width: calc(100vw - 10.5ex);
        margin-top:0.30em;
        margin-bottom:0.15em;
    }
    #c2   {
        order: 1;
        width: calc(100vw - 5.5ex);
        padding-top:0.15em;
        padding-bottom:0.15em;
    }
    #c2 > div {
        width: calc(100vw - 10.5ex);
        margin-top:0.25em;
        margin-bottom:0.25em;
    }
    #doom {
        order: 2;
        width: calc(100vw - 2.0em);
        height: unset;
    }
    /* Bestenfalls stecken wir c1 und c2 in einen gemeinsamen container für diese Ansicht */
    /* Aber kriegen wir das dann wieder auseinder bei breiterem display? Ich fürchte nicht! */
}


/*─────────────────────────────────────────────────────────────────────────────┐
│                                  MENU / HEADER                               │
└─────────────────────────────────────────────────────────────────────────────*/

#menu {}

#menu form {
    margin: 1em 0;
}

#menu h1 {
    margin: 0 0 0.4em;
    text-align: center;
    filter:blur(2px);
    transform: rotate(-2deg);
    transition: all 0.2s;
    font-family: Beon, sans-serif;
    font-size: 32px;
}
#menu h1:hover {
    filter:blur(0);
    transform: rotate(0deg);
}

#menu h1 a {
    color: #fb48c4;
}
#menu h1 a:hover {
    color: #fb48c4;
}

#menu h1 a img {
    display:inline-block;
    width: 32px;
    height: 32px;
    vertical-align: bottom;
}

#menu input {
    font-family: FreePixel, monospace;
    font-size:1em;
    background: #0005;
    border: 1px solid lime;
    padding: 0.1em;
    color: white;
    width: 280px;
}




/*─────────────────────────────────────────────────────────────────────────────┐
│                                  TREE                                        │
└─────────────────────────────────────────────────────────────────────────────*/

#tree {
    font-family: FreePixel, monospace;
    --branchcolor: #999;
    position: relative;
}

#tree::before {
    content: '/';
    position: absolute;
    left: 0.25em;
    top: -0.1em;
}

#tree ul {
    display: inline-block;
    float: left;
    clear: left;
    padding: 0;
    overflow: hidden;
}

#tree ul::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 1em;
    right: auto;
    bottom: 0;
    left: 1.5em;
    margin: auto;
    border-right: solid var(--branchcolor) 1px;
    width: 0;
}

#tree > ul::before {
    left: 0.5em;
    top: -0.2em;
}

#tree ul > li {
    display: block;
    position: relative;
    float: left;
    clear: both;
    right: auto;
    padding-left: 1em;
    width: auto;
    text-align: center;
}

#tree ul > li > input {
    display: none;
}

#tree ul > li > input:not(:checked) ~ ul::before {
    display: none;
}

#tree ul > li > input:not(:checked) ~ ul {
    display: none;
}

#tree ul > li > input:checked ~ ul {

}

#tree ul > li > label,
#tree ul > li > a {
    display: block;
    position: relative;
    float: left;
    z-index: 3;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

#tree ul > li > label:hover {
    color: var(--a-hover);
}


#tree ul > li > a {
    padding: 0 0.4em ;
}

#tree ul > li > a.active {
    background: #1A4E8D;
}

#tree ul > li > label::after,
#tree ul > li > a::after {
    content: "";
    display: block;
    position: absolute;
    left: -0.45em;
    top: 0;
    bottom: 0;
    margin: auto 0 auto 0;
    border-top: solid var(--branchcolor) 1px;
    width: .5em; height: 0;
}

#tree > ul > li > label::after,
#tree > ul > li > a::after {
    left: -0.5em;
}

#tree ul > li:last-child::before{
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 0.6em;
    left: 0;
    bottom: -0.25em;
    width: 0.75em;
    height: auto;
    background: var(--box-bg);
}

#tree > ul {
    position: relative;
}
#tree > ul::after {
    display: none;
}


#tree ul > li > input ~ label::before{
    /* content: '📁 '; */
    content: '/';
    display: inline-block;
    margin-left: .25em;
}
#tree ul > li > input:checked ~ label::before{
    /* content: '📂 '; */
    content: '/';
}



/*─────────────────────────────────────────────────────────────────────────────┐
│                                  DOOMSCROLL AREA                             │
└─────────────────────────────────────────────────────────────────────────────*/

#doom h1 { counter-increment: h1; counter-reset: h2 h3 h4 h5 h6; }
#doom h2 { counter-increment: h2; counter-reset: h3 h4 h5 h6; }
#doom h3 { counter-increment: h3; counter-reset: h4 h5 h6; }
#doom h4 { counter-increment: h4; counter-reset: h5 h6; }
#doom h5 { counter-increment: h5; counter-reset: h6; }
#doom h6 { counter-increment: h6; }

#doom h1::before, #doom h2::before, #doom h3::before,
#doom h4::before, #doom h5::before, #doom h6::before {
    color: var(--mute-fg);
}

#doom h1::before { content: counters(h1, ".")" "; }
#doom h2::before { content: counters(h1, ".")"."counters(h2, ".")" "; }
#doom h3::before { content: counters(h1, ".")"."counters(h2, ".")"."counters(h3, ".")" "; }
#doom h4::before { content: counters(h1, ".")"."counters(h2, ".")"."counters(h3, ".")"."counters(h4, ".")" "; }
#doom h5::before { content: counters(h1, ".")"."counters(h2, ".")"."counters(h3, ".")"."counters(h4, ".")"."counters(h5, ".")" "; }
#doom h6::before { content: counters(h1, ".")"."counters(h2, ".")"."counters(h3, ".")"."counters(h4, ".")"."counters(h5, ".")"."counters(h6, ".")" "; }

.error {
    padding:0;
    border:1px solid red;
    border-radius: 1em;
    margin:1em;
}

.error .head {
    background: #77000022;
    border-bottom:1px solid red;
    padding: 1em;
    font-size:2em;
    color:red;
}

.error .body {
    padding: 2em;
    font-family: monospace;
}

.error .body .moji {
    font-size: 5em;
    text-align: center;
    margin: 1em 0;
}


/*─────────────────────────────────────────────────────────────────────────────┐
│                                  OUTLINE                                     │
└─────────────────────────────────────────────────────────────────────────────*/

#outline {

}

#outline a {
    line-height:140%;
    display: block;
    padding: 0.25em 0;
}


#outline .toc1 { counter-increment: toc1; counter-reset: toc2 toc3 toc4 toc5 toc6; }
#outline .toc2 { counter-increment: toc2; counter-reset: toc3 toc4 toc5 toc6; }
#outline .toc3 { counter-increment: toc3; counter-reset: toc4 toc5 toc6; }
#outline .toc4 { counter-increment: toc4; counter-reset: toc5 toc6; }
#outline .toc5 { counter-increment: toc5; counter-reset: toc6; }
#outline .toc6 { counter-increment: toc6; }

#outline .toc1::before, #outline .toc2::before, #outline .toc3::before,
#outline .toc4::before, #outline .toc5::before, #outline .toc6::before {
    color: var(--mute-fg);
}

#outline .toc1::before { content: counters(toc1, ".")" "; }
#outline .toc2::before { content: counters(toc1, ".")"."counters(toc2, ".")" "; }
#outline .toc3::before { content: counters(toc1, ".")"."counters(toc2, ".")"."counters(toc3, ".")" "; }
#outline .toc4::before { content: counters(toc1, ".")"."counters(toc2, ".")"."counters(toc3, ".")"."counters(toc4, ".")" "; }
#outline .toc5::before { content: counters(toc1, ".")"."counters(toc2, ".")"."counters(toc3, ".")"."counters(toc4, ".")"."counters(toc5, ".")" "; }
#outline .toc6::before { content: counters(toc1, ".")"."counters(toc2, ".")"."counters(toc3, ".")"."counters(toc4, ".")"."counters(toc5, ".")"."counters(toc6, ".")" "; }


/*─────────────────────────────────────────────────────────────────────────────┐
│                                  INFO                                        │
└─────────────────────────────────────────────────────────────────────────────*/

#info {
    border-top: 1px dashed #070;
    padding: 0.5em;
    color: var(--mute-fg);
}

#info tr {
    height: 1.5em;
}

#info th {
    text-align: right;
    padding-right:0.4em;
}

#info a {
    background: #1A4E8D;
    font-size:0.8em;
    padding: 0.1em 1em;
    border-radius: 0.5em;
    margin: 0 0.3em;
    display: inline-block;
}
#info a:hover {
    text-decoration: none;
    background:#1A698D;
}

#info table {
    width: 100%;
    font-size:0.9em;
}



/*─────────────────────────────────────────────────────────────────────────────┐
│                                  GLOBAL STYLES                               │
└─────────────────────────────────────────────────────────────────────────────*/

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

a:hover {
    color: var(--a-hover);
}

code {
    padding: 1em;
    background: #0005;
    white-space:pre;
    overflow:auto;
    margin: 1em 0;
    /* Hmmmm. Nicht optimal, geht aber */
    width: 0;
    min-width: calc(100% - 2em - 2px);
    border-radius: 2ex;
    border-style: inset;
    border-color: rgba(35,35,35,0.85);
    border-width: 0.25ex;
}

p {
    max-width: 50em;
    line-height:135%;
}

table {
    border-collapse:collapse;
}
td, th {
    padding:0.2em;
    border:1px dotted var(--mute-fg);
}
th {
    background:#444;
}