:root{--clrBW00p:hsl(0,0%,0%);--clrBW05p:hsl(0,0%,5%);--clrBW06p:hsl(0,0%,6%);--clrBW10p:hsl(0,0%,10%);--clrBW13p:hsl(0,0%,13%);--clrBW15p:hsl(0,0%,15%);--clrBW20p:hsl(0,0%,20%);--clrBW25p:hsl(0,0%,25%);--clrBW30p:hsl(0,0%,30%);--clrBW35p:hsl(0,0%,35%);--clrBW40p:hsl(0,0%,40%);--clrBW45p:hsl(0,0%,45%);--clrBW50p:hsl(0,0%,50%);--clrBW55p:hsl(0,0%,55%);--clrBW60p:hsl(0,0%,60%);--clrBW65p:hsl(0,0%,65%);--clrBW70p:hsl(0,0%,70%);--clrBW75p:hsl(0,0%,75%);--clrBW80p:hsl(0,0%,80%);--clrBW85p:hsl(0,0%,85%);--clrBW90p:hsl(0,0%,90%);--clrBW95p:hsl(0,0%,95%);--clrBW96p:hsl(0,0%,96%);--clrBW97p:hsl(0,0%,97%);--clrBW98p:hsl(0,0%,98%);--clrBW99p:hsl(0,0%,99%);--clrBW100p:hsl(0,0%,100%);

--clrBW85pa1:hsl(0,0%,85%,.1);
--clrBW95pa9:hsla(0,0%,95%,.9);
--clrBW95pa8:hsla(0,0%,95%,.8);
--clrBW95pa7:hsla(0,0%,95%,.7);
--clrBW99pa9:hsla(0,0%,99%,.9);

/* category colors AXD */
--clrUX:hsl(146, 40%, 55%); /* hsl(146, 40%, 55%) */
--clrUX-dark:hsl(146 40% 37%); /* #398459 */
--clrUX-darker:hsl(146 40% 34%); 

--clrUI:hsl(29, 50%, 50%);
--clrDV:hsl(335, 35%, 59%);

--clrWD:hsl(182, 45%, 45%); /* #0A8385 */
--clrWD-dark:hsl(182, 45%, 35%); /* #0a8385 */
--clrWD-darker:hsl(182, 45%, 32%);

--clrDV:hsl(206, 50%, 50%);  
--clrDV-dark:hsl(206, 50%, 44%); /* #3878a9 */
--clrDV-darker:hsl(206, 50%, 41%);

/* --clrID__:hsl(60, 45%, 45%); */
--clrID:hsl(43, 75%, 50%); /* #e0ad23 */
--clrID-dark:hsl(44, 75%, 33%); /* #937215 */
--clrID-darker:hsl(44, 75%, 30%);

--clrTH:hsl(17, 88%, 40%);
--clrTH-dark:hsl(17, 88%, 33%);
--clrTH-light:hsl(17, 85%, 44%);

--clraORG:hsl(18, 74%, 45%,1);  
--clraORG90:hsla(18, 72%, 42%, 0.93);  
--clraORG-dark:hsl(18, 74%, 43%,1);
--clraORG-darker:hsl(18, 74%, 41%,1);
--clraORG-light:hsl(18, 74%, 56%,1); 

/*cnt txt clr*/
--clrUXcnt:hsl(100,10%,75%);
--clrUIcnt:hsl(30,10%,75%);
--clrDVcnt:hsl(353,10%,75%);
--clrDCcnt:hsl(58,10%,75%);
--clrLUXcnt:hsl(182,10%,75%);
--clrWDcnt:hsl(226,10%,75%);
--clrIDcnt:hsl(60,10%,75%); 

/* from pages */
--clraUX:hsla(99, 45%, 45%, 0.95);
--clraUI:hsla(29, 70%, 50%, 0.95);
--clraDV:hsla(60, 45%, 45%, 0.5); /* --clrID:hsl(60, 45%, 45%); */
--clraDC:hsla(58, 40%, 40%, 0.5);
--clraLUX:hsla(182, 40%, 40%, 0.5);
--clraWD:hsla(206, 40%, 40%, 0.5);
--clraID:hsla(60, 45%, 45%, 0.5); 

/* 035 */
--clraUX-035:hsla(99, 45%, 45%, 0.35);
--clraUI-035:hsla(29, 70%, 50%, 0.35);
--clraDV-035:hsla(60, 45%, 45%, 0.35); 
--clraDC-035:hsla(58, 40%, 40%, 0.35);
--clraLUX-035:hsla(182, 40%, 40%, 0.35);
--clraWD-035:hsla(206, 40%, 40%, 0.35);
--clraID-035:hsla(60, 45%, 45%, 0.35); 
--clraMD-035:hsla(272,45%,45%,0.35);  

/*portfolio axd*/
--clraMD:hsla(272,45%,45%,1);  
--clraENT:hsl(92,45%,45%,1);
}

