html{scroll-behavior:auto}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.asciiBox,header,#alot,#output,.type{will-change:transform,opacity}h1{display:none}.asciiBox table{text-align:center!important}.asciiBox,header{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.big-title{font-size:40vw;color:#c7c7c7;font-weight:900;opacity:calc(1 - var(--t))}.ascii-title{color:#000;font-size:10vh;transform:translateY(5%);opacity:calc(1 - var(--t))}header{z-index:2;display:flex;justify-content:center;align-items:center}header:before,header:after{content:"";position:absolute;width:100%;height:0;background:#000;z-index:3}header:before{top:0;left:0}header:after{bottom:0;right:0;height:0}header:before,body[data-section="1"] header:after,body[data-section="0"] header:after,body[data-section="2"] header:after{height:min(var(--t) * 10vh,10vh)}#space{height:400vh;position:relative}#space>div{position:sticky;left:0;top:0;width:100%;height:100vh;display:flex;align-items:center;padding:2rem}#intro{justify-content:flex-end}#intro div{width:40%;min-width:min(100%,20rem);opacity:min(calc(var(--t) * 2),calc(2 - var(--t)))}.type span{font-size:.5em}.flex-right{text-align:left}td{display:inline}#about{justify-content:center}#about>div{width:100%;max-width:500px}.type{line-height:1.3;font-size:2em;display:inline;background:linear-gradient(#fff,#fff);background-clip:border-box;background-size:0 100%;background-repeat:no-repeat;transition:background-size 2s ease-in;-webkit-background-clip:text;-webkit-text-fill-color:transparent}body[data-section="1"] #intro .type{background-size:100% 100%}#create{opacity:clamp(0,calc((var(--t) - 1.3) * 2),1)}#about{opacity:clamp(0,calc((3 - var(--t)) * 2),1)}#data{opacity:clamp(0,calc((var(--t) - 2.5) * 2),1)}body[data-section="2"] #create{opacity:1}.create{color:transparent;position:relative;font-size:2em;overflow:hidden}.creates{position:absolute;top:0;left:0;width:100%;transition:top .3s,opacity .3s;color:#fff}#data{display:flex;align-items:center;justify-content:center;text-align:center}#data .data-space{width:60vh}.data-container>div:first-child{margin-bottom:2em}.data-number{font-size:min(3.5em,10vw)}.data-title{font-size:min(1em,3vw);font-size:1rem}.data-container{width:13em}.alot{position:relative;height:0}#alot{position:sticky;top:50%;font-size:calc((var(--t) - 3) * 30vw);left:0;z-index:3;white-space:nowrap;transform:translate(calc(max((var(--t) - 3.2),-7)*-20em),calc((max(var(--t),3.65) - 3.65)*100vh));opacity:calc(var(--t) * -2.5 + 10)}body[data-section="5"] #alot{display:none}.asciiBox{transform:translate(calc(max((var(--t) - 3.3),0)*-50vw));opacity:calc(var(--t) * -2.5 + 9.75)}.asciiBox table tbody{font-size:1.1em;transform:translate(-4em)}#earth .type{transition-duration:1s;width:fit-content;font-size:min(2rem,5vw)}.type.typed{background-size:100% 100%}.earth-text{position:sticky;top:40%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}#earth{position:relative;height:100vh;margin-bottom:5rem}#output{filter:grayscale(calc(-3.333*clamp(4.3,var(--t),4.6) + 15.3319));font-family:Consolas,monospace;background-image:radial-gradient(circle farthest-corner at 75% 75%,#000010,#001020,#004030);border-radius:100%;color:#20dc80;font-size:3vmin;line-height:.55em;text-rendering:optimizeSpeed;will-change:contents;white-space:pre;width:fit-content;position:absolute;top:max(0%,calc(100% * var(--t) - 450%));left:50%;transform:translate(max(-50%,calc(100% * var(--t) - 500%)),min(0%,calc(450% - 100% * var(--t))))}canvas{display:none!important}#contact{position:relative;height:100vh;padding:2rem;overflow:hidden}footer{position:absolute;right:2rem;bottom:1.5rem}.contact{width:100%;max-width:1000px;margin:auto;display:flex;align-items:center;height:100%}#contact h2{margin-top:10vh;font-size:min(20vw,4rem)}#contact p{margin-bottom:1.5rem;margin-left:.3rem}.cybr-btn{text-decoration:none;display:inline-block;--primary: #2d2d2d;--shadow-primary: #5e5e5e;--clip: polygon( 0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70% );--border: 4px;--shimmy-distance: 5;--clip-one: polygon( 0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70% );--clip-two: polygon( 0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78% );--clip-three: polygon( 0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54% );--clip-four: polygon( 0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0 );--clip-five: polygon( 0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0 );--clip-six: polygon( 0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70% );--clip-seven: polygon( 0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70% );color:#fff;cursor:pointer;background:transparent;text-transform:uppercase;font-size:1.5rem;outline:transparent;letter-spacing:2px;position:relative;font-weight:700;border:0;padding-inline:2rem;height:4rem;line-height:4rem;transition:background .2s;margin-right:1rem;margin-bottom:1rem}.cybr-btn:hover{--primary: hsl( var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * .8%) )}.cybr-btn:active{--primary: hsl( var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * .6%) )}.cybr-btn:after,.cybr-btn:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;clip-path:var(--clip);z-index:-1}.cybr-btn:before{background:var(--shadow-primary);transform:translate(var(--border))}.cybr-btn:after{background:var(--primary)}.cybr-btn__tag{position:absolute;padding:1px 4px;letter-spacing:1px;line-height:1;bottom:-5%;right:5%;font-weight:400;color:#4a4a4a;font-size:9px}.cybr-btn__glitch{position:absolute;top:calc(var(--border) * -1);left:calc(var(--border) * -1);right:calc(var(--border) * -1);bottom:calc(var(--border) * -1);background:var(--shadow-primary);text-shadow:2px 2px var(--shadow-primary),-2px -2px var(--shadow-secondary);clip-path:var(--clip);animation:glitch 2s infinite;display:none}.cybr-btn:hover .cybr-btn__glitch,a:hover .cybr-btn__glitch{display:block}.cybr-btn__glitch:before{content:"";position:absolute;top:calc(var(--border) * 1);right:calc(var(--border) * 1);bottom:calc(var(--border) * 1);left:calc(var(--border) * 1);clip-path:var(--clip);background:var(--primary);z-index:-1}@keyframes glitch{0%{clip-path:var(--clip-one)}2%,8%{clip-path:var(--clip-two);transform:translate(calc(var(--shimmy-distance) * -1%))}6%{clip-path:var(--clip-two);transform:translate(calc(var(--shimmy-distance) * 1%))}9%{clip-path:var(--clip-two);transform:translate(0)}10%{clip-path:var(--clip-three);transform:translate(calc(var(--shimmy-distance) * 1%))}13%{clip-path:var(--clip-three);transform:translate(0)}14%,21%{clip-path:var(--clip-four);transform:translate(calc(var(--shimmy-distance) * 1%))}25%{clip-path:var(--clip-five);transform:translate(calc(var(--shimmy-distance) * 1%))}30%{clip-path:var(--clip-five);transform:translate(calc(var(--shimmy-distance) * -1%))}35%,45%{clip-path:var(--clip-six);transform:translate(calc(var(--shimmy-distance) * -1%))}40%{clip-path:var(--clip-six);transform:translate(calc(var(--shimmy-distance) * 1%))}50%{clip-path:var(--clip-six);transform:translate(0)}55%{clip-path:var(--clip-seven);transform:translate(calc(var(--shimmy-distance) * 1%))}60%{clip-path:var(--clip-seven);transform:translate(0)}31%,61%,to{clip-path:var(--clip-four)}}.aos{opacity:0;transform:translateY(2rem);transition:all 1s}.aos.ed{opacity:1;transform:translateY(0)}main{position:relative;z-index:2}@media (max-width: 65rem){#output{z-index:-1}#data{justify-content:space-around}.data-space{display:none}.asciiBox{color:#ccc!important}}@media (max-width: 30rem){.big-title{font-size:40vw;text-shadow:0 0 20px rgba(255,255,255,.3),0 0 40px rgba(255,255,255,.2)}.type{text-shadow:0 2px 10px rgba(0,0,0,.8),0 0 20px rgba(255,255,255,.3);font-weight:600}#data{flex-direction:column;justify-content:center;gap:2rem;z-index:100;position:relative}.data-number{font-size:3rem;text-shadow:0 2px 15px rgba(0,0,0,.9),0 0 30px rgba(255,255,255,.4);font-weight:700}.data-title{text-shadow:0 2px 10px rgba(0,0,0,.8);font-weight:500}.cybr-btn{font-size:1.2rem}#contact p{margin-bottom:3rem}#contact h2{text-shadow:0 2px 20px rgba(0,0,0,.9),0 0 40px rgba(255,255,255,.3)}}
