.light-mode {
  color-scheme: light;
  --social-filter: brightness(0.3);
  --shadow-color: hsla(0, 0%, 77%, 0.65);
  
  --surface: white;
  --on-surface: black;
  --on-surface-variant: rgb(45, 45, 45);
  --surface-container-lowest: hsl(0, 0%, 89%);
  --surface-container-low: hsl(0, 0%, 71%);
  --surface-container: hsl(0, 0%, 56%);
  --surface-container-high: hsl(0, 0%, 34%);
  --surface-container-highest: hsl(0, 0%, 20%);

  --primary: hsl(211, 100%, 45%);
  --on-primary: white;
  --primary-container: hsl(211, 100%, 82%);
  --on-primary-container: hsl(210, 100%, 8%);

  --secondary: hsl(213, 17%, 27%);
  --on-secondary: white;
  --secondary-container: hsl(213, 67%, 88%);
  --on-secondary-container: hsl(218, 14%, 11%);

  --tertiary: hsl(251, 18%, 41%);
  --on-tertiary: white;
  --tertiary-container: hsla(251, 100%, 86%, 0.642);
  --on-tertiary-container: hsl(270, 7%, 5%);

  --error: red;
  --on-error: white;
  --error-container: rgb(255, 58, 58);
  --on-error-container: rgb(110, 0, 0);

  --anchor: hsl(211, 100%, 25%);
}

.dark-mode {
  color-scheme: dark;
  --social-filter: brightness(0.7);
  --shadow-color: hsla(0, 0%, 10%, .65);

  --surface:  hsl(0, 0%, 14%);
  --on-surface: white;
  --on-surface-variant: rgb(210, 210, 210);
  --surface-container-lowest: hsl(0, 0%, 19%);
  --surface-container-low: hsl(0, 0%, 27%);
  --surface-container: hsl(0, 0%, 56%);
  --surface-container-high: hsl(0, 0%, 71%);
  --surface-container-highest: hsl(0, 0%, 89%);

  --primary: hsl(211, 100%, 45%);
  --on-primary: white;
  --primary-container: hsl(211, 100%, 82%);
  --on-primary-container: hsl(210, 100%, 8%);

  --secondary: hsl(213, 17%, 27%);
  --on-secondary: white;
  --secondary-container: hsl(213, 67%, 88%);
  --on-secondary-container: hsl(218, 14%, 11%);

  --tertiary: hsl(251, 100%, 86%);
  --on-tertiary: rgb(7, 6, 6);
  --tertiary-container: hsla(251, 18%, 41%, 0.642);
  --on-tertiary-container: hsl(270, 7%, 5%);

  --error: rgb(255, 69, 69);
  --on-error: white;
  --error-container: rgb(107, 0, 0);
  --on-error-container: rgb(255, 103, 103);

  --anchor: hsl(211, 100%, 70%);
}

.dark-mode .dropdown-button img {
  filter: invert();
}

.dark-mode svg #spin {
  transform: rotateZ(180deg);
}

.dark-mode svg #circle {
  transform: translateX(-15%) translateY(-10%);
}

.light-mode .transparent-space img:first-child {
  content: url(/assets/images/layered-waves-light-top.svg);
}

.light-mode .transparent-space img:last-child {
  content: url(/assets/images/layered-waves-light-bottom.svg);
}

.dark-mode .transparent-space img:first-child {
  content: url(/assets/images/layered-waves-dark-top.svg);
}

.dark-mode .transparent-space img:last-child {
  content: url(/assets/images/layered-waves-dark-bottom.svg);
}

.dark-mode .scrollable-indicator {
  filter: invert();
  backdrop-filter: invert() blur(1.3px);
}

.light-mode .view-2 .to-gallery .arrow {
  stroke: black;
}

.dark-mode .view-2 .to-gallery .arrow {
  stroke: white;
}