:root {
  --clr-lighter-white: #fafbfc;
  --clr-lighter-black: #1a1a1a;
  --clr-text-white: #f4f4f4;
  --clr-nav-background-dark: #00000061;
  --clr-nav-shadow-dark: #ffffff74;
  --clr-dark-theme-100: #7fbf89;
  --clr-dark-theme-200: #4d7a58;
  --clr-dark-theme-300: #33523d;
  --clr-dark-theme-400: #243126;
}

html.dark-mode body.home {
  background-size: cover;
  background-blend-mode: multiply;
}

html.dark-mode body.home::before,
html.dark-mode body.home::after {
  background-color: rgba(0, 0, 0, 0.13);
  background-blend-mode: multiply;
}

html.dark-mode body.secondary-pages {
  background: linear-gradient(180deg, #4d7454 0%, #2f4536 60%, #1f2e24 100%);
}

html.dark-mode p,
html.dark-mode li,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode a,
html.dark-mode span {
  color: var(--clr-text-white);
}

html.dark-mode .cmp-main-btn,
html.dark-mode .cmp-main-btn--pg1-s1 {
  background-color: var(--clr-dark-theme-200);
  box-shadow: inset 0 1px 2px #ffffff50, 0 2px 4px #00000030,
    0 4px 8px #00000030;

  &:hover {
    background-color: var(--clr-dark-theme-100);
    box-shadow: inset 0 1px 2px #ffffff70, 0 6px 8px #00000040,
      0 10px 15px #00000020;
  }

  &:active {
    box-shadow: inset 0 1px 2px #00000060, 0 2px 3px #00000030;
  }
}

html.dark-mode .cmp-main-btn--pg1-s1 {
  background-color: var(--clr-dark-theme-300);

  &:hover {
    background-color: var(--clr-dark-theme-200);
  }
}

html.dark-mode .cmp-main-btn--pages {
  color: var(--clr-lighter-white);
}

html.dark-mode .album-grid__btn {
  background-color: var(--clr-dark-theme-100);
  color: var(--clr-lighter-black);

  &:hover {
    background-color: var(--clr-dark-theme-200);
  }
}

html.dark-mode .cmp-info-text {
  color: var(--clr-green-200);
}

html.dark-mode .cmp-leaf-svg {
  fill: var(--clr-dark-theme-100);
}

html.dark-mode #header {
  background-color: var(--clr-nav-background-dark);
  box-shadow: 1px 1px 30px var(--nav-shadow-dark);
  backdrop-filter: blur(0.25rem);
  -webkit-backdrop-filter: blur(8px);
}

html.dark-mode .nav-bar {
  background-color: var(--clr-dark-theme-400);
  opacity: 0.98;

  a {
    color: var(--clr-lighter-white);

    &:visited {
      color: var(--clr-lighter-white);
    }

    &:hover,
    &:focus-visible {
      color: var(--clr-dark-theme-200);
    }
  }

  & li:not(:last-of-type)::after {
    background-color: var(--clr-lighter-white);
  }

  @media (width > 62.5rem) {
    background-color: unset;
  }
}

html.dark-mode .business-logo-text-dark-wrapper {
  display: block;
}

html.dark-mode body.home .business-logo-text-dark {
  @media (width < 62.5rem) {
    /* on screens smaller than a laptop, it is hidden */
    display: none;
  }
}

html.dark-mode .business-logo-text-dark {
  opacity: 1;
  transition: opacity 2s ease-out 3s;
}

html.dark-mode .business-logo {
  filter: invert(1) brightness(2);
  transform: rotateY(360deg);
}

html.dark-mode .hamburger-btn {
  background-color: var(--clr-dark-theme-200);
}

html.dark-mode #hero-title {
  color: var(--clr-green-100);

  span {
    color: var(--clr-green-200);
  }
}

html.dark-mode .hero-main-logo {
  filter: invert(1) brightness(2);
  transform: rotateX(360deg);
}

html.dark-mode .ufo-svg {
  display: inline;
}

html.dark-mode .butterfly-svg {
  display: none;
}

html.dark-mode .cmp-side-wave-svg {
  fill: #32320c;
}

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

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

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

#dark-mode-toggle {
  display: block;
  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: 2.5rem;
    height: auto;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

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

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

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