:root[data-theme="light"] {
  --primary-color: #003018;
  --secondary-color: #00a878;
  --accent-color: #fe5e41;
  --bg-color: #ffffea;
  --hover-shadow: rgba(0, 48, 24, 0.1);
  --radial-gradient-1: rgba(213, 255, 59, 0.116);
  --radial-gradient-2: rgba(179, 255, 0, 0.103);
  --radial-gradient-3: rgba(27, 226, 20, 0.116);
  --button-bg-color: rgba(0, 0, 0, 0.075);
}
:root[data-theme="dark"] {
  --primary-color: #f1f1db;
  --secondary-color: #00a878;
  --accent-color: #fe5e41;
  --bg-color: #003018;
  --hover-shadow: rgb(109, 109, 109);
  --radial-gradient-1: rgb(0, 66, 25);
  --radial-gradient-2: rgb(0, 77, 13);
  --radial-gradient-3: rgb(0, 77, 41);
  --button-bg-color: rgba(255, 255, 255, 0.15);
}
.gradient {
  background-image: radial-gradient(
      at 20% 20%,
      var(--radial-gradient-1) 0px,
      transparent 50%
    ),
    radial-gradient(at 50% 20%, var(--radial-gradient-2) 0px, transparent 100%),
    radial-gradient(at 80% 20%, var(--radial-gradient-3) 0px, transparent 50%);
}
html {
  background-color: var(--bg-color);
}
body {
  background-color: var(--bg-color);
  color: var(--primary-color);
}
::selection {
  background: var(--secondary-color);
}
.hh-svg-logo path {
  fill: var(--primary-color);
}
.menu-button.active {
  color: var(--secondary-color);
}
.hh-svg-logo:hover path {
  fill: var(--secondary-color);
}
a {
  color: var(--primary-color);
}
a:hover {
  color: var(--secondary-color);
}
a {
  color: var(--active-color);
}
.category-title {
  color: var(--secondary-color);
  font-size: var(--small-title-size);
}
hr {
  background-color: var(--primary-color);
}
.middle-icons > a > svg path {
  fill: var(--primary-color);
}
.middle-icons > a > svg:hover path {
  fill: var(--secondary-color);
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-color: var(--primary-color) var(--bg-color);
}

/* Chrome, Edge, and Safari */

*::-webkit-scrollbar-track {
  background: var(--bg-color);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border: 2px solid var(--bg-color);
}
.masonry-item > img:hover {
  box-shadow: 0px 0px 16px 2px var(--hover-shadow);
}

.darkmode-switch-container svg path {
  fill: var(--primary-color);
}

/* Images Brightness */
.dark-mode {
  filter: brightness(0.9) !important;
}

.filter-button {
  background-color: var(--button-bg-color);
}
.filter-button:hover {
  color: var(--bg-color);
  background-color: var(--secondary-color);
}
.toggled {
  color: var(--bg-color);
  background-color: var(--secondary-color);
}
.overlay {
  display: flex;
  position: fixed;
  align-items: center;
  top: -300%; /* Initially hidden above the viewport */
  left: 0;
  width: 100%;
  background-color: var(--bg-color);
  color: var(--primary-color);
}
#closeButton {
  background-color: transparent;
  color: var(--primary-color);
}