:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --dots-color: #000000;
  --link-color: #000000;
  --slider-button-color: rgba(0, 0, 0, 0);
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: "Montserrat", sans-serif;
}

.slider .dots li {
  background-color: var(--dots-color);
}

a {
  color: var(--link-color);
}

.slider .buttons button {
  background-color: var(--slider-button-color);
  color: var(--text-color);
}

body .social-img {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%)
    contrast(100%);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #000000;
    --text-color: #ffffff;
    --dots-color: #ffffff;
    --link-color: #ffffff;
    --slider-button-color: rgba(255, 255, 255, 0);
  }

  body.dark-mode {
    background-color: var(--background-color);
    color: var(--text-color);
  }

  .slider .dots li {
    background-color: var(--dots-color);
  }

  a {
    color: var(--link-color);
  }

  .slider .buttons button {
    background-color: var(--slider-button-color);
    color: var(--text-color);
  }
  body .social-img,
  body .logo-img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg)
      brightness(100%) contrast(100%);
  }
}

/* Other existing styles... */
* {
  margin: 0px;
  padding: 0px;
}