:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --primary-color: #007bff;
}

[data-theme="dark"] {
  --background-color: #121212;
  --text-color: #ffffff;
  --primary-color: #1e90ff;
}


body {
  background-color: var(--background-color);
  color: var(--text-color);
}

header {
  border-bottom: 3px solid var(--text-color);
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

p {
  padding-left: 35px;
  padding-bottom: 20px;
}

h1 {
  padding: 10px;
  margin: 10px;
}

#postsList {
  padding: 1em;
}

main {
  border-top: double 5px var(--text-color);
}

.post-container {
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  background-color: var(--post-background-color);
  border: double 3px var(--post-border-color);
}

.post-container h3 {
  color: var(--post-text-color);
  margin-bottom: 10px;
}

.post-container p {
  color: var(--post-border-color);
}

.post-container span {
  display: block;
  margin-top: 20px;
  font-style: italic;
  color: var(--text-color);
}

@media (max-width: 768px) {
  nav {
    flex-direction: column;
  }

  nav button {
    margin-top: 0.5em;
  }

  footer {
    position: static;
  }
}

h4 {
  padding: 10px;
  position: relative; /* Ensure the underline is positioned correctly */
}

h4::before {
  content: " ";
  position: absolute;
  border-bottom: 1px solid var(--text-color);
  width: 94%;
  height: 1.1em;
}

#postedBy {
  color: #a39056;
  padding-top: 20px;
}

#endBorder {
  border-bottom: 3px double var(--text-color);
  position: absolute;
}

#withLove {
  text-align: center;
  padding-top: 20px;
}

.blogPageInfo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-style: italic;
}

button {
  background-color: transparent;
  border: none;
  font-size: large;
}

footer {
  background: linear-gradient(#f6a50f, #d2972a, #b78f45, #846a2d);
}

#modeToggle {
  background-color: transparent;
  color: var(--text-color);
}

a {
  text-decoration: none;
  color: #a39056;
  font-weight: bold;
}