@font-face {
  font-family:    'Montserrat';
  font-display:   fallback;
  src:
          url("/assets/fonts/Montserrat/static/Montserrat-Light.ttf") format("truetype");
  font-weight:    300;
  font-style:     normal;
}
@font-face {
  font-family:    'Montserrat';
  font-display:   fallback;
  src:
          url("/assets/fonts/Montserrat/static/Montserrat-Regular.ttf") format("truetype");
  font-weight:    400;
  font-style:     normal;
}
@font-face {
  font-family:    'Montserrat';
  font-display:   fallback;
  src:
          url("/assets/fonts/Montserrat/static/Montserrat-Medium.ttf") format("truetype");
  font-weight:    500;
  font-style:     normal;
}
@font-face {
  font-family:    'Montserrat';
  font-display:   fallback;
  src:
          url("/assets/fonts/Montserrat/static/Montserrat-Bold.ttf") format("truetype");
  font-weight:    700;
  font-style:     normal;
}

@font-face {
  font-family:    'Montserrat';
  font-display:   fallback;
  src:
          url("/assets/fonts/Montserrat/static/Montserrat-LightItalic.ttf") format("truetype");
  font-weight:    300;
  font-style:     italic;
}
@font-face {
  font-family:    'Montserrat';
  font-display:   fallback;
  src:
          url("/assets/fonts/Montserrat/static/Montserrat-RegularItalic.ttf") format("truetype");
  font-weight:    400;
  font-style:     italic;
}
@font-face {
  font-family:    'Montserrat';
  font-display:   fallback;
  src:
          url("/assets/fonts/Montserrat/static/Montserrat-MediumItalic.ttf") format("truetype");
  font-weight:    500;
  font-style:     italic;
}
@font-face {
  font-family:    'Montserrat';
  font-display:   fallback;
  src:
          url("/assets/fonts/Montserrat/static/Montserrat-BoldItalic.ttf") format("truetype");
  font-weight:    700;
  font-style:     italic;
}
@font-face {
  font-family:    'Comfortaa';
  font-display:   fallback;
  src:
          url("/assets/fonts/Comfortaa/static/Comfortaa-Light.ttf") format("truetype");
  font-weight:    300;
  font-style:     normal;
}
@font-face {
  font-family:    'Comfortaa';
  font-display:   fallback;
  src:
          url("/assets/fonts/Comfortaa/static/Comfortaa-Regular.ttf") format("truetype");
  font-weight:    400;
  font-style:     normal;
}
@font-face {
  font-family:    'Comfortaa';
  font-display:   fallback;
  src:
          url("/assets/fonts/Comfortaa/static/Comfortaa-Medium.ttf") format("truetype");
  font-weight:    500;
  font-style:     normal;
}
@font-face {
  font-family:    'Comfortaa';
  font-display:   fallback;
  src:
          url("/assets/fonts/Comfortaa/static/Comfortaa-SemiBold.ttf") format("truetype");
  font-weight:    600;
  font-style:     normal;
}
@font-face {
  font-family:    'Comfortaa';
  font-display:   fallback;
  src:
          url("/assets/fonts/Comfortaa/static/Comfortaa-Bold.ttf") format("truetype");
  font-weight:    700;
  font-style:     normal;
}

@font-face {
  font-family:    'Verdana Pro';
  font-display:   fallback;
  src:
          url("/assets/fonts/Verdana Pro/VerdanaPro-Light.ttf") format("truetype");
  font-weight:    300;
  font-style:     normal;
}
@font-face {
  font-family:    'Verdana Pro';
  font-display:   fallback;
  src:
          url("/assets/fonts/Verdana Pro/VerdanaPro-Regular.ttf") format("truetype");
  font-weight:    400;
  font-style:     normal;
}
@font-face {
  font-family:    'Verdana Pro';
  font-display:   fallback;
  src:
          url("/assets/fonts/Verdana Pro/VerdanaPro-SemiBold.ttf") format("truetype");
  font-weight:    600;
  font-style:     normal;
}
@font-face {
  font-family:    'Verdana Pro';
  font-display:   fallback;
  src:
          url("/assets/fonts/Verdana Pro/VerdanaPro-Bold.ttf") format("truetype");
  font-weight:    700;
  font-style:     normal;
}

@font-face {
  font-family:    'Verdana Pro';
  font-display:   fallback;
  src:
          url("/assets/fonts/Verdana Pro/VerdanaPro-LightItalic.ttf") format("truetype");
  font-weight:    300;
  font-style:     italic;
}
@font-face {
  font-family:    'Verdana Pro';
  font-display:   fallback;
  src:
          url("/assets/fonts/Verdana Pro/VerdanaPro-RegularItalic.ttf") format("truetype");
  font-weight:    400;
  font-style:     italic;
}
@font-face {
  font-family:    'Verdana Pro';
  font-display:   fallback;
  src:
          url("/assets/fonts/Verdana Pro/VerdanaPro-SemiBoldItalic.ttf") format("truetype");
  font-weight:    700;
  font-style:     italic;
}
@font-face {
  font-family:    'Verdana Pro';
  font-display:   fallback;
  src:
          url("/assets/fonts/Verdana Pro/VerdanaPro-BoldItalic.ttf") format("truetype");
  font-weight:    700;
  font-style:     italic;
}
@font-face {
    font-family:    'Verdana Pro Cond';
    font-display:   fallback;
    src:
                    url("/assets/fonts/Verdana Pro/VerdanaPro-CondLight.ttf") format("truetype");
    font-weight:    300;
    font-style:     normal;
}
@font-face {
    font-family:    'Verdana Pro Cond';
    font-display:   fallback;
    src:
                    url("/assets/fonts/Verdana Pro/VerdanaPro-CondRegular.ttf") format("truetype");
    font-weight:    400;
    font-style:     normal;
}
@font-face {
    font-family:    'Verdana Pro Cond';
    font-display:   fallback;
    src:
                    url("/assets/fonts/Verdana Pro/VerdanaPro-CondBold.ttf") format("truetype");
    font-weight:    700;
    font-style:     normal;
}

