<div class='delorean'>
  <div class='shadow'></div>
  <div class='arrow'></div>
  <div class='burners'>
    <div class='burner right'></div>
    <div class='tank'></div>
    <div class='burner left'></div>
    <div class='wire a'></div>
    <div class='wire b'></div>
  </div>
  <div class='body'>
    <div class='part1'></div>
    <div class='part2'></div>
    <div class='part3'></div>
    <div class='part4'></div>
    <div class='part5'></div>
    <div class='part6'></div>
    <div class='part7'></div>
    <div class='part8'></div>
    <div class='part9'></div>
  </div>
  <div class='fixture'>
    <div class='top'></div>
    <div class='part1'></div>
    <div class='part2'></div>
    <div class='part3'></div>
    <div class='part4'></div>
    <div class='part5'></div>
  </div>
  <div class='windows'>
    <div class='windshield'></div>
    <div class='front'></div>
    <div class='back'></div>
    <div class='containers'>
      <div class='base'></div>
      <div class='container a'></div>
      <div class='container b'></div>
      <div class='container c'></div>
      <div class='container d'></div>
      <div class='container e'></div>
      <div class='container f'></div>
    </div>
  </div>
  <div class='door'>
    <div class='line a'></div>
    <div class='line b'></div>
    <div class='line c'></div>
    <div class='line d'></div>
    <div class='lock'></div>
    <div class='handle'></div>
    <div class='mirror'></div>
  </div>
  <div class='bumber'>
    <div class='light'></div>
    <div class='part1'></div>
    <div class='part2'></div>
    <div class='part3'></div>
    <div class='part4'></div>
    <div class='part5'></div>
  </div>
  <div class='fenders'>
    <div class='fender left'></div>
    <div class='fender right'></div>
  </div>
  <div class='wires'>
    <div class='wire a'></div>
    <div class='wire b'></div>
    <div class='wire c'></div>
    <div class='wire d'></div>
    <div class='wire e'></div>
    <div class='wire f'></div>
    <div class='wire g'></div>
    <div class='wire h'></div>
  </div>
  <div class='wheels'>
    <div class='wheel left'></div>
    <div class='wheel right'></div>
  </div>
</div>

