:root {
  --grey-100: #b3b2b2;
  --black-100: #000;
  --white-100: #fff;
  --white-200: #f4f6fc;
  --white-300: #e5e7eb;
}

html.dark-mode body {
  background-color: var(--white-100);
}

html.dark-mode .hero-background-image::before {
  background: rgba(0, 0, 0, 0.25);
}

html.dark-mode .header__container {
  background-color: var(--black-100);
}

html.dark-mode .header-title {
  color: var(--white-100);
}

html.dark-mode .contact-heading,
html.dark-mode .contact-span,
html.dark-mode .footer-copyright {
  color: var(--black-100);
}

html.dark-mode .contact-form__input,
html.dark-mode .contact-form__textarea {
  border: 1px solid #2f2f2f;
}

html.dark-mode .contact-heading:after {
    opacity: 0.4;
  }

/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/

html.dark-mode .dark-mode-hidden {
  display: none;
}

html.dark-mode .dark-mode-show {
  display: block;
}

html.dark-mode #dark-mode-toggle #svg-sun {
  transform: translate(-50%, -50%);
  opacity: 1;
}

html.dark-mode #dark-mode-toggle #svg-moon {
  transform: translate(-200%, -50%);
  opacity: 0;
}

#dark-mode-toggle {
  display: block;
  right: 5.25rem;
  width: 3rem;
  height: 3rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 1.5s ease-in-out;
  /* prettier-ignore */
  transition-timing-function: linear(0, 0.618 4.6%, 1.072 9.7%, 1.358 15.3%, 1.446 18.4%, 1.497 21.7%, 1.512 23.9%, 1.514 26.2%, 1.481 31.5%, 1.421 36.4%, 1.174 53.4%, 1.108 59.5%, 1.059 65.7%, 1.028 71.9%, 1.009 78.9%, 1);

  svg {
    position: absolute;
    width: 2rem;
    height: 2rem;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  #svg-moon {
    z-index: 2;
    transition:
      transform 0.75s,
      opacity 0.5s;
  }

  #svg-sun {
    z-index: 1;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition:
      transform 0.75s,
      opacity 0.5s;

    /* prettier-ignore */
    transition-timing-function: linear(0, 0.504 20.5%, 1 37.8%, 0.863 44.4%, 0.831 47.4%, 0.821 50.3%, 0.83 53%, 0.856 55.8%, 1 65.5%, 0.959 69.4%, 0.947 73.2%, 0.955 76.6%, 1 84.5%, 0.991 89.3%, 1);
  }

  @media (width > 64rem) {
    &:hover {
      transform: scale(1.2);
    }
  }
}