body {
  --bg-color: #fff;
  --text-color: #303030;
  --switch-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1) inset;
  --transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  --nav-bg-color: #fff;
  --nav-text-color: #000000;
  --transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

.dark body {
  --bg-color: #292639;
  --text-color: #ebeaf7;
  --switch-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.5) inset;
  --nav-bg-color: #131313;
  --nav-text-color: #fff;
  --btn-color: #303030;
  --btn-hover-color: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  body {
    --bg-color: #292639;
    --text-color: #ebeaf7;
    --switch-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.5) inset;
    --nav-bg-color: #131313;
    --nav-text-color: #fff;
    --nav-li-hover-bg-color: #2d2c2c;
    --btn-color: #303030;
    --btn-hover-color: #FFFFFF;
    --service-component-bg-color: #2d2c2c;
    --light-gray-text-color: #ffffff;
    --resume-con-content-sec: #1a1a1a;
    --svg-color: #ebeaf7;
    --project-card-bg: #1e1e1e;
    --contact-sec-bg: #1A1A1A;
    --contact-sec-content-bg: #131313;
  }
  .light body {
    --bg-color: #fff;
    --text-color: #303030;
    --switch-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1) inset;
    --nav-bg-color: #fff;
    --nav-text-color: #000000;
    --nav-li-hover-bg-color: #c9c7c7;
    --btn-color: #FFFFFF;
    --btn-hover-color: #303030;
    --service-component-bg-color: #f1f1f1;
    --light-gray-text-color: #888;
    --resume-con-content-sec: #f1f1f1;
    --svg-color: #303030;
    --project-card-bg: #f1f1f1;
    --contact-sec-bg: #FFFFFF;
    --contact-sec-content-bg:#f1f1f1;

  }
}

body {
  background: var(--bg-color);
  transition: var(--transition);
}

.theme-switch {
  display: flex;
  justify-content: center;
  align-items: center;
}

.theme-switch .checkbox {
  opacity: 0;
  position: absolute;
}

.theme-switch .label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 50px;
  position: relative;
  height: 40px;
  width: 80px;
  cursor: pointer;
  box-shadow: var(--switch-shadow);
  transition: var(--transition);
}

.theme-switch .label:hover .moon,
.theme-switch .label:hover .sun {
  transform: rotate(360deg);
}

.theme-switch .ball {
  transition: var(--transition);
  background-color: #ffffff;
  position: absolute;
  border-radius: 50%;
  top: 5px;
  left: 5px;
  height: 30px;
  width: 30px;
}

.theme-switch .moon {
  color: #f1c40f;
  transform-origin: center center;
  transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  transform: rotate(0);
}

.theme-switch .sun {
  color: #ff6b00;
  transform-origin: center center;
  transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  transform: rotate(0);
}

.theme-switch .ball {
  transform: translatex(0);
}

.dark .theme-switch .ball {
  transform: translatex(40px);
}

@media (prefers-color-scheme: dark) {
  .theme-switch .ball {
    transform: translatex(40px);
  }

  .light .theme-switch .ball {
    transform: translatex(0);
  }
}

.credits {
  font-family: Helvetica, Arial, Sans-Serif;
  color: var(--text-color);
  padding-top: 20px;
  font-size: 14px;
}

.credits a {
  color: var(--text-color);
}