::selection{background:#0c0c0c;color:#fff}:root{--p-grid:4rem}body{margin:0;padding:0;background:#fff;color:#0c0c0c;cursor:url(crosshair-sm.png),auto}body.loading aside{right:0}aside{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;background:#0c0c0c;color:#fff;overflow:hidden;position:absolute;padding:var(--p-grid);top:0;left:0;right:61.8%;bottom:0;z-index:2;transition:all 1s cubic-bezier(.075, .82, .165, 1)}aside nav{position:fixed;top:0;left:0;right:61.8%;padding:var(--p-grid);background:#0c0c0c;display:flex}aside nav a{color:#fff;border-color:#fff}aside nav a::after{background:#fff}aside nav a:hover{border-color:#fff;color:#0c0c0c}section{flex:1.68;padding:var(--p-grid);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;position:absolute;left:38.2%;top:0;right:0;bottom:0;overflow:auto}section h1.header-anim{font-size:clamp(1.5em, 4vw, 5em);margin:0}section h1.header-anim strong{font-weight:normal}section h1.header-anim strong span{background:#0c0c0c;color:#fff;opacity:0}section h1.header-anim strong span.fade{opacity:1}a{text-decoration:none;color:#0c0c0c;position:relative;padding:.5em 1em;border:1px solid;border-color:#0c0c0c;transition:color .1s ease-in-out;cursor:url(crosshair-sm.png),auto}a:after{content:"";position:absolute;height:100%;background:#0c0c0c;bottom:0;left:0;right:100%;z-index:-1;transition:right .1s ease-in-out}a:hover{color:#fff;border-color:#0c0c0c}a:hover:after{right:0}.logo{display:flex}.logo svg{height:3rem;fill:#0c0c0c}.logo span{font-size:2rem;line-height:.95;margin-left:1rem;font-family:"Butler",serif;font-weight:normal;text-rendering:optimizeLegibility}.logo span small{display:block;font-size:60%}.anim{display:block;width:33.8vw;height:33.8vw;position:relative;align-self:center}.anim span{display:block;width:5vw;height:5vw;left:10vw;position:absolute;border-radius:50%;background:#fff;transition:all 1s cubic-bezier(.075, .82, .165, 1);transform-origin:center;transform-style:flat;transform-box:initial;will-change:top,left,right,bottom,width,height,transform,border-radius}.anim span.anim-square{top:10vw}.anim span.anim-circle,.anim span.anim-triangle,.anim span.anim-base{top:17.5vw;transform:scale(1.5) translate3d(15%, 0, 0)}.anim span:not(:last-child){z-index:2}.anim span.anim-triangle{border-radius:0;background:transparent;width:0;height:0;border-style:solid;border-width:0 2.5vw 5vw 2.5vw;border-color:transparent transparent #0c0c0c transparent;z-index:1;opacity:0}.anim.websites span:not(:last-child){top:50%;left:50%;background:#0c0c0c}.anim.websites span.anim-square{transform:translate3d(-150%, -50%, 0) scale(.5) rotate(180deg);border-radius:0}.anim.websites span.anim-circle{transform:translate3d(-50%, -50%, 0) scale(.5)}.anim.websites span.anim-triangle{transform:translate3d(50%, -50%, 0) scale(.5);background:transparent;opacity:1}.anim.websites span.anim-base{width:20vw;height:15vw;top:calc(50% - 7.5vw);left:calc(50% - 15vw);border-radius:1vw}.anim.apps span:not(:last-child){top:50%;left:50%;background:#0c0c0c}.anim.apps span.anim-square{transform:translate3d(-50%, -150%, 0) scale(.5) rotate(0);border-radius:0}.anim.apps span.anim-circle{transform:translate3d(-50%, -50%, 0) scale(.5)}.anim.apps span.anim-base{width:12.5vw;height:20vw;top:calc(50% - 10vw);left:calc(50% - 9vw);border-radius:1vw}.anim.apps span.anim-triangle{transform:translate3d(-50%, 50%, 0) scale(.5) rotate(180deg);background:transparent;opacity:1}.anim.icons span:not(:last-child){top:50%;left:50%;background:#0c0c0c}.anim.icons span.anim-square{transform:translate3d(-50%, -50%, 0) scale(1.25) rotate(180deg);border-radius:0}.anim.icons span.anim-circle{transform:translate3d(-50%, -50%, 0) scale(1);background:#fff}.anim.icons span.anim-triangle{transform:translate3d(-50%, -55%, 0) scale(.6) rotate(0);background:transparent;z-index:3;opacity:1}.anim.icons span.anim-base{width:10vw;height:10vw;top:calc(50% - 5vw);left:calc(50% - 7.5vw);border-radius:2vw}.anim.logos span:not(:last-child){top:50%;left:50%;background:#0c0c0c}.anim.logos span.anim-square{transform:translate3d(-50%, -50%, 0) scale(1.75) rotate(180deg);border-radius:0;background:#fff}.anim.logos span.anim-circle{transform:translate3d(-50%, -50%, 0) scale(1.5)}.anim.logos span.anim-triangle{transform:translate3d(-50%, -55%, 0) scale(1) rotate(0);background:transparent;z-index:3;opacity:1;border-color:transparent transparent #fff transparent}.anim.logos span.anim-base{width:5vw;height:5vw;top:calc(50% - 2.5vw);left:calc(50% - 4vw);border-radius:0}.anim.experience{animation:2s heartBeat cubic-bezier(.075, .82, .165, 1) infinite}.anim.experience span{top:50%;left:50%;background:#fff}.anim.experience span.anim-square{transform:translate3d(0, -100%, 0) scale(1.2)}.anim.experience span.anim-circle,.anim.experience span.anim-base{transform:translate3d(-100%, -100%, 0) scale(1.2)}.anim.experience span.anim-triangle{transform:translate3d(-50%, -16%, 0) scale(2, 1) rotate(180deg);background:transparent;z-index:3;opacity:1;border-color:transparent transparent #fff transparent}.anim.bold span.anim-triangle{transform:translate3d(0, -16%, 0) scale(.25) rotate(180deg);opacity:1;border-color:transparent transparent #fff transparent}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.05)}28%{transform:scale(1)}42%{transform:scale(1.05)}70%{transform:scale(1)}}@media (max-width:769px){:root{--p-grid:2rem}body.loading aside{bottom:0}aside{right:0;bottom:50%}aside nav{right:0}section{top:50%;left:0;bottom:auto}section h1{font-size:clamp(1.5em, 6vw, 5em)}.logo{position:fixed;top:2rem;z-index:2;color:#fff}.logo svg{fill:#fff}}@media (max-width:601px){aside{bottom:38.2%;padding-top:7rem}section{top:61.8%}section h1 strong{display:block;font-size:1.5em}.anim{width:calc(33.8vw * 2);height:calc(33.8vw * 2)}.anim span{width:calc(5vw * 2);height:calc(5vw * 2);left:calc(10vw * 2)}.anim span.anim-circle,.anim span.anim-triangle,.anim span.anim-base{top:calc(17.5vw * 2)}.anim span:not(:last-child){z-index:2}.anim span.anim-square{top:calc(10vw * 2)}.anim span.anim-triangle{border-width:0 5vw 10vw 5vw}.anim.websites span.anim-base{width:calc(20vw * 2);height:calc(15vw * 2);border-radius:2vw;top:calc(50% - 15vw);left:calc(50% - 28vw)}.anim.apps span.anim-base{width:calc(12.5vw * 2);height:calc(20vw * 2);border-radius:2vw;top:calc(50% - 20vw);left:calc(50% - 18vw)}.anim.icons span.anim-base{width:calc(12.5vw * 2);height:calc(12.5vw * 2);border-radius:4vw;top:calc(50% - 12vw);left:calc(50% - 18vw)}.anim.logos span.anim-base{width:calc(6vw * 2);height:calc(6vw * 2);top:calc(50% - 6vw);left:calc(50% - 8vw)}.anim.experience span{top:calc(17.5vw * 2)}.anim.experience span.anim-base{opacity:0}}