body {
            background-image: url(/img/bgmanuKopie.jpg);
            background-size: 100vw;
            background-attachment: fixed;
            font-size: 1.1em;
            
                                  }
                                  
                                  
                              .commentsection {
                                color: grey;width: 90%; margin: 4vw auto 0 auto;
                          mark {background-color: transparent; color: inherit}
                          h2 {border: none; display: inline-block; float:none; width: 100%}
                                 .c-input {width: 100%}
                                     #c_form  { width: 90%;}
                                     .c-comment {
                                       border-left: solid 1px; padding: 0 0 0 5%;}
                                     .c-name {
                                       margin: 0 0 1vw 0 ; display: inline-flex;
                                     }
                                     
                                     .c-timestamp {
                                       padding:  0 0 0 1vw; font-family: monospace; display: inline-flex; }
                                       .c-comment {
                                         margin: 0;}
                                         .c-reply {  margin: 1vw 0 0 0;}
                                
                                #c_form {
                                  margin: 0 0 3vw 0;
                          }}
                          
                                                        
                              details summary {
                                list-style: none;
                              }
                              details summary::-webkit-details-marker {
                                display: none;
                              }
                              details summary::marker {
                                content: "";
                              }

                          details summary::after {
                            width: 30px;
                            height: 30px;
                            margin: -0.25vw 0.5vw 0 0vw;
                            content: "";
                            background-image: url('/img/handright.png');
                            background-size: contain;
                            background-repeat: no-repeat;
                            background-position: center;
                            float: left;
                            
                          }
                          
                          details[open] summary::after {
                            content: "";
                            background-image: url('/img/handright.png');
                            background-size: contain;
                            background-repeat: no-repeat;
                            background-position: center;transform: rotate(90deg)}
                             
        @font-face {
    font-family: gartdergesundheit;
    src: url("/fonts/gartdergesundheit.otf");
}
        .post {
            max-width: 600px;
            width: 80vw;
            margin: 0 0 8vw 10vw;
            text-align: left;
            padding: 3vw;
            font-size: 1em;
            background-color: white;

        }

        .sidenav {
            height: 100%;
            width: 200px;
            position: fixed;
            margin-left: 4px;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: white;
            overflow-x: hidden;
            overflow-y: scroll;
            padding-top: 0px;
            padding: 0 10px;
        }


        @media screen and (max-width: 850px) {
            .sidenav {
                width: 110px;
            }

            .post {
                max-width: 400px;
                margin: 3.5vw 0 8vw 20vw;
                font-size: 0.9em;

            }
        }
        
        
        @media screen and (min-width: 850px) {
            .sidenav {
                width: 160px;
            }

            .post {
                max-width: 500px;
                margin: 3.5vw 0 8vw 25vw;
                font-size: 1em;

            }
        }        
        
        @media screen and (min-width: 1200px) {
            .sidenav {
            width: 200px;
            }

            .post {
            max-width: 630px;
                margin: 3.5vw 0 8vw 30vw;
                font-size: 1em;

            }
        }
/*
        @media screen and (min-width: 1000px) {
            .sidenav {
                width: 100px;
            }

            .post {
                max-width: 400px;
                margin: 0 0 8vw 29vw;

            }
        }
*/
        @import url('https://fonts.googleapis.com/css2?family=Geist:ital@0;1&display=swap');



        .g eist-<uniquifier> {
            font-family: "Geist", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
        }

        h1 {
            font-family: gartdergesundheit;
            font-weight: 400;
            font-size: 3em;
            color:;
            margin: 0;
        }

        h3 {
            font-family: gartdergesundheit;
            font-weight: 400;
            font-size: 3em;
            line-height: 0.6em;
        }


        .log {
            margin: 20px 0;
            padding: 1vw 40px 1vw 1vw;
            border: solid b lack 1px;
            background-color: white;
            display: inline-flex;
            color: #242424;

        }

        .log img {}

        .image {
            display: block;
            width: 100%;
            padd ing: 10px;

            margin: 25px 0 0 0;
            filter: drop-sh adow(1px 1px 200px rgba(0, 0, 0, 0.45));
            text-align: center;
            backgr ound-image: url(/img/border_top.png), url(/img/border_left.png), url(/img/border_bottom.png), url(/img/border_right.png);
            background-position: top, left, bottom, right;
            background-repeat: repeat-x, no-repeat, no-repeat, no-repeat;
            background-size: 100% auto, auto 100%, 100% auto, auto 100%;
        }

        .image img {
            width: 100%;
        }

        h2 {
            float: left;
            font-weight: 400;
            text-align: left;
            font-size: 1em;
            padding: 20px;
            width: 50px;
            border: solid black 1px;
        }

        .text {
            float: right;
            width: 100%;
            border: soli d 1px;

            padding: 0 0 1vw 1vw;

        }
        
        .tab p {
            font-size: 0.8em; letter-spacing: 0.1em;
        }        .tab h3 {
            font-size: 3em; letter-spacing: 0.1em;
            word-break: break-all;
        }
        
        #active {
            font-weight: 800;
        }