/*  COLORs and PATTERNs *******************************************************\
TODO
    sort and get together
    -> bugs in .blogged: try resizing the browser and look
                         border isn't opacity=1
    search/found: more space for input
    review tooltip layout
    leaf: doesn't fit to smaller screen
** ************************************************************************** */
/* ** DEFAULT HTML ELEMENTS ************************************************* */
html{
    scroll-behavior:smooth;
}
body{
    font-family:serif;
    font-size:110%;
}
a{
    text-decoration:none;
    height:24px;
    width:auto;
    border:none;
    background:none;
    color:var(--black);
    background-color:var(--grey-lilght);
}
a:hover{color:var(--white);background:var(--grey);}
.marked{color:var(--white);}
.nulllevel{display:none!important;}
.clickable{cursor:grab;}
.clickable:hover{color:var(--grey-middle);}
/* ** SITE structure ******************************************************** */
#struct{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}
#top{
    position:fixed;
    left:0px;
    width:100%;
    border-bottom:1px solid var(--none);
    padding:2px;
    background:var(--background);
    top:0px;
    height:32px;
    display:flex;
    flex-direction:column;
    * .node.tree{
        display:inline-block;
        color:var(--base-light);
        background-color:var(--base-full);
        font-size:100%;
        font-weight:bold;
        font-family:Arial,Verdana,sans-serif;
        padding:2px;
        margin-top:3px;
        margin-left:12px;
        margin-right:12px;
    }
    * #root{
        display:none;
    }
}
#leaf{
    position:fixed;
    left:0px;
    top:48px;
    height:fit-content;
    max-height:calc(100% - 124px);
    overflow:auto;
    scrollbar-width:none;
    padding:12px;
    border-top-color:var(--base-full);
    border-left-color:var(--base-full);
    opacity:1;
    /*box-shadow:4px 8px 8px var(--white)!important;*/
    .links{
        margin-right:8px;
        float:right;
        overflow:auto;
        .link{
            display:inline-block;
            font-size:smaller;
            font-family:Arial,Verdana,sans-serif;
            color:var(--base-light);
            background:var(--base-full);
            padding-left:4px;
            padding-right:4px;
            margin-left:4px;
            margin-right:4px;
        }
        .link:hover{
            color:var(--base-full);
            background:var(--base-light);
        }
    }
    .gb_title{
        font-family:Arial,Verdana,sans-serif;
        font-size:larger;
        font-weight:bold;
        margin-top:4px;
        margin-bottom:8px;
    }
    .gb_mini_content{
        display:inline-block;
        font-style:italic;
        display:inline-block;
    }
    .gb_ausgabe:has(.gb_image){
        width:fit-content;
        margin:8px;
        display:inline-block;
        float:right;
    }
    .gb_content{
        text-align:justify;
    }
}
#leaf{
    .nodes.tree{
        .node{
            font-size:large;
            margin-left:2%;
            margin-right:2%;
            /*margin-top:2%;*/
            max-width:260px;
            /*min-width:80px;*/
            padding-left:4px;
            padding-right:4px;
            margin-bottom:12px;
            display:inline flow-root;
            overflow:hidden;
        }
        .node:nth-child(3n+0){
            margin-left:4px;
        }
        .node:nth-child(2n+0){
            margin-left:4px;
        }
    }
}
#leaf:has(.preleaf){
    width:90%;
    margin-left:calc(3%);
    /*margin-left:calc(50% - 400px);*/
    margin-top:12px;
    border:0.1px solid var(--none);
    box-shadow:4px 12px 8px var(--white);
    border-top-color:var(--base-light);
    border-left-color:var(--base-light);
    background-color:var(--white);
    border-radius:12px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    .preleaf:has(:not(.comment)){
        background:var(--bgp);
        min-height:24px;
    }
    .preleaf:has(.comment){
        background:var(--bgp);
    }
    img{
        /*max-width:25%;*/
        height:auto;
    }
}
#leafpath{
    position:absolute;
    display:inline-block;
    margin-left:112px;
    font-size:smaller;
    /*background:var(--base-light);*/
    *{
        font-family:Aria,Verdana,sans-serif;
        margin-right:12px;
        color:var(--base-full);
        display:inline-block;
    }
    *:hover{
        color:var(--base-light);
        background:var(--base-full);
    }
}
#bottom{
    position:fixed;
    left:0px;
    width:100%;
    border-bottom:1px solid var(--base-full);
    padding-top:2px;
    background-color:var(--white-middle);
    top:calc(100% - 32px);
    height:32px;
    *{
        display:inline-block;
    }
    #path{
        width:fit-content;
        *{
            font-family:Arial,Verdana,sans-serif;
            padding-left:4px;
            padding-right:8px;
        }
    }
    #tools{
        width:fit-content;
        float:right;
        *{
            display:inline-block;
            font-size:100%;
            border:none;
            margin:0px;
            padding-left:4px;
            padding-right:4px;
        }
    }
}
#data{}
#bodybackground{
    img{
        /*display:none;*/
        position:fixed;
        z-index:-1;
        top:0px;
        left:0px;
        height:fit-content;
        width:100%;
        height:100%;
        object-fit:fill;
        overflow:hidden;
        animation:intro;
        animation-delay:4s;
        opacity:1;
    }
}
/* ** SPECIALs ************************************************************** */
.uncited{
    font-family:serif;
}
.cited{
    font-family:sans-serif;
    margin-left:12px;
}
.cited_inner{
    font-family:sans-serif;
    margin-left:24px;
}
.zitat{
    font-style:italic;
}
/* ** DON'T KNOW ************************************************************ */
.icon img{
    display:block;
    width:auto!important;
    height:24px!important;
}
.grid{
    display:grid;
}
/* ** TREESCROLL ************************************************************ */
#treescroll{
    display:none;
}
#leaf{
    #treescroll{
        display:block;
        position:fixed;
        height:22px;
        /*width:80px;*/
        right:0;
        margin-right:12px;
        margin-top:2px;
        display:grid;
        #ls_left:hover{
            background:var(--base-light);
        }
        #ls_right:hover{
            background:var(--base-light);
        }
    }
}
/* ** LEAFSCROLL ************************************************************ */
#leafscroll{
    display:none;
}
#leaf{
    #leafscroll{
        display:block;
        position:absolute;
        height:22px;
        width:80px;
        margin-left:32px;
        margin-top:2px;
        #ls_left{
            margin-right:4px;
        }
        #ls_left:hover{
            margin-top:-4px;
            margin-right:0px;
            max-width:none;
            background:var(--base-full);
        }
        #ls_right:hover{
            margin-top:-4px;
            max-width:none;
            background:var(--base-full);
        }
    }
}
/* ** BLOGGED *************************************************************** */
.preblogged{
    background:none!important;
    align-items:center;
}
.blogged,#leaf * .tree.node{
    font-size:80%;
    .clickable{
        display:inline;
        padding-right:8px;
    }
    * .blogstart{
        display:block;
        font-weight:bold;
    }
    padding-top:12px!important;
    padding-bottom:8px!important;
    padding-left:2px!important;
    padding-right:2px!important;
    font-family:serif!important;
    display:inline-flex;
    max-width:30%;
    background:var(--bg);
    border:1px solid var(--bg-line)!important;
    border-radius:12px;
    img{
        /*float:right;*/
        margin:4px;
        max-width:80px;
        max-height:80px;
    }
}
/* ** SEARCH und FOUND ****************************************************** */
#search{
    max-width:224px;
}
#searcher{
    max-width:142px;
}
#found:has(.clickable){
    position:fixed;
    top:42px;
    left:12px;
    max-width:calc(100% - 24px);
    max-height:30%;
    overflow:auto;
    padding-top:12px!important;
    padding-bottom:8px!important;
    padding-left:2px!important;
    padding-right:2px!important;
    font-family:serif!important;
    display:inline-flex;
    max-width:calc(100% - 24px);
    background:var(--bg);
    border:1px solid var(--bg-line)!important;
    border-radius:12px;
    overflow-x:auto;
    overflow-y:hidden;
    *{
        display:block;
        overflow:auto;
    }
}
.foundentry label{
    font-weight:bold;
}
/* ** HISTORY *************************************************************** */
#history{
    max-width:96px;
}
/* ** PICSHOW *************************************************************** */
#picshow{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1;
    color:var(--base-light);
    background:var(--base-full);
}
#px_menu{
/*    display:grid;
    grid-template-columns:24px 24px 24px calc(100% - 72px);*/
    height:32px;
    width:100%;
}
#px_desk{
    display:flex;
    justify-content:center;
    align-content:center;
    width:100%;
    height:calc(100% - 32px);
}
#px_close,#px_left,#px_right{
    position:fixed;
    color:var(--base-full);
    border:none;
    height:32px;
    width:32px;
    text-align:center;
    opacity:0.4;
}
#px_close{
    top:0px;
    left:0px;
}
#px_left{
    height:64px;
    top:calc(50% - 32px);
    left:calc(100% - 44px);
}
#px_right{
    height:64px;
    top:calc(50% - 32px);
    left:12px;
}
#px_name{
    background:none;
    border:none;
    font-family:Arial,sans-serif;
    font-size:90%;
    text-align:center;
    height:32px;
    overflow:hidden;
}
#px_close:hover,#px_left:hover,#px_right:hover,#px_name:hover{
    color:red!important;
    background-color:var(--white-middle)!important;
    border:1px solid black;
    border-radius:12px;
    opacity:1;
}
.px_container{}
#px_container>*{
    /*width:calc(100% - 192px);*/
}
#px_desk img{
    padding:1px;
    max-width:calc(100% - 8px);
    max-height:calc(100% - 32px);
    background-color:var(--grey-lighter);
    border:2px outset black;
    border-radius:8px;
}
/* ** TOOLTIP *************************************************************** */
.tooltip{
    z-index:9999;
    position:fixed;
      display: inline-block;
    font-family:Arial, sans-serif;
    margin-top:12px;
    margin-left:12px;
    min-width:58px;
    min-height:24px;
    padding:6px;
    color:var(--base-light);
    background-color:var(--base-full);
    animation-name:tooltip_hint_delay;
    animation-duration:1.5s;
    border-radius:8px;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
/* ** CLOUD ***************************************************************** */
#cloud{
    position:fixed;
    top:2px;
    right:2px;
    width:240px;
    height:32px;
    overflow:hidden;
    opacity:0;
}
#cloud:hover{
    border:none;
    width:34%;
    height:auto;
    border-radius:12px;
    text-align:center;
    overflow:auto;
    background:var(--bg);
    animation:intro 2s;
    opacity:1;
    background:var(--white);
}
.cloudy{
    display:inline-block;
    margin-right:12px;
}
.cloudy:hover{
    animation:intro 2s;
}
#cloud_title{
    opacity:1!important;
    display:block!important;
    text-align:center;
    font-weight:bold;
    font-size:large;
    color: var(--bg-line);
    text-shadow:2px 2px 8px var(--base-full);
    background:var(--bgc);
}
/* ** FLAG ****************************************************************** */
#flag{
    position:fixed;
    z-index:-1;
    top:2px;
    right:2px;
    display:block;
    width:100%;
    height:34px;
}
#flag img{
    object-fit:cover;
    max-height:36px;
    width:auto;
    float:right;
}
/* ** NAVICON *************************************************************** */
#navicon{
    position:fixed;
    width:fit-content;
    bottom:64px;
    right:24px;
    img{
        max-width:100%;
    }
}
/* ** ANIMATIONS ************************************************************ */
@keyframes background_colors{
    0%{
        background-color:var(--base-light);
        opacity:1;
    }
    33%{
        background-color:var(--base-middle);
        opacity:0.8;
    }
    66%{
        background-color:var(--base-full);
        opacity:0.4;
    }
    100%{
        background-color:var(--base-light);
        opacity:1;
    }
}
@keyframes hint_delay{
    0%   {
        color:var(--none);
        background-color:var(--none);
    }
    50%  {
        color:var(--none);
        background-color:var(--none);
    }
    100% {
        color:var(--white);
        background-color:var(--base-full);
    }
}
@keyframes tooltip_hint_delay{
    0%   {
        opacity:0;
/*        color:var(--none);
        background-color:var(--none);*/
    }
    100% {
        opacity:1;
/*        color:var(--white);
        background-color:var(--base-middle);*/
    }
}
@keyframes intro{
    0%   {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* ** MEDIA ***************************************************************** */
/*  change layout on portrait orientation                              SWITCH */
@media (max-width:860px){
    #leaf{
        width:90%;
        margin:0px;
        border:none;
    }
    #tools,
    #cloud,
    #flag,
    .node .px_button{
        display:none!important;
    }
}
/*  change text size on higher pixel-ratio                             SWITCH */
@media  
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 192dpi) {
    #midleft,
    #midright{
        font-size:150%;
    }
}