body, html {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: radial-gradient(circle, #c9c0c3, #212026);
}

.delorean {
  width: 95vmin;
  height: 35vmin;
  position: relative;
  
  .shadow {
    position: absolute;
    width: 69%;
    bottom: 10%;
    height: 20%;
    left: 15%;
    border-radius: 15vmin;
    background-image: linear-gradient(90deg, transparent, black 10%, 90%, transparent);
    transform: perspective(88px) rotateX(217deg);
    
    &::after {
      position: absolute;
      content: '';
      background: linear-gradient(90deg, transparent, rgba(52, 51, 54, 0.24) 20%, 80%, transparent);
      width: 80%;
      height: 100%;
      bottom: 18%;
      left: 10%;
      border-radius: 5vmin;
    }
  }
  
  .arrow {
    --color: #c9c8d1;
    position: absolute;
    background: var(--color);
    height: 40%;
    width: 18%;
    opacity: 0.5;
    left: 30%;
    top: 3%;
    transform: skewX(-26deg);
    
    &::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      right: -105%;
      background-image: linear-gradient(90deg, var(--color) 26%, transparent 27%, 32%, var(--color) 32%, 53%, transparent 53%, 58%, var(--color) 58%, 76%, transparent 76%, 82%, var(--color) 82%, 90%, transparent 90%);
    }
    
    &::after {
      position: absolute;
      content: '';
      border: 7vmin solid transparent;
      left: -90%;
      border-right: 14vmin solid var(--color);
      border-left-width: 0;
      transform: scale(1.3);
    }
  }
  
  .burners {
    .tank {
      position: absolute;
      width: 2.8%;
      height: 12%;
      top: 9%;
      right: 20%;
      background-image: linear-gradient(90deg, #6a6a6a 10%, white 51%, 85%, #858585 90%);
      transform: rotate(3deg);
      border-radius: 0.3vmin 0.3vmin 0 0;
      box-shadow: inset 0 0 0.1vmin 0.1vmin black, inset 0 0 0.1vmin 0.2vmin white;
      
      &::before {
        position: absolute;
        content: '';
        width: 114%;
        height: 57%;
        bottom: -42%;
        right: -3%;
        background-image: linear-gradient(90deg, #6a6a6a 10%, white 51%, 85%, #858585 90%);
        border-radius: 0.3vmin 0.3vmin 0 0;
        box-shadow: inset 0 0 0.1vmin 0.1vmin black, inset 0 0 0.1vmin 0.2vmin white;
        transform: perspective(32px) rotateX(50deg);
      }
      
      &::after {
        position: absolute;
        content: '';
        width: 167%;
        height: 88%;
        bottom: -123%;
        right: -32%;
        background-image: linear-gradient(90deg, #202020 10%, #4e4e4e 51%, 85%, #1a1a1a 90%);
        border-radius: 0.3vmin 0.3vmin 0 0;
        box-shadow: inset 0 0 0.1vmin 0.1vmin black, inset 0 0 0.1vmin 0.2vmin #7a7a7a;
      }
    }
    
    .burner {
      position: absolute;
      background: #0d1311;
      
      &::before {
        position: absolute;
        content: '';
        width: 75%;
        height: 171%;
        background: #0d1311;
        top: -85%;
        transform: rotateZ(340deg) skewY(347deg);
        left: 23%;
        border-radius: 0 2vmin 0 0;
      }
      
      &::after {
        position: absolute;
        content: '';
        width: 75%;
        height: 42%;
        background-image: repeating-linear-gradient(34deg, gray 5%, black 6%, 9%, gray 10%);
        top: -69%;
        transform: rotateZ(340deg) skewY(347deg);
        left: 16%;
        border-radius: 0 2vmin 0 0;
      }
      
      &.left {
        width: 15%;
        height: 11%;
        right: 10%;
        top: 33%;
        transform: skewX(-10deg);
        border-radius: 0 0 1vmin 0;
      }
      
      &.right {
        width: 14%;
        height: 10%;
        right: 13%;
        top: 33%;
      }
    }
    
    .wire {
      position: absolute;
      background: repeating-conic-gradient(at 50% 133%, #29272c 0%, 0.5%, transparent 0.5%, transparent 1%), radial-gradient(at 50% 50%, white -6%, #444444 24%, 46%, white 57%, gray 60%, 69%, black 72%);
      border-radius: 50%;
      transform: rotate(12deg);
      
      &.a {
        width: 8%;
        height: 15%;
        top: 24%;
        right: 26%;
      }
      
      &.b {
        width: 10%;
        height: 17%;
        top: 25%;
        right: 21%;
      }
    }
  }
  
  .body {
    position: absolute;
    left: 7%;
    right: 9%;
    top: 27%;
    bottom: 18%;
    
    .part1 {
      position: absolute;
      background-image: linear-gradient(184deg, #e7e7e7, #b9b9b9 10%, #e7e7e7 30%);
      width: 31%;
      height: 36%;
      left: 4%;
      top: 34%;
      transform: rotate(-7deg);
      border-radius: 33%;
    }
    
    .part2 {
      position: absolute;
      background-image: linear-gradient(185deg, #e7e7e7, #b2b4b5 10%, #e7e7e7 37%);
      width: 21%;
      height: 39%;
      left: 30%;
      top: 16%;
      transform: rotate(-20deg);
      border-radius: 5%;
    }
    
    .part3 {
      position: absolute;
      background-image: linear-gradient(180deg, #e7e7e7, #b2b4b5 10%, #e7e7e7 30%);
      width: 27%;
      height: 36%;
      right: 4%;
      top: 12%;
      transform: rotate(13deg);
      border-radius: 5%;
    }
    
    .part4 {
      position: absolute;
      background-image: linear-gradient(#e7e7e7, #b2b4b5 10%, #e7e7e7 70%);
      width: 24%;
      height: 42%;
      right: 28%;
      top: 0%;
      transform: rotate(-2deg);
      border-radius: 10%;
    }
    
    .part5 {
      background: linear-gradient(#e7e7e7 27%, #979797 28%, #283231 33%, 40%, #72787a 41%, 67%, #a5a5a5 70%);
      position: absolute;
      top: 40%;
      left: 6%;
      height: 50%;
      width: 90%;
      transform: rotate(-2deg);
    }
    
    .part6 {
      position: absolute;
      background-image: linear-gradient(#787878 20%, #283231 25%);
      bottom: 0;
      left: 16%;
      height: 12%;
      width: 60%;
    }
    
    .part7 {
      position: absolute;
      right: 2%;
      height: 26%;
      width: 3%;
      top: 23%;
      transform: rotate(-5deg);
      border-radius: 0 41% 0 0;
      background-image: linear-gradient(200deg, transparent 10%, #283231 11%);
    }
    
    .part8 {
      position: absolute;
      right: 1%;
      height: 30%;
      width: 4.5%;
      top: 48%;
      transform: rotate(12deg);
      border-radius: 0 20% 0 0;
      background-image: linear-gradient(-20deg, transparent 10%, #283231 11%);
    }
    
    .part9 {
      position: absolute;
      right: 2%;
      height: 12%;
      width: 15%;
      bottom: 10%;
      transform: rotate(-11deg);
      border-radius: 0 0 40% 0;
      background-image: linear-gradient(-60deg, transparent 10%, #283231 11%);
    }
  }
  
  .fixture {
    .top {
      position: absolute;
      width: 4%;
      height: 4%;
      top: 22.5%;
      right: 34%;
      background-image: linear-gradient(90deg, #202020 10%, #4e4e4e 51%, 85%, #1a1a1a 90%);
      border-radius: 0.3vmin 0.3vmin 0 0;
      box-shadow: inset 0 0 0.1vmin 0.1vmin black, inset 0 0 0.1vmin 0.2vmin #7a7a7a;
      transform: rotate(-1deg);
    }
    
    .part1 {
      position: absolute;
      width: 2%;
      height: 20%;
      right: 34%;
      top: 25%;
      transform: rotate(-5deg);
      background-image: linear-gradient(90deg, black, gray 9%, black 14%, rgb(0 0 0 / 30%) 15%, 85%, black 86%, gray 94%, black);
    }
    
    .part2 {
      position: absolute;
      width: 3%;
      height: 9%;
      right: 32.7%;
      top: 44.8%;
      transform: rotate(-4deg);
      background-image: radial-gradient(circle at 100% 0%, transparent 17%, black 18%, gray 20%, black 24%, rgba(0, 0, 0, 0.3) 25%, 55%, black 56%, gray 59%, black, transparent 63%);
    }
    
    .part3 {
      position: absolute;
      width: 12%;
      height: 5.5%;
      right: 20.7%;
      top: 46.2%;
      transform: rotate(-2deg);
      background-image: linear-gradient(0deg, black, gray 9%, black 14%, rgba(0, 0, 0, 0.3) 15%, 85%, black 86%, gray 94%, black);
    }
    
    .part4 {
      position: absolute;
      width: 3%;
      height: 9%;
      right: 17.8%;
      top: 43.8%;
      transform: rotate(-5deg);
      background-image: radial-gradient(circle at 0% 100%, transparent 17%, black 18%, gray 20%, black 24%, rgba(0, 0, 0, 0.3) 25%, 55%, black 56%, gray 59%, black, transparent 63%);
    }
    
    .part5 {
      position: absolute;
      width: 2%;
      height: 23%;
      right: 17%;
      top: 52.7%;
      transform: rotate(-11deg);
      background-image: linear-gradient(90deg, black, gray 9%, black 14%, rgba(0, 0, 0, 0.3) 15%, 85%, black 86%, gray 94%, black);
    }
  }
  
  .windows {
    
    .windshield {
      position: absolute;
      background-image: linear-gradient(95deg, transparent 30%, black 50%, #d9e3e1 60%);
      width: 1%;
      height: 39%;
      top: 17%;
      left: 40%;
      border-radius: 0 0 6vmin 2vmin;
      transform: rotate(64deg);
      border-bottom: 0.3vmin solid black;
      border-right: 0.3vmin solid black;
    }
    
    .front {
      position: absolute;
      border: 0.3vmin solid black;
      border-left-color: transparent;
      width: 12.5%;
      height: 15%;
      top: 30%;
      left: 49%;
      transform: rotate(-2deg);
      border-radius: 0 14% 14% 0;
      background-image: linear-gradient(#6e6e6e 55%, #d9dde3 62%);
      
      &::after {
        position: absolute;
        content: '';
        border: 0.3vmin solid black;
        border-left-width: 0.8vmin;
        border-top-color: black;
        border-right-color: transparent;
        width: 92%;
        height: 100%;
        left: -56%;
        top: -5%;
        transform: skewX(-63deg);
        background-image: linear-gradient(#6e6e6e 55%, #d9dde3 62%);
        border-radius: 0 0 0 20%;
      }
    }
    
    .back {
      position: absolute;
      border: 0.3vmin solid black;
      border-top-color: transparent;
      width: 16%;
      height: 3%;
      right: 15.5%;
      top: 40%;
      transform: rotate(-1deg) skewX(10deg);
      border-radius: 0 0 1vmin 1vmin;
      background: #d9dde3;
      
      &::before {
        position: absolute;
        content: '';
        width: 70%;
        height: 120%;
        top: -117%;
        left: -0.3vmin;
        border-left: 0.3vmin solid black;
        background: #d9dde3;
      }
      
      &::after {
        position: absolute;
        content: '';
        width: 102%;
        border-top: 0.3vmin solid black;
        border-left: 0.3vmin solid black;
        height: 340%;
        top: -222%;
        left: -0.3vmin;
        transform: skewY(14deg);
        border-radius: 1vmin 0 0 0;
        background-image: linear-gradient(168deg, #6e6e6e 40%, #d9dde3 48%, 48%, transparent 50%);
      }
    }
    
    .containers {
      opacity: 0.5;
      position: absolute;
      overflow: hidden;
      height: 12%;
      right: 16%;
      top: 32.5%;
      width: 16%;
      transform: rotate(-1deg);
      border-radius: 0 0 0.1vmin 0.5vmin;
      
      .base {
        position: absolute;
        width: 120%;
        height: 61%;
        background: black;
        top: 74%;
        transform: rotate(4deg);
        right: 0;
      }
      
      .container {
        position: absolute;
        background-image: linear-gradient(90deg, #580c0c 30%, #ff7d7d 51%, 70%, #bb1010 80%);
        transform: rotate(3deg);
        border-radius: 0.3vmin 0.3vmin 0 0;
        box-shadow: inset 0 0 0.1vmin 0.1vmin #620202, inset 0 0 0.1vmin 0.2vmin #e17979;
        
        &.a {
          width: 12%;
          height: 64%;
          top: 25%;
          right: 82%; 
        }
        
        &.b {
          width: 12%;
          height: 64%;
          top: 25%;
          right: 68%; 
        }
        
        &.c {
          width: 12%;
          height: 64%;
          top: 25%;
          right: 54%; 
        }
        
        &.d {
          width: 14%;
          height: 64%;
          top: 45%;
          right: 77%; 
        }
        
        &.e {
          width: 14%;
          height: 64%;
          top: 45%;
          right: 60%; 
        }
        
        &.f {
          width: 14%;
          height: 64%;
          top: 45%;
          right: 44%; 
        }
      }
    }
  }
  
  .door {
    
    .line {
      position: absolute;
      width: 0.1%;
      background: #5a5a5a;
      
      &.a {
        height: 30%;
        right: 40%;
        top: 46%;
        transform: rotate(36deg);
      }
      
      &.b {
        height: 29%;
        left: 36.5%;
        top: 45%;
        transform: rotate(-19deg);
      }
      
      &.c {
        height: 95%;
        right: 52%;
        top: 26%;
        transform: rotate(90deg);
      }
      
      &.d {
        height: 23%;
        right: 37%;
        top: 26%;
        transform: rotate(-3deg);
      }
    }
    
    .lock {
      position: absolute;
      width: 0.5vmin;
      height: 0.5vmin;
      border-radius: 50%;
      border: 0.1vmin solid #6e6e6e;
      top: 50%;
      right: 39%;
    }
    
    .handle {
      position: absolute;
      width: 2.5vmin;
      height: 0.5vmin;
      border-radius: 0 0 0.5vmin 0.5vmin;
      border: 0.1vmin solid #6e6e6e;
      top: 60%;
      right: 41%;
      background: #8b8b8b;
      transform: rotate(-2deg);
    }
    
    .mirror {
      position: absolute;
      background: linear-gradient(90deg, rgb(52 51 54 / 15%) 70%, rgb(197 197 197 / 43%) 75%), linear-gradient(#cfccd3 20%, #78747c 25%, 76%, #302F32 77%);
      width: 3%;
      height: 5%;
      top: 43.5%;
      left: 40%;
      border-radius: 0.5vmin;
      transform: rotate(-2deg);
      
      &::after {
        position: absolute;
        content: '';
        background: linear-gradient(329deg, #363438 61%, transparent 66%);
        width: 47%;
        height: 66%;
        left: -45%;
        top: 10%;
      }
    }
  }
  
  .bumber {
    position: absolute;
    width: 10%;
    height: 28%;
    top: 50%;
    left: 7.5%;
    
    .light {
      position: absolute;
      width: 140%;
      height: 23%;
      background: linear-gradient(90deg, transparent, rgb(255 255 255 / 38%));
      left: -57%;
      top: 12%;
      transform: perspective(10px) rotateY(5deg);
      filter: blur(1px);
    }
    
    .part1 {
      position: absolute;
      left: 14%;
      height: 34%;
      width: 31%;
      top: 10%;
      transform: rotate(-2deg);
      background-image: linear-gradient( 120deg, transparent 31%, #283231 32%);
    }
    
    .part2 {
      position: absolute;
      left: 2%;
      height: 43%;
      width: 43%;
      top: 26%;
      background-image: linear-gradient(151deg, transparent 31%, #283231 32%);
    }
    
    .part3 {
      position: absolute;
      left: 2%;
      height: 21%;
      width: 43%;
      top: 59%;
      background-image: linear-gradient(17deg, transparent 31%, #283231 35%);
    }
    
    .part4 {
      position: absolute;
      left: 31%;
      height: 31%;
      width: 72%;
      top: 77%;
      background-image: linear-gradient(192deg, transparent 31%, #283231 35%);
      border-radius: 0 0 0 20%;
    }
    
    .part5 {
      position: absolute;
      width: 44%;
      height: 6%;
      left: 1%;
      top: 37%;
      background-image: linear-gradient(151deg, transparent 31%, #585858 32%);
      transform: rotate(-2deg);
    }
  }
  
  .fenders {
    position: absolute;
    height: 28%;
    bottom: 20%;
    left: 17%;
    right: 19%;
    
    .fender {
      position: absolute;
      background-image: radial-gradient(circle at 50% 80%, black 62%, white 65%, gray 68%,transparent 69%);
      
      &.left {
        left: 0;
        bottom: 0;
        width: 22%;
        height: 90%;
      }
      
      &.right {
        right: 0;
        bottom: 0;
        width: 25%;
        height: 100%;
      }
    }
  }
  
  .wires {
    --red: #ef3a3a;
    --green: #06dfad;
    --blue: #0071c1;
    
    .wire.a {
      position: absolute;
      width: 0.8%;
      height: 5%;
      right: 29%;
      top: 45%;
      background: linear-gradient(90deg, var(--red) 33%, var(--green) 34%, 66%, var(--blue) 67%);
    }
    
    .wire.b {
      position: absolute;
      width: 2.5%;
      height: 6%;
      right: 28.8%;
      top: 49.7%;
      background: radial-gradient(at 0% 0%, transparent 40%, var(--red) 41%, 50%, var(--green) 51%, 55%, var(--blue) 56%, 64%, transparent 65%);
    }
    
    .wire.c {
      position: absolute;
      width: 7.5%;
      height: 24%;
      right: 31%;
      top: 51%;
      background: radial-gradient(at 100% 100%, transparent 58%, var(--blue) 59%, 60%, var(--green) 61%, 62%, var(--red) 63%, 64%, transparent 65%);
    }
    
    .wire.d {
      position: absolute;
      width: 2.2%;
      height: 6%;
      right: 36.8%;
      top: 74.7%;
      background: radial-gradient(at 0% 0%, transparent 40%, var(--red) 41%, 50%, var(--green) 51%, 55%, var(--blue) 56%, 64%, transparent 65%);
    }
    
    .wire.e {
      position: absolute;
      width: 27%;
      height: 2%;
      right: 39%;
      top: 78%;
      background: linear-gradient(0deg, var(--blue) 33%, var(--green) 34%, 66%, var(--red) 67%);
    }
    
    .wire.f {
      position: absolute;
      width: 2.5%;
      height: 6%;
      left: 31.7%;
      top: 74.7%;
      background: radial-gradient(at 100% 0%, transparent 40%, var(--red) 41%, 50%, var(--green) 51%, 55%, var(--blue) 56%, 64%, transparent 65%);
    }
    
    .wire.g {
      position: absolute;
      width: 13.5%;
      height: 28%;
      left: 19.4%;
      top: 47%;
      background: radial-gradient(circle at 34% 100%, transparent 58%, var(--blue) 59%, 60%, var(--green) 61%, 62%, var(--red) 63%, 64%, transparent 65%);
    }
    
    .wire.h {
      position: absolute;
      width: 7.4%;
      height: 20%;
      left: 12%;
      top: 52.9%;
      background: radial-gradient(circle at 50% -93%, transparent 56%, var(--red) 58%, 59%, var(--green) 60%, 61%, var(--blue) 62%, 63%, transparent 64%);
    }
  }
  
  .wheels {
    position: absolute;
    bottom: 0;
    left: 18%;
    right: 20%;
    height: 45%;
    
    .wheel {
      position: absolute;
      background-image: radial-gradient(black 50%, #4e4949 60%, black 70%);
      border-radius: 50%;
      
      &::after {
        position: absolute;
        content: '';
        top: 16%;
        left: 16%;
        width: 68%;
        height: 68%;
        border-radius: 50%;
        background: 
          conic-gradient(rgba(black, 0.2) 15%, rgba(black, 0.5) 16%, 20%, rgba(white, 0.2) 21%, 69%, rgba(black, 0.5) 70%, 77%, rgba(black, 0.2) 78%),
          radial-gradient(#5f4d56 10%, #c1c1c1 11%, 20%, #5f4d56 22%, 23%, #c1c1c1 30%, transparent 31%, 60%, #c1c1c1 61%),
          repeating-conic-gradient(white 0.5%, #484242 1%, 3%, white 3.5%);
      }
      
      &.left {
        left: 0;
        margin-top: 2%;
        width: 19.5%;
        padding-bottom: 19.5%;
      }
      
      &.right {
        right: 0.5%;
        margin-top: 0.5%;
        width: 21.5%;
        padding-bottom: 21.5%;
      }
    }
  }
}

// Back To The Future's Delorean.
// Inspired by Benjamin Last's art work https://www.artstation.com/artwork/dmc-bttf