/* Transition for smooth dark mode */
body,
.main,
.post {
  transition: background-color 0.4s ease, color 0.2s ease, border-color 0.4s ease;
}

/* Dark mode styles */
body.dark {
  background: black;
  color: white;
}

body.dark .main {
  background: rgb(28, 28, 29);
}

/* Posts black, text white */
body.dark .post {
  background-color: black;
  color: white;
  border: 1px solid #1d1d1d;
}

/* Headers white */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {
  color: white;
}

/* Dark mode button: solid black box with white text */
#dark-mode-toggle,
.dark-mode-toggle {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background: black;
  color: white;
  cursor: pointer;
  font-family: Verdana, sans-serif;
  text-transform: lowercase;
}

#dark-mode-toggle:hover,
.dark-mode-toggle:hover {
  opacity: 0.8;
}

/* Remove min-width from mobile nav */
.mobile-nav-inner {
  width: 100%;
  max-width: 100%;
}

/* Links white in dark mode */
body.dark a {
  color: white;
  text-decoration: none;
}

body.dark a:hover {
  text-decoration: underline;
}