:root {
  --primary-color: #252839;
  --secondary-color: #2b2e3f;
  --border-color: #4b4e5f;
  --text-color1: #fefefe;
  --text-color2: #f6f6f6;
  --gradient1: #00000080;
  --gradient2: #000000cc;
  --diagonal-gradient: linear-gradient(
    to bottom right,
    var(--gradient2) 5%,
    var(--gradient1) 30%,
    transparent
  );
}

/* light mode */
.lightmode {
  --primary-color: #f4f5fa;
  --secondary-color: #f2f3f7;
  --border-color: #c7cadb;
  --text-color1: #333333;
  --text-color2: #1a1a1a;
  --gradient1: #d8dae080;
  --gradient2: #e8e9f0cc;
  --diagonal-gradient: linear-gradient(
    to bottom right,
    var(--gradient2) 5%,
    var(--gradient1) 30%,
    transparent
  );
}

/* Theme switch button */
.theme-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(1rem, 1.5vw, 2rem);
  height: clamp(1rem, 1.5vw, 2rem);
  margin: 0;
  border: 0;
  border-radius: 50%;
  padding: 0;
  outline: 3px solid var(--radio-color, currentColor);
  outline-offset: 3px;
  background-color: var(--secondary-color);
}

/* Icons */
#moon,
#sun {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--text-color2);
}
#moon {
  display: none;
}
.lightmode #sun {
  display: none;
}
.lightmode #moon {
  display: block;
}

/* Themes */
.lightmode .color-picker input[type="radio"]#red {
  --radio-color: #d62839;
}
.lightmode .color-picker input[type="radio"]#yellow {
  --radio-color: #e6a800;
}
.lightmode .color-picker input[type="radio"]#green {
  --radio-color: #2ba673;
}
html.red-theme .lightmode {
  --themes: #d62839;
}
html.yellow-theme .lightmode {
  --themes: #e6a800;
}
html.green-theme .lightmode {
  --themes: #2ba673;
}

.lightmode .my-works h2 {
  text-shadow: 0 0 2px var(--secondary-color);
}
.lightmode #projects::before {
  background-image: var(--diagonal-gradient),
    url("/assets/images/backgrounds/lightmode-projects-background.png");
}
.lightmode #certifications::before {
  background-image: var(--diagonal-gradient),
    url("/assets/images/backgrounds/lightmode-certifications-background.png");
}
.lightmode #artworks::before {
  background-image: var(--diagonal-gradient),
    url("/assets/images/backgrounds/lightmode-artworks-background.png");
}