/* Dark Mode Styles */
body.dark {
  background-color: #111;
  color: #eee;
}

body.dark .navbar {
  background-color: transparent;
}

body.dark .navbar.solid {
  background-color: rgba(30, 30, 30, 0.9);
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.2);
}

body.dark .navbar .nav-list .nav-item a {
  color: #eee;
}

body.dark .navbar .nav-list .nav-item a:hover {
  color: #fff;
}

body.dark .navbar .lang-btn,
body.dark .navbar .theme-btn {
  background-color: #222;
  border-color: #eee;
  color: #eee;
}

body.dark .navbar .theme-btn svg {
  fill: #eee;
}

/* Use existing rotate that we saw in style.css:
   body.dark .navbar .theme-btn svg { transform: rotate(220deg); }
*/

body.dark .work-web .card-button-container .grid-container .tool-box {
  background: rgba(40, 40, 40, 0.7);
  border-color: #555;
  color: #eee;
}

body.dark .work-web .card-button-container .grid-container .tool-box .tool-title {
  color: #fff;
}

body.dark .work-web .card-button-container .grid-container .tool-box .tool-desc {
  color: #ccc;
}

body.dark .work-web .card-button-container .grid-container .tool-box:hover {
  background-color: rgba(60, 60, 60, 0.8);
}

body.dark .work-web .card-button-container .load-more-box button,
body.dark .work-project .card-project-container .load-project-box #load-project-button {
  background-color: rgba(40, 40, 40, 0.7);
  border-color: #eee;
  color: #eee;
}

body.dark .work-web .card-button-container .load-more-box button:hover,
body.dark .work-project .card-project-container .load-project-box #load-project-button:hover {
  background-color: rgba(60, 60, 60, 0.8);
}

body.dark .work-project .card-project-container .flex-container .flex-card {
  background-color: rgba(40, 40, 40, 0.7);
  border-color: #555;
}

body.dark .work-project .card-project-container .flex-container .flex-card .flex-card-content img {
  border-color: #555;
}

body.dark .work-project .card-project-container .flex-container .flex-card .flex-card-content .flex-card-text .flex-card-description {
  color: #ccc;
}

body.dark .work-project .card-project-container .flex-container .flex-card .flex-card-link {
  color: #eee;
}

body.dark .work-creative .left-section .logo-grid .logo-card {
  background: rgba(40, 40, 40, 0.8);
}

body.dark .work-creative .left-section .logo-grid .logo-card .logo-img {
  filter: brightness(0) invert(1);
}

body.dark .work-creative .left-section .logo-grid .logo-card:hover .logo-img {
  filter: brightness(1);
}

body.dark .work-creative .left-section .logo-grid .logo-card .logo-name a {
  color: #eee;
}

body.dark .right-section .article-container .article {
  background: rgba(40, 40, 40, 0.7);
  border-color: #555;
}

body.dark .right-section .article-container .article:hover {
  background-color: rgba(60, 60, 60, 0.8);
}

body.dark .right-section .article-container .article .article-text .platform {
  color: #aaa;
}

body.dark .right-section .article-container .article .article-text .title {
  color: #fff;
}

body.dark .right-section .article-container .article .article-text .excerpt {
  color: #ccc;
}

body.dark .tiling-container .dashboard .box {
  background: rgba(40, 40, 40, 0.7);
  border-color: #555;
  color: #eee;
}

body.dark .tiling-container .dashboard .box.profile h3,
body.dark .tiling-container .dashboard .box.profile p {
  color: #eee;
}

body.dark .tiling-container .dashboard .box:hover {
  background-color: rgba(60, 60, 60, 0.8);
}

body.dark .hero-section .hero-content h2,
body.dark .work-web h1,
body.dark .work-web h2,
body.dark .work-project h1,
body.dark .work-project h2,
body.dark .work-creative .left-section h1,
body.dark .work-creative .left-section h2,
body.dark .work-creative .left-section p,
body.dark .right-section p,
body.dark .tiling-container .header-tiling {
  color: #eee;
  text-shadow: none;
}

body.dark .work-web h1,
body.dark .work-project h1,
body.dark .work-creative .left-section h1,
body.dark .hero-section .hero-content h1 {
  text-shadow: -2px -2px 0 #555, 2px -2px 0 #555, -2px 2px 0 #555, 2px 2px 0 #555;
  color: #111;
}

body.dark a[href="/article-list.html"] {
  color: #eee !important;
  border-color: #eee !important;
  background-color: rgba(40, 40, 40, 0.7) !important;
}

body.dark a[href="/article-list.html"]:hover {
  background-color: rgba(60, 60, 60, 0.8) !important;
}

body.dark #preloader {
  background-color: #111;
}
body.dark #preloader .loading-text {
  color: #eee;
}
body.dark #preloader .spinner-2>div {
  border: 2.2px solid #eee;
}

body.dark footer {
  background-color: #111 !important;
  border-top-color: #444 !important;
}
body.dark footer p {
  color: #ccc !important;
}
body.dark footer h1,
body.dark footer h2 {
  color: #eee !important;
}