body.dark {
  background-image: url('../src/images/themes/darkmode/1920×1080.jpg');
  transition: all 1s ease;
  color: var(--button-darkmode-color);
}

body.dark .theme-card {
  filter: drop-shadow(1px 1px 6px var(--cards-color-bg-selected));
}

body.dark .main-content img {
  filter: brightness(0) saturate(100%) invert(81%) sepia(7%) saturate(138%)
    hue-rotate(175deg) brightness(95%) contrast(90%);
}

body.dark .controls-container img.selected {
  filter: brightness(0) saturate(100%) invert(23%) sepia(79%) saturate(2747%)
    hue-rotate(221deg) brightness(95%) contrast(97%);
}

body.dark .main-content {
  background-color: var(--main-darkmode-bg);
  transition: background-color 1s ease;
}

body.dark .main-content {
  box-shadow: rgba(15, 43, 255, 0.15) 1.95px 1.95px 2.6px;
}

body.dark .time-bar {
  border: 0.1rem solid var(--button-darkmode-color);
  background-color: transparent;
  transition: all 1s ease;
}

body.dark input[type='range'],
body.dark input[type='range']::-webkit-slider-runnable-track,
body.dark input[type='range']::-webkit-slider-thumb {
  background-color: rgba(255, 255, 255, 0.5);
  transition: background-color 1s ease;
}

body.dark .cards {
  background: var(--cards-color-bg-dark);
}

body.dark .cards.selected {
  background: var(--button-color-selected);
  transition: background 1s ease;
}  

body.dark .cards.selected img {
  filter: brightness(0) saturate(100%) invert(81%) sepia(7%) saturate(138%)
    hue-rotate(175deg) brightness(95%) contrast(90%);
  transition: fill 1s ease;
}

body.dark input[type='range']::-webkit-slider-thumb {
  background: var(--cards-color-bg-selected);
  transition: background-color 1s ease;
}