@font-face {
    font-family:    'Verdana Pro Cond';
    font-display:   fallback;
    src:
                    url("/assets/fonts/Verdana Pro/VerdanaPro-CondLightItalic.ttf") format("truetype");
    font-weight:    300;
    font-style:     italic;
}
@font-face {
    font-family:    'Verdana Pro Cond';
    font-display:   fallback;
    src:
                    url("/assets/fonts/Verdana Pro/VerdanaPro-CondRegularItalic.ttf") format("truetype");
    font-weight:    400;
    font-style:     italic;
}
@font-face {
    font-family:    'Verdana Pro Cond';
    font-display:   fallback;
    src:
                    url("/assets/fonts/Verdana Pro/VerdanaPro-CondBoldItalic.ttf") format("truetype");
    font-weight:    700;
    font-style:     italic;
}
@font-face {
    font-family:    'IBM Plex Sans';
    font-display:   fallback;
    src:
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Thin.ttf") format("truetype");
    font-weight:    100;
}
/*@font-face {
    font-family:    'IBM Plex Sans';
    font-display:   fallback;
    src:
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-ExtraLight.ttf") format("truetype");
    font-weight:    200;
}*/
/*@font-face {
    font-family:    'IBM Plex Sans';
    font-display:   fallback;
    src:
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.ttf") format("truetype");
    font-weight:    300;
}*/
@font-face {
    font-family:    'IBM Plex Sans';
    font-display:   fallback;
    src:
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf") format("truetype");
    font-weight:    400;
}
@font-face {
    font-family:    'IBM Plex Sans';
    font-display:   fallback;
    src:
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Bold.ttf") format("truetype");
    font-weight:    700;
}
/*@font-face {
    font-family:    'IBM Plex Sans';
    font-display:   fallback;
    src:
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-ExtraLight.ttf") format("truetype"),
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.ttf") format("truetype"),
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf") format("truetype"),
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Medium.ttf") format("truetype"),
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.ttf") format("truetype"),
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Bold.ttf") format("truetype"),
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-ThinItalic.ttf") format("truetype"),
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-ExtraLightItalic.ttf") format("truetype"),
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.ttf") format("truetype"),
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-RegularItalic.ttf") format("truetype"),
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-MediumItalic.ttf") format("truetype"),
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.ttf") format("truetype"),
                    url("/assets/fonts/IBM_Plex_Sans/IBMPlexSans-BoldItalic.ttf") format("truetype");
}*/
@font-face {
  font-family:    'Courier Prime';
  font-display:   fallback;
  src:
          url("/assets/fonts/Courier_Prime/CourierPrime-Regular.ttf") format("truetype");
  font-weight:    400;
}
@font-face {
  font-family:    'Courier Prime';
  font-display:   fallback;
  src:
          url("/assets/fonts/Courier_Prime/CourierPrime-Bold.ttf") format("truetype");
  font-weight:    700;
}
@font-face {
  font-family:    'Courier Prime';
  font-display:   fallback;
  src:
          url("/assets/fonts/Courier_Prime/CourierPrime-RegularItalic.ttf") format("truetype");
  font-weight:    400;
  font-style:     italic;
}
@font-face {
  font-family:    'Courier Prime';
  font-display:   fallback;
  src:
          url("/assets/fonts/Courier_Prime/CourierPrime-BoldItalic.ttf") format("truetype");
  font-weight:    700;
  font-style:     italic;
}
@font-face {
  font-family:    'Rajdhani';
  font-display:   fallback;
  src:
          url("/assets/fonts/Rajdhani/Rajdhani-Light.ttf") format("truetype");
  font-weight:    300;
}
@font-face {
  font-family:    'Rajdhani';
  font-display:   fallback;
  src:
          url("/assets/fonts/Rajdhani/Rajdhani-Regular.ttf") format("truetype");
  font-weight:    400;
}
@font-face {
  font-family:    'Rajdhani';
  font-display:   fallback;
  src:
          url("/assets/fonts/Rajdhani/Rajdhani-Bold.ttf") format("truetype");
  font-weight:    700;
}
/*@font-face {
  font-family:    'Rajdhani';
  font-display:   fallback;
  src:
          url("/assets/fonts/Rajdhani/Rajdhani-Medium.ttf") format("truetype"),
          url("/assets/fonts/Rajdhani/Rajdhani-SemiBold.ttf") format("truetype"),
}*/

@font-face {
  font-family:    'Charter';
  font-display:   fallback;
  src:
          url("/assets/fonts/charter/ttf/Charter-Regular.ttf") format("truetype");
  font-weight:    400;
  font-style:     normal;
}
@font-face {
  font-family:    'Charter';
  font-display:   fallback;
  src:
          url("/assets/fonts/charter/ttf/Charter-Bold.ttf") format("truetype");
  font-weight:    700;
  font-style:     normal;
}
@font-face {
  font-family:    'Charter';
  font-display:   fallback;
  src:
          url("/assets/fonts/charter/ttf/Charter-Regular-Italic.ttf") format("truetype");
  font-weight:    400;
  font-style:     italic;
}
@font-face {
  font-family:    'Charter';
  font-display:   fallback;
  src:
          url("/assets/fonts/charter/ttf/Charter-Bold-Italic.ttf") format("truetype");
  font-weight:    700;
  font-style:     italic;
}



