:root {
  --background-color: #f9f9f9;
  --text-color: #000000;
  --container-background-color: #f9f9f9;
  --slider-background: #ccc;
  --slider-checked-background: #2196f3;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  --slider-background: #444;
  --slider-checked-background: #2196f3;
}

.container {
  background-color: var(--container-background-color);
}

body.dark {
  --background-color: #121212;
  --text-color: #ffffff;
  --container-background-color: #1e1e1e;
  --slider-background: #222;
  --slider-checked-background: #555;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--slider-background);
  transition: 0.4s;
  border-radius: 24px;
}

.slider:before {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="%23fff" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>');
  height: 22px;
  width: 22px;
  left: 1px;
  bottom: 1px;
  background-color: black;
  background-size: cover;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--slider-checked-background);
}

input:checked + .slider:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="%23fff" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>');
  transform: translateX(20px);
}

.project-item {
  background-color: var(--container-background-color);
  color: var(--text-color);
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
}

body.dark .project-item {
  background-color: #2a2a2a;
  color: #ffffff;
  border-color: #444;
}

body.dark .project-item .title {
  color: #d4d4d4;
}

body.dark .search-bar input {
  background-color: #2a2a2a;
  color: #d4d4d4;
  border: 1px solid #444;
}

body.dark .masthead {
  box-shadow: none !important;
  border-bottom: 1px solid #444;
}