style.css

:root {
	--font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	--font-family: "basic-sans", var(--font-fallback);
	--font-title: 'Bree', var(--font-fallback);
	--light: #e5e5e5;
	--coral: #f4a0a2;
	--cloud: #dadbe7;
	--salmon: #f9c7bb;
	--petrol: #55859a;
}

body {
	padding: 0;
	margin: 0;
	overflow: hidden;
	background: var(--petrol);
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

main {
	width: 90vw;
	height: 90vw;
	max-width: 600px;
	max-height: 600px;
}

svg {
	position: relative;
	height: auto;
	width: 100%;
}

.drag {
	z-index: 1;
	opacity: 0.8;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: scale(.65) translate(250px, 250px);
	transition: all 250ms ease-out;
	transform-origin: center;
}

svg rect.sensible {
	fill: rgba(255, 255, 255, .15);
	cursor: all-scroll;
}

.ghost {
	opacity: 0;
	transition: opacity 650ms ease;
}

.dragging .ghost {
	transition-duration: 250ms;
	opacity: 0.35;
}

.dragging .drag {
	transition-duration: 130ms;
	transform: scale(.35) translate(250px, 250px);
	opacity: 0;
}

a {
	padding: 0 1em;
	max-width: 120px;
	width: 10vw;
	min-width: 80px;
	max-width: 120px;
	display: inline-block;
	transition: opacity 250ms ease;
	position: absolute;
	left: 0;
	top: 0;
}

img {
	max-width: 100%;
}

image {
	transform-origin: center center;
}

footer {
	width: 100%;
	text-align: center;
}

/* INPUT TRACK */
input[type='range'] {
	--shadow: #000;
	--size: 2em;
	--range-height: calc(var(--size) / 2 );
	--track-border-radius: .5em;
	--border-radius: 50%;
	--range-bg: var(--cloud);
	--range-track: var(--coral);
	background: var(--cloud);
	appearance: none;
	height: 0.5em;
	outline: none;
	border-radius: .5em;;
	width: 100%;
	margin: 1em 0;
	cursor: pointer;
}

/* thumb */
/* webkit thumb */
input[type='range']::-webkit-slider-thumb {
	background: var(--range-track);
	border-radius: var(--border-radius);
	height: var(--size);
	width: var(--size);
	cursor: grab;
	/*extra*/
	appearance: none;
}
/* mozilla thumb */
input[type='range']::-moz-range-thumb {
	background: var(--range-track);
	border-radius: var(--border-radius);
	height: var(--size);
	width: var(--size);
	cursor: grab;
}
/* edge thumb */
input[type='range']::-ms-thumb {
	background: var(--range-track);
	border-radius: var(--border-radius);
	height: var(--size);
	width: var(--size);
	cursor: grab;
}