.clraBW{fill:hsla(0, 0%, 90%, 0.85); stroke:rgba(60, 60, 60, 0.85);stroke-width:1;}
.clraUX{fill:hsla(99, 40%, 40%, 0.65); stroke:hsla(99, 75%, 30%,0.35);stroke-width:1;}
.clraUI{fill:hsla(29, 65%, 50%, 0.65);stroke:hsla(29, 75%, 30%,0.35);stroke-width:1;}
.clraDV{fill:hsla(335, 60%, 50%, 0.65);stroke:hsla(335, 75%, 30%,0.35);stroke-width:1;}
.clraDC{fill:hsla(58, 50%, 50%, 0.65);stroke:hsla(58, 75%, 30%,0.45);stroke-width:1;}
.clraLUX{fill:hsla(182, 50%, 75%, 0.65);stroke:hsla(182, 75%, 30%,0.65);stroke-width:1;}
.clraWD{fill:hsla(206, 50%, 75%, 0.65);stroke:hsla(206, 75%, 30%,0.65);stroke-width:1;}
.clraID{fill:hsla(60, 50%, 75%, 0.65);stroke:hsla(60, 75%, 25%,0.45);stroke-width:1; }
/*shadows*/
.dSh01{box-shadow: 4px 4px #333}
.dSh02{border:2px solid black;padding__:4px 4px;border-radius: 0.125rem;box-shadow: 4px 4px black} 
.dSh03{border:1px solid black;box-shadow: 4px 4px 0 0 #ccc,8px 8px 0 0 #333,3px 3px 3px 3px transparent}
.dSh0B{border-bottom:2px solid black;border-radius: 0.125rem;box-shadow: 4px 4px black} 
.dSh0R{border-right:2px solid black;border-radius: 0.125rem;box-shadow: 4px 4px black} 
.tSh01{text-shadow: 3px 3px orange}
.neubrut{margin-top:3px;margin-bottom:3px;padding:1px;border:1px solid black;border-radius: 0.125rem;box-shadow: 2px 2px black}
.textContrast-black{text-shadow: 0 0 2px black}
.textContrast-white{text-shadow: 0 1px 2px white}
.textContrast-white_05{text-shadow: 0 1px 2px rgba(250,250,250,0.55)}

.uxuiHoverBgd{@apply var(--clrUX) var(--clrUI) !important;}
/*main*/
html,body{width:100%;height:100vh;color:var(--clrBW00p);background:var(--clrBW99p);font-smooth:auto;-webkit-font-smoothing:antialiased;font-family:Nunito Sans,sans-serif;}
main{margin-left:auto;margin-right:auto;background-image:url(../img/bgd/manycubes-mono_02.png);}
footer>section{max-width:1480px;margin-left:auto;margin-right:auto;}
body#index>header{@media (max-width:501px)
    {background-image:none !important}}
/*font*/ 
.fontSans,.font-sans{font-family:Nunito Sans,sans-serif;font-weight:300 !important;}
.fontMono{font-family:'Courier New', Courier, monospace !important;font-weight: 200;font-smooth:auto;-webkit-font-smoothing: antialiased;}
.fontHeading,.fontYanone{font-family:'Yanone Kaffeesatz', sans-serif !important;font-optical-sizing: auto;font-smooth:auto;-webkit-font-smoothing: antialiased;}

strong{font-weight:600 !important}
/* .font-light{font-weight:200}
.text-base{font-size:1.05rem !important} */
.smoothMe{font-smooth:auto;-webkit-font-smoothing: antialiased}
.fauxSelected{ background:var(--clrBW05p);padding:2px 3px}
.cursor-default, .cursDef{cursor: default !important}
    
/*layout*/ 
header{border-top:1px solid var(--clrBW60p)}
.headerDeco{background-repeat: no-repeat;background-size: 14%; background-position: right bottom}
.headerDecoSml{background-image: url(../img/header/color-splash_03_10-right.png)}
.headerDecoSml08{background-image: url(../img/header/color-splash_03_08.png)}
.headerDecoSml09{background-image: url(../img/header/color-splash_03_09.png)}
.headerDecoSml14{background-image: url(../img/header/color-splash_03_14.png)}
.headerDecoSml15{background-image: url(../img/header/color-splash_03_15.png)}
.headerDecoSml16{background-image: url(../img/header/color-splash_03_16-right.png)}
.headerDecoSml17{background-image: url(../img/header/color-splash_03_17-right.png)}
.headerDecoSml18{background-image: url(../img/header/color-splash_03_18-right.png)}
.headerDecoBgd{background-repeat: no-repeat;background-position: right bottom}
    @media (max-width:768px)
    {.headerDecoBgd{background-size: 20%;}}

/*navig*/
nav a:link{padding-left:5px;}
nav a:hover,nav a:hover:after{color:#fff;background:#333;transition-property:all;transition-duration:500ms; transition-timing-function:cubic-bezier(0.4,0,0.2,1);}
nav a:after,a.linkslash:after {
    content: '\00B7';
    padding-left: 5px;
    padding-right: 2px;
    color: #333;
    font-weight: 900;}
/* .cur-act-a{color:#fff;background:#555} */
/* .cur-act-a:after{color:#f70} */

@media (min-width:1024px) {
    .cBrdrDrk {
        max-width: 1024px;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ccc }}

/*list*/
.custom-list{list-style-type:none;list-style-position: outside}
.custom-list>li{list-style-type:none;list-style-position: outside}
.custom-list>li::before{content:'\2713';margin-right:0.5rem}
/* .custom-list li a:hover{text-decoration: underline; filter: invert(1);} */

.custom-listing{list-style-type:none;list-style-position: outside}
.custom-listing li{list-style-type:none;list-style-position: outside}
.custom-listing>li::before{content:'\00B7';margin-right:0.5rem}

/*anim*/
.trans500{transition-property:all;transition-duration:500ms;transition-timing-function:cubic-bezier(0.4,0,0.2,1);}
.trans1000{transition-property:all;transition-duration:1000ms;transition-timing-function:cubic-bezier(0.4,0,0.2,1);}
.trans1500{transition-property:all;transition-duration:1500ms;transition-timing-function:cubic-bezier(0.4,0,0.2,1);}
.trans2000{transition-property:all;transition-duration: 2000ms, 1000ms;
transition-timing-function:cubic-bezier(0.76, 0.2, 0.23, 0.88);}
/*contrast*/
/* .textContrast-black, .textContrast-black > *{text-shadow: 0 0 1px black}
.textContrast-white{text-shadow: 0 1px 2px white}
.textContrast-black{text-shadow: 0 0 2px black}
.textContrast-white{text-shadow: 0 1px 2px white}
.textContrast-white_05{text-shadow: 0 1px 2px rgba(250,250,250,0.55)} */
/*5quares*/
details > summary{border:none;cursor: pointer}
details[open] > summary{border: none !important}
details[open] summary ~ *{animation: sweep .5s ease-in-out}
@keyframes sweep{0%{opacity: 0; margin-top: -10px} 100%{opacity: 1; margin-top: 0px}}
details[open], summary[open]{border:black}
summary::marker{background:white}
/*shadows */
.txtShw{text-shadow:1px 1px var(--clrBW20p)}
.txtShwXX{text-shadow:7px 0px var(--clrBW40p)}
.txtShwXXbtm{text-shadow:7px 0px var(--clrBW70p)}
.shadow-inner{ box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 1); }
/*text-shadow*/
.textContrast-black{text-shadow: 0px 0px 1px black, 0px 0px 2px black}
.textContrast-white{text-shadow: 0px 1px 2px white}
.textContrast-white_05{text-shadow: 0 1px 2px rgba(250,250,250,0.55)}
.textShadowBlack{text-shadow:1px 1px 1px black}
.textShadowWhite{text-shadow:1px 1px 0px white}
.textShadowOrange{text-shadow:1px 1px 1px #f60} 
.textShadowYellow{text-shadow:1px 1px 1px #fbbd23}
/*SVG */
.sto, .stowh{width:100% !important;height:100% !important;}    
desc{visibility: visible !important}
g{display: block !important}
svg > title{font-weight: bolder !important;visibility: visible !important}
.svgLogo>rect{fill:transparent;stroke:var(--clrBW00p);stroke-width:2;stroke-opacity:1;}
.svgLogo>rect.prv:hover{stroke:var(--clrBW100p);filter:invert(0.1)}
.svgLogo>rect.drg:hover{stroke:var(--clrBW85p);filter:invert(0.25)}
.svgLogo>rect.trc:hover{stroke:var(--clrBW70p);filter:invert(0.4)}
.svgLogo>rect.ctv:hover{stroke:var(--clrBW55p);filter:invert(0.55)}
.svgLogo>rect.pt:hover{stroke:var(--clrBW40p);filter:invert(0.7)}
.svgLogo>rect.sst:hover{stroke:var(--clrBW20p);filter:invert(0.85)}
.svgLogo>rect.sdm:hover{stroke:var(--clrBW00p);filter:invert(1)}

    /*breaks*/
    hr{border-color:var(--clrBW85p)}
    .hrTrans{border:0 solid transparent} 

    /*reveal*/
    .gs_reveal{opacity:0;visibility:hidden;will-change:transform,opacity;} 
    .gs_reveal{@media (max-width:500px)
    {transform: translate(0px, 0px) !important}}

    /*--hopo--*/
    .honeypotty>span:nth-child(2n){display:none;}
    div.honeypotty>span:nth-child(2n){display:none}

    /*--icon--*/
    .icon-check{text-shadow:1px 1px 1px #000;font-style:normal;}
    .check-icon-orange{display:inline-flex;flex-shrink:0; 
    height:1.5rem;width:1.5rem; 
    margin-right:0.5rem;margin-top:0.125rem; 
    align-items:center;justify-content:center;
    color:black;
    background:#eee}

    /*paralax*/
    .bgdStat{ background: url(../img/svg/intermezzo-bgd-svg_01.html),
    radial-gradient(at 60% 40%,hsla(145, 39%, 46%, 0.322) 10%,transparent 25%),
    radial-gradient(at 69% 45%,hsla(37, 100%, 50%, 0.317) 10%,transparent 25%),
    radial-gradient(at 35% 65%,hsla(47, 100%, 50%, 0.317) 10%,transparent 30%),
    radial-gradient(at 35% 40%,hsla(207, 90%, 60%, 0.301) 10%,transparent 30%),
    radial-gradient(at 64% 77%,hsla(338, 100%, 50%, 0.05) 10%,transparent 30%),
    radial-gradient(at 66% 60%,hsla(241, 87%, 66%, 0.418) 10%,transparent 30%) } 
    
    .bg,.bgd,.bgdStat{top:0;left:0;width:100%;height:100%;background-attachment:fixed;background-repeat:repeat;background-position:bottom center;}

    .introSectionBgd{background:linear-gradient(145deg,#299900 0,#3ad9ff 96%)}

    .interBgd {background-image: url(../img/svg/intermezzo-bgd-svg_01.html);background-repeat: no-repeat;background-size:auto;}

    /*--abbs-helpers--*/
    abbr{text-underline-offset: 3px;}
    abbr[title]{text-decoration: underline var(--clrBW50p) dotted 1px;}
    abbr[title]:hover::after,abbr[title]:focus::after{content: attr(title)}

/*bgd grad*/
.gradHdrID{background: 
    linear-gradient(25deg, hsla(0deg, 0%, 88%, 27%)34%, hsl(0deg, 0%, 83%, 15%) 61%), 
    linear-gradient(-25deg, hsla(0deg, 0%, 76%, 21%)34%, hsla(0deg, 0%, 96%, 10%) 34%), 
    radial-gradient(at 5% 5%, hsla(0deg, 0%, 100%, 9%) 0, hsla(0deg, 0%, 93%, 0%) 50%), 
    radial-gradient(at 69% 69%, hsla(0deg, 0%, 50%, 9%)0, hsla(0deg, 0%, 51%, 0%) 50%), 
    radial-gradient(at 65% 25%, hsla(0deg, 0%, 100%, 9%)0, transparent 55%), radial-gradient(at 94% 85%, hsl(92deg, 49%, 67%, 10%)0, transparent 50%), radial-gradient(at 76% 53%, hsla(0deg, 0%, 0%, 9%)0, transparent 44%);
    background-size: 100%; background-repeat: no-repeat; }
.gradHdrUXUI{background: 
    linear-gradient(25deg, hsla(0deg, 0%, 88%, 27%)34%, hsl(0deg, 0%, 83%, 15%) 61%), 
    linear-gradient(-25deg, hsla(0deg, 0%, 76%, 21%)34%, hsla(0deg, 0%, 96%, 10%) 34%), 
    radial-gradient(at 5% 5%, hsla(0deg, 0%, 100%, 9%) 0, hsla(0deg, 0%, 93%, 0%) 50%), 
    radial-gradient(at 69% 69%, hsla(0deg, 0%, 50%, 9%)0, hsla(0deg, 0%, 51%, 0%) 50%), 
    radial-gradient(at 65% 25%, hsla(0deg, 0%, 100%, 9%)0, transparent 55%), radial-gradient(at 94% 85%, hsl(165deg, 67%, 63%, 20%)0, transparent 50%), radial-gradient(at 76% 53%, hsla(0deg, 0%, 0%, 9%)0, transparent 44%);
    background-size: 100%; background-repeat: no-repeat; }
.gradHdrWD{background: 
    linear-gradient(25deg, hsla(0deg, 0%, 88%, 27%)34%, hsl(0deg, 0%, 83%, 15%) 61%), 
    linear-gradient(-25deg, hsla(0deg, 0%, 67%, 21%)34%, hsla(0deg, 0%, 96%, 10%) 34%), 
    radial-gradient(at 5% 5%, hsla(0deg, 0%, 100%, 9%) 0, hsla(0deg, 0%, 93%, 0%) 50%), 
    radial-gradient(at 69% 69%, hsla(0deg, 0%, 50%, 9%)0, hsla(0deg, 0%, 51%, 0%) 50%), 
    radial-gradient(at 65% 25%, hsla(0deg, 0%, 100%, 9%)0, transparent 55%), radial-gradient(at 94% 85%, hsl(218deg, 87%, 63%, 20%)10%, transparent 50%), radial-gradient(at 76% 53%, hsla(0deg, 0%, 0%, 9%)0, transparent 44%);
    background-size: 100%; background-repeat: no-repeat; }
.gradHdrWDV{background: 
    linear-gradient(25deg, hsla(0deg, 0%, 88%, 27%)34%, hsl(0deg, 0%, 83%, 15%) 61%), 
    linear-gradient(-25deg, hsla(0deg, 0%, 76%, 21%)34%, hsla(0deg, 0%, 96%, 10%) 34%), 
    radial-gradient(at 5% 5%, hsla(0deg, 0%, 100%, 9%) 0, hsla(0deg, 0%, 93%, 0%) 50%), 
    radial-gradient(at 69% 69%, hsla(0deg, 0%, 50%, 9%)0, hsla(0deg, 0%, 51%, 0%) 50%), 
    radial-gradient(at 65% 25%, hsla(0deg, 0%, 100%, 9%)0, transparent 55%), radial-gradient(at 84% 65%, hsl(187deg, 65%, 67%, 36%)0, transparent 50%), radial-gradient(at 76% 53%, hsla(0deg, 0%, 0%, 9%)0, transparent 44%);
    background-size: 100%; background-repeat: no-repeat; }
.gradPrj2{background: 
    linear-gradient(25deg, hsla(0deg, 0%, 88%, 27%)34%, hsl(0deg, 0%, 83%, 15%) 61%), 
    linear-gradient(-25deg, hsla(0deg, 0%, 76%, 21%)34%, hsla(0deg, 0%, 96%, 10%) 34%), 
    radial-gradient(at 5% 5%, hsla(0deg, 0%, 100%, 9%) 0, hsla(0deg, 0%, 93%, 0%) 50%),
    radial-gradient(at 69% 69%, hsla(0deg, 0%, 50%, 9%)0, hsla(0deg, 0%, 51%, 0%) 50%), 
    radial-gradient(at 65% 25%, hsla(0deg, 0%, 100%, 9%)0, transparent 55%), radial-gradient(at 84% 65%, hsla(0deg, 0%, 0%, 9%)0, transparent 50%), radial-gradient(at 76% 53%, hsla(0deg, 0%, 0%, 9%)0, transparent 44%); 
    background-size: 100%; background-repeat: no-repeat;}
.aniBgd__{
    color:var(--clrBW90p);
    background-color:var(--clrBW15p);
    background-image: 
    radial-gradient(at 65% 75%, var(--clrBW10p) 0, transparent 100%),radial-gradient(at 65% 42%, var(--clrBW40p) 0, transparent 50%), radial-gradient(at 30% 35%, var(--clrBW05p) 0, transparent 35%), radial-gradient(at 34% 57%, var(--clrBW10p) 0, transparent 50%), radial-gradient(at 76% 53%, var(--clrBW00p) 0, transparent 64%); } 

.xsHidden{display:block}
    @media (max-width: 475px)
        {.xsHidden {display:none} }