body.dark-mode {
  background-color: #3f66a5;
  color: #e0e0e0;
}

body.dark-mode .header-bar {
  background-color: #1e1e1e;
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05);
}

body.dark-mode .nav-links a,
body.dark-mode .lang-options a,
body.dark-mode .backhome,
body.dark-mode .gallery h3 a,
body.dark-mode .pagination a {
  color: #ddd;
}

body.dark-mode .pages a,
body.dark-mode .faq-answer {
  color: #00e2f2;
}

body.dark-mode .nav-links a:hover,
body.dark-mode .lang-options a:hover,
body.dark-mode .pages,
body.dark-mode .faq-question,
.zhuyin-mode body.dark-mode .zhuyin-rt {
  color: #fff;
}

body.dark-mode .sidebar-container {
  margin: 10px;
  background-color: #2c2c2c;
}

body.dark-mode .main-container {
    background-color: #3f66a5;
}

@media (max-width: 768px) {
  body.dark-mode .sidebar-inner {
      background-color: #356893;
  }
}

body.dark-mode .photo {
  background: #222;
  border-color: #444;
}

body.dark-mode .tag,
body.dark-mode .sort-button,
body.dark-mode .flip-back {
  background: #444;
  color: #fff;
}

body.dark-mode .selected-tag,
body.dark-mode .sort-button {
  background-color:#617ca8;
}

body.dark-mode .tag-item:hover label,
body.dark-mode .month-children label:hover,
body.dark-mode .year-item:hover label,
body.dark-mode .tag:hover,
body.dark-mode .sort-button:hover,
body.dark-mode .gallery h3 a:hover,
body.dark-mode .pagination a:hover,
body.dark-mode .theme-toggle {
  background: #666;
}

body.dark-mode .thumbnail {
  background-color:#356893;
}

body.dark-mode .thumbnail img {
  border: 1.5px solid #9b9b9b;
}

body.dark-mode .gallery h3 a {
  text-decoration: none;
  color: #ffffff;
}