body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}p{color:#d9ddef;font-family:hansson-stencil-mn}body{background-color:#02040a}h1{color:#d9ddef;font-family:hansson-stencil-mn;font-size:3rem;font-weight:800}.App{height:100vh;margin:0 auto;max-height:100vh;max-width:1440px;overflow-x:hidden;overflow-y:hidden;width:100vw}.in-the-way{display:none}.test{fill:#fff!important}.test-group path{fill:green}@keyframes startUpCircleIntoOut{0%{-webkit-clip-path:circle(0);clip-path:circle(0)}to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes startUpBtoT{0%{-webkit-clip-path:rect(100% 100% 100% 0);clip-path:rect(100% 100% 100% 0)}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}}@keyframes startUpTtoB{0%{-webkit-clip-path:rect(0 100% 0 0);clip-path:rect(0 100% 0 0)}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}}@keyframes startUpCircleBlinker{0%{-webkit-clip-path:circle(0);clip-path:circle(0);opacity:0}20%{-webkit-clip-path:circle(80%);clip-path:circle(80%);opacity:1}40%{opacity:0}60%{-webkit-clip-path:circle(40%);clip-path:circle(40%);opacity:1}80%{opacity:0}to{-webkit-clip-path:circle(100%);clip-path:circle(100%);opacity:1}}@keyframes startUpBlink{0%{opacity:.25}25%{opacity:0}50%{opacity:.75}75%{opacity:0}to{opacity:1}}.WindowSizeHud{float:right;position:relative;right:.2rem;top:-15.2rem}.WindowSizeHud svg{width:13vw}@keyframes startUpTraces{0%{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}}@keyframes startUpBorder{0%{-webkit-clip-path:rect(0 100% 100% 100%);clip-path:rect(0 100% 100% 100%)}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}}@keyframes startUpPanels{0%{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0);opacity:0}20%{-webkit-clip-path:rect(0 100% 100% 80%);clip-path:rect(0 100% 100% 80%);opacity:1}40%{opacity:0}60%{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0);opacity:1}80%{opacity:0}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0);opacity:1}}@keyframes blinkerBits{0%{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0);opacity:0}20%{-webkit-clip-path:rect(0 80% 100% 0);clip-path:rect(0 80% 100% 0);opacity:1}40%{opacity:0}60%{-webkit-clip-path:rect(0 30% 100% 0);clip-path:rect(0 30% 100% 0);opacity:1}80%{opacity:0}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0);opacity:1}}.phase-one{animation:startUp .5s linear forwards}.phase-two{animation:startUpTraces .5s linear .4s forwards,blinkerBits .5s linear 3s forwards}.phase-three,.phase-two{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.phase-three{animation:startUpTraces .5s linear forwards;animation-delay:.8s}.phase-four{animation:startUpBorder .5s linear forwards;animation-delay:1.2s;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.phase-five{animation:startUpPanels .5s linear forwards;animation-delay:1.6s;opacity:0}.phase-six{animation:startUpTraces .5s linear forwards;animation-delay:2s;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}button{background:none;border:none;cursor:pointer;font-family:hansson-stencil-mn}@keyframes startUp{0%{-webkit-clip-path:circle(0);clip-path:circle(0)}to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes startUpLeft{0%{transform:translateX(5rem)}to{transform:translateX(0)}}@keyframes startUpRight{to{transform:translateX(0)}}@keyframes buttonExpandLeft{0%{-webkit-clip-path:rect(0 0 100% 0);clip-path:rect(0 0 100% 0)}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}}@keyframes buttonExpandRight{0%{-webkit-clip-path:rect(0 100% 100% 100%);clip-path:rect(0 100% 100% 100%)}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}}@keyframes buttonHover{0%{-webkit-clip-path:rect(0 100% 100% 100%);clip-path:rect(0 100% 100% 100%)}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}}@keyframes buttonHoverInverted{0%{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}to{-webkit-clip-path:rect(0 0 100% 0);clip-path:rect(0 0 100% 0)}}.button-phase-one{animation:startUpCircleIntoOut .5s linear}.button-phase-left{animation:startUpLeft 1s ease-in-out 1s forwards;transform:translateX(5rem)}.button-phase-right{animation:startUpRight 1s ease-in-out 1s forwards;transform:translateX(-5rem)}.button-phase-two-left{animation:buttonExpandLeft .5s linear .5s forwards}.button-phase-two-left,.button-phase-two-right{-webkit-clip-path:rect(0 0 100% 0);clip-path:rect(0 0 100% 0)}.button-phase-two-right{animation:buttonExpandRight .5s linear .5s forwards}.button-phase-three{animation:startUp .5s ease-out 1.5s forwards}.button-phase-four,.button-phase-three{-webkit-clip-path:circle(0);clip-path:circle(0)}.button-phase-four{animation:startUp .5s ease-out 1.5s forwards,blinkerBits .5s linear 3s forwards}.button-text{transform:translateX(100rem)}.button-hover .button-hover-selector path{-webkit-clip-path:rect(0 100% 100% 100%);clip-path:rect(0 100% 100% 100%);transition:-webkit-clip-path .3s linear;transition:clip-path .3s linear;transition:clip-path .3s linear,-webkit-clip-path .3s linear}.button-hover-selector-inverted,.button-hover:hover .button-hover-selector path{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}.button-hover-selector-inverted,.button-hover:hover .button-hover-selector path,.button-hover:hover .button-hover-selector-inverted{transition:-webkit-clip-path .3s linear;transition:clip-path .3s linear;transition:clip-path .3s linear,-webkit-clip-path .3s linear}.button-hover:hover .button-hover-selector-inverted{-webkit-clip-path:rect(0 0 100% 0);clip-path:rect(0 0 100% 0)}.button-hover:hover .button-hover-inverse{fill:#2b47be!important;transition:fill .3s linear}@keyframes startUpSmall{to{transform:translateX(0)}}@keyframes icon{0%{-webkit-clip-path:rect(100% 100% 100% 0);clip-path:rect(100% 100% 100% 0)}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}}.button-phase-left-small{animation:startUpSmall 1s ease-in-out 1s forwards;transform:translateX(1.5rem)}.button-phase-right-small{animation:startUpSmall 1s ease-in-out 1s forwards;transform:translateX(-1.5rem)}.icon-phase-four{animation:icon .5s ease-in-out 2s forwards;-webkit-clip-path:rect(100% 100% 100% 0);clip-path:rect(100% 100% 100% 0)}.button-hover-small .button-hover-small-selector{transition:fill .3s linear}.button-hover-small:hover .button-hover-small-selector{fill:#e55213!important;transition:fill .3s linear}.button-hover:hover .button-hover-selector-upgraded{animation:buttonHover .3s linear forwards}.left-border-panel{height:100vh;left:.2rem;position:relative;top:-2.9rem;width:10rem}.left-border-panel svg{height:92vh}@keyframes leftPanelStartBlink{0%{-webkit-clip-path:circle(0);clip-path:circle(0);opacity:0}20%{-webkit-clip-path:circle(80%);clip-path:circle(80%);opacity:1}40%{opacity:0}60%{-webkit-clip-path:circle(40%);clip-path:circle(40%);opacity:1}80%{opacity:0}to{-webkit-clip-path:circle(100%);clip-path:circle(100%);opacity:1}}@keyframes leftPanelBtoT{0%{-webkit-clip-path:rect(100% 100% 100% 0);clip-path:rect(100% 100% 100% 0)}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}}@keyframes leftPanelTtoB{0%{-webkit-clip-path:rect(0 100% 0 0);clip-path:rect(0 100% 0 0)}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}}@keyframes topPanelOpen{0%{transform:translateY(22rem)}to{transform:translateY(0)}}@keyframes bottomPanelOpen{0%{transform:translateY(-10rem)}to{transform:translateY(0)}}.left-panel-phase-one-top{animation:leftPanelBtoT .5s linear forwards,topPanelOpen .5s linear .6s forwards;transform:translateY(22rem)}.left-panel-phase-one-bottom{animation:leftPanelTtoB .5s linear forwards,bottomPanelOpen .5s linear .6s forwards;transform:translateY(-10rem)}.left-panel-phase-one-circle{animation:leftPanelStartBlink .5s linear forwards}.left-middle-panel-phase-two{animation:leftPanelBtoT .5s linear .7s forwards}.left-middle-panel-phase-two,.left-top-panel-phase-two{-webkit-clip-path:rect(0 100% 0 0);clip-path:rect(0 100% 0 0)}.left-top-panel-phase-two{animation:leftPanelTtoB .5s linear 1s forwards}.left-bottom-panel-phase-two{animation:leftPanelBtoT .5s linear 1s forwards;-webkit-clip-path:rect(0 100% 0 0);clip-path:rect(0 100% 0 0)}.left-panel-phase-three{animation:startUp .5s linear 1.6s forwards;-webkit-clip-path:circle(0);clip-path:circle(0)}input{background:none;border:none;color:#d9ddef;font-family:hansson-stencil-mn;font-size:18px;outline:none;transform:translateX(.5rem) translateY(.5rem);width:90%}@keyframes startUpLtoR{0%{-webkit-clip-path:rect(0 0 100% 0);clip-path:rect(0 0 100% 0)}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}}.input-field-phase-one{animation:leftPanelBtoT .5s ease-out}.input-field-phase-two{animation:startUpLtoR 1s ease-out .6s forwards}.input-field-phase-three,.input-field-phase-two{-webkit-clip-path:rect(0 0 100% 0);clip-path:rect(0 0 100% 0)}.input-field-phase-three{animation:startUpLtoR 1s linear .6s forwards}textarea{background:none;border:none;color:#d9ddef;font-family:hansson-stencil-mn;font-size:18px;height:100rem;margin:none;outline:none;overflow:none;padding:none;resize:none;transform:translateX(.5rem) translateY(.5rem);width:100%}::-webkit-scrollbar{background-color:none}::-webkit-scrollbar-thumb{color:red!important;height:2rem;width:1rem}.text-box::hover g rect{fill:red}.top-panel{display:flex;justify-content:center;margin-left:.5rem}.top-panel svg{width:92vw}@keyframes startUpRtoL{0%{-webkit-clip-path:rect(0 100% 100% 100%);clip-path:rect(0 100% 100% 100%)}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0)}}.top-panel-phase-one-hex{animation:leftPanelStartBlink .5s ease-out forwards}.top-panel-phase-one-left{animation:startUpLtoR .5s ease-out .5s forwards}.top-panel-phase-one-left,.top-panel-phase-one-right{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.top-panel-phase-one-right{animation:startUpRtoL .5s ease-out .5s forwards}.top-panel-phase-two-left{animation:startUpLtoR .5s ease-out 1s forwards}.top-panel-phase-two-left,.top-panel-phase-two-right{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.top-panel-phase-two-right{animation:startUpRtoL .5s ease-out 1s forwards}.top-panel-phase-two-hex{animation:leftPanelStartBlink .5s ease-out 1s forwards}.top-panel-phase-three-left,.top-panel-phase-two-hex{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.top-panel-phase-three-left{animation:startUpLtoR .5s ease-out 1.5s forwards}.top-panel-phase-three-right{animation:startUpRtoL .5s ease-out 1.5s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.mouse-hud{left:.8rem;position:relative;top:-3.65rem}.mouse-hud svg{width:7rem}@keyframes startUpLtoRBlinker{0%{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0);opacity:0}25%{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0);opacity:1}50%{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0);opacity:0}75%{-webkit-clip-path:rect(0 100% 40% 0);clip-path:rect(0 100% 40% 0);opacity:1}to{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0);opacity:1}}.mouse-panel-phase-one-right{animation:startUpRtoL 1s ease-out forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.mouse-panel-phase-one-left{animation:startUpLtoR 1s ease-out forwards}.mouse-panel-phase-one-left,.mouse-panel-phase-two{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.mouse-panel-phase-two{animation:startUpLtoRBlinker .5s ease-out 1s forwards}.alister{bottom:32rem;left:5rem;position:relative}.alister svg{width:36rem}@keyframes alisterSpin{0%{transform:rotate(0deg)}to{transform:rotate(20deg)}}@keyframes alisterSpinOpposite{0%{transform:rotate(0deg)}to{transform:rotate(-20deg)}}@keyframes centerOutScale{0%{transform:scale(0)}to{transform:scale(1)}}.phase-one-startup{animation:leftPanelStartBlink 1s ease-in-out forwards,alisterSpin 4s ease-in-out 1s infinite alternate}.phase-one-startup,.phase-two-startup{transform-box:fill-box;transform-origin:center!important}.phase-two-startup{animation:startUpPanels 1s ease-in-out .5s forwards,alisterSpinOpposite 4s ease-in-out 1.2s infinite alternate;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.phase-zero-startup-circle-scale-out{animation:centerOutScale 1s ease-out forwards;transform:scale(0);transform-box:fill-box;transform-origin:center!important}.phase-zero-startup-circle-scale-out-outer{animation:centerOutScale 1s ease-out forwards,alisterSpinOpposite 4s ease-in-out 1.2s infinite alternate;transform:scale(0);transform-box:fill-box;transform-origin:center!important}.phase-zero-startup-circle{animation:startUp 1s ease-out 1s forwards;-webkit-clip-path:circle(0);clip-path:circle(0);transform-box:fill-box;transform-origin:center!important}.outer-ring-phase-one-startup{animation:startUpPanels 1s linear forwards;transform-box:fill-box;transform-origin:center!important}.phase-one-startup-textbox{animation:startUpLtoR 1s ease-in 1.1s forwards}.phase-one-startup-textbox,.phase-two-startup-textbox{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.phase-two-startup-textbox{animation:blinkerBits .4s ease-in-out 2.4s forwards}.phase-three-startup-textbox{animation:startUpLtoR .2s ease-in-out 2.4s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.phase-three-startup-textbox-bar{animation:startUpRtoL .8s ease-in-out 2.4s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.bottom-panel{bottom:12rem;left:3rem;position:relative}.bottom-panel svg{width:40rem}@keyframes bottomPanelRightExpand{0%{transform:translateX(-9rem)}to{transform:translateX(0)}}.expanding-bottom-panel{animation:bottomPanelRightExpand 1s ease-out 1s forwards;transform:translateX(-9rem)}.bottom-panel-phase-one{animation:startUpLtoR 1s ease-out forwards}.bottom-panel-phase-two path{animation:startUpLtoR 1s ease-out 1s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.bottom-panel-phase-three path{animation:startUpRtoL 1s ease-out 2s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.bottom-panel-phase-four path{animation:blinkerBits 1s ease-out 2s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.right-border-panel{float:right;position:relative;right:1rem;top:-90rem}.right-border-panel svg{height:68vh}@keyframes right-border-panel-phase-one-right{0%{fill:red}to{fill:green}}@keyframes right-border-panel-phase-one-left{0%{transform:translateX(2rem)}to{transform:translateX(0)}}.right-border-panel-phase-one{animation:leftPanelStartBlink .5s linear forwards}.right-border-panel-phase-one-left{animation:startUpRtoL 1s ease-out forwards,right-border-panel-phase-one-left .5s linear 1s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0);transform:translateX(2rem)}.right-border-panel-phase-one-right{animation:startUpLtoR 1s ease-out forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.right-border-panel-phase-two path{animation:startUpRtoL 1s ease-out .5s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.right-border-panel-phase-three path{animation:startUp 1s ease-out 1s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.right-border-panel-phase-four path,.right-border-panel-phase-four rect{animation:startUpLtoR 1s ease-out 1.5s forwards,blinkerBits .5s linear 2.5s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.time-hud{left:45.3rem;position:absolute;top:1.5rem}.time-hud svg{width:8.5rem}.time-hud-border{animation:startUpRtoL 1s 2s forwards}.time-hud-background,.time-hud-border{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.time-hud-background{animation:startUpLtoRBlinker 1s 3s forwards;opacity:0}.time-hud-text{animation:icon 1s 3.5s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.class1{display:none}.class2{display:block!important}.mobile-right-panel-phase-two-a{animation:leftPanelTtoB 1s linear 1s forwards;-webkit-clip-path:rect(0 0 100% 0);clip-path:rect(0 0 100% 0)}.mobile-right-panel-phase-two-b{animation:startUpRtoL 1s linear 1s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.mobile-right-panel-phase-two-c{animation:startUpLtoR 1s linear 1s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.mobile-right-panel-phase-three-a{animation:leftPanelBtoT 1s linear 1.5s forwards;-webkit-clip-path:rect(0 0 100% 0);clip-path:rect(0 0 100% 0)}.mobile-right-panel-phase-three-b{animation:leftPanelTtoB 1s linear 1.5s forwards;-webkit-clip-path:rect(0 0 100% 0);clip-path:rect(0 0 100% 0)}.mobile-right-panel-phase-four{animation:startUpLtoRBlinker .5s linear 2.5s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0);opacity:0}.mobile-alister{transform:translateX(18rem) translateY(6rem)}@keyframes hamburger-menu-phase-one-startup{0%{-webkit-clip-path:circle(0);clip-path:circle(0)}to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes hamburger-menu-phase-two-top{0%{transform:translateY(.25rem)}to{transform:translateY(0)}}@keyframes hamburger-menu-phase-two-bottom{0%{transform:translateY(-.25rem)}to{transform:translateY(0)}}.hamburger-menu-phase-one-startup{animation:hamburger-menu-phase-one-startup 1s 1s forwards;-webkit-clip-path:circle(0);clip-path:circle(0)}.hamburger-menu-phase-two-startup-top{animation:hamburger-menu-phase-two-top 1s 1.5s forwards;transform:translateY(.25rem)}.hamburger-menu-phase-two-startup-bottom{animation:hamburger-menu-phase-two-bottom 1s 1.5s forwards;transform:translateY(-.25rem)}.control-panel-hud{bottom:37.1rem;left:42.8rem;position:relative}.control-panel-hud svg{width:31rem}@keyframes controlPanelBorder-left{0%{transform:translateX(8rem)}to{transform:translateX(0)}}@keyframes controlPanelBorder-right{0%{transform:translateX(-8rem)}to{transform:translateX(0)}}.controlPanelBorder-left{animation:startUpBtoT .5s ease-out,controlPanelBorder-left 1s 1.5s forwards;transform:translateX(8rem)}.controlPanelBorder-middle path{animation:blinkerBits 1s ease-out 1.5s forwards;opacity:0}.controlPanelBorder-right{animation:startUpBtoT .5s ease-out,controlPanelBorder-right 1s 1.5s forwards;transform:translateX(-8rem)}@keyframes controlPanel-right-button{0%{transform:translateX(-13.5rem)}to{transform:translateX(0)}}.controlPanel-right-button{animation:controlPanel-right-button 1s ease-out 2s forwards;transform:translateX(-13.5rem)}.controlPanel-right-button path{transition:fill .5s ease-out}.controlPanel-right-button:hover{cursor:pointer}.controlPanel-right-button:active circle{fill:#e55213!important}.controlPanel-right-button-background{animation:startUpCircleIntoOut 3s ease-out forwards}.controlPanel-right-button-arrows{animation:startUpPanels 1s ease-out 1.5s forwards;-webkit-clip-path:rect(100% 100% 100% 0);clip-path:rect(100% 100% 100% 0)}.controlPanel-right-button-circle-border{animation:startUpPanels 1.5s ease-out forwards;transform-box:fill-box;transform-origin:center!important;transition:transform 1.5s ease-out}.controlPanel-right-button:hover .controlPanel-right-button-circle-border{fill:#e55213!important;transform:rotate(180deg);transform-box:fill-box;transform-origin:center!important;transition:transform 4s ease-out}.controlPanel-right-button:hover path{fill:#e55213!important}@keyframes controlPanel-left-button{0%{opacity:0;transform:translateX(13.5rem)}to{opacity:1;transform:translateX(0)}}.controlPanel-left-button{animation:controlPanel-left-button 1s ease-out 2s forwards;opacity:0;transform:translateX(13.5rem)}.controlPanel-left-button:hover{cursor:pointer}.controlPanel-left-button:active circle,.controlPanel-left-button:active ellipse{fill:#e55213!important}.controlPanel-left-button-circle-border{transform-box:fill-box;transform-origin:center!important;transition:transform 1.5s ease-out}.controlPanel-left-button:hover .controlPanel-left-button-circle-border{transform:rotate(-180deg);transform-box:fill-box;transform-origin:center!important;transition:transform 4s ease-out}.controlPanel-left-button:hover path{fill:#e55213!important}.controlPanel-background{animation:startUpCircleIntoOut 1.4s ease-out 2s forwards;-webkit-clip-path:circle(0);clip-path:circle(0)}.controlPanel-border,.controlPanel-holders{animation:startUpCircleIntoOut 1.4s ease-out 2.5s forwards;-webkit-clip-path:circle(0);clip-path:circle(0)}.navBar-text-active{color:#e55213;font-size:27px;text-align:center}.navBar-text-right{color:#2b47be;font-size:14px;text-align:right}.navbar-foreignObject{height:4rem;padding:.1rem;width:23rem}.navbar-text-container{align-items:center;display:flex;height:100%;justify-content:space-between;width:100%}.navbar-text-container p{pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes active-Portfolio-R{0%{color:#2b47be;font-size:14px;text-align:right;transform:translateX(9.5rem)}to{color:#e55213;font-size:27px;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transform:translateX(0)}}.active-Portfolio-R{animation:active-Portfolio-R 1s ease-out forwards;color:#2b47be;font-size:14px;text-align:right;transform:translateX(9.5rem)}@keyframes shift-Portfolio-R{0%{color:#e55213;font-size:27px;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transform:translateX(0)}to{color:#2b47be;font-size:14px;text-align:left;transform:translateX(-8rem)}}.shift-Portfolio-R{animation:shift-Portfolio-R 1s ease-out forwards;color:#2b47be;font-size:14px;text-align:left}@keyframes pop-Portfolio-R{0%{transform:translateX(-9.3rem)}20%{transform:translateX(-14.3rem) translateY(-1rem)}30%{opacity:0;transform:translateX(12.3rem) translateY(-1rem)}70%{opacity:0;transform:translateX(15.3rem) translateY(-1rem)}80%{opacity:.6}to{opacity:1;transform:translateX(8rem) translateY(0)}}.pop-Portfolio-R{animation:pop-Portfolio-R 1s ease-out forwards;color:#2b47be}@keyframes active-AboutMe-R{0%{color:#2b47be;font-size:14px;text-align:right;transform:translateX(18.4rem)}to{color:#e55213;font-size:27px;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transform:translateX(7.5rem)}}.active-AboutMe-R{animation:active-AboutMe-R 1s ease-out forwards;color:#2b47be;font-size:14px;text-align:right}@keyframes shift-AboutMe-R{0%{color:#e55213;font-size:27px;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transform:translateX(7.5rem)}to{color:#2b47be;font-size:14px;text-align:left;transform:translateX(0)}}.shift-AboutMe-R{animation:shift-AboutMe-R 1s ease-out forwards;color:#2b47be;font-size:14px;text-align:left}@keyframes pop-AboutMe-R{0%{transform:translateX(0)}20%{transform:translateX(-4.3rem) translateY(-1rem)}30%{opacity:0;transform:translateX(12.3rem) translateY(-1rem)}70%{opacity:0;transform:translateX(20.3rem) translateY(-1rem)}80%{opacity:.6}to{opacity:1;transform:translateX(17.75rem) translateY(0)}}.pop-AboutMe-R{animation:pop-AboutMe-R 1s ease-out forwards;color:#2b47be}@keyframes active-Contact-R{0%{color:#2b47be;font-size:14px;text-align:right;transform:translateX(0)}to{color:#e55213;font-size:27px;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transform:translateX(-8rem)}}.active-Contact-R{animation:active-Contact-R 1s ease-out forwards;color:#2b47be;font-size:14px;text-align:right}@keyframes shift-Contact-R{0%{color:#e55213;font-size:27px;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transform:translateX(-7rem)}to{color:#2b47be;font-size:14px;text-align:left;transform:translateX(-19rem)}}.shift-Contact-R{animation:shift-Contact-R 1s ease-out forwards;color:#2b47be;font-size:14px;text-align:left}@keyframes pop-Contact-R{0%{transform:translateX(-19rem)}20%{transform:translateX(-23.3rem) translateY(-1rem)}30%{opacity:0;transform:translateX(23.3rem) translateY(-1rem)}70%{opacity:0;transform:translateX(6.3rem) translateY(-1rem)}80%{opacity:.6}to{opacity:1;transform:translateX(0) translateY(0)}}.pop-Contact-R{animation:pop-Contact-R 1s ease-out forwards;color:#2b47be}@keyframes active-Portfolio-L{0%{color:#2b47be;font-size:14px;text-align:right;transform:translateX(-9.5rem)}to{color:#e55213;font-size:27px;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transform:translateX(0)}}.active-Portfolio-L{animation:active-Portfolio-L 1s ease-out forwards;color:#2b47be;font-size:14px;text-align:right}@keyframes shift-Portfolio-L{0%{transform:translateX(12rem)}20%{transform:translateX(15rem) translateY(-1rem)}30%{opacity:0;transform:translateX(-15rem) translateY(-1rem)}70%{opacity:0;transform:translateX(-15rem) translateY(-1rem)}80%{opacity:.6}to{opacity:1;transform:translateX(-7.6rem) translateY(0)}}.shift-Portfolio-L{animation:shift-Portfolio-L 1s ease-out forwards;color:#2b47be;font-size:14px;text-align:left}@keyframes pop-Portfolio-L{0%{color:#e55213;font-size:27px;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transform:translateX(0)}to{color:#2b47be;font-size:14px;text-align:left;transform:translateX(8rem)}}.pop-Portfolio-L{animation:pop-Portfolio-L 1s ease-out forwards;color:#2b47be}@keyframes active-AboutMe-L{0%{color:#2b47be;font-size:14px;text-align:right;transform:translateX(0)}to{color:#e55213;font-size:27px;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transform:translateX(7.5rem)}}.active-AboutMe-L{animation:active-AboutMe-L 1s ease-out forwards;color:#2b47be;font-size:14px;text-align:right}@keyframes shift-AboutMe-L{0%{transform:translateX(17.75rem)}20%{transform:translateX(20rem) translateY(-1rem)}30%{opacity:0;transform:translateX(22.3rem) translateY(-1rem)}70%{opacity:0;transform:translateX(-8rem) translateY(-1rem)}80%{opacity:.6}to{opacity:1;transform:translateX(0) translateY(0)}}.shift-AboutMe-L{animation:shift-AboutMe-L 1s ease-out forwards;color:#2b47be;font-size:14px;text-align:left}@keyframes pop-AboutMe-L{0%{color:#e55213;font-size:27px;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transform:translateX(7.5rem)}to{color:#2b47be;font-size:14px;text-align:left;transform:translateX(17.75rem)}}.pop-AboutMe-L{animation:pop-AboutMe-L 1s ease-out forwards;color:#2b47be}@keyframes active-Contact-L{0%{color:#2b47be;font-size:14px;text-align:right;transform:translateX(-19rem)}to{color:#e55213;font-size:27px;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transform:translateX(-8rem)}}.active-Contact-L{animation:active-Contact-L 1s ease-out forwards;color:#2b47be;font-size:14px;text-align:right}@keyframes shift-Contact-L{0%{transform:translateX(0)}20%{transform:translateX(4rem) translateY(-1rem)}30%{opacity:0;transform:translateX(-23.3rem) translateY(-1rem)}70%{opacity:0;transform:translateX(-23.3rem) translateY(-1rem)}80%{opacity:.6}to{opacity:1;transform:translateX(-19rem) translateY(0)}}.shift-Contact-L{animation:shift-Contact-L 1s ease-out forwards;color:#2b47be;font-size:14px;text-align:left}@keyframes pop-Contact-L{0%{color:#e55213;font-size:27px;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transform:translateX(-7rem)}to{color:#2b47be;font-size:14px;text-align:left;transform:translateX(0)}}.pop-Contact-L{animation:pop-Contact-L 1s ease-out forwards;color:#2b47be}.pagePortfolio-container{left:5.5rem;position:relative;top:-95rem}.pagePortfolio-container svg{width:64rem}.portfolio-background-panel{animation:startUpLtoR .2s ease-out 1s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.portfolio-panel-bottom-border circle,.portfolio-panel-bottom-border rect{animation:startUp 1s ease-out forwards}.portfolio-panel-bottom-border path{animation:startUpLtoR 1s ease-out .5s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.portfolio-panel-top-border circle{animation:startUp 1s ease-out forwards}.portfolio-panel-top-border path{animation:startUpRtoL 1s ease-out .5s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.portfolio-content-grid-containers{grid-gap:0;display:grid;grid-template-columns:1fr 1fr;margin-top:2rem}.portfolio-content-grid-area-1{display:flex;flex-direction:column;height:36rem;padding:.5rem;width:48.5rem}.portfolio-content-switcher-and-buttons{display:flex;transform:translateY(2rem) translateX(2rem)}.portfolio-content-switcher svg{width:20rem}.portfolio-content-buttons{display:flex}.portfolio-content-buttons svg{width:13rem}.portfolio-content-grid-area-2{height:40rem;padding:.5rem}.portfolio-content-grid-area-2-title{margin:1.5rem .5rem}.portfolio-content-grid-area-2-title h1{transform:translateX(2rem)}.portfolio-content-grid-area-2-title h1,.portfolio-content-grid-area-2-title svg{animation:startUpLtoR 1s ease-out 1.5s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.portfolio-project-list-container{align-items:center;display:flex;flex-direction:column;justify-content:center;position:absolute;right:50.55rem;top:6.5rem;width:0}.portfolio-tech-stack{font-size:1rem}.portfolioProject-container{width:0}.portfolioProject-container svg{margin-bottom:1rem}.portfolio-project-card-border{animation:startUpTtoB 1s ease-out forwards}.portfolio-project-card-bottom-border path{animation:startUpLtoR 1s ease-out .5s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.portfolio-project-card-top-border path{animation:startUpRtoL 1s ease-out .5s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.portfolio-project-card-title{animation:startUpRtoL .5s ease-out 1.5s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.portfolio-project-card-background{animation:startUpBtoT .2s ease-out 1s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0);cursor:pointer}.portfolio-project-card-hover{-webkit-clip-path:circle(0);clip-path:circle(0)}.portfolio-project-card-background:hover .portfolio-project-card-hover,.portfolio-project-card-hover{transition:-webkit-clip-path .5s ease-out;transition:clip-path .5s ease-out;transition:clip-path .5s ease-out,-webkit-clip-path .5s ease-out}.portfolio-project-card-background:hover .portfolio-project-card-hover{-webkit-clip-path:circle(100%);clip-path:circle(100%)}.portfolio-project-card-hover-ring path{fill:#e55213!important}.portfolio-project-card-background:hover .portfolio-project-card-hover-ring{transform:rotate(-180deg);transform-box:fill-box;transform-origin:center!important;transition:transform 4s ease-out}@keyframes portfolio-button{0%{transform:translateX(-17.5rem)}to{transform:translateX(0)}}.portfolio-content-switcher-container{margin-right:.2rem}.controlPanel-right-button.portfolio-button{animation:portfolio-button 1s ease-out 2s forwards;transform:translateX(-17.5rem)}.controlPanel-background.portfolio-button-background{animation:startUpLtoR 1s ease-out 2s forwards}.portfolio-content-switcher-clickable-area{cursor:pointer}.portfolio-content-switcher-clickable-area:active circle{fill:#e55213!important}.portfolio-content-switcher-clickable-area:hover rect{stroke:#e55213!important}@keyframes flash-click{0%{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0);opacity:.11}50%{-webkit-clip-path:rect(0 100% 100% 0);clip-path:rect(0 100% 100% 0);opacity:.22}to{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0);opacity:0}}.flash-click{-webkit-clip-path:rect(0 0 0 0)!important;clip-path:rect(0 0 0 0)!important;opacity:0;transition:opacity .2s ease-out,-webkit-clip-path .2s ease-out;transition:clip-path .2s ease-out,opacity .2s ease-out;transition:clip-path .2s ease-out,opacity .2s ease-out,-webkit-clip-path .2s ease-out}.portfolio-content-switcher-clickable-area:active .flash-click{animation:flash-click 1s ease-out forwards;-webkit-clip-path:rect(0 100% 100% 0)!important;clip-path:rect(0 100% 100% 0)!important;opacity:.22}.portfolio-content-switcher-clickable-area:hover .controlPanel-right-button-circle-border{transform:rotate(-180deg);transform-box:fill-box;transform-origin:center!important;transition:transform 4s ease-out}.portfolio-content-switcher-clickable-area:hover .controlPanel-right-button-circle-border path{fill:#e55213!important}.controlPanel-pagination{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.portfolio-slider-container{transform:translateY(1rem) translateX(1rem)}.portfolio-slider-container svg{width:48rem}@keyframes slider-right-button{0%{transform:translateX(-22rem)}to{transform:translateX(0)}}.controlPanel-right-button.slider-right-button{animation:slider-right-button 1s ease-out 2s forwards;transform:translateX(-22rem)}@keyframes slider-left-button{0%{transform:translateX(22rem)}to{opacity:1;transform:translateX(0)}}.controlPanel-left-button.slider-left-button{animation:slider-left-button 1s ease-out 2s forwards;transform:translateX(22rem)}.sliderImgs{animation:startUpBlink .5s ease-out 2.8s forwards;object-fit:contain!important;object-position:center;opacity:0;width:100%}.portfolioSliderIndex{animation:icon 1s ease-out 2.8s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0);color:#e55213;font-family:hansson-stencil-mn;font-size:1.2rem}.pageContact-container{align-items:center;display:flex;justify-content:center;position:relative;top:-132rem;width:100%}.pageContact-container-svg{height:40rem;width:50rem}.contact-background-panel{animation:startUpBtoT .5s ease-out 1s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.contact-top-panels{animation:startUp .5s ease-out}.contact-side-panels{animation:startUpTtoB .5s ease-out .5s forwards}.contact-right-bottom,.contact-side-panels{-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.contact-right-bottom{animation:startUpRtoL .5s ease-out 1s forwards}.contact-left-bottom{animation:startUpLtoR .5s ease-out 1s forwards;-webkit-clip-path:rect(0 0 0 0);clip-path:rect(0 0 0 0)}.contact-form-container{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-top:5rem}.contact-form-container h1{margin-bottom:4rem}.contact-form-container-form{grid-gap:3rem;display:flex}.contact-form-container-form-inputs{grid-gap:1rem;display:flex;flex-direction:column}.contact-form-container-submit{margin-top:4rem}.pageAboutMe-container{height:60vh;left:4.5rem;position:relative;top:-90rem;width:85vw}.background-grid{height:100vh;left:0;opacity:.12;overflow-x:hidden;overflow-y:hidden;position:absolute;top:0;width:100vw;z-index:-1}.background-grid svg{animation:blinkerBits 1s linear forwards}.battery-hud{align-items:center;display:flex;gap:10px;position:absolute;right:20px;top:20px;z-index:1000}.battery-hud svg{height:auto;transform:translateY(-.8rem) translateX(0);width:7.5rem}.battery-charging-icon{margin:0;padding:0;transform:translateX(-.4rem) translateY(-.3rem)}.battery-charging-icon svg{height:.7rem;width:.5rem}.not-charging svg{display:none}
/*# sourceMappingURL=main.c2c84497.css.map*/