@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono|Sedgwick+Ave+Display");:root{--font-display:"Sedgwick Ave Display";--font-sans-serif:"IBM Plex Mono";--box-shadow:0px 21px 34px 0px rgba(0,0,0,.89);--color-bg:linear-gradient(180deg,#232526 0%,#202628);--scene-width:400px;--scene-height:400px;--delay-base:500ms;--delay-added:100ms;--acc-back:cubic-bezier(0.39,0.575,0.565,1)}*,:after,:before{-webkit-tap-highlight-color:rgba(255,255,255,0);box-sizing:border-box}body{background:var(--color-bg);color:#fff;height:100vh;justify-content:center;margin:0;overflow:hidden;padding:0;width:100vw}.scene,body{align-items:center;display:flex}.scene{height:var(--scene-height);position:relative;transition:transform .6s var(--acc-back);width:var(--scene-width)}.scene:hover{transform:scale(.98) skewY(-1deg)}.scene>*{transition:transform .6s var(--acc-back)}.text{height:100%;pointer-events:none;position:relative;transition:transform .6s var(--acc-back),opacity .1s ease-in;width:100%;z-index:7}.scene:hover .text{opacity:1;transform:scale(.91)}@keyframes popInImg{0%{opacity:0;transform:skewY(5deg) scaleX(.89) scaleY(.89)}to{opacity:1}}.text span{animation:popIn .6s var(--acc-back) 1 forwards;display:block;font-family:var(--font-sans-serif);opacity:0;text-align:center;text-shadow:var(--box-shadow)}@keyframes popIn{0%,13%{opacity:0;transform:scaleX(.89) scaleY(.75)}to{opacity:1}}.bg-404{-webkit-text-fill-color:transparent;animation-delay:calc(var(--delay-base) + var(--delay-added)*2);background:linear-gradient(0deg,rgba(32,38,40,0) 25%,#31393d);background-clip:text;-webkit-background-clip:text;font-family:var(--font-display);font-size:440px;pointer-events:none;position:absolute;transform:translateX(-25%) translateZ(-100px) skewY(-3deg);transition:transform 1.2s var(--acc-back);z-index:0}.msg{animation-delay:calc(var(--delay-base) + var(--delay-added)*3);bottom:-38px;color:#8b8b8b;font-size:34px;letter-spacing:2px;margin-top:144px;right:-21px}.msg span{color:#fff;display:inline-block;letter-spacing:-1px;transform:skewX(-13deg)}.support{animation-delay:calc(var(--delay-base) + var(--delay-added)*4);bottom:-50px;color:#686a6b;display:block;font-size:21px;margin-top:89px;right:-21px}.support span{margin-bottom:5px}.support a{color:#b2b3b4;display:inline-block;pointer-events:auto;text-decoration:none}.support a:after{background:#fff;content:"";display:block;height:5px;margin-left:-5%;margin-top:13px;opacity:.55;outline:1px solid transparent;width:110%}.support a:hover:after{opacity:1}.support a:active,.support a:focus{outline:none}.overlay{cursor:pointer;display:block;height:50%;position:absolute;transform:translateZ(34px);width:50%;z-index:1}.overlay:first-of-type{left:0;top:0}.overlay:nth-of-type(2){right:0;top:0}.overlay:nth-of-type(3){bottom:0;right:0}.overlay:nth-of-type(4){bottom:0;left:0}.overlay:first-of-type:focus~.lock,.overlay:first-of-type:hover~.lock{transform:translateY(-3px) translateX(5px) rotateX(-13deg) rotateY(3deg) rotate(-2deg) translateZ(0) scale(.89);transform-origin:right top}.overlay:first-of-type:focus~.bg-403,.overlay:first-of-type:hover~.bg-403{transform:translateX(-27%) skewY(-3deg) rotateX(-13deg) rotateY(3deg) translateZ(-100px) scale(.89)}.overlay:nth-of-type(2):focus~.lock,.overlay:nth-of-type(2):hover~.lock{transform:translateY(-3px) translateX(5px) rotateX(13deg) rotateY(3deg) rotate(2deg) translateZ(0) scale(1.03);transform-origin:left top}.overlay:nth-of-type(2):focus~.bg-403,.overlay:nth-of-type(2):hover~.bg-403{transform:translateX(-21%) skewY(-3deg) rotateX(13deg) rotateY(3deg) translateZ(-100px)}.overlay:nth-of-type(3):focus~.lock,.overlay:nth-of-type(3):hover~.lock{transform:translateY(3px) translateX(-5px) rotateX(-13deg) rotateY(3deg) rotate(-2deg) translateZ() scale(.96);transform-origin:left bottom}.overlay:nth-of-type(3):focus~.bg-403,.overlay:nth-of-type(3):hover~.bg-403{transform:translateX(-23%) rotateX(-13deg) rotateY(3deg) translateZ(-100px)}.overlay:nth-of-type(4):focus~.lock,.overlay:nth-of-type(4):hover~.lock{transform:translateY(3px) translateX(5px) rotateX(-13deg) rotateY(-3deg) rotate(2deg) translateZ(0) scale(.89);transform-origin:right bottom}.overlay:nth-of-type(4):focus~.bg-403,.overlay:nth-of-type(4):hover~.bg-403{transform:translateX(-19%) rotateX(-13deg) rotateY(-3deg) translateZ(-100px)}