body { 
    margin: 0; 
    height: 100vh;
    background: #eee;
    display: grid;
    place-items: center;
}

img, input {
    width: 75vw;
    height: 42.1875vw;
    grid-area: 1 / -1;
    border-radius: 5px;   
}

img {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: box-shadow 300ms ease-out;
}

input:focus + img {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

input { 
    /* removes default styling from input color element */
    padding: 0;
    /* mix blend mode makes the color of the swatch alter the image behind it. */
    mix-blend-mode: overlay; /* try screen, multiply or other blend modes for different effects */
    
    /* mask out the input swatch to only be the car body */
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900"><path d="m1238.15 662.85-5.37-5.22-6.49-15.63-3.25-8.89-2.26-6.92-2.82-8.33-.57-2.12-1.55-3.39-11.57-21.6-11.16-16.66-7.48-7.9-8.61-7.91h18.49l-3.53-7.9-6.49-9.74 13.55-.71 1.55-2-1.92-3.39-7.53-7.15-8.66-2.45-1.32 9.23-3 11.29-1.32 4.33-2.26 2.07-2.45-1.13-22.58-24.84.37-10.92-2.07-12.43-8.47-10.16-21.83-21.27-1 4.71-3.19 2.82h-5.28l-15.81-11.86-24.47-21.84-28-21.83-10.92-10.54-8.66-11.67-7.91-6.21-46.87-18.83L918 364.93l-29.18-4.15-28.05-2.63h-91.28l-36.71 2.26-57 3.76-20 4.14-20.71 3.58-9.79 3.95.19 13.74-1.69 6.78-10.15 15.44-26.54 36.32-16.56 24.48-.95-4.33h-2.44L566 472l-2.26 1.32-.19 4.14-1.88 2.26-6 2.63-5.27.19-4.14.19h-10.37l-8.47-6.59 6.4-5.46H512l-48.37 2.64-30.68 4.14-33.89 6L362 495l-17.88 9.6-29.22 14.49-14.68 8.66-11.29 11.1-10.17 9.42-6.4 3.76-16 5.46-5.08 4.51-9.6 17.13-5.68 18.08-1.69 6.59-2.45 13v11.86l1.32 22.4 2.82 15.42 4.71 10.73 3.39 2.16 1.69-9.6 10.45-16.23L275.61 628l21.74-23.71 15.95-12.59 13.56-6.07 12.28-4.09 12.42-2H378l13 3 16.52 6.08 15.24 8.89 17.65 15.25 11 14.54 8.59 17.77 6.92 21.6 5.23 19.9 4.37 13.84 3.67 7.9 6.07 4.24 8.19.7h17.65l7.06-1.55 14.68-.71 8.33-2.68-5.37-.42-2-1-2.54-3.11.7-4.09 2-3.11 2-5.08 4.51-3.39 5.09-3.81 2-1.69 15.11.42 100.8 2 52 .85 63.81.84 46.45.43 106.73-1.27 2.68 7.62 3 7.9-4.8 2.69-.85 5.64 4.23 2.26 15.39 2.4 7.63-3.53 5.22-6.21 3.81-8 2.68-15.24 5.55-24.34 9-18.5 13.83-18.07 15.25-13 16.23-9.6 14.69-6.2 12.14-3 20.18-1.56 14.26.71 20.9 5.22 21.46 10 8.75 7.2 11.58 11 8.32 10.59 6.22 10.16 7.9 11.58 7.63 11.86 6.91 8.47 14.83 11 1.69-.28v-12l29.79.14ZM357.21 533.68l-11.58.7-11 1.89-10.16 1.78-9.32.85v-2.63l3.24-12.33 4.24.84 11.58.29 26 1.69 3.25 2.82 2.68 4Zm457-44.33-1.42 2.82-4.23 4.38-5.08 1.55H610.05l-4.23-1.69-8.75-1.41-4-2.26-4-7.91v-5.08l3.39-6.5 4.52-9 9.6-14.22 10.73-16.56 8.18-9.6 11-8.75 10.16-4.52 20.33-5.65 14.12-2.54 18.63-2.54 102.21-2h3.39l3.67 2.25 3.39 3.68 1.7 6.21Zm218.07-8.1-2.28 5.65-4.9 6.59-10.16 6.4-8.1 1.13H853.25l-7.71-1.32-3-3-5.85-4.7-1.32-6.58v-81.15l2.07-1.89 3.58-3.2 4.7-2.63h9.6l22.22 1.32 16.37 1.31 17.09 2.26 21.65 4.14 22 6.22 21.46 7.52 17.38 7.68 14.49 9 12.24 10.54 10 14.68 2.07 7.53Z" /></svg>');
    cursor: pointer;
}

/* removes default styling from input color element */
::-webkit-color-swatch {
    border: none;
    transition: background-color 600ms ease-out;
}

::-webkit-color-swatch-wrapper {
    padding: 0;
}

::-moz-color-swatch,
::-moz-focus-inner {
    border: none;
}

::-moz-focus-inner {
    padding: 0;
}