:root{--dark:0;--base-size:20;--plane-height:calc(var(--base-size)*1vmin);--plane-width:calc(var(--plane-height)*1.6);--white-one:hsl(0,0%,calc((90 - (var(--dark)*30))*1%));--white-two:hsl(0,0%,calc((85 - (var(--dark)*30))*1%));--white-three:hsl(0,0%,calc((80 - (var(--dark)*30))*1%));--white-four:hsl(0,0%,calc((75 - (var(--dark)*30))*1%));--white-five:hsl(0,0%,calc((70 - (var(--dark)*30))*1%));--accent-hue:10;--accent-one:hsl(var(--accent-hue),80%,calc((60 - (var(--dark)*20))*1%));--accent-two:hsl(var(--accent-hue),80%,calc((55 - (var(--dark)*20))*1%));--accent-three:hsl(var(--accent-hue),80%,calc((50 - (var(--dark)*20))*1%));--accent-four:hsl(var(--accent-hue),80%,calc((45 - (var(--dark)*20))*1%));--accent-five:hsl(var(--accent-hue),80%,calc((40 - (var(--dark)*20))*1%));--screen:hsla(210,80%,calc((70 - (var(--dark)*20))*1%),.25);--metal-one:hsl(0,0%,calc((60 - (var(--dark)*20))*1%));--metal-two:hsl(0,0%,calc((50 - (var(--dark)*20))*1%));--metal-three:hsl(0,0%,calc((40 - (var(--dark)*20))*1%));--wheel-one:#1a1a1a;--wheel-two:#0d0d0d;--wheel-three:#000;--wheel-hub:hsl(0,0%,calc((98 - (var(--dark)*20))*1%));--bg:hsl(210,80%,calc((90 - (var(--dark)*76))*1%));--night:#082949;--cloud-one:hsl(0,0%,calc((98 - (var(--dark)*35))*1%));--cloud-two:hsl(0,0%,calc((94 - (var(--dark)*35))*1%));--cloud-three:hsl(0,0%,calc((90 - (var(--dark)*35))*1%));--cloud-four:hsl(0,0%,calc((86 - (var(--dark)*35))*1%));--cloud-five:hsl(0,0%,calc((82 - (var(--dark)*35))*1%));--cloud-six:hsl(0,0%,calc((78 - (var(--dark)*35))*1%))}@media (max-width:768px){:root{--base-size:15}}.cuboid{width:100%;height:100%;transform-style:preserve-3d;position:relative}.cuboid__side:first-of-type{height:calc(var(--thickness)*1vmin);background:var(--color-one);width:100%;position:absolute;top:0;transform:translateY(-50%)rotateX(90deg)}.cuboid__side:nth-of-type(2){height:100%;width:calc(var(--thickness)*1vmin);background:var(--color-two);position:absolute;top:50%;right:0;transform:translate(50%,-50%)rotateY(90deg)}.cuboid__side:nth-of-type(3){width:100%;height:calc(var(--thickness)*1vmin);background:var(--color-three);position:absolute;bottom:0;transform:translateY(50%)rotateX(90deg)}.cuboid__side:nth-of-type(4){height:100%;width:calc(var(--thickness)*1vmin);background:var(--color-four);position:absolute;top:50%;left:0;transform:translate(-50%,-50%)rotateY(90deg)}.cuboid__side:nth-of-type(5){width:100%;height:100%;transform:translate3d(0,0,calc(var(--thickness)*.5vmin));background:var(--color-five);position:absolute;top:0;left:0}.cuboid__side:nth-of-type(6){width:100%;height:100%;transform:translate3d(0,0,calc(var(--thickness)*-.5vmin))rotateY(180deg);background:var(--color-six);position:absolute;top:0;left:0}*{box-sizing:border-box;transform-style:preserve-3d}.scene{width:100%;height:100%;transform:translate3d(-50%,-50%,100vmin)rotateX(-24deg)rotateY(44deg)rotateX(calc(var(--rotate-x,0)*1deg))rotateY(calc(var(--rotate-y,0)*1deg));transform-style:preserve-3d;position:absolute;top:50%;left:50%}@media (max-width:768px){.scene{transform:translate3d(-50%,-50%,60vmin)rotateX(-15deg)rotateY(30deg)rotateX(calc(var(--rotate-x,0)*.5deg))rotateY(calc(var(--rotate-y,0)*.5deg))}}.plane{height:var(--plane-height);width:var(--plane-width);transform-style:preserve-3d;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.plane__floater{width:var(--plane-width);height:var(--plane-width);transform-style:preserve-3d;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width:768px){.plane__floater{transform:translate(-50%,-50%)scale(.8)}}.plane__looper{width:var(--plane-width);height:var(--plane-width);transform-origin:50% 0;transform-style:preserve-3d;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width:768px){.plane__looper{transform:translate(-50%,-50%)scale(.9)}}.plane__body{width:36%;height:40%;position:absolute;bottom:20%;left:10%}.plane__wheels{width:calc(var(--plane-height)*.2);height:20%;position:absolute;bottom:0;left:32%;transform:translate(-50%)}.plane__axle{width:50%;height:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.plane__wheel{width:100%;height:100%;position:absolute;top:0;left:0}.plane__wings{width:40%;height:70%;position:absolute;bottom:19%;left:12%}.plane__tail{width:54%;height:40%;position:absolute;bottom:20%;left:46%}.plane__nose{width:10%;height:30%;position:absolute;bottom:25%}.plane__stabilizer--horizontal{width:16%;height:9%;position:absolute;bottom:50%;right:1%}.plane__screen{width:6%;height:14%;position:absolute;bottom:60%;left:30%}.plane__propellor{height:calc(var(--base-size)*.75vmin);width:calc(var(--base-size)*.75vmin);position:absolute;bottom:40%;left:-1%;transform:translate(-50%,50%)rotateY(-90deg)}.plane__propellor:after{content:"";background:var(--white-one);border-radius:50%;width:16%;height:16%;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,2px)}.plane__stabilizer--vertical{width:20%;height:20%;position:absolute;bottom:60%;right:0}.plane__beacon{width:2%;height:2%;position:absolute;bottom:80%;right:1%}.plane__wheel--left{transform:translate3d(0,0,calc(var(--base-size)*.3vmin))}.plane__wheel--right{transform:translate3d(0,0,calc(var(--base-size)*-.3vmin))}.propellor{width:100%;height:100%;position:relative}.propellor:after,.propellor:before{content:"";background:linear-gradient(transparent 0 5%,var(--accent-two)5% 15%,transparent 15% 85%,var(--accent-two)85% 95%,transparent 95%),#000;width:10%;height:100%;transform:translate(-50%,-50%)rotate(calc(var(--r,45)*1deg));position:absolute;top:50%;left:50%}.propellor:after{--r:-45}.wings__ghost{width:80%;height:80%;position:absolute;bottom:10%;left:50%;transform:translate(-50%)}.wings__top{width:100%;height:10%;position:absolute;top:0;left:0}.wings__bottom{width:100%;height:10%;position:absolute;bottom:0;left:0}.wings__strobe{width:4%;height:4%;position:absolute;bottom:10%;left:50%}.wings__strobe--left{transform:translate3d(-50%,0,calc(var(--base-size)*1vmin))}.wings__strobe--right{transform:translate3d(-50%,0,calc(var(--base-size)*-1vmin))}.cuboid--body{--thickness:calc(var(--base-size)*.4);--color-one:var(--white-one);--color-two:var(--white-two);--color-three:var(--white-three);--color-four:var(--white-four);--color-five:var(--white-two);--color-six:var(--white-two)}.cuboid--body div:nth-of-type(5):after,.cuboid--body div:nth-of-type(6):after{content:"";height:calc(var(--base-size)*.25vmin);width:calc(var(--base-size)*.25vmin);filter:saturate(.65);background-image:url(https://assets.codepen.io/605876/avatar.png);background-size:cover;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,1px)}.cuboid--screen{--thickness:calc(var(--base-size)*.26);--color-one:var(--screen);--color-two:var(--screen);--color-three:var(--screen);--color-four:var(--screen);--color-five:var(--screen);--color-six:var(--screen)}.cuboid--tail{--thickness:calc(var(--base-size)*.3);--color-one:var(--white-one);--color-two:var(--white-two);--color-three:var(--white-three);--color-four:var(--white-four);--color-five:var(--white-two);--color-six:var(--white-two)}.cuboid--tail div:first-of-type:after{content:"";background:var(--metal-three);width:50%;height:74%;position:absolute;top:50%;right:50%;transform:translate3d(-50%,-50%,1px)}.cuboid--tail div:nth-of-type(2){background:linear-gradient(var(--white-two)0 30%,transparent 30%)}.cuboid--tail div:nth-of-type(3){background:linear-gradient(90deg,var(--white-two)0 20%,transparent 20%)}.cuboid--tail div:nth-of-type(3):after{content:"";background:var(--white-four);transform-origin:0;width:87%;height:100%;position:absolute;top:0%;left:20%;transform:rotateY(-22deg)}.cuboid--tail div:nth-of-type(5){background:0 0;overflow:hidden}.cuboid--tail div:nth-of-type(5):after{content:"";background:var(--white-two);transform-origin:100% 100%;width:100%;height:100%;position:absolute;bottom:70%;transform:rotate(-22deg)scale(2)translate(10%)}.cuboid--tail div:nth-of-type(6){background:0 0;overflow:hidden}.cuboid--tail div:nth-of-type(6):after{content:"";background:var(--white-two);transform-origin:0 100%;width:100%;height:100%;position:absolute;bottom:70%;transform:rotate(22deg)scale(2)translate(-10%)}.cuboid--nose{--thickness:calc(var(--base-size)*.3);--color-one:var(--metal-one);--color-two:var(--metal-two);--color-three:var(--metal-one);--color-four:var(--metal-two);--color-five:var(--metal-three);--color-six:var(--metal-three)}.cuboid--wings-top,.cuboid--wings-bottom{--thickness:calc(var(--base-size)*2.2);--color-one:var(--accent-two);--color-two:var(--accent-three);--color-three:var(--accent-five);--color-four:var(--accent-four);--color-five:var(--accent-three);--color-six:var(--accent-five)}.cuboid--wings-ghost{--thickness:calc(var(--base-size)*2.2);--color-one:transparent;--color-two:linear-gradient(90deg,transparent 0 5%,var(--metal-one)5% 7%,transparent 7% 33%,var(--metal-one)33% 35%,transparent 35% 65%,var(--metal-one)65% 67%,transparent 67% 93%,var(--metal-one)93% 95%,transparent 95%);--color-three:transparent;--color-four:linear-gradient(90deg,transparent 0 5%,var(--metal-one)5% 7%,transparent 7% 33%,var(--metal-one)33% 35%,transparent 35% 65%,var(--metal-one)65% 67%,transparent 67% 93%,var(--metal-one)93% 95%,transparent 95%);--color-five:transparent;--color-six:transparent}.cuboid--axle{--thickness:calc(var(--base-size)*.5);--color-one:var(--metal-one);--color-two:var(--metal-one);--color-three:var(--metal-three);--color-four:var(--metal-two);--color-five:var(--metal-two);--color-six:var(--metal-one)}.cuboid--horizontal-stabilizer{--thickness:calc(var(--base-size)*.65);--color-one:var(--accent-two);--color-two:var(--accent-three);--color-three:var(--accent-four);--color-four:var(--accent-four);--color-five:var(--accent-three);--color-six:var(--accent-five)}.cuboid--vertical-stabilizer{--thickness:calc(var(--base-size)*.4);--color-one:var(--accent-two);--color-two:var(--accent-three);--color-three:var(--accent-four);--color-four:var(--accent-four);--color-five:var(--accent-three);--color-six:var(--accent-five)}.cuboid--strobe{--thickness:calc(var(--base-size)*.2);--color-one:var(--white-two);--color-two:var(--white-three);--color-three:var(--white-four);--color-four:var(--white-three);--color-five:var(--white-three);--color-six:var(--white-five)}.cuboid--wheel-left,.cuboid--wheel-right{--thickness:calc(var(--base-size)*.4);--color-one:var(--wheel-two);--color-two:var(--wheel-three);--color-three:var(--wheel-one);--color-four:var(--wheel-two);--color-five:var(--wheel-three);--color-six:var(--wheel-one)}.cuboid--wheel-left div:nth-of-type(5):after,.cuboid--wheel-right div:nth-of-type(5):after{content:"";background:var(--wheel-hub);border-radius:50%;width:40%;height:40%;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,1px)}.cuboid--beacon{--thickness:calc(var(--base-size)*.1);--color-one:var(--white-two);--color-two:var(--white-three);--color-three:var(--white-four);--color-four:var(--white-three);--color-five:var(--white-three);--color-six:var(--white-five)}