@layer normalize{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}}*{box-sizing:border-box;transition:all .25s ease}body{background-color:var(--bg);min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:Fredoka One,cursive;overflow:visible}label{position:absolute;font-size:30px;top:calc(50% + (var(--size) * .15px))}label span:nth-of-type(2){font-weight:300;font-size:16px;position:absolute;left:102%;white-space:nowrap;bottom:0%;transform:translateY(-25%);color:gray}input{font-size:2rem;position:absolute;width:120px;padding:10px;top:calc(50% + (var(--size) * .15px) + 44px);z-index:2;text-align:center}input:in-range{border:5px solid #9ef075}input:out-of-range{border:5px solid #f09475;animation:shake .1s infinite alternate}:root{--bg: #f5f5f5;--size: 300;--truck-hue: 0;--chrome-hue: 58;--glass-hue: 200;--indicator-hue: 40;--tail-light-hue: 15;--trim-width: 2;--plastic-lightness: 20;--coilover-lightness: 15;--grill-lightness: 60;--chrome-lightness: 80;--chrome-lightness-highlight: 95;--chassis-lightness: 20}@media(min-width:768px){:root{--trim-width: 4;--size: 600}}@media(max-height:600px){:root{--trim-width: 2;--size: 400}}input:out-of-range~.truck{--elevated: 1}input:out-of-range~.truck .truck__body-wrapper{--multiplier: .18}input:out-of-range~.truck .truck__engine-block-wrapper{--engine-rise: 0}input:out-of-range~.truck .truck__light-bar{--light-bar-scale: 1}input:out-of-range~.truck .truck__wheel-container{--wheel-scale: 2}input:out-of-range~.truck .truck__underbody{--multiplier: .26}.truck{--coilover: hsl(var(--truck-hue), 100%, calc(var(--coilover-lightness) * 1%));--chassis: hsl(var(--truck-hue), 100%, calc(var(--chassis-lightness) * 1%));--plastic: hsl(var(--truck-hue), 0%, calc(var(--plastic-lightness) * 1%));--grill: hsl(var(--truck-hue), 0%, calc(var(--grill-lightness) * 1%));--chrome: hsl(var(--truck-hue), 0%, calc(var(--chrome-lightness) * 1%));--chrome-highlight: hsl(var(--truck-hue), 0%, calc(var(--chrome-lightness-highlight) * 1%));--wheel-height: calc(var(--size) * .12);--wheel-width: calc(var(--size) * .14);height:calc(var(--size) * 1px);position:absolute;top:50%;left:50%;width:calc(var(--size) * 1px);transform:translate(-50%,-90%);transform-style:preserve-3d;animation:upsydownsy 5s infinite linear}.truck__body-wrapper{--multiplier: 0;--multiplier: .39;position:absolute;transform:translateY(calc((var(--size) * var(--multiplier)) * 1px));width:100%;z-index:3}.truck__body{animation:body-rumble .1s infinite ease-in-out}@keyframes body-rumble{0%,to{transform:translate3d(0,0)}50%{transform:translateY(calc(var(--size) * .0015px))}}.truck__front{border-radius:5% 5% 0 0/15% 15% 0 0;position:absolute;top:calc(var(--size) * .425px);right:4%;height:calc(var(--size) * .1px);width:calc(var(--size) * .295px);background:hsl(var(--truck-hue),100%,40%);z-index:5}.truck__grill{height:85%;width:100%;--bg: var(--grill);--chrome-highlight: hsl(var(--truck-hue), 0%, calc((var(--grill-lightness) + 20) * 1%));background:linear-gradient(125deg,transparent,transparent 25%,var(--chrome-highlight) 25%,var(--chrome-highlight) 30%,transparent 30%,transparent 35%,var(--chrome-highlight) 35%,var(--chrome-highlight) 45%,transparent 45%),var(--bg);position:absolute;bottom:5%;left:0;overflow:hidden}.truck__front-bumper{border-radius:calc(var(--trim-width) * 1px);position:absolute;top:100%;width:116%;height:45%;background:linear-gradient(125deg,var(--chrome),var(--chrome) 10%,var(--chrome-highlight) 10%,var(--chrome-highlight) 15%,var(--chrome) 15%,var(--chrome) 20%,var(--chrome-highlight) 20%,var(--chrome-highlight) 30%,var(--chrome) 30%);left:-6%}.truck__front-bumper:before{left:28%}.truck__front-bumper:after{left:57%}.truck__headlight{border-radius:10%;position:absolute;height:calc(var(--size) * .046px);width:calc(var(--size) * .046px);background:#fff;top:15%;width:15%}.truck__headlight:after{border-radius:10%;content:"";background:hsl(var(--indicator-hue),100%,50%);position:absolute;height:30%;width:100%;top:110%}.truck__headlight--left{left:5%}.truck__headlight--right{right:5%}.truck__grill-vent{position:absolute;bottom:15%;height:70%;width:54%;z-index:2;left:50%;transform:translate(-50%);--black: hsl(var(--truck-hue), 0%, calc(var(--plastic-lightness) * 1%));background:repeating-linear-gradient(0deg,var(--black) 0,var(--black) 20%,transparent 20%,transparent 40%)}.truck__bonnet{background:hsl(var(--truck-hue),100%,40%);border-radius:2% 2% 0 0/100% 100% 0 0;width:160%;position:absolute;top:0;right:0;height:15%}.truck__bonnet:before{position:absolute;content:"";height:1200%;width:1%;background:var(--chrome);bottom:90%;left:10%;transform-origin:bottom center;animation:sway .2s infinite ease}@keyframes sway{0%,to{transform:rotate(0)}50%{transform:rotate(-15deg)}}.truck__cab{--glass: hsl(var(--glass-hue), 100%, 60%);--glass-highlight: hsl(var(--glass-hue), 100%, 90%);height:calc(var(--size) * .12px);width:calc(var(--size) * .425px);position:absolute;top:calc(var(--size) * .32px);left:28%;z-index:2}.truck__windshield{background:hsl(var(--truck-hue),100%,50%);border-radius:0 15% 0 0;position:absolute;height:100%;width:60%;right:0;top:0;transform:skew(30deg);z-index:2}.truck__windshield:after{content:"";position:absolute;height:80%;width:85%;background:linear-gradient(140deg,transparent 0,transparent 10%,var(--glass-highlight) 10%,var(--glass-highlight) 15%,transparent 15%,transparent 20%,var(--glass-highlight) 20%,var(--glass-highlight) 30%,transparent 30%),var(--glass);top:10%;left:10%;border-radius:8% 15% 0 0}.truck__wing-mirror{background:var(--chrome);position:absolute;top:55%;height:25%;width:10%;border-radius:25%}.truck__wing-mirror--left{z-index:3;left:25%;border-radius:25% 5% 5% 25%}.truck__wing-mirror--left:after{content:"";position:absolute;top:50%;height:20%;width:40%;background:var(--chrome);left:95%}.truck__wing-mirror--right{right:-10%}.truck__side-step{position:absolute;bottom:-5%;left:28%;width:12%;height:10%;background:var(--plastic);border-radius:calc(var(--trim-width) * 1px) calc(var(--trim-width) * 1px) 0 0}.truck__side-window-frame{background:hsl(var(--truck-hue),100%,50%);position:absolute;height:100%;width:60%;left:0%;top:0;transform:skew(-10deg);border-radius:10% 0 0/25% 0 0}.truck__side-window-frame:after{border-radius:10% 0 0/25% 0 0;content:"";position:absolute;top:10%;left:10%;height:80%;width:45%;background:var(--glass)}.truck__side-window-frame:before{content:"";position:absolute;top:10%;width:25%;background:hsl(var(--truck-hue),0%,calc(var(--plastic-lightness) * 1%));height:80%;left:50%}.truck__engine-block-wrapper{position:absolute;height:calc(var(--size) * .075px);width:calc(var(--size) * .18px);right:calc(var(--size) * .2px);top:calc(var(--size) * .3525px);transform:translateY(calc(var(--engine-rise, 100) * 1%));z-index:3}.truck__engine-block{height:100%;width:100%;animation:rumble .1s infinite ease}.truck__engine-block:before{content:"";position:absolute;top:70%;left:25%;background:linear-gradient(90deg,var(--grill) 0,var(--grill) 20%,var(--chrome) 20%,var(--chrome));width:50%;height:30%}.truck__engine-block-head{position:absolute;top:0;width:100%;left:0;height:80%;background:var(--grill);border-radius:25%/50%;overflow:hidden}.truck__engine-block-hole{position:absolute;background:var(--plastic);border-radius:100%;top:20%;height:60%;width:20%;left:55%}.truck__engine-block-front{position:absolute;border-radius:25%/50%;top:0;width:100%;background:var(--chrome);height:100%;left:20%}.truck__engine-block-front:after,.truck__engine-block-front:before{content:"";position:absolute;background:var(--plastic);height:60%;top:20%;width:20%;border-radius:100%}.truck__engine-block-front:before{left:5%}.truck__engine-block-front:after{left:30%}@keyframes rumble{0%,to{transform:translate(0)}50%{transform:translateY(5%)}}.truck__side-body{--wheel-arch-rear-height: 40;--wheel-arch-front-height: 55;--wheel-arch-width: 18;--wheel-arch-rear-left: 6;--wheel-arch-front-left: 45;border-radius:2% 0 0/10% 0 0;background:hsl(var(--truck-hue),100%,50%);height:calc(var(--size) * .14px);position:absolute;left:calc(var(--size) * .05px);width:calc(var(--size) * .9px);top:calc(var(--size) * .425px);z-index:4;--trim-offset: calc(var(--trim-width) * 1px);--rear-wheel-left: calc((var(--trim-offset)) + (var(--wheel-arch-rear-left) * 1%));--rear-wheel-top: calc((var(--trim-offset)) + (100 - var(--wheel-arch-rear-height)) * 1%);--rear-wheel-right: calc(var(--rear-wheel-left) + ((var(--wheel-arch-width) * 1%) - var(--trim-offset) * 2));--front-wheel-left: calc((var(--trim-offset)) + (var(--wheel-arch-front-left) * 1%));--front-wheel-top: calc((var(--trim-offset)) + (100 - var(--wheel-arch-front-height)) * 1%);--front-wheel-right: calc(var(--front-wheel-left) + ((var(--wheel-arch-width) * 1%) - var(--trim-offset) * 2));--clip: polygon(-10% 110%, var(--rear-wheel-left) 110%, var(--rear-wheel-left) var(--rear-wheel-top), var(--rear-wheel-right) var(--rear-wheel-top), var(--rear-wheel-right) 110%, var(--front-wheel-left) 110%, var(--front-wheel-left) var(--front-wheel-top), var(--front-wheel-right) var(--front-wheel-top), var(--front-wheel-right) 110%, 110% 110%, 110% -10%, -10% -10%);clip-path:var(--clip)}.truck__side-body:after{content:"";position:absolute;top:15%;left:30%;background:var(--chrome);height:5%;width:5%;border-radius:calc(var(--trim-width) * 1px)}.truck__rear-bumper{border-radius:calc(var(--trim-width) * 1px);position:absolute;top:70%;height:35%;left:0%;background:var(--chrome);width:5%;transform:translate(-50%)}.truck__tail-light{position:absolute;border-radius:0 25% 25% 0/0 20% 20% 0;--grey: var(--chrome);border:calc(var(--trim-width) * 1px) solid var(--grey);border-left:0;top:16%;height:calc(var(--size) * .046px);width:calc(var(--size) * .023px);background:hsl(var(--tail-light-hue),100%,50%);left:0%}.truck__wheel-arch{background:var(--chrome);border-bottom:0;height:calc(var(--wheel-arch-height) * 1%);width:calc(var(--wheel-arch-width) * 1%);position:absolute;bottom:0;left:calc(var(--wheel-arch-left) * 1%)}.truck__wheel-arch--back{--wheel-arch-height: var(--wheel-arch-rear-height);--wheel-arch-left: var(--wheel-arch-rear-left)}.truck__wheel-arch--front{--wheel-arch-height: var(--wheel-arch-front-height);--wheel-arch-left: var(--wheel-arch-front-left)}.truck__light-bar{height:calc(var(--size) * .0075px);width:calc(var(--size) * .18px);background:var(--grill);position:absolute;top:calc(var(--size) * .3px);left:calc(var(--size) * .45px);border-radius:calc(var(--trim-width) * 1px) calc(var(--trim-width) * 1px) 0 0;transform:translateY(500%) translateY(calc(var(--light-bar-scale, 0) * -500%))}.truck__light-bar-light{height:350%;width:80%;background:#fff;position:absolute;top:50%;transform-origin:center;left:50%;border:calc(var(--trim-width) * 1px) solid var(--grill);border-radius:calc(var(--trim-width) * 1px);transform:translate(-50%,-50%)}.truck__light-bar:after,.truck__light-bar:before{content:"";background:var(--grill);position:absolute;top:50%;width:5%;height:250%}.truck__light-bar:before{left:0}.truck__light-bar:after{right:0}.truck__bars{position:absolute;width:calc(var(--size) * .2px);height:calc(var(--size) * .12px);top:calc(var(--size) * .325px);left:calc(var(--size) * .1px)}.truck__bar{position:absolute;background:var(--grill);width:10%;height:100%;border-radius:50%/10%;transform-origin:bottom center}.truck__bar--vertical{left:75%;top:0;transform:rotate(10deg) scaleY(1)}.truck__bar--horizontal{height:140%;left:0%;top:0;transform:rotate(48deg) translateY(-40%) scaleY(1)}.truck__wheel{border-radius:50% 35% 35% 50%/50%;background:#111;position:absolute;transform-style:preserve-3d;transform-origin:bottom center;transform:scale(var(--wheel-scale, 1));height:100%;width:100%}.truck__wheel-face{height:100%;width:calc(var(--wheel-height) * 1px);background:var(--plastic);border-radius:100%;position:absolute;left:0;top:0}.truck__wheel-hub{--hub-size: calc(var(--size) * .07px);box-shadow:calc(var(--size) * .018px) 0 0 0 var(--grill) inset;border:calc(var(--trim-width) * 1px) solid var(--chrome);background:var(--plastic);height:var(--hub-size);width:var(--hub-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden}.truck__wheel-alloy{height:100%;width:100%;position:absolute;top:0;left:15%;animation:spin .5s infinite linear;border-radius:100%;overflow:hidden}@keyframes spin{to{transform:rotate(360deg)}}.truck__wheel-spoke{height:50%;width:25%;position:absolute;top:50%;left:50%;background:var(--chrome);transform-origin:top center;transform:translate(-50%) rotate(calc(360 / 5 * var(--s) * 1deg))}.truck__wheel-container{height:calc(var(--wheel-height) * 1px);width:calc(var(--wheel-width) * 1px);position:absolute;left:12.5%;bottom:0}.truck__wheel-container--nsf{left:47.5%;z-index:calc(var(--elevated, 0) * 2)}.truck__wheel-container--osf,.truck__wheel-container--osr{left:44%;filter:brightness(.25);--plastic: #000;transform:translateZ(-1px)}.truck__wheel-container--osf .truck__coilover,.truck__wheel-container--osr .truck__coilover{transform:translate3d(-50%,0,0);z-index:2}.truck__wheel-container--osf{left:79%}.truck__coilover{width:10%;height:100%;position:absolute;bottom:50%;left:50%;transform:translate3d(-50%,0,-1px);background:var(--grill)}.truck__coilover:after{content:"";background:repeating-linear-gradient(20deg,transparent,transparent 6%,var(--coilover) 6%,var(--coilover) 11%,transparent 11%);width:150%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.truck__chassis{background:#00000080;width:100%;position:absolute;bottom:0}.truck__underbody{--multiplier: .05;background:#000;width:80%;left:50%;position:absolute;height:calc(var(--size) * .1px);bottom:calc(var(--size) * var(--multiplier, 1) * 1px);transform:translate3d(-50%,0,-1px)}.truck__chassis-beam{position:absolute;bottom:50%;background:var(--chassis)}.truck__chassis-beam--vertical{position:absolute;width:5%;height:calc(var(--wheel-height) * .5px);bottom:0;transform:scale(calc(var(--elevated) + 1));transform-origin:bottom center}.truck__chassis-beam--vertical-left{left:35%}.truck__chassis-beam--vertical-right{left:65%}.truck__chassis-beam--horizontal{transform:translate3d(0,50%,-1px);width:calc(var(--wheel-width) * 2.4px);height:calc(var(--wheel-height) * .15px);bottom:calc(var(--wheel-width) * ((var(--elevated, 0) + 1) / 2) * 1px);transform:translate3d(0,100%,-1px) scaleY(calc(var(--elevated, 0) + 1));filter:brightness(var(--elevated, 0))}.truck__chassis-beam--horizontal-left{left:calc(12.5% + (var(--wheel-width) * .5px))}.truck__chassis-beam--horizontal-right{left:calc(47.5% + (var(--wheel-width) * .5px))}@keyframes upsydownsy{0%,to{transform:translate(-50%,-90%)}50%{transform:translate(-50%,-92%)}}@keyframes shake{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-1%,3%) rotate(-2deg)}50%{transform:translate(1%,2%) rotate(2deg)}75%{transform:translate(1%,-2%) rotate(-1deg)}}@keyframes shake-truck{0%,to{transform:translateY(-50%) rotate(0)}25%{transform:translateY(-50%) rotate(-2deg)}50%{transform:translateY(-50%) rotate(2deg)}75%{transform:translateY(-50%) rotate(-1deg)}}