@layer defaults.desktop{.d-hidden {
  display:        none        !important;
}










 }@layer components.desktop{}@layer side-nav.desktop{nav.side-nav {
    height: 100%;
    width: 68px;
}

 }@layer primary-nav.desktop{nav.primary-nav {
  --menu-head-hight: calc(var(--main-font-size) * 3.25);

}



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


}
.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 layout.desktop{:root {
  --container-width: calc((var(--text-max-width)) * var(--container-text--ratio));
}


.width-container {
  max-width:        var(--container-width);
}


@media (calc(1022px + 11px) < width) {
  html {
    overflow-y:     scroll;

  }
} }@layer aheader.desktop{header.aheader {
  padding-left: 3em;
  padding-right: 3em;
} }@layer article.desktop{@media (calc(1022px + 11px) < width) {
    .content > :is(
      p:has( > :is(
        img,
      ))
    ) {

        left:       calc((var(--bigger) + var(--container--text--left-difference)) * -1);
        width:      calc((var(--bigger) * 2 + var(--container-width)));

      }

    .content > :is(
      p:has( > :is(
        img,
      ))
    )::before,
    .content > :is(
      p:has( > :is(
        img,
      ))
    )::after {
          display:  block;
          content:  '';

          z-index:  15;
          position: absolute;
          top:      0;

          width:    25px;
          height:   100%;
        }
    .content > :is(
      p:has( > :is(
        img,
      ))
    )::before {
          left:     0;
          box-shadow: inset 31px 0 5px -30px hsl(0, 100%, 0%);
    }
    .content > :is(
      p:has( > :is(
        img,
      ))
    )::after {
          right:    0;
          box-shadow: inset -31px 0 5px -30px hsl(0, 100%, 0%);
    }
  }




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

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

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

  background-color: transparent;
}
.scrollbar-on-black,
.content pre::-webkit-scrollbar-thumb {
  background-color: hsl(0, 0%, 30%);
}
.scrollbar-on-black,
.content pre::-webkit-scrollbar-thumb:hover {
  background-color: hsl(0, 0%, 40%);
}
 }@layer primary-footer.desktop{}@layer zippy.desktop{}@layer category-identifier.desktop{}@layer pagination.desktop{}@layer bg.desktop{}@layer in-dev-cover.desktop{}@layer layout-decor.desktop{@media (calc(1022px + 11px) < width) {
  html {



    scrollbar-color:  hsl(0, 0%, 20%) transparent;
    background-color: hsl(232, 62%, 7%);
  
  
  








      background-image: url("/assets/decorative/body_background/unsplash-Leon Overweel.jpg");
  
  
  
  
  
  




    background-repeat: no-repeat;
    background-size: cover;
  
  

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

}


@media (calc(1022px + 11px) < width) {
  .container::before,
  .container::after {
    display:        block;
    content:        '';

    z-index:        15;
    position:       fixed;

        width:      100%;
    max-width:      calc(var(--container-width) + (var(--bigger) * 2));
    margin-left:    calc(var(--bigger) * -1);

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







.container {







} }