style.css

:root {
  --base: #ffc600;
  --spacing: 5px;
  --blur: 0px;
  --brightness: 1;
  --contrast: 1;
  --sepia: 0%;
  --grayscale: 0%;
  --opacity: 100%;
  --hueRotate: 0deg;
  --invert: 0%;
}

body {
  font-size: 10px;
  padding: 0;
  margin: 0;
  background: #508fbd;
}

.container {
  display: flex;
  height: 100vh;
}

.left-menu {
  width: 15%;
  font-size: 1.2rem;
  border: 1px solid;
  border-radius: 10px;
  padding: 5px 15px 5px 10px;
}

.filter-item {
  width: 100%;
  padding: 4px 0 4px 0;
}

input {
  width: 100%;
}

.content {
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

img {
  height: 30vw;
  width: 60%;
  padding: var(--spacing);
  background: var(--base);
  filter:
    blur(var(--blur))
    brightness(var(--brightness))
    contrast(var(--contrast))
    sepia(var(--sepia))
    grayscale(var(--grayscale))
    opacity(var(--opacity))
    hue-rotate(var(--hueRotate))
    invert(var(--invert))
}

@media all and (max-width: 800px) {
  .left-menu {
    width: 30%;
  }
}