html{box-sizing: border-box; --black: #1a1c20; --white: #fff; --green: #00a8c3; --d-green: #01779b; --gray: #c1c1c1; --l-gray: #c4c4c4; --m-gray: #373838; --d-gray: #282724; --d-blue: #202428; --orange: #ef6206; --yellow: #dfa500; --l-yellow: #deb953; --light: #fbfbfb; --n-road: -4em; --p-road: 7em; background-color: var(--green);}html *,html *::before,html *::after{box-sizing: inherit;}body::before,body::after{content: " "; position: absolute;}body{margin: 0; height: 100vh; display: flex; overflow: hidden; position: relative; align-items: center; justify-content: center; background-repeat: no-repeat; animation: car 3.5s cubic-bezier(0.57, 0.63, 0.49, 0.65) infinite; background-image: /*===rubber-l */ radial-gradient( circle at 49% 117%, var(--black) 37%, transparent 38% ), radial-gradient(circle at -24% 50%, var(--white) 31%, transparent 49%), radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%), radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%), linear-gradient(var(--black) 100%, transparent 0), /* rubber-l===*/ /*===rubber-r */ radial-gradient(circle at 49% 117%, var(--black) 37%, transparent 38%), radial-gradient(circle at 124% 50%, var(--white) 31%, transparent 49%), radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%), radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%), linear-gradient(var(--black) 100%, transparent 0), /* rubber-r===*/ /*===shadow */ linear-gradient(var(--d-green) 100%, transparent 0); /* shadow===*/ background-size: /*===rubber-l */ 2.5em 2.5em, 0.7em 0.6em, 2.5em 0.9em, 2.5em 0.9em, 1.95em 3.9em, /* rubber-l===*/ /*===rubber-r */ 2.5em 2.5em, 0.7em 0.6em, 2.5em 0.9em, 2.5em 0.9em, 1.95em 3.9em, /* rubber-r===*/ /*===shadow */ 13em 0.9em; /* shadow===*/ background-position: /*===rubber-l */ calc(50% - 6.4em) calc(50% - 1.7em), calc(50% - 5.26em) calc(50% - -3.4em), calc(50% - 6.5em) calc(50% - -3.8em), calc(50% - 4.3em) calc(50% - -3.2em), calc(50% - 6.58em) calc(50% - -1.5em), /* rubber-l===*/ /*===rubber-r */ calc(50% - -6.45em) calc(50% - 1.7em), calc(50% - -5.26em) calc(50% - -3.4em), calc(50% - -6.5em) calc(50% - -3.8em), calc(50% - -4.3em) calc(50% - -3.2em), calc(50% - -6.58em) calc(50% - -1.5em), /* rubber-r===*/ /*===shadow */ center calc(50% - -3.8em); /* shadow===*/}body::before{width: 15.5em; height: 62.9em; top: calc(50% - 26.2em); background-size: 24.6% 491%; background-repeat: no-repeat; background-position: center 0; animation: line 1.5s infinite linear, move-road 3.5s infinite linear; transform: perspective(311px) rotateX(83deg) translate3d(var(--n-road), -11.975em, 0); background-image: repeating-linear-gradient( to top, var(--white), var(--white) 4.6%, transparent 0, transparent 13.01% );}body::after{width: 15.2em; height: 13.2em; top: calc(50% - 8.8em); left: calc(50% - 7.55em); background-repeat: no-repeat; animation: light 1s linear infinite, shake 3.5s linear infinite; background-image: /*===ceiling */ radial-gradient( 58em 20em at 50% 215%, transparent 20%, var(--white) 20.5%, var(--white) 20.8%, var(--green) 21.5% ), /* ceiling===*/ /*===antenna */ radial-gradient(circle at center 100%, var(--black) 30%, transparent 0), /* antenna===*/ /*===antenna */ linear-gradient(var(--white) 100%, transparent 0), /* antenna===*/ /*===glass-l */ radial-gradient( 17.8em 37em at 70% 240%, var(--black) 30%, transparent 30.5% ), /* glass-l===*/ /*===glass-r */ radial-gradient( 17.8em 37em at 31% 240%, var(--black) 30%, transparent 30.5% ), /* glass-r===*/ /*===light */ radial-gradient( circle, var(--light) 48%, var(--black) 52%, var(--black) 59%, transparent 62% ), /* light===*/ /*===light */ radial-gradient( circle, var(--light) 48%, var(--black) 52%, var(--black) 59%, transparent 62% ), /* light===*/ /*===hood-ro */ radial-gradient(1em 1em at 102% 100%, var(--m-gray) 28%, #f3f3f3 30%), /* hood-ro===*/ /*===hood-ro */ radial-gradient(1em 1em at 97% -7%, var(--m-gray) 28%, var(--l-gray) 30%), /* hood-ro===*/ /*===hood-ro */ radial-gradient(1em 1em at -6% 102%, var(--m-gray) 28%, #efefef 30%), /* hood-ro===*/ /*===hood-ro */ radial-gradient(1em 1em at -6% -1%, var(--m-gray) 28%, var(--l-gray) 30%), /* hood-ro===*/ /*===hood-f */ linear-gradient( to top, var(--m-gray) 50%, var(--d-gray) 0, var(--d-gray) 58%, var(--m-gray) 0 ), /* hood-f===*/ /*===hood-e */ linear-gradient( to top, var(--l-gray) 30%, var(--white) 100%, transparent 0 ), /* hood-e===*/ /*===hood-l */ radial-gradient( 16.4em 30.1em at 209% 333%, var(--white) 30%, transparent 30.2% ), /* hood-l===*/ /*===hood-r */ radial-gradient( 16.4em 30.1em at -109% 333%, var(--white) 30%, transparent 30.2% ), /* hood-r===*/ /*===hood-o */ linear-gradient(var(--gray) 100%, transparent 0), /* hood-o===*/ /*===hood */ linear-gradient(var(--white) 100%, transparent 0), /* hood===*/ /*===mirror */ radial-gradient(6.7em 2.5em at 154% 8%, var(--black) 30%, transparent 33%), /* mirror===*/ /*===mirror */ radial-gradient(6.7em 2.5em at -53% 8%, var(--black) 30%, transparent 33%), /* mirror===*/ /*===guide-l */ linear-gradient(var(--orange) 100%, transparent 0), /* guide-l===*/ /*===guide-r */ linear-gradient(var(--orange) 100%, transparent 0), /* guide-r===*/ /*===plaque */ linear-gradient(var(--yellow) 100%, transparent 0), /* plaque===*/ /*===plaque */ linear-gradient(var(--l-yellow) 100%, transparent 0), /* plaque===*/ /*===bumper */ linear-gradient(var(--d-blue) 100%, transparent 0), /* bumper===*/ /*===bumper-l */ radial-gradient(circle at 124% 39%, var(--d-blue) 60%, transparent 64%), /* bumper-l===*/ /*===bumper-r */ radial-gradient(circle at -44% 39%, var(--d-blue) 60%, transparent 64%), /* bumper-r===*/ /*===bumper-d */ radial-gradient( 13.2em 2em at 50% 59%, var(--l-gray) 96%, transparent 100% ), /* bumper-d===*/ /*===bumper-l */ radial-gradient( 1.6em 1.6em at 75% -9%, var(--l-gray) 60%, transparent 64% ), /* bumper-l===*/ /*===bumper-r */ radial-gradient( 1.6em 1.6em at 15% -9%, var(--l-gray) 60%, transparent 64% ), /* bumper-r===*/ /*===floor */ linear-gradient(var(--d-blue) 100%, transparent 0), /* floor===*/ /*===floor-l */ radial-gradient( 6.9em 4.6em at 295% 3%, var(--d-blue) 30%, transparent 31% ), /* floor-l===*/ /*===floor-r */ radial-gradient( 6.9em 4.6em at -189% 3%, var(--d-blue) 30%, transparent 31% ); /* floor-r===*/ background-size: /*===ceiling */ 61.5% 20%, /* ceiling===*/ /*===antenna */ 5% 6%, /* antenna===*/ /*===antenna */ 0.4% 39%, /* antenna===*/ /*===glass-l */ 60% 30%, /* glass-l===*/ /*===glass-r */ 60% 30%, /* glass-r===*/ /*===light */ 16% 16%, /* light===*/ /*===light */ 16% 16%, /* light===*/ /*===hood-ro */ 2.4% 2%, /* hood-ro===*/ /*===hood-ro */ 2.4% 2.3%, /* hood-ro===*/ /*===hood-ro */ 2.4% 2.3%, /* hood-ro===*/ /*===hood-ro */ 2.4% 2.3%, /* hood-ro===*/ /*===hood-f */ 91% 12%, /* hood-f===*/ /*===hood-e */ 93.9% 17%, /* hood-e===*/ /*===hood-l */ 12% 17.5%, /* hood-l===*/ /*===hood-r */ 12% 17.5%, /* hood-r===*/ /*===hood-o */ 38% 1.1%, /* hood-o===*/ /*===hood */ 77% 25%, /* hood===*/ /*===mirror */ 9% 30%, /* mirror===*/ /*===mirror */ 9% 30%, /* mirror===*/ /*===guide-l */ 8.4% 3%, /* guide-l===*/ /*===guide-r */ 8.4% 3%, /* guide-r===*/ /*===plaque */ 33% 6.5%, /* plaque===*/ /*===plaque */ 36% 9%, /* plaque===*/ /*===bumper */ 87% 30%, /* bumper===*/ /*===bumper-l */ 10% 12%, /* bumper-l===*/ /*===bumper-r */ 10% 12%, /* bumper-r===*/ /*===bumper-d */ 78% 35%, /* bumper-d===*/ /*===bumper-l */ 11% 8%, /* bumper-l===*/ /*===bumper-r */ 11% 8%, /* bumper-r===*/ /*===floor */ 68% 8%, /* floor===*/ /*===floor-l */ 5% 7%, /* floor-l===*/ /*===floor-r */ 5% 7%; /* floor-r===*/ background-position: /*===ceiling */ 50.5% 0, /* ceiling===*/ /*===antenna */ 90% 37%, /* antenna===*/ /*===antenna */ 88% 1.2%, /* antenna===*/ /*===glass-l */ 0 11.7%, /* glass-l===*/ /*===glass-r */ 100% 11.7%, /* glass-r===*/ /*===light */ 5% 63%, /* light===*/ /*===light */ 95% 63%, /* light===*/ /*===hood-ro */ 4.1% 55.7%, /* hood-ro===*/ /*===hood-ro */ 4.1% 65.9%, /* hood-ro===*/ /*===hood-ro */ 95.8% 55.7%, /* hood-ro===*/ /*===hood-ro */ 95.8% 65.8%, /* hood-ro===*/ /*===hood-f */ center 62%, /* hood-f===*/ /*===hood-e */ 49% 63.6%, /* hood-e===*/ /*===hood-l */ 3.4% 46.2%, /* hood-l===*/ /*===hood-r */ 96.5% 46.2%, /* hood-r===*/ /*===hood-o */ center 40.9%, /* hood-o===*/ /*===hood */ center 50.3%, /* hood===*/ /*===mirror */ 5.7% 48.6%, /* mirror===*/ /*===mirror */ 95% 48.6%, /* mirror===*/ /*===guide-l */ 5% 75.2%, /* guide-l===*/ /*===guide-r */ 95% 75.2%, /* guide-r===*/ /*===plaque */ 51% 86%, /* plaque===*/ /*===plaque */ 51.5% 87.3%, /* plaque===*/ /*===bumper */ center 71.9%, /* bumper===*/ /*===bumper-l */ -0.8% 77.8%, /* bumper-l===*/ /*===bumper-r */ 101.7% 77.8%, /* bumper-r===*/ /*===bumper-d */ center 80.2%, /* bumper-d===*/ /*===bumper-l */ 4% 85.9%, /* bumper-l===*/ /*===bumper-r */ 97% 85.9%, /* bumper-r===*/ /*===floor */ center 92.5%, /* floor===*/ /*===floor-l */ 11.7% 92.6%, /* floor-l===*/ /*===floor-r */ 88.3% 92.6%; /* floor-r===*/}@keyframes line{100%{background-position: center 100%;}}@keyframes car{15%, 23%{transform: translate3d(-2.3em, 0, 0);}36%, 42%{transform: translate3d(-0.8em, 0, 0);}61%, 71.5%{transform: translate3d(2.8em, 0, 0);}81%, 88%{transform: translate3d(1.5em, 0, 0);}}@keyframes move-road{5.5%{transform: perspective(311px) rotateX(83deg) translate3d(var(--n-road), -11.975em, 0);}27%, 51%{transform: perspective(311px) rotateX(83deg) translate3d(var(--p-road), -11.975em, 0);}73%, 100%{transform: perspective(311px) rotateX(83deg) translate3d(var(--n-road), -11.975em, 0);}}@keyframes light{0%, 37%{--light: #fbfbfb;}50%{--light: #f1f1f1;}62%{--light: #fbfbfb;}65%{--light: #f1f1f1;}95%{--light: #fbfbfb;}100%{--light: #f1f1f1;}}@keyframes shake{5%, 26%{transform: rotate(-1.5deg);}33%, 41%{transform: rotate(-0.5deg);}48%, 69%{transform: rotate(1.5deg);}80%, 95%{transform: rotate(0.5deg);}}@media screen and (max-width: 36em){html{transform: scale(0.5);}body::before{width: 11em; --n-road: -4em; --p-road: 4em;}}