@charset "UTF-8";*,*: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;scroll-snap-align:start;background-color:#001219;color:#e9d8a6}.container{position:relative;width:20vmin;min-width:100px;aspect-ratio:1.618;pointer-events:none;animation:scale-up .5s 2s forwards}@keyframes scale-up{to{width:80vmin;pointer-events:all}}.navigator{position:fixed;right:2rem;bottom:1rem;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);overflow:hidden;border:.1rem solid transparent;border-radius:5px;transition:all .75s cubic-bezier(.75,0,.25,1),border .25s ease}.navigator-item.active{border-color:#001219}.my-fuckin-name{position:absolute;right:0;bottom:-4vmin;padding:.2rem;font-size:2vmin;text-transform:uppercase;text-decoration:none;color:inherit;cursor:pointer;opacity:0;transform:translateY(-100%);animation:show .5s 2.5s forwards}.my-fuckin-name:before{content:"";position:absolute;left:0;bottom:.1rem;width:calc(100% - 8px);height:.1rem;margin-inline:4px;background-color:#e9d8a6;transform-origin:left;transition:transform .25s ease}.my-fuckin-name:hover:before{transform:scaleX(0);transform-origin:right}@keyframes show{to{opacity:1;transform:translateY(0)}}@media (max-width: 625px){.my-fuckin-name{font-size:5vmin;bottom:-8vmin}}.shape{position:absolute;width:25%;height:50%;overflow:hidden;border:3.3333333333px solid #001219;transition:all .5s cubic-bezier(.75,0,.25,1),border .25s ease}.shape:focus{border-color:#001219;outline:none}@keyframes fade-in{to{opacity:1;transform:translateY(0)}}.shape-1{opacity:0;transform:translateY(-100%);animation:fade-in .5s .6s forwards}.shape-8{opacity:0;transform:translateY(100%);animation:fade-in .5s 1s forwards}.shape-2{opacity:0;transform:translateY(-100%);animation:fade-in .5s .7s forwards}.shape-7{opacity:0;transform:translateY(100%);animation:fade-in .5s 1.1s forwards}.shape-3{opacity:0;transform:translateY(-100%);animation:fade-in .5s .8s forwards}.shape-6{opacity:0;transform:translateY(100%);animation:fade-in .5s 1.2s forwards}.shape-4{opacity:0;transform:translateY(-100%);animation:fade-in .5s .9s forwards}.shape-5{opacity:0;transform:translateY(100%);animation:fade-in .5s 1.3s forwards}.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{top:75%;left:75%;height:25%}.container:is(.config-2,.config-3,.config-4) .shape-5{top:25%;left:50%;height:25%}.container:is(.config-2,.config-3,.config-4) .shape-6{top:0;left:25%;width:50%;height:25%}.container:is(.config-2,.config-3,.config-4) .shape-7{top:75%;left:25%;height:25%}.container:is(.config-2,.config-3,.config-4) .shape-8{top:0;left:75%;height: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;left:0%;width:12.5%;height:100%;border-radius:10rem}.container.config-5 .shape-2{top:0;left:12.5%;width:12.5%;height:100%;border-radius:10rem}.container.config-5 .shape-3{top:0;left:25%;width:12.5%;height:100%;border-radius:10rem}.container.config-5 .shape-4{top:0;left:37.5%;width:12.5%;height:100%;border-radius:10rem}.container.config-5 .shape-5{top:0;left:50%;width:12.5%;height:100%;border-radius:10rem}.container.config-5 .shape-6{top:0;left:62.5%;width:12.5%;height:100%;border-radius:10rem}.container.config-5 .shape-7{top:0;left:75%;width:12.5%;height:100%;border-radius:10rem}.container.config-5 .shape-8{top:0;left:87.5%;width:12.5%;height:100%;border-radius:10rem}.letter:before,.letter:after{content:"";position:absolute;background-color:inherit;border:0 solid #001219;transition:all .25s ease}.letter:focus:before,.letter:focus:after{border-color:#001219}.container.config-1 .my-fuckin-name:is(:hover,:focus)~.shape,.container.config-1 .shape:is(:hover,:focus){cursor:pointer}.container.config-1 .letter:before,.container.config-1 .letter:after{content:"";position:absolute;background-color:inherit;border:0 solid #001219;transition:all .25s ease}.container.config-1 .letter:focus:before,.container.config-1 .letter:focus:after{border-color:#001219}.container.config-1 .s:before,.container.config-1 .s:after{width:calc(50% - 5px);height:33.3%}.container.config-1 .s:before{top:0;right:0}.container.config-1 .s:after{bottom:0;left:0}.container.config-1 .my-fuckin-name:is(:hover,:focus)~.s.shape:before,.container.config-1 .s.shape:is(:hover,:focus):before{border-bottom-width:7.5px}.container.config-1 .my-fuckin-name:is(:hover,:focus)~.s.shape:after,.container.config-1 .s.shape:is(:hover,:focus):after{border-top-width:7.5px}.container.config-1 .s.active:before,.container.config-1 .s.active:after{border-width:.1rem 0}.container.config-1 .a:before,.container.config-1 .a:after{width:calc(50% + 3.75px)}.container.config-1 .a:before{height:25%;top:25%;left:0}.container.config-1 .a:after{height:33.3%;bottom:0;left:0}.container.config-1 .my-fuckin-name:is(:hover,:focus)~.a.shape:before,.container.config-1 .my-fuckin-name:is(:hover,:focus)~.a.shape:after,.container.config-1 .a.shape:is(:hover,:focus):before,.container.config-1 .a.shape:is(:hover,:focus):after{border-right-width:7.5px}.container.config-1 .a.active:before,.container.config-1 .a.active:after{border-right-width:.1rem}.container.config-1 .l-1:before,.container.config-1 .l-2:before{height:66%;top:0;right:0;width:calc(50% + 3.75px)}.container.config-1 .my-fuckin-name:is(:hover,:focus)~:is(.l-1,.l-2).shape:before,.container.config-1 :is(.l-1,.l-2).shape:is(:hover,:focus):before{border-left-width:7.5px;border-bottom-width:7.5px}.container.config-1 .l-1.active:before,.container.config-1 .l-2.active:before{border-left-width:.1rem;border-bottom-width:.1rem}.container.config-1 .o-1:before,.container.config-1 .o-2:before{height:50%;top:25%;right:0;width:calc(50% + 3.75px)}.container.config-1 .my-fuckin-name:is(:hover,:focus)~:is(.o-1,.o-2).shape:before,.container.config-1 :is(.o-1,.o-2).shape:is(:hover,:focus):before{border-left-width:7.5px}.container.config-1 .o-1.active:before,.container.config-1 .o-2.active:before{border-left-width:.1rem}.container.config-1 .m:before{width:calc(33.3% + 1px);height:66.6%;bottom:0;right:33.3%}.container.config-1 .my-fuckin-name:is(:hover,:focus)~.m.shape:before,.container.config-1 .m.shape:is(:hover,:focus):before{border-width:0 7.5px}.container.config-1 .m.active:before{border-width:0 .1rem}.resume-indicator{position:absolute}.resume-indicator{left:-170%;top:0}@media screen and (max-width: 625px){.resume-indicator{left:-80%;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}}