@layer defaults.base            { 


:root {
   --text-content-margin-left: 0.8ch;
   --text-content-margin-right: 0.8ch;
}





:root {
    --max-width:    calc((var(--text-content-max-width)) * (75 / 75) * 1.3);

/*    --menu-head-hight: 48px;*/
    --menu-head-hight: calc(var(--main-font-size) * 3.25);
}


/*
  ========================================
  Utilities
  ========================================
*/


.d-hidden {
    display:        none        !important;
}


/*
  ========================================
  Defaults
  ========================================
*/


html {
/*    background-color: hsla(var(--decorative-theme-color), var(--decorative-background-body-transparency));*/
    background-color: hsla(0, 0%, 0%, 1);


    background-image: -webkit-image-set(
        url(/assets/decorative/body_background/paul-volkmer-qVotvbsuM_c-unsplash_small.jpg) 1x,
        url(/assets/decorative/body_background/paul-volkmer-qVotvbsuM_c-unsplash_medium.jpg) 3x,
        url(/assets/decorative/body_background/paul-volkmer-qVotvbsuM_c-unsplash_large.jpg) 3.75x
    );

/*    background-image: url(/assets/decorative/services/spanner-3013129_3840-original_85-lightness.jpg);*/
/*    background-image: url(/assets/decorative/unsplash-Leon_Overweel_+50-lightness.jpg);*/

/*    background-image: url("/assets/decorative/body_background/moroccan-flower.png");*/
/*    background-image: url("/assets/decorative/body_background/unsplash-Leon Overweel.jpg");*/
/*    background-image: url("/assets/decorative/body_background/i981.jpg");*/
/*    background-image: url("/assets/decorative/body_background/food.webp");*/
/*    background-image: url("/assets/decorative/body_background/unsplash-Jacalyn Beales.jpg");*/
/*    background-image: url("/assets/decorative/body_background/unsplash-Diana Parkhouse.jpg");*/
/*    background-image: url("/assets/decorative/body_background/unsplash-Thomas Peham.jpg");*/
/*    background-image: url("/assets/decorative/body_background/unsplash-Christian Joudrey.jpg");*/

    background-repeat: no-repeat;
    background-size: cover;
/*    background-repeat: repeat;*/
/*    background-size: 20%;*/

    background-position: 0 0;
    background-attachment: fixed;
    background-clip: border-box;
    background-origin: border-box;
}


html {
    scrollbar-color: hsl(0, 0%, 97%) hsl(0, 0%, 6%);
    scrollbar-width: var(--scrollbar-width-formoz);
}
html::-webkit-scrollbar-thumb {
    background-color: hsl(0, 0%, 97%);
}
html::-webkit-scrollbar-thumb:hover {
    background-color: hsl(0, 0%, 87%);
}
html::-webkit-scrollbar {
    background-color: hsl(0, 0%, 6%);
    width: var(--scrollbar-width);
    height: 0;

}


.container {
/*    backdrop-filter: grayscale(100%);*/

/*    filter: chrome(100%);*/
/*    backdrop-filter: blur(10px);*/

/*    backdrop-filter: blur(0.2em);*/

} }




@layer components.base          { 





 }

@layer side-nav.base            { 





nav.side-nav {
    height: 100%;
    width: 68px;
}

 }
@layer primary-menu.base        { 




menu.primary-menu {
    top:            var(--menu-margin-top);
}

nav.primary-nav .zippy .zippy-overflow {
    top:            calc(var(--menu-margin-top) * -1) !important;
}

nav.primary-nav .zippy .zippy-content {
    padding-top:    calc(var(--menu-margin-top) + var(--menu-head-hight)) !important;
} }
@layer burger.base              { 





.burger {
    left:           0;

/*    padding-bottom: 100px;*/
}
.burger > button {
    font-size:      2.5rem;
    font-weight:    100;
    font-family:    'IBM Plex Sans', sans-serif;
    color:          hsl(0, 0%, 80%);
    color:          hsl(0, 0%, 50%);
}
.burger > button::before {
    display:        block;
    content:        "Esc";
}
 }
@layer roll-paper.base          { 




body {
    position:       relative;
    z-index:        0;

    max-width:      var(--max-width);
    margin:         0 auto;

    font:           var(--article-font);
    letter-spacing: var(--article-letter-spacing);
}


.container {
    background-color: hsl(var(--decorative-background-container), var(--decorative-background-container-transparency));
}


body::before,
body::after {
    display:        block;
    content:        '';

    z-index:        15;
    position:       fixed;

    width:          100%;
    max-width:      var(--max-width);
    margin:         0 auto;

    height:         25px;
}
body::before {
    top: 0;
    box-shadow: inset 0 31px 14px -30px hsl(0, 100%, 0%);
}
body::after {
    bottom: 0;
    box-shadow: inset 0 -31px 14px -30px hsl(0, 100%, 0%);
}




/*.upper-roll-top,
.lower-roll-top,

.upper-roll-bottom,
.lower-roll-bottom {
    display: block;
    content: '';

    height: 25px;

    border-radius: 3px;
    grid-area: paper;
}
.upper-roll-top,
.lower-roll-top {
    align-self: start;
}
.upper-roll-bottom,
.lower-roll-bottom {
    align-self: end;
}
.upper-roll-top,
.upper-roll-bottom {
    z-index: 1;
}
.lower-roll-top,
.lower-roll-bottom {
    z-index: -1;
    background-color: hsl(var(--decorative-background-container));
}
.upper-roll-top {
    box-shadow: inset 0 31px 14px -30px hsl(0, 0%, 0%);
}
.upper-roll-bottom {
    box-shadow: inset 0 -31px 14px -30px hsl(0, 0%, 0%);
}
.lower-roll-top {
    box-shadow: inset 0 -31px 7px -30px hsl(0, 0%, 0%);
}
.lower-roll-bottom {
    box-shadow: inset 0 31px 7px -30px hsl(0, 0%, 0%);
}*/ }
@layer aheader.base             { 





 }
@layer article.base             { 









.scrollbar-on-black,
.article pre {
  overflow-y: auto;

  scrollbar-color: hsl(0, 0%, 30%) transparent;
  scrollbar-width: thin;
}

.scrollbar-on-black,
.article pre::-webkit-scrollbar {
  width: 10px;
  height: 10px;

  background-color: transparent;
}
.scrollbar-on-black,
.article pre::-webkit-scrollbar-thumb {
  background-color: hsl(0, 0%, 30%);
}
.scrollbar-on-black,
.article pre::-webkit-scrollbar-thumb:hover {
  background-color: hsl(0, 0%, 40%);
}
 }
@layer primary-footer.base      { 





 }
@layer zippy.base               { 



.zippy .zippy-content::before {
    left:           1rem;
}





 }
@layer category-identifier.base { 





 }
@layer pagination.base          { 





 }
@layer bg.base                  { 





 }









@layer in-dev-cover.base        { 





 }