*,*:before,*:after{box-sizing:border-box}body{margin:0;background-color:#001219;color:#e9d8a6}main{position:relative;height:100svh;scroll-snap-type:y mandatory;scroll-behavior:smooth}.screen{position:relative;height:100svh;display:grid;place-content:center;background-color:#001219;color:#e9d8a6;scroll-snap-align:start}.container{position:relative;width:20vmin;min-width:100px;aspect-ratio:1.618;animation:scaleup .5s 2s forwards;pointer-events:none}.navigator{position:fixed;bottom:1rem;right:2rem;z-index:1;display:flex;flex-wrap:wrap;gap:2px;width:15vmin;aspect-ratio:1.618;transition:bottom .25s ease-in}.navigator.hide{bottom:-20vmin}.navigator-item{position:relative;width:calc(25% - 2px);height:calc(50% - 2px);border-color:transparent;border-style:solid;border-width:.1rem;overflow:hidden;transition:all .75s cubic-bezier(.75,0,.25,1),border .25s ease;border-radius:5px}.navigator-item.active{border-color:#001219}@keyframes scaleup{to{pointer-events:all;width:80vmin}}.my-fuckin-name{position:absolute;font-size:2vmin;text-transform:uppercase;padding:.2rem;bottom:-4vmin;right:0;cursor:pointer;transform:translateY(-100%);opacity:0;animation:show .5s 2.5s forwards;text-decoration:none;color:inherit}@keyframes show{to{transform:translateY(0);opacity:1}}.my-fuckin-name:before{content:"";position:absolute;margin-inline:4px;bottom:.1rem;left:0;width:calc(100% - 8px);height:.1rem;transform-origin:0;background-color:#e9d8a6;transition:transform .25s ease}.my-fuckin-name:hover:before{transform:scaleX(0);transform-origin:100%}.shape{position:absolute;width:25%;height:50%;border-color:#001219;border-style:solid;border-width:3.3333333333px;overflow:hidden;transition:all .5s cubic-bezier(.75,0,.25,1),border .25s ease}.shape-1{opacity:0;transform:translateY(-100%);animation:top-fade-in .5s .6s forwards}.shape-8{opacity:0;transform:translateY(100%);animation:bottom-fade-in .5s 1s forwards}.shape-2{opacity:0;transform:translateY(-100%);animation:top-fade-in .5s .7s forwards}.shape-7{opacity:0;transform:translateY(100%);animation:bottom-fade-in .5s 1.1s forwards}.shape-3{opacity:0;transform:translateY(-100%);animation:top-fade-in .5s .8s forwards}.shape-6{opacity:0;transform:translateY(100%);animation:bottom-fade-in .5s 1.2s forwards}.shape-4{opacity:0;transform:translateY(-100%);animation:top-fade-in .5s .9s forwards}.shape-5{opacity:0;transform:translateY(100%);animation:bottom-fade-in .5s 1.3s forwards}@keyframes top-fade-in{to{transform:translateY(0);opacity:1}}@keyframes bottom-fade-in{to{transform:translateY(0);opacity:1}}.shape-1,.color-1{background-color:#ae2012}.grey-1{background-color:#111;transition:background-color .25s ease-in}.grey-1.active{background-color:#ae2012}.shape-2,.color-2{background-color:#bb3e03}.grey-2{background-color:#222;transition:background-color .25s ease-in}.grey-2.active{background-color:#bb3e03}.shape-3,.color-3{background-color:#ca6702}.grey-3{background-color:#333;transition:background-color .25s ease-in}.grey-3.active{background-color:#ca6702}.shape-4,.color-4{background-color:#ee9b00}.grey-4{background-color:#444;transition:background-color .25s ease-in}.grey-4.active{background-color:#ee9b00}.shape-5,.color-5{background-color:#e9d8a6}.grey-5{background-color:#555;transition:background-color .25s ease-in}.grey-5.active{background-color:#e9d8a6}.shape-6,.color-6{background-color:#94d2bd}.grey-6{background-color:#666;transition:background-color .25s ease-in}.grey-6.active{background-color:#94d2bd}.shape-7,.color-7{background-color:#0a9396}.grey-7{background-color:#777;transition:background-color .25s ease-in}.grey-7.active{background-color:#0a9396}.shape-8,.color-8{background-color:#005f73}.grey-8{background-color:#888;transition:background-color .25s ease-in}.grey-8.active{background-color:#005f73}.container.config-1 .shape{height:50%}.container.config-1 .shape-1{top:0;left:0%}.container.config-1 .shape-2{top:0;left:25%}.container.config-1 .shape-3{top:0;left:50%}.container.config-1 .shape-4{top:0;left:75%}.container.config-1 .shape-5{top:50%;left:0%}.container.config-1 .shape-6{top:50%;left:25%}.container.config-1 .shape-7{top:50%;left:50%}.container.config-1 .shape-8{top:50%;left:75%}.container:is(.config-2,.config-3,.config-4) .shape-1{height:100%}.container:is(.config-2,.config-3,.config-4) .shape-2{top:50%;left:50%}.container:is(.config-2,.config-3,.config-4) .shape-3{top:25%;left:25%}.container:is(.config-2,.config-3,.config-4) .shape-4{height:25%;top:75%;left:75%}.container:is(.config-2,.config-3,.config-4) .shape-5{height:25%;top:25%;left:50%}.container:is(.config-2,.config-3,.config-4) .shape-6{width:50%;height:25%;top:0;left:25%}.container:is(.config-2,.config-3,.config-4) .shape-7{height:25%;top:75%;left:25%}.container:is(.config-2,.config-3,.config-4) .shape-8{height:75%;top:0;left:75%}.container.config-3 .shape{border-radius:10rem}.container.config-4 .shape-1{border-radius:10rem 0 0 10rem}.container.config-4 .shape-2{border-radius:0 0 10rem 10rem}.container.config-4 .shape-3{border-radius:10rem 10rem 0 0}.container.config-4 .shape-4{border-radius:10rem 0}.container.config-4 .shape-5{border-radius:10rem 10rem 0 0}.container.config-4 .shape-6{border-radius:0 10rem 10rem}.container.config-4 .shape-7{border-radius:0 0 10rem 10rem}.container.config-4 .shape-8{border-radius:0 10rem}.container.config-5 .shape-1{top:0;width:12.5%;height:100%;border-radius:10rem;left:0%}.container.config-5 .shape-2{top:0;width:12.5%;height:100%;border-radius:10rem;left:12.5%}.container.config-5 .shape-3{top:0;width:12.5%;height:100%;border-radius:10rem;left:25%}.container.config-5 .shape-4{top:0;width:12.5%;height:100%;border-radius:10rem;left:37.5%}.container.config-5 .shape-5{top:0;width:12.5%;height:100%;border-radius:10rem;left:50%}.container.config-5 .shape-6{top:0;width:12.5%;height:100%;border-radius:10rem;left:62.5%}.container.config-5 .shape-7{top:0;width:12.5%;height:100%;border-radius:10rem;left:75%}.container.config-5 .shape-8{top:0;width:12.5%;height:100%;border-radius:10rem;left:87.5%}.my-fuckin-name:is(:hover,:focus)~.shape,.shape:is(:hover,:focus){border:20px double #001219;cursor:pointer}.shape:focus{border-color:#001219;outline:none}.letter:before,.letter:after{content:"";border-width:0;border-color:#001219;border-style:solid;position:absolute;background-color:inherit;transition:all .25s ease}.letter:focus:after,.letter:focus:before{border-color:#001219}.s:before,.s:after{width:calc(50% - 5px);height:33.3%}.s:before{top:0;right:0}.s:after{bottom:0;left:0}.my-fuckin-name:is(:hover,:focus)~.s.shape:before{border-bottom-width:7.5px}.shape.s:is(:hover,:focus):before{border-bottom-width:7.5px}.navigator-item.s:is(:hover,:focus):before{border-bottom-width:.1rem}.navigator-item.s:before,.navigator-item.s:after{width:calc(50% - .05rem)}.s.active:before{border-bottom-width:.1rem}.my-fuckin-name:is(:hover,:focus)~.s.shape:after{border-top-width:7.5px}.shape.s:is(:hover,:focus):after{border-top-width:7.5px}.navigator-item.s:is(:hover,:focus):after{border-top-width:.1rem}.s.active:after{border-top-width:.1rem}.config-4 .my-fuckin-name:is(:hover,:focus)~.shape,.config-4 .shape:is(:hover,:focus){border-style:solid;border-width:10px}.config-4 .my-fuckin-name~.shape-1:before,.config-4 .shape-1:before{clip-path:ellipse(100% 50% at 100% 100%)}.config-4 .my-fuckin-name~.shape-1:after,.config-4 .shape-1:after{clip-path:ellipse(100% 20% at 100% 0)}.shape.a:before,.shape.a:after{width:calc(50% + 3.75px)}.navigator-item.a:before,.navigator-item.a:after{width:calc(50% + .05rem)}.a:before{height:25%;top:25%;left:0}.a:after{height:33.3%;bottom:0;left:0}.my-fuckin-name:is(:hover,:focus)~.a.shape:before,.my-fuckin-name:is(:hover,:focus)~.a.shape:after{border-right-width:7.5px}.shape.a:is(:hover,:focus):before,.shape.a:is(:hover,:focus):after{border-right-width:7.5px}.navigator-item.a:is(:hover,:focus):before,.navigator-item.a:is(:hover,:focus):after{border-right-width:.1rem}.a.active:before,.a.active:after{border-right-width:.1rem}.l-1:before,.l-2:before{height:66%;top:0;right:0}.shape.l-1:before,.shape.l-2:before{width:calc(50% + 3.75px)}.navigator-item.l-1:before,.navigator-item.l-2:before{width:calc(50% + .05rem)}.my-fuckin-name:is(:hover,:focus)~:is(.l-1,.l-2).shape:before{border-left-width:7.5px;border-bottom-width:7.5px}.shape.l-1:is(:hover,:focus):before,.shape.l-2:is(:hover,:focus):before{border-left-width:7.5px;border-bottom-width:7.5px}.navigator-item.l-1:is(:hover,:focus):before,.navigator-item.l-2:is(:hover,:focus):before{border-left-width:.1rem;border-bottom-width:.1rem}.l-1.active:before,.l-2.active:before{border-left-width:.1rem;border-bottom-width:.1rem}.config-4 .my-fuckin-name~.shape-4:before,.config-4 .shape-4:before{clip-path:ellipse(70% 95% at 0 100%)}.o-1:before,.o-2:before{height:50%;top:25%;right:0}.shape.o-1:before,.shape.o-2:before{width:calc(50% + 3.75px)}.navigator-item.o-1:before,.navigator-item.o-2:before{width:calc(50% + .05rem)}.my-fuckin-name:is(:hover,:focus)~:is(.o-1,.o-2).shape:before{border-left-width:7.5px}.shape.o-1:is(:hover,:focus):before,.shape.o-2:is(:hover,:focus):before{border-left-width:7.5px}.navigator-item.o-1:is(:hover,:focus):before,.navigator-item.o-2:is(:hover,:focus):before{border-left-width:.1rem}.o-1.active:before,.o-2.active:before{border-left-width:.1rem}.m:before{width:calc(33.3% + 1px);height:66.6%;bottom:0;right:33.3%}.my-fuckin-name:is(:hover,:focus)~.m.shape:before{border-width:0 7.5px}.shape.m:is(:hover,:focus):before{border-width:0 7.5px}.navigator-item.m:is(:hover,:focus):before{border-width:0 .1rem}.navigator-item.m:before{width:50%;right:50%;transform:translate(50%)}.m.active:before{border-width:0 .1rem}.config-5 .my-fuckin-name:is(:hover,:focus)~.shape,.config-5 .shape:is(:hover,:focus){border-style:solid;border-width:10px}.resume-indicator{position:absolute}.resume-indicator{left:-170%;top:0}.resume-indicator-arrow{transform:scale(-1);width:150px;height:150px}@media screen and (width > 900px){.resume-indicator{right:-12rem;left:auto;bottom:-1rem;top:auto}.resume-indicator-arrow{transform:scale(1);width:200px;height:200px}}.resume-indicator-text{opacity:0;position:absolute;font-size:.75rem;color:#fff;animation:reveal-text 1s 4s forwards}.resume-indicator-text{left:0;bottom:1rem}@media screen and (width > 900px){.resume-indicator-text{left:auto;right:0;top:2rem}}@keyframes reveal-text{to{opacity:1}}.resume-indicator-line{stroke-dasharray:350;stroke-dashoffset:350;animation:reveal 1s 4s forwards}@keyframes reveal{to{stroke-dashoffset:0}}