@font-face {
  /*font-family: "Foro Extra Bold";*/
  font-family:    "Foro W03 ExtraBold";
  font-display:   fallback;
  /*src: url("/assets/fonts/b7a3e250c06495eeff3d8d9fb0714e65.eot");*/ /* IE9*/
  src:
          url("/assets/fonts/Foro_W03_ExtraBold/b7a3e250c06495eeff3d8d9fb0714e65.woff2") format("woff2"), /* chrome、firefox */
          url("/assets/fonts/Foro_W03_ExtraBold/b7a3e250c06495eeff3d8d9fb0714e65.woff") format("woff"), /* chrome、firefox */
          url("/assets/fonts/Foro_W03_ExtraBold/b7a3e250c06495eeff3d8d9fb0714e65.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
          url("/assets/fonts/Foro_W03_ExtraBold/b7a3e250c06495eeff3d8d9fb0714e65.svg#Foro W03 ExtraBold") format("svg"); /* iOS 4.1- */
  text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}



@font-face {
  font-family:    'Bebas Neue';
  font-display:   fallback;
  src:            url("/assets/fonts/Bebas_Neue/BebasNeue-Regular.ttf") format("truetype");
}



@font-face {
  font-family:    'Alfa Slab One';
  font-display:   fallback;
  src:            url("/assets/fonts/Alfa_Slab_One/AlfaSlabOne-Regular.ttf") format("truetype");
  font-weight:    400;
}


/*@font-face {
  font-family:    'Roboto';
  font-display:   fallback;
  src:
          url("/assets/fonts/Roboto/Roboto-Thin.ttf") format("truetype"),
          url("/assets/fonts/Roboto/Roboto-Light.ttf") format("truetype"),
          url("/assets/fonts/Roboto/Roboto-Regular.ttf") format("truetype"),
          url("/assets/fonts/Roboto/Roboto-Medium.ttf") format("truetype"),
          url("/assets/fonts/Roboto/Roboto-Bold.ttf") format("truetype"),
          url("/assets/fonts/Roboto/Roboto-Black.ttf") format("truetype"),
          url("/assets/fonts/Roboto/Roboto-ThinItalic.ttf") format("truetype"),
          url("/assets/fonts/Roboto/Roboto-LightItalic.ttf") format("truetype"),
          url("/assets/fonts/Roboto/Roboto-RegularItalic.ttf") format("truetype"),
          url("/assets/fonts/Roboto/Roboto-MediumItalic.ttf") format("truetype"),
          url("/assets/fonts/Roboto/Roboto-BoldItalic.ttf") format("truetype"),
          url("/assets/fonts/Roboto/Roboto-BlackItalic.ttf") format("truetype");
}*/



                                  
/*@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&display=swap');*/

/*@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');*/




@layer                          reset,
defaults,



components,
  in-dev-cover,
  side-nav,
  preview-switch,
  primary-menu,
  burger,
  roll-paper,
  primary-header,
  pagination,


  alist,

    aheader,
      category-identifier,

    article,


  primary-footer,




  zippy,
  bg,




PAGE-ABOUT.article,
end;

@layer reset                    { /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
button {
    margin: 0;
    padding: 0;

    margin-inline: 0;
    margin-block: 0;

    padding-inline: 0;
    padding-block: 0;

    border: 0;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, div {
    display: block;
    /*display: inline-block;*/
    /*width: 100%;*/
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


*, *:before, *:after {
    box-sizing: border-box;
} }

@layer defaults.base            { :root {
    --scrollbar-width: 10px;
    --scrollbar-width-formoz: thin;



    --decorative-background-container: 0, 0%, 93%;
    --decorative-background-container-transparency: 1;

/*    --decorative-theme-color: 207, 47%, 59%;*/
/*    --decorative-theme-color: 197, 31%, 75%;*/
/*    --decorative-theme-color: 224, 67%, 87%;*/
/*    --decorative-theme-color: 221, 100%, 44%;*/
/*    --decorative-theme-color: 246, 100%, 50%;*/
/*    --decorative-theme-color: 0, 0%, 0%;*/

/*    --decorative-background-body-transparency: 0.3;*/
/*    --decorative-background-body-transparency: 1;*/

    --main-fontColor: #555555;
/*    --main-fontColor: #aaaaaa;*/

    --black: hsl(0, 0%, 0%);
    --white: hsl(0, 0%, 100%);
    --blue: hsl(246, 100%, 50%);
    --gray: hsl(0, 0%, 80%);
    --orange: hsl(32, 100%, 50%);

    --sub-font-family: 'Comfortaa', cursive;

/*    --main-font-family: "Roboto", "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Naskh Arabic", "Noto Sans Thai", "Noto Sans Hebrew", "Noto Sans Bengali", sans-serif;*/
/*    --main-font-family: 'Montserrat', sans-serif;*/
/*    --main-font-family: 'Fira Code', monospace;*/
/*    --main-font-family: 'Consolas';*/
/*    --main-font-family: 'IBM Plex Sans', sans-serif;*/
/*    --main-font-family: monospace;*/
/*    --main-font-size: 1rem;*/
/*    --main-font-size: 1.3rem;*/
    --main-font-family: 'Courier Prime', monospace;
    --main-font-size: 1.33rem;
    --main-line-height: 1;
    --main-font-weight: 400;
    --main-letter-spacing: 0;
    --main-word-spacing: auto;
    --main-font: var(--main-font-weight) var(--main-font-size)/var(--main-line-height) var(--main-font-family);

/*    --article-font-family: 'Verdana Pro Cond';*/
/*    --article-font-family: 'Verdana Pro';*/
/*    --article-font-family: 'Georgia';*/
    --article-font-family: 'Charter';
    --article-font-family: 'Montserrat';
/*    --article-font-family: 'Charter';*/
/*    --article-font-size: 1.5rem;*/
/*    --article-font-size: 1.3rem;*/
/*    --article-font-size: 1.35rem;*/
    --article-font-size: 1.4rem;
/*    --article-font-size: 24px;*/
    --article-line-height: 1.5;
    --article-font-weight: 400;
    --article-letter-spacing: -0.03ch;
/*    --article-letter-spacing:  auto;*/
    --article-word-spacing: 0.2ch;
/*    --article-word-spacing:    auto;*/
    --article-font: var(--article-font-weight) var(--article-font-size)/var(--article-line-height) var(--article-font-family);

    --text-max-width: 75ch;
    --text-content-max-width: var(--text-max-width) + var(--text-content-margin-left) + var(--text-content-margin-right);

/*    --menu-margin-top: 25px;*/
    --menu-margin-top: calc(var(--main-font-size) * 1.75);
}

/*color: #728472;*/
/*color: #648880;*/
/*color: hsl(167, 15%, 46%);*/
/*hsl(0, 0%, 100%);*/
/*hsl(0, 100%, 75%);*/
/*hsl(0, 80%, 75%);*/
/*hsl(0, 100%, 44%);*/
/*hsl(0, 0%, 5%);*/
/*#054ada;*/
/*hsl(221, 96%, 44%);*/
/*hsl(221, 100%, 44%);*/
/*hsl(246, 100%, 50%)*/


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


.group::before,
.group::after {
    display:        table       !important;
    content:        ""          !important;

    /*flex:           none        !important;*/
}
.group::after {
    clear:          both        !important;
}
.inline-block-100 {
    display:        inline-block !important;
    width:          100%        !important;
}
.visible {
    display:        block       !important;
}
.visible-1 {
    opacity:        1           !important;
}
.hidden {
    display:        none        !important;
}
ul.dash > li {
    list-style-type: '-\ '      !important;
}
a.m--resource:link {
    text-decoration: underline  !important;
}
ul.m--main-focus a.m--resource:link {
    color:              hsl(var(--decorative-theme-color));
}
.bold {
    font-weight:    bold        !important;
}
.italic {
    font-style:     italic      !important;
}
/*ul.end-options {
    align-items: flex-start;
    text-align:          left;
}*/


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


::selection {
    /*background-color: hsl(0, 100%, 95%);*/
    /*background-color: hsl(130, 100%, 88%);*/

    background-color:   hsl(0, 0%, 0%);
    color:              hsl(0, 0%, 100%);
}
html {
    font-size:      62.5%;
}
body {
    position:       relative; z-index: 0;

    min-height:     100vh;

/*    font: normal 16px/130% georgia, times new roman, serif;*/
/*    font: 400 13.5px/1.2 sans-serif;*/
/*    font: 400 1.35rem/1.4 monospace;*/
/*    font-size:      1.35rem;*/
/*    font-size:      1.33rem;*/

/*    font-family:    var(--main-font-family);*/
/*    font-size:      var(--main-font-size);*/
/*    font-weight:    var(--main-font-weight);*/
/*    letter-spacing: var(--main-letter-spacing);*/

/*    font-stretch: ultra-expanded;*/

    color:          var(--main-fontColor);
}
body > * {
    font:           var(--main-font);
    letter-spacing: var(--main-letter-spacing);
    word-spacing:   var(--main-word-spacing);
}
main {
    margin-bottom:  3em
}
main + * {
    margin-top:     auto
}
img {
    width: 100%;
    height: auto;
}

/*----------------------------------------
  Typography
  ----------------------------------------*/

h2 {
    text-align:     left;
}
h3 {
    font-size:      1.5em;
}
nav li {
    list-style:     none !important;
}
strong, b {
    font-weight:    600;
}
em {
    font-style:     italic;
}
abbr[title], acronym[title] {
    /*text-decoration: underline dotted;*/
    /*text-decoration: underline;*/
    text-decoration: none;
}

/*----------------------------------------
  Inline Links
  ----------------------------------------*/

a:link,
p:has(> a[href$='#continuing']) {
    color:          hsl(246, 100%, 50%);
    color:          hsl(212, 38%, 52%);
    text-decoration: none;
}
/*a:has(> :not(h1, h2, h3, h4, h5, h6)):hover,*/
a:hover {
    text-decoration: underline;
}
a:has(h1, h2, h3, h4, h5, h6):hover {
    text-decoration: none;
}

a:visited {
    color:          hsl(271, 68%, 32%);
/*    color:          hsl(212, 38%, 52%);*/
} }




@layer components.base          { 


/*----------------------------------------
  Typography
  ----------------------------------------*/


label:has(> input#preview-switch-desctop) > span,
label:has(> input#preview-switch-mobile) > span,

nav.main-nav,
.burger,
.zippy .zippy-head,
.pagination {
-webkit-user-select:    none;  /* Chrome all / Safari all */
   -moz-user-select:    none;  /* Firefox all */
    -ms-user-select:    none;  /* IE 10+ */
        user-select:    none;  /* Likely future */
}





/*========= samples =========

/*hsl(0, 0%, 3%);*/
/*hsl(0, 0%, 3%, 0.2);*/

/*hsl(219, 80%, 95%);*/
/*hsl(246, 100%, 50%);*/

/*hsl(0, 0%, 50%);*/
/*hsl(219, 80%, 60%);*/

/*hsl(16, 100%, 66%);*/

/*hsl(117, 77%, 22%) -- #11640D*/
/*                      #036A07*/

/*hsl(219, 30%, 25%) -- #2E3C56*/
/*hsl(219, 100%, 50%)*/


/*#hsl(0, 0%, 100%);*/
/*hsl(0, 100%, 75%);*/
/*hsl(0, 80%, 75%);*/
/*hsl(0, 100%, 44%);*/
/*hsl(0, 0%, 5%);*/
/*#054ada;*/
/*hsl(221, 96%, 44%);*/
/*hsl(221, 100%, 44%);*/
/*hsl(246, 100%, 50%)*/ }

@layer side-nav.base            { 

.side-nav {
    position:       fixed;
    z-index:        8;

    top:            0;
    left:           0;

    transition:     opacity 200ms;
}
.side-nav > a[href="#top"] {
    display:        block;
    width:          100%;
    height:         100%;

    background-image: url(/assets/decorative/comon_bg%27s/up_svg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2.1em;

    opacity:        0.1;
}
.side-nav > a[href="#top"]:hover {
    opacity:        0.2;
    background-color: #fff;
    box-shadow:     0 0 5px 5px #fff;

    transition:     all 0s ease 50ms;
}
 }
@layer primary-menu.base        { 




menu.primary-menu {
    position:       fixed;

    display:        none;

    left:           0;
    width:          100%;
    height:         var(--menu-head-hight);

}
nav.primary-nav {
/*    background-color: hsla(0, 0%, 5%, .8);*/
    background-color: hsl(0, 0%, 25%);
}

nav.primary-nav > ul {
/*    max-width:      calc(var(--max-width) - 10px + (20px * 2));*/
    max-width:      var(--max-width);
    margin:         0 auto;

    display:        flex;

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

nav.primary-nav > ul > li {
    flex-grow:      1;

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





nav.primary-nav .zippy .zippy-head {
    min-height:     var(--menu-head-hight) !important;
    line-height:    var(--menu-head-hight) !important;
}

nav.primary-nav .zippy:hover > .zippy-head {
   /*background-color: hsl(150, 30%, 95%);*/
   background-color: hsl(216, 100%, 97%);
}

nav.primary-nav .zippy .zippy-overflow {
    position:       absolute    !important;
    left:           0        !important;
    right:          0        !important;
}


nav.primary-nav .zippy .zippy-content {
    padding-right:  0           !important;
    padding-left:   0           !important;

    background-color: hsl(0, 0%, 100%, .97) !important;
/*    transition-timing-function: cubic-bezier(0.28, 0.45, 0.14, 0.52) !important;*/

/*    border-left:    1px solid;*/
/*    border-right:   1px solid;*/
    border-bottom:  1px solid hsl(0, 0%, 80%);
/*    border-color:   hsl(0, 0%, 80%);*/
/*    border-color:   hsl(0, 0%, 5%);*/

/*    box-shadow:      0   10px 15px -5px hsl(0, 0%, 50%);*/
/*    box-shadow:      0    5px 10px      hsl(0, 0%, 50%);*/
/*    box-shadow:      0    0px 15px      hsl(0, 0%, 50%);*/
    box-shadow:      0    0   10px      hsl(0, 0%, 50%);

/*    margin-left:    5px;*/
/*    margin-right:   5px;*/
    margin-bottom:  20px;
}


nav.primary-nav .zippy .zippy-content ul.end-options > li {
}
nav.primary-nav .zippy .zippy-content ul.end-options > li > a {
    display:        grid;
}
nav.primary-nav .zippy .zippy-content ul.end-options > li > a > div {
/*    display:        block;*/
        width:      100%;
    max-width:      calc(var(--text-content-max-width));

    justify-self:   end;

    padding-left:   var(--text-content-margin-left);
    padding-right:  var(--text-content-margin-right);

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


nav.primary-nav .zippy .zippy-content ul.end-options:is(.categories,
                                                        .translations) >
                                                                  li[data-category="all"]:not(:last-child) {
/*   margin-bottom:   1.5em;*/
}


nav.primary-nav .zippy .zippy-content ul.end-options.categories > li[data-category="engineering"]:not(:last-child) {
/*   margin-bottom:   1.5em;*/
}

nav.primary-nav .zippy .zippy-content ul.end-options.categories > li[data-category="engineering"]:has(~ li[data-category="search-engine-optimization"]) {
/*   margin-bottom:   0;*/
}

nav.primary-nav .zippy .zippy-content ul.end-options.categories > li[data-category="search-engine-optimization"]:not(:last-child) {
/*   margin-bottom:   1.5em;*/
}


/*----------------------------------------
  Typography
  ----------------------------------------*/


nav.primary-nav .zippy .zippy-head h2 {
    margin:         0;
    padding:        0;
    border:         none;

    color:          hsl(0, 0%, 100%);

    text-align:     center;

/*    font-size:      1.3em;*/
    font-size:      1.2em;
/*    font-family:    'Comfortaa', cursive;*/
    font-family:    'Bebas Neue', cursive;
    font-weight:    400;
    letter-spacing: 0.3em;
}


nav.primary-nav .zippy:hover > .zippy-head h2 {
    color:          hsl(0, 0%, 0%);
}

nav.primary-nav .zippy > .zippy-head:hover > a:has(h2) {
    text-decoration: underline hsl(0, 0%, 0%);
}


nav.primary-nav .zippy ul.end-options {
/*    padding: calc(2.5rem * 1.8) 0;*/
    padding: 2rem 0;
}

nav.primary-nav .zippy ul.end-options > li:hover {
   background-color: hsl(216, 100%, 97%);
}


/*nav.primary-nav .zippy ul.end-options h3 {*/
nav.primary-nav .zippy ul.end-options :has(h3) > * {
    position:       relative;

    display:        inline;
    text-align:     left;

/*    line-height:    1.5;*/
    line-height:    1.8;

    font-family:    'Rajdhani', sans-serif;
/*    font-size:      1.3em;*/
/*    font-size:      2.5rem;*/
    font-size:      2.3rem;
    font-weight:    300;
    letter-spacing: 0.07em;
}

nav.primary-nav .zippy ul.end-options > li:hover h3 {
    color:              hsl(216, 100%, 70%);
    color:              hsl(216, 100%, 46%);
    color:              hsl(0, 0%, 0%);

/*    text-decoration-color: hsl(0, 0%, 0%) !important;*/
}

nav.primary-nav .zippy ul.end-options:is(.categories, .translations) h3 {
    text-decoration-line: underline;
    text-decoration-thickness: 0.1em;
}



nav.primary-nav .zippy ul.end-options.translations h3 + span.note {
    color: hsl(0, 0%, 85%);
}
nav.primary-nav .zippy ul.end-options.translations h3:hover + span.note {
/*    color: hsl(246, 100%, 50%);*/
}
nav.primary-nav .zippy ul.end-options.translations a:visited > h3:hover + span.note {
/*    color: hsl(271, 68%, 32%);*/
}









/*ul.categories h3[data-title]::after {
    min-width:          min-content;
    display:            none;
    transition:         margin-top 0.1s ease-out 0s;
    position:           absolute;
}

ul.categories h3[data-title]:hover::after {
    content:            attr(data-tytle);
    display:            block;
    position:           absolute;
    bottom:             0;
    left:               0;
}
*/






















nav.primary-nav ul.end-options a:has(h3) {

    /*text-decoration-line: underline;*/
    /*text-decoration-thickness: 0.3em;*/
}

nav.primary-nav ul.end-options a:has(h3):hover {
    /*text-decoration-thickness: 5px;*/
    /*text-decoration-thickness: 0.5em;*/
}



/*----------------------------------------
  Decorative
  ----------------------------------------*/



nav.primary-nav li .zippy > .zippy-head {
    /*background-color: hsl(0, 0%, 95%);*/

/*    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color:  hsl(0, 0%, 90%);*/
}
nav.primary-nav li:nth-child(odd) .zippy > .zippy-head {
    /*background-color: hsl(0, 0%, 95%);*/
}
nav.primary-nav li:nth-child(even) .zippy > .zippy-head {
    /*background-color: hsl(0, 0%, 90%);*/
}
/*nav.primary-nav li:nth-child(odd) .zippy:hover > .zippy-head {
    background-color: hsl(0, 0%, 95%);
}
nav.primary-nav li:nth-child(even) .zippy:hover > .zippy-head {
    background-color: hsl(0, 0%, 90%);
}*/





nav.primary-nav li .zippy:hover .zippy-content {
    /*border: solid hsl(0, 0%, 0%);*/
    /*border-width: 0 1px 1px 1px;*/
}


nav.primary-nav .end-options li:nth-child(odd) {
    /*border: 2px solid hsl(0, 0%, 100%);*/
}
nav.primary-nav .end-options li:nth-child(even) {
    /*background-color: hsl(216, 100%, 97%);*/
    /*border: 2px solid hsl(216, 100%, 97%);*/
}




/*  DECORATIVE  */
nav.primary-nav li .zippy .zippy-content {
}
nav.primary-nav li:nth-child(odd) .zippy .zippy-content {
    /*background-color: hsl(0, 0%, 95%, 0.95);*/
}
nav.primary-nav li:nth-child(even) .zippy .zippy-content {
    /*background-color: hsl(0, 0%, 90%, 0.95);*/
}





/*  DECORATIVE  */
/*nav.primary-nav li .zippy .zippy-content::before {
    display: block;
    content: '';

    position: absolute;

    background-color: #a9acaa;

    top: 0;
    left: 0;

    width: 2px;
    height: 100%;
}*/




/*.zippy-content-temp-1 {
    background-color: hsl(0, 100%, 98%) !important;
}
.zippy-content-temp-2 {
    background-color: hsl(100, 100%, 98%) !important;
}
.zippy-content-temp-3 {
    background-color: hsl(200, 100%, 98%) !important;
}
.zippy-content-temp-4 {
    background-color: hsl(300, 100%, 98%) !important;
}*/

/*  DECORATIVE  */
/*nav.primary-nav .zippy .zippy-content::before {
    background-color: #a9acaa;

    width: 0.1rem;
}*/





.nav a[href='/']:hover {
    /*text-shadow: hsl(300, 100%, 50%) 0 0 15px;*/
}

/*.nav a[href*='categories']:hover {
    text-shadow: hsl(51, 100%, 50%) 0 0 15px;
}*/

.nav a[href*='about']:hover {
    /*text-shadow: hsl(100, 100%, 50%) 0 0 15px;*/
}

.nav a[href*='services']:hover {
    /*text-shadow: hsl(178, 100%, 50%) 0 0 15px;*/
}


/*hsl(0, 100%, 50%)*/
/*hsl(300, 100%, 50%)*/
/*hsl(100, 100%, 50%)*/
/*hsl(178, 100%, 50%)*/
/*hsl(51, 100%, 50%) -- gold*/
 }
@layer burger.base              { 

.burger {
    position: fixed;

    top: 0;
    left: 0;

    padding: 10px;
    padding-top: var(--menu-margin-top);

    width: min-content;

/*    transition: padding-top 0.5s ease 0.1s;*/
}
.burger > button {
    width: 48px;
    height: 48px;

    border: 1px solid;
    border-radius: 3px;

    cursor: pointer;

/*    border-color:  #0003;*/
/*    border-color:  #00000033;*/
/*    border-color:  hsla(0, 0%, 0%, .2);*/
/*    border-color:  hsla(0, 0%, 80%, 1);*/
    border-color:  hsla(0, 0%, 80%, 1);
    border-color:  hsla(0, 0%, 40%, 1);
    background-color: transparent;
}

.burger > button:hover {
    background-color: hsl(0, 0%, 100%, 0.2);
} }
@layer roll-paper.base          { 




.container {
    position: relative;

    min-height: 100svh;

    display: flex;
    flex-direction: column;
}







/*----------------------------------------
  Decorative
  ----------------------------------------*/


.roll-paper .container > .bg-elem {
    /*opacity: var(--decorative-background-container-transparency);*/

    /*background: hsl(var(--decorative-background-container)) url(/assets/decorative/26669.jpg) 0 0/20% repeat;*/
    /*background: hsl(var(--decorative-background-container)) 0 0/20% repeat;*/

/*    background: url(/assets/decorative/26669.jpg) 0 0/20% repeat;*/


    /*background-color: hsl(var(--decorative-background-container), var(--decorative-background-container-transparency));*/

}
 }
@layer aheader.base             { 




.aheader {
  width: 100%;

  position: relative; z-index: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

  .aheader > .bg-elem {
    background-size: cover;
    background-position: 0 50%;
  }

    .aheader span.meta {
      /*font-weight: 400;*/


      /*font-family: 'Comfortaa', cursive;*/
      /*font-family: 'Rajdhani', sans-serif;*/

      /*color: hsl(0, 0%, 0%);*/
      /*color: hsl(0, 0%, 30%);*/
    }

    .aheader a.meta.author {
      font-size:      1.2em;
    /*    letter-spacing: 0.1em;*/
      letter-spacing: 0.05em;
      font-weight:    700;
    }

      .aheader a.meta.author:hover {
        color: black !important;
      }

    .aheader span.meta.tags {
      display: inline-flex;
      flex-wrap: wrap;

    /*    justify-content: center;*/

      column-gap: 1ch;
      row-gap: 0.1em;
    }

      .aheader span.meta.tag::before {
        display: inline;

        content: '\0023';
        margin-right: 0.1ch;
        font-style: normal;
      }
 }
@layer article.base             { 




.preview-mode .apreview .article {
  /*display: flex;*/
  display: grid !important;
}





/*.article {*/
/*    display:        grid;*/

/*   grid: 's text-content'
      / minmax(0, calc(100% - (var(--text-content-max-width))))
       1fr;*/

/*    grid-template-columns: minmax(0, calc(100% - (var(--text-content-max-width)))) [text-content-start] 1fr [text-content-end];*/

/*    grid-template-columns: auto [text-content-start] minmax(200px, var(--text-content-max-width)) [text-content-end] auto;*/


/*   grid: 's text-content'
      / minmax(0, auto)
       minmax(100px, calc(75ch + var(--text-content-margin-left) + var(--text-content-margin-right)));*/
/*}*/

/*.article > *              { grid-column: 1 /-1 }*/
/*.article > :is(p, ul, ol) {*/
/*                            grid-column: text-content;*/
/*    display: grid;*/
/*    grid-template-columns: subgrid;*/

/*}*/


.article { display: grid; }


/*.article > :is(h2, h3, h4, h5, h6),*/
.article > :is(p, ul, ol, hr) {
    width:      100%;
  max-width:      calc(var(--text-content-max-width));

  justify-self:   end;
}

/*.article > :is(.stretched, .zippy, div:has( > img, > div > pre), figure:has( > pre), h2, h3, h4, h5, h6){
  grid-column: full;
}*/


.article.description > :is(p, ul, ol) {
/*    max-width:      100%;*/
}




.apreview .article {
  margin-top:     0.5em;
}


main > section:has(> article.article.description) + section:has(> nav > ul.alist) {
  margin-top:     1em;
}



.article {

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

/*    hyphens: auto;*/
}



.article a:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 0.2em;
}

.article a:visited,
p:has(> a[href$='#continuing']:visited) {
  color:          hsl(271, 68%, 32%);
  color:          hsl(212, 38%, 52%);
}


.article pre > code > span::selection,
.article code::selection {

  background-color:   hsl(0, 0%, 100%);
  color:              hsl(0, 0%, 0%);
}






/*.article
:is(
  nav,
  div:not(#continuing, .highlight, :has( > img)),
  figure,
  blockquote,
  p,
  ul,
  ol
)*/
/*ul.categories h3,*/
.article
:where(:not(
  div:is(#continuing, :has( > img)),
  img,
  div[class^='language'][class*='highlighter'] *
)) {
  margin-top:         0.5em;
  margin-bottom:      0.5em;
}

/*margin-top: 1em;*/
/*margin-bottom: 1em;*/
/*.article blockquote {
  padding-top:        0.5em;
  padding-bottom:     0.5em;

}*/



.article :is(h2, h3, h4, h5, h6) {

  /*--font-color-headers: #648880;*/
  --font-color-headers: hsl(167, 15%, 70%);
  --font-color-headers: hsl(167, 15%, 46%);
  --font-color-headers: hsl(0, 0%, 0%);

  margin-top:     1.5em;

  /*line-height: 2;*/
  /*line-height: 1;*/

  font-weight:    700;
  font-size:      1.2em;

/*    font-family:    'Alfa Slab One';*/
/*    font-family:    'Rajdhani';*/
/*    font-family:    'Courier Prime';*/
/*    font-family:    'Bebas Neue';*/
/*    font-family:    'Courier Prime';*/

/*    font-family:    'Montserrat';*/
/*    font-family:    'Comfortaa', cursive;*/
/*    font-family:    serif;*/
  font-family:    cursive;

  letter-spacing: 0.1em;

  color:          var(--font-color-headers);

  text-align:     left;
  padding-left:    0.5em;
  border-left-style: solid;
  border-left-color: var(--orange);
}




.article h2 {
  /*letter-spacing: 0.5em;*/
  margin-left:        -2px;
/*    margin-right:       0;*/

  border-left-width:  10px;

/*    text-transform:     uppercase;*/
}





/*.article > div,*/
.article p {
  padding-left:       var(--text-content-margin-left);
}


.article ul:not(:first-child),
.article ol:not(:first-child) {
  padding-left:       var(--tab-space);
}

.article > ul:not(:first-child),
.article > ol:not(:first-child) {
  padding-left:       calc(var(--text-content-margin-left) + var(--tab-space)) !important;
}


/*article > div,*/
.article > :is(p, ul, ol) {
  padding-right:      var(--text-content-margin-right);
}



.article :is(
  a[href$='#continuing'],
  p > code,
  :is(ul, ol) code
) {
  font-family:    var(--main-font-family);
}


.article pre {
  padding-top:        0.65em;
  padding-bottom:     0.65em;

  border-left:        1em solid hsl(0, 0%, 10%);
  padding-left:       0.2em;
  padding-right:      var(--text-content-margin-right);



  background-color: hsl(0, 0%, 5%);
  color: hsl(0, 0%, 95%);

/*    font-size: 0.9em;*/
  font-family:    Consolas, monospace;
  line-height:        1.2;

  overflow:           auto;
}


.article :is(
  p > code,
  :is(ul, ol) code
) {
  border-radius:      2px;

  padding-top:        3px;
  padding-bottom:     1px;

  padding-left:       5px;
  padding-right:      5px;


  /*background-color: hsl(0, 0%, 30%);*/
  background-color:   hsla(204, 10%, 86%, 0.7);
  /*color: hsl(0, 0%, 100%);*/
  color:              hsl(122, 94%, 21%);
}









.article ol > li {
  list-style-type: decimal;
}

.article > ul > li {
  list-style:     disc outside;
/*    list-style:     '-\ ' outside;*/
/*    list-style-type: disc;*/
}
  .article > ul > li > ul > li {
    list-style-type: circle;
  }
    .article > ul > li > ul > li > ul > li {
      list-style-type: square;
    }



.article ul > li::before {
  /*display: inline;*/
  /*content: '\2022\ ';*/
  /*content: '•\ ';*/
}

article.article .next-li-no-style + ul > li {
  /*list-style-type: '✅\ ';*/
/*    list-style-type:    none;*/
}

/*.article > ul > li > span:first-child:has( + :is(ul, ol)) {
  font-weight:        500;
  font-family:        var(--sub-font-family);
  color:              hsl(var(--decorative-theme-color));
}*/

/*.article li {
  font-weight:        var(--article-font-weight);
  font-family:        var(--article-font-family);
  color:              var(--main-fontColor);
}*/



.article blockquote {
  color: hsl(0, 0%, 50%);
}

.article > :first-child {
  margin-top:         0 !important;
}

.article blockquote > :first-child {
  margin-top:         0 !important;
}

.article :last-child {
  margin-bottom:      0 !important;
}

/*.article > *:last-child {
  margin-bottom: 1em;
}
*/

.article hr {
  width: 100%;
  margin: 0;

  border-width:   0;
  border-top: 1px solid hsl(0, 0%, 80%);
} }
@layer primary-footer.base      { 


footer.primary-footer {
    /*font-size: 1.1em;*/

    height: 1em;
    /*line-height: 1;*/

    padding-left: 1em;
    padding-right: 1em;

    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5em;

    letter-spacing: 0.05em;

    margin-bottom: 2em;

    background-color: hsl(0, 0%, 90%);
}


footer.primary-footer > .copyright {
    padding-left: 0.1rem;
    padding-right: 0.1rem;

/*    width: max-content;*/
    width: min-content;

    background-color: hsl(0, 0%, 93%);
    color: hsl(0, 0%, 50%);

/*    font-size:      1.2em;*/
    font-family: 'Rajdhani', sans-serif;
}





footer.primary-footer a:link {
    color: hsl(0, 0%, 50%);

    font-family: 'Comfortaa', cursive;
}

footer.primary-footer a:visited {
    color: hsl(0, 0%, 50%);
}
 }
@layer zippy.base               { 



.zippy .zippy-head {
    /*padding: 10px;*/
    cursor:         pointer;
}

.zippy .zippy-overflow {
    overflow:       hidden;
}



.zippy .zippy-content {
    display:        none;

    position:       relative;

    padding-right:  1rem;
    padding-left:   2.1rem;

    /*transition: margin-top 0.1s ease-out 0.01s;*/
    transition:     margin-top 0.1s ease-out;

    /*background-color: unset;*/
}



 }
@layer category-identifier.base { 




.category-id {
    position: absolute;
    z-index: 1;

    width: 30px;
    height: 30px;

/*    text-align:     center;*/
    display:        flex;
    justify-content: center;
    align-items:    center;


/*    font: 700 1.4em/1 'IBM Plex Sans', sans-serif;*/
    font: 700 1.5em/1 'Rajdhani', sans-serif;

    border: 1px solid hsl(0, 0%, 80%);
    border-radius: 15px;
    box-shadow: 0 2px 3px hsl(0, 0%, 80%);

/*    transition: all 0.1s;*/
    transition: width 0.1s,
                height 0.1s,
                font-size 0.1s;
}
.category-id:hover {
    width: 32px;
    height: 32px;

    font-size:      1.55em;

    border-radius: 16px;
    box-shadow: 0 2px 4px hsl(0, 0%, 80%);
}

.category-id > span {
    margin-bottom: -0.15rem;
} }
@layer pagination.base          { 

.pagination {
    display: flex;
    justify-content: center;

    column-gap: 0.5ch;
}




header +
.pagination {
/*    margin-top: 2em;*/
    margin-top: 1.7em;
/*    margin-top: 0.7em;*/
}

.pagination:has(+
footer.primary-footer) {
/*    margin-bottom: 0.5em;*/
    margin-bottom: 1.5em;
}

.pagination > li.grayed {
    color: gray;
}

.pagination > li.prev-page > a:visited,
.pagination > li.next-page > a:visited {
    color: hsl(271, 68%, 32%);
}


 }
@layer bg.base                  { 
.bg {
    position: relative;
}
.bg::before {
    position: absolute;

    content: "";
    display: block;

    width: 100%;
    height: 100%;
}



.bg-elem {
    position: absolute;
    z-index: -1;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    margin: 0 !important;

    background-repeat: no-repeat;
    background-attachment: local;
    background-clip: border-box;
    background-origin: border-box;
}



 }









@layer in-dev-cover.base        { 




#in-dev-cover {
  display: grid;
  display: none;
  position: fixed;

  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  background-color: #fff;

-webkit-user-select:    none;  /* Chrome all / Safari all */
   -moz-user-select:    none;  /* Firefox all */
  -ms-user-select:    none;  /* IE 10+ */
    user-select:    none;  /* Likely future */
}
  #in-dev-cover > div {
    text-align: center;
    align-self: center;
    transform: rotate(-45deg);

    font: 10rem 'Bebas Neue', cursive;
    color: red;
  }
    #in-dev-cover > div > span {
      background-color: #000;
      color: #fff;
    } }