:root {
  --clr-lighter-white: oklch(98.761% 0.00181 249.253);
  --clr-lighter-black: oklch(21.779% 0.00002 271.152);
  --clr-text-white: oklch(96.715% 0.00011 271.152);
  --clr-nav-background-dark: oklch(0% 0 0 / 0.38);
  --clr-nav-shadow-dark: oklch(100% 0.00011 271.152 / 0.455);
  --clr-dark-theme-100: oklch(74.699% 0.10138 148.497);
  --clr-dark-theme-200: oklch(53.691% 0.07282 151.125);
  --clr-dark-theme-300: oklch(40.766% 0.05109 154.011);
  --clr-dark-theme-400: oklch(29.746% 0.02641 149.195);
  --clr-bg-dark-green-gradient: linear-gradient(
    to top,
    color-mix(in srgb, var(--clr-dark-theme-400) 88%, white),
    var(--clr-dark-theme-400),
    color-mix(in srgb, var(--clr-dark-theme-400) 60%, black)
  );
}

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

html.dark-mode body {
  background-image: var(--clr-bg-dark-green-gradient);
  background-color: var(--clr-dark-theme-400);
}

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

html.dark-mode main.secondary-pages {
  background-color: rgba(0, 23, 62, 0.45);
}

html.dark-mode main.gallery-page {
  background-color: unset;
  background-image:
    linear-gradient(rgba(0, 15, 40, 0.45), rgba(0, 15, 40, 0.45)),
    url("/assets/images/background/gallery-bg-s.webp");

  @media (width > 37.5rem) {
    background-image:
      linear-gradient(rgba(0, 15, 40, 0.3), rgba(0, 15, 40, 0.3)),
      url("/assets/images/background/gallery-bg-l.webp");
  }
}

html.dark-mode .gallery-album-label {
  span {
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--clr-dark-theme-300) 85%, white),
      var(--clr-dark-theme-300),
      color-mix(in srgb, var(--clr-dark-theme-300) 85%, black)
    );
  }
}

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--pages,
html.dark-mode .cmp-main-btn--pg1-s1 {
  color: var(--clr-text-white) !important;
  background-color: #011400c5;
  background: linear-gradient(
    to bottom,
    rgba(1, 32, 0, 0.9),
    rgba(71, 95, 76, 0.85)
  );
  box-shadow:
    inset 0 1px 2px #ffffff50,
    0 2px 4px #00000030,
    0 4px 8px #00000030;

  &:hover {
    background: linear-gradient(
      to bottom,
      rgba(3, 59, 0, 0.9),
      rgba(110, 151, 118, 0.9)
    );
    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-bg-dark-green-gradient);

  &: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: #011400c5;
  background: var(--clr-bg-dark-green-gradient);

  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-main-logo {
  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 {
  position: relative;
  display: block;
  width: 3rem;
  height: 3rem;
  left: 0;
  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 > 62.5rem) {
    left: 2.25rem;

    &:hover {
      transform: scale(1.3);
    }
  }
}