: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%);/*444*/ --clrBW30p:hsl(0,0%,30%); --clrBW35p:hsl(0,0%,35%);/*555*/ --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%);/*999*/ --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%);/*ddd*/ --clrBW90p:hsl(0,0%,90%); --clrBW95p:hsl(0,0%,95%); --clrBW100p:hsl(0,0%,100%); /*greenish*/ --clrGRN02p: hsl(130,50%,2%); --clrGRN03p: hsl(130,50%,3%); --clrGRN04p: hsl(130,50%,4%); --clrGRN05p: hsl(130,50%,5%); --clrGRN06p: hsl(130,50%,6%); --clrGRN07p: hsl(130,50%,7%); --clrGRN08p: hsl(130,50%,8%); --clrGRN09p: hsl(130,50%,9%); --clrGRN10p: hsl(130,50%,10%); --clrGRN11p: hsl(130,50%,11%); --clrGRN13p: hsl(130,50%,13%); --clrGRN15p: hsl(130,50%,15%); --clrGRN17p: hsl(130,50%,17%); /* category colors*/ --clrUX:hsl(99, 41%, 27%); --clrUI:hsl(29, 43%, 57%); --clrDV:hsl(335, 35%, 59%); --clrDC:hsl(58, 36%, 69%); --clrLUX:hsl(182, 33%, 45%); --clrWD:hsl(206, 56%, 37%); --clrID:hsl(60, 11%, 39%); /*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%); } html,body{width:100%;height:100vh;color:var(--clrBW95p);background:var(--clrBW00p);font-smooth:auto;-webkit-font-smoothing: antialiased;font-family: 'Courier New', Courier, monospace;} /*font*/ .text-base{font-size:1.1rem !important} .smoothMe{font-smooth:auto;-webkit-font-smoothing: antialiased} .fauxSelected{ background:var(--clrBW05p);padding:2px 3px} .cursor-default, .cursDef{cursor: default !important} /*layout*/ section{clear:both} .container_{max-width:1280px !important} .aspect-square {aspect-ratio: 1/1;} button{color:#ededed} /*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)} /*.txtShwXX:hover{text-shadow:6px 0px var(--clrBW50p)}*/ /*SVG */ .sto, .stowh{width:100% !important;height:100% !important;} .containerSvg{max-height:100vh;background:url('../img/me_03_03.png') center / contain no-repeat, radial-gradient(at 85% 55%,hsla(0,0%,95%,0.35) 0,transparent 30%), radial-gradient(at 10% 10%,hsla(99,41%,27%,0.45) 0,transparent 40%), radial-gradient(at 25% 25%,hsla(335,35%,59%,0.45) 0,transparent 30%), radial-gradient(at 57% 23%,hsla(29,43%,57%,0.45) 0,transparent 30%), radial-gradient(at 55% 60%,hsla(182,33%,45%,0.45) 0,transparent 24%), radial-gradient(at 60% 65%,hsla(206,56%,37%,0.3) 0,transparent 25%), radial-gradient(at 34% 70%,hsla(60,11%,39%,0.4) 0,transparent 40%), radial-gradient(at 60% 75%,hsla(0,0%,95%,0.3) 0,transparent 45%) ;} @media (max-width:414px) {.containerSvg{background:none}} /* .containerSvg__++ {max-height:100vh;background:url('../img/me_03_03.png') center / contain no-repeat, radial-gradient(at 65% 75%,#171717 0,transparent 100%), radial-gradient(at 65% 42%,rgba(142, 105, 146, 0.909)0,transparent 50%), radial-gradient(at 30% 35%,rgba(115, 100, 133, 0.884)0,transparent 35%), radial-gradient(at 34% 57%,rgba(144, 138, 90, 0.89)0,transparent 90%), radial-gradient(at 76% 53%,rgba(96, 154, 147, 0.901)0,transparent 94%);} */ desc{visibility: visible !important} g{display: block !important} svg > title {font-weight: bolder !important;visibility: visible !important} svg .svgHover:hover {filter: invert(10) contrast(10) hue-rotate(90deg); opacity:1 } svg .svgHover:hover:not(text) {filter: none; opacity:1 } /*logo*/ .contentLogo, .contentLogoWht{color:var(--clrBW95p);/*letter-spacing: 0.3rem*/} .contentLogo :nth-child(1){color:var(--clrBW13p)} .contentLogo :nth-child(2){color:var(--clrBW20p)} .contentLogo :nth-child(3){color:var(--clrBW35p)} .contentLogo :nth-child(4){color:var(--clrBW55p)} .contentLogo :nth-child(5){color:var(--clrBW70p)} .contentLogo :nth-child(6){color:var(--clrBW85p)} .contentLogo :nth-child(7){color:var(--clrBW100p)} .contentLogoWht :nth-child(1){color:var(--clrBW00p)} .contentLogoWht :nth-child(2){color:var(--clrBW15p)} .contentLogoWht :nth-child(3){color:var(--clrBW30p)} .contentLogoWht :nth-child(4){color:var(--clrBW45p)} .contentLogoWht :nth-child(5){color:var(--clrBW60p)} .contentLogoWht :nth-child(6){color:var(--clrBW75p)} .contentLogoWht :nth-child(7){color:var(--clrBW85p)} .sqr1nth{stroke:#0E0E0D;} .sqr2nth{stroke:#262626} .sqr3nth{stroke:#4C4C4C} .sqr4nth{stroke:#727272} .sqr5nth{stroke:#9B9B9B} .sqr6nth{stroke:#C4C4C4} .sqr7nth{stroke:#F2F2F2} /*bgd grad*/ .aniBgd{background: 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%);} .aniBgdBlck{background:linear-gradient(var(--clrBW06p),var(--clrBW00p))} .boxBgdAbt{box-shadow: 0 5px hsl(0,0%,5%), 0 10px hsl(0,0%,8%), 0 15px hsl(0,0%,11%), 0 20px hsl(0,0%,14%), 0 25px hsl(0,0%,17%), 0 30px hsl(0,0%,20%), 0 35px hsl(0,0%,23%); } .boxUxBgd{ /* background:var(--clrGR02p); -> final delete */ box-shadow: 0 5px hsl(130,50%,4%), 0 10px hsl(130,50%,5.5%), 0 15px hsl(130,50%,7%), 0 20px hsl(130,50%,8.5%), 0 25px hsl(130,50%,10%), 0 30px hsl(130,50%,11.5%), 0 35px hsl(130,50%,13%) } .gradUx{ /* background-color:hsl(130,50%,5%); */ background: radial-gradient(at 65% 75%,hsl(130,50%,5%) 0,transparent 100%), radial-gradient(at 65% 42%,hsl(130,50%,25%)0,transparent 40%), radial-gradient(at 30% 35%,hsl(121, 51%, 19%)0,transparent 35%), radial-gradient(at 34% 57%,hsl(130,50%,11%)0,transparent 50%), radial-gradient(at 76% 53%,hsl(130,50%,13%)0,transparent 64%); left:0;top:0;position:relative;width:100%;height:auto;} .gradLux{/*background-color:hsl(182,33%,5%);*/ background:radial-gradient(at 65% 75%,hsl(182,33%,1%) 0,transparent 100%), radial-gradient(at 65% 42%,hsl(182,33%,25%)0,transparent 40%), radial-gradient(at 30% 35%,hsl(182,33%,19%)0,transparent 35%), radial-gradient(at 34% 57%,hsl(182,33%,11%)0,transparent 50%), radial-gradient(at 76% 53%,hsl(182,33%,13%)0,transparent 64%); left:0;top:0;position:relative;width:100%;height:auto;} .gradDv{/*background-color:hsl(335,35%,5%);*/ background:radial-gradient(at 65% 75%,hsl(335,35%,1%) 0,transparent 100%), radial-gradient(at 65% 42%,hsl(335,35%,25%)0,transparent 40%), radial-gradient(at 30% 35%,hsl(335,35%,19%)0,transparent 35%), radial-gradient(at 34% 57%,hsl(335,35%,11%)0,transparent 50%), radial-gradient(at 76% 53%,hsl(335,35%,13%)0,transparent 64%); left:0;top:0;position:relative;width:100%;height:auto;} .gradDc{/*background-color:hsl(58,36%,5%);*/ background:radial-gradient(at 65% 75%,hsl(58,36%,0.15%) 0,transparent 150%), radial-gradient(at 65% 42%,hsl(58,36%,25%)0,transparent 40%), radial-gradient(at 30% 35%,hsl(58,36%,19%)0,transparent 35%), radial-gradient(at 34% 57%,hsl(58,36%,11%)0,transparent 50%), radial-gradient(at 76% 53%,hsl(58,36%,13%)0,transparent 64%); left:0;top:0;position:relative;width:100%;height:auto;} .gradBx{background: radial-gradient(at 65% 75%,#171717 0,transparent 100%), radial-gradient(at 65% 42%,rgba(255,200,0,.7)0,transparent 50%), radial-gradient(at 30% 35%,rgba(245,61,76,.7)0,transparent 35%), radial-gradient(at 34% 57%,rgb(255 0 95 / 70%)0,transparent 50%), radial-gradient(at 76% 53%,rgb(5 0 255 / 70%)0,transparent 64%); left:0;top:0;position:relative;width:100%;height:auto;} .gradCx{background: radial-gradient(at 65% 75%,#171717 0,transparent 100%), radial-gradient(at 65% 42%,rgba(142, 105, 146, 0.909)0,transparent 50%), radial-gradient(at 30% 35%,rgba(115, 100, 133, 0.884)0,transparent 35%), radial-gradient(at 34% 57%,rgba(144, 138, 90, 0.89)0,transparent 50%), radial-gradient(at 76% 53%,rgba(96, 154, 147, 0.901)0,transparent 64%); left:0;top:0;position:relative;width:100%;height:auto;}/*NiU*/ .gradDx{background-color: rgb(34,34,34); background-image: radial-gradient(circle, rgba(34,34,34,1) 0%, rgba(0,0,0,1) 100%);} .gradEx{ background-color: rgb(34,34,34); background-image: radial-gradient(circle, rgba(30,30,30,0.85) 0%, rgba(0,0,0,0.91) 100%)} .gradient{background-color:#171717; background-image:radial-gradient(at 65% 75%,#171717 0,transparent 100%), radial-gradient(at 65% 42%,rgba(255,200,0,.7)0,transparent 50%), radial-gradient(at 30% 35%,rgba(245,61,76,.7)0,transparent 35%), radial-gradient(at 34% 57%,rgba(234,0,255,.7)0,transparent 50%), radial-gradient(at 76% 53%,rgba(89,0,255,.7)0,transparent 64%); left:0;top:0;position:relative;width:100%;height:auto;} /*NiU*/ .boxDCBgd{box-shadow: 0 5px hsl(55,100%,4%), 0 10px hsl(55,100%,5.5%), 0 15px hsl(55,100%,7%), 0 20px hsl(55,100%,8.5%), 0 25px hsl(55,100%,10%), 0 30px hsl(55,100%,11.5%), 0 35px hsl(55,100%,13.5%); } /* yellow e7df03 / hsl(58, 97%, 46%) */ .boxWDBgd { background: linear-gradient(45deg, hsl(205,80%,13.5%) 4% 5%, hsl(205,80%,11.5%) 4% 7%, hsl(205,80%,10%) 4% 9%, hsl(205,80%,8.5%) 4% 11%, hsl(205,80%,7%) 4% 13%, hsl(205,80%,5.5%) 4% 15%, hsl(205,80%,4%) 4% 17%, hsl(205,80%,4%) 4% 19% ); box-shadow: 0 5px hsl(205,80%,4%), 0 10px hsl(205,80%,5.5%), 0 15px hsl(205,80%,7%), 0 20px hsl(205,80%,8.5%), 0 25px hsl(205,80%,10%), 0 30px hsl(205,80%,11.5%), 0 35px hsl(205,80%,13.5%); } /* 2693e7 / hsl(206, 80%, 53%) */ .boxIDBgd{ background:hsl(60,60%,4%) linear-gradient(45deg, hsl(60,60%,13.5%) 3% 4%, hsl(60,60%,11.5%) 3% 6%, hsl(60,60%,10%) 3% 8%, hsl(60,60%,8.5%) 3% 10%, hsl(60,60%,7%) 3% 12%, hsl(60,60%,5.5%) 3% 14%, hsl(60,60%,4%) 3% 17% ); box-shadow: 0 5px hsl(60,60%,4%), 0 10px hsl(60,60%,5.5%), 0 15px hsl(60,60%,7%), 0 20px hsl(60,60%,8.5%), 0 25px hsl(60,60%,10%), 0 30px hsl(60,60%,11.5%), 0 35px hsl(60,60%,13.5%); } .boxLXBgd{box-shadow: 0 5px hsl(180,80%,4%), 0 10px hsl(180,80%,5.5%), 0 15px hsl(180,80%,7%), 0 20px hsl(180,80%,8.5%), 0 25px hsl(180,80%,10%), 0 30px hsl(180,80%,11.5%), 0 35px hsl(180,80%,13.5%); } /* e5e3a0 / */ .boxUiBgd{box-shadow: 0 5px hsl(30,75%,5%), 0 10px hsl(30,75%,7%), 0 15px hsl(30,75%,9%), 0 20px hsl(30,75%,11%), 0 25px hsl(30,75%,13%), 0 30px hsl(30,75%,15%), 0 35px hsl(30,75%,17%); } .boxDevBgd{box-shadow: 0 5px hsl(325,75%,4%), 0 10px hsl(325,75%,5.5%), 0 15px hsl(325,75%,7%), 0 20px hsl(325,75%,8.5%), 0 25px hsl(325,75%,10%), 0 30px hsl(325,75%,11.5%), 0 35px hsl(325,75%,13%); } /* 5 */ .leanUx5_01, .leanUx5_02, .leanUx5_03, .leanUx5_04, .leanUx5_05 { padding: 5%; position: relative} .leanUx5_01:after, .leanUx5_02:after, .leanUx5_03:after, .leanUx5_04:after, .leanUx5_05:after {display:none;bottom:0;left:80%;position:absolute;font-size:200%;} .leanUx5_01 {background:var(--clrBW10p)} .leanUx5_01:after{content:"1";} .leanUx5_02 {background:var(--clrBW25p)} .leanUx5_02:after{content:"2";} .leanUx5_03 {background:var(--clrBW50p);color:var(--clrBW15p)} .leanUx5_03:after{content:"3";} .leanUx5_04 {background:var(--clrBW75p);color:var(--clrBW10p)} .leanUx5_04:after{content:"4";} .leanUx5_05 {background:var(--clrBW90p);color:var(--clrBW00p)} .leanUx5_05:after{content:"5";} .gs_reveal{opacity:0;visibility:hidden;will-change:transform,opacity;} /*ani*/ .bg,.bgd,.bgdStat{position:absolute;top:0;left:0;width:100%;height:100%;z-index__:-1;background-attachment:fixed; background-repeat:repeat;background-size__:cover;background-position:top left;} /*parallax*/ .bgdStat{background-image: url(http://localhost/gs3318_01/theme/Alexx/img/alexx-enterprises-bgd_09.webp), radial-gradient(at 65% 75%,#171717 0,transparent 50%), radial-gradient(at 65% 42%,rgba(255,200,0,.7)0,transparent 30%), radial-gradient(at 30% 35%,rgba(245,61,76,.5)0,transparent 15%), radial-gradient(at 34% 57%,rgb(255 0 95 / 50%)0,transparent 30%), radial-gradient(at 76% 53%,rgb(5 0 255 / 80%)0,transparent 50%) } .bgdStatID{background-image: url(http://localhost/gs3318_01/theme/Alexx/img/alexx-small-companies-bgd_05_01.webp), radial-gradient(at 65% 75%,#171717 0,transparent 50%), radial-gradient(at 76% 53%,rgb(5 0 255 / 80%)0,transparent 50%), radial-gradient(at 65% 42%,rgba(255,200,0,.7)0,transparent 30%), radial-gradient(at 30% 35%,rgba(245,61,76,.7)0,transparent 15%), radial-gradient(at 34% 57%,rgb(255 0 95 / 70%)0,transparent 30%) } /* @media (min-width:640px) { .bgdStat{background-image: url(http://localhost/gs3318_01/theme/Alexx/img/alexx-enterprises-bgd_09.webp)}; .bgdStatID{background-image: url(http://localhost/gs3318_01/theme/Alexx/img/alexx-small-companies-bgd_05_01.webp)}; } */ .rotated{transform:rotate(180deg);display:inline-block;} .ent01,.ent02,.ent03,.ent04,.ent05, .entP01,.entP02,.entP03,.entP04,.entP05{transition:.3s ease-in-out;} .ent01:hover,.ent02:hover,.ent03:hover,.ent04:hover,.ent05:hover, .entP01:hover,.entP02:hover,.entP03:hover,.entP04:hover,.entP05:hover {background:#eee;color:#222;padding_:0.25rem;transition:.3s ease-in-out;text-shadow:0 1px #ccc} .ent01:hover::after,.ent02:hover::after,.ent03:hover::after,.ent04:hover::after,.ent05:hover::after, .entP01:hover::after,.entP02:hover::after,.entP03:hover::after,.entP04:hover::after,.entP05:hover::after{position:absolute;display:inline-block;bottom:15%;left:auto;right:25%;background:#000;width:auto;color:#fff;padding:2px 0.5rem;transition:.3s ease-in-out;} .ent01:hover::after{content:"User Experience";} .ent02:hover::after{content:"User Interface";} .ent03:hover::after{content:"Lean User Experience";} .ent04:hover::after{content:"Web Development";} .ent05:hover::after{content:"Design & Code System";} .entP01:hover::after{content:"Projects Enterprises";} .entP02:hover::after{content:"Projects Government";} .entP03:hover::after{content:"Projects Publishers";} .entP04:hover::after{content:"Projects Midsized";} .entP05:hover::after{content:"Projects Smaller";}