* {
  margin: 0;
  padding: 0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root {
  --blur: 0;
  --brightness: 1;
  --contrast: 100;
  --grayscale: 0;
  --hue: 0;
  --invert: 0;
  --opacity: 100;
  --saturate: 100;
  --sepia: 0;
}
#main-image {
  transition: all 300ms ease-in-out;
  filter: blur(calc(1px * var(--blur))) brightness(var(--brightness))
    contrast(calc(1% * var(--contrast))) grayscale(calc(1% * var(--grayscale)))
    hue-rotate(calc(1deg * var(--hue))) invert(calc(1% * var(--invert)))
    opacity(calc(1% * var(--opacity))) saturate(calc(1% * var(--saturate)))
    sepia(calc(1% * var(--sepia)));
  border: 5px solid #fff;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #eee;
}
.toolbox {
  margin-left: 50px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
label {
  margin-bottom: 5px;
}