@font-face {
    font-family: 'FragmentMono';
    src: url(res/fonts/FragmentMono-Regular.ttf);
    } 

    @font-face {
    font-family: 'Mega';
    src: url(res/fonts/fluxmm-900.otf);
    } 

    @font-face {
    font-family: 'PicoReg';
    src: url(res/fonts/PicoA-Medium.ttf);
    } 
    
    @font-face {
        font-family: 'fluxc500';
        src: url(res/fonts/fluxmm-C500.otf);
        } 
        


        
        html {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;


            
          }

          ::-webkit-scrollbar {
              width: 0px;
              background: transparent; /* make scrollbar transparent */
          }
    

    .content a:after {
        content: " [Link]";
        color: white;
        letter-spacing: 2px;
        font-family: fluxc500;
        
    }



    html::after {
        content:"";
        position:fixed;
        top:-24px;
        left:-24px;
        right:-24px;
        bottom:-24px;
        border:30px solid  #d0bb95;
        border-radius: 40px;
        mix-blend-mode: difference;
        pointer-events:none;
      }
    
    
    time
    {
        content: attr(data-location) '\00a0\00a0\00a0\00a0';
        font-family: "FragmentMono";
        font-style: normal;
        font-weight: 100;
        font-size: 10px;
        text-align: justify;
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: 12px;
        margin:auto;
        max-width: 800px;
        display: block;
    }
    
    body 
    {
        padding-top: 20px;
        background-color: rgb(5, 5, 5);
        color: #d0bb95;
        z-index: 12;
        padding: 12px;
        
    }

        
    h1
    {
        font-family: "Mega";
        font-style: normal;
        list-style:none;
        margin:0 auto;
        font-size: 15ptpx;
        text-align: justify;
        line-height: 82%;
        display: block;
        max-width: 800px;
    }

    h3
    {
        font-family: "FragmentMono";
        font-style: normal;
        font-weight: 300;
        font-size: 9pt;
        text-align: justify;
        line-height: 12px;
        margin:auto;
        max-width: 800px;
    }

    h4
    {
        font-family: "Mega";
        font-style: normal;
        font-size: 22px;
        text-align: justify;
        line-height: 82%;
        margin:auto;
        max-width: 800px;
    }   



    p
    {
        font-family: "FragmentMono";
        flex-basis:100%;
        justify-content: center;
        font-size: 12px;
        text-align: left;
        line-height: 18px;
        font-weight: 100;
        margin:auto;
        max-width: 800px;
    }

    blockquote
    {
        font-family: "FragmentMono";
        flex-basis:100%;
        justify-content: center;

        font-size: 12px;
        text-align: left;
        line-height: 18px;
        font-weight: 100;
        margin:auto;
        max-width: 700px;
    }

    footer
    {
        font-family: "FragmentMono";
        font-style: normal;
        font-weight: 100;
        font-size: 10px;
        text-align: justify;
        padding-top: 4%;
        padding: 20px;
        padding-bottom: 50px;
        line-height: 12px;

        margin:auto;
        max-width: 800px;
    }

    div.sidebar
    {
        font-family: "Mega";
        text-decoration: none;
        letter-spacing: 1px;
        left: 20px;
        bottom: 30px;
        text-indent: 10px;
        direction:rtl;
        font-weight: 2200;
        color: #d0bb95;
        text-align: left;
        resize: vertical;
        font-size: 23px;
        user-select: none; 
        display: inline-flex;
        mix-blend-mode: difference;
        position: fixed;
        z-index: 7;

        paint-order: stroke fill;


        
    }

    div.version
    {
        text-decoration: none;
        resize: horizontal;
        resize: vertical;
        bottom: 20px; 
        display: inline-flex;
        position: fixed;
        mix-blend-mode: difference;
        white-space: nowrap; 
        left: 20px;
        margin-right: 59px;
        font-weight: 700;
        z-index: 7;
        -webkit-text-stroke: 5px rgb(0, 0, 0);
        paint-order: stroke fill;
    }

    div.UA
    {
        text-decoration: none;
        resize: horizontal;
        resize: vertical;
        top: 20px; 
        display: inline-flex;
        position: fixed;
        mix-blend-mode: difference;
        left: 20px;
        margin-right: 20px;
        font-weight: 700;
        z-index: 7;
        -webkit-text-stroke: 5px rgb(0, 0, 0);
        paint-order: stroke fill;
    }




			
    #percentage-value 
    {
        font-family: "FluxC500";
        text-decoration: none;
        resize: horizontal;
        font-size: 9pt;
        resize: vertical;
        top: 20px; 
        display: grid;
        position: fixed;
        mix-blend-mode: difference;
        RIGHT: 20px;
    margin-left: 40px;
              text-align: center;
              z-index: 1;
          }
  
          
    div.tergiversor
    {
        bottom: 20px; 
        position: fixed;
        mix-blend-mode: difference;
        z-index: 7;
        right: 20px;

    }


    div.option
    {
        top: 45px; 
        color: rgb(0, 107, 200);
        position: fixed;
        font-family: ;
        mix-blend-mode: difference;
        z-index: 7;
        left: 20px;
    }


    button
    {
        background-color: transparent;
        padding: 0;
        border: none;
    }



    svg:nth-child(1) line {
        stroke: black;
      }

    svg
    {
        max-width: 10px;
        color: antiquewhite;
    }

    svg:hover
    {
        max-width: 10px;
        color: black;
    }


    a 
    { 
        color: #d0bb95;
        text-decoration: none; 
        -webkit-text-stroke: 7px rgb(0, 0, 0);
        paint-order: stroke fill;

    }

    a:hover 
    {
        filter:invert(100) ;
        color: white;
    }



    
    
    @media (min-width: 1142px) {

                .sidebar 
                {
                  flex-direction: inherit;
                  display: block;
                  bottom: 50px;
                  font-size: 18px;
                  justify-content: space-between;
                }

    
                
    }





        @media (max-width: 1000px) {

            .sidebar 
            {
                flex-direction: column-reverse;
                display: flow;
                bottom: 60px;
                line-height: 1;
                font-size: 18px;
                justify-content: space-between;
            }




            @media (max-width: 680px) {

                    .sidebar 
                    {
                            flex-direction: column-reverse;
                            display: flow;
                            transform: scale(0.7);
                            transform-origin: bottom left;
                            padding-bottom: 10x;
                            line-height: 24pt;
                            font-size: 10px;
                            justify-content: space-between;
                    }


                    .tergiversor
                    {
                        transform: scale(0.7);
                    }

                    .version
                    {
                        transform: scale(0.9);
                        transform-origin: bottom left;
                    }

                    .UA
                    {
                        transform: scale(0.9);
                        transform-origin: top left;
                        padding-left: 0;
                    }
        
}