body.dark-mode {
  --background-color: rgb(34, 103, 115);
  --body-color: white;
  --lightBody-color: white;
  --util-color: rgb(42, 147, 152);
  --stickynav-color: rgb(29, 86, 96);
  --navbarlinks-color: #fff;
  --skills-background: rgb(19, 56, 62);
  --white-background: rgb(29, 86, 96);
  --sticky-border: rgba(255, 255, 255, 0.199);
  --form-background: rgb(19, 56, 62);
  --links-hover: rgba(255, 255, 255, 0.884);
  --projects-wrapper: rgb(80, 114, 123);
}

.darkmode-toggle {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4.5em;
  width: 3em;
  height: 3em;
  background: transparent;
  border: none;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}

.darkmode-toggle img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2em;
  height: 2em;
  pointer-events: none;
  margin: 0 auto;
}

.darkmode-toggle .sun {
  z-index: 1;
  transform: translate(-50%, 100%);
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
}

.darkmode-toggle .moon {
  z-index: 2;
  transition: transform 0.3s, opacity 0.3s, fill 0.3s;
}

body.dark-mode .darkmode-toggle .sun {
  transform: translate(-50%, -50%);
  opacity: 1;
}

body.dark-mode .darkmode-toggle .moon {
  transform: translate(-50%, -150%);
  opacity: 0;
}