footer .theme-by {
  text-align: left;
  margin: 100px 0 0;
  color: hsl(240, 5%, 55%);
}

.pager {
  list-style: none;
  text-align: center;
  margin: 20px 0 0;
  padding-left: 0;
}

.pager ul {
  display: block;
}

.pager .previous > a {
  margin: 20px 0 0;
  float: left;
  display: block;
}

.pager .next > a {
  margin: 20px 0 0;
  float: right;
  display: block;
}

.centered-text {
  text-align: center;
}

.back-to-home {
  font-size: 2rem;
  color: hsl(240, 30%, 85%) !important;
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 4px;
  transition: color 0.3s ease;
}

.post-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h1 {
  flex: 1;
  text-align: center;
}

.back-to-home {
  position: fixed;
  top: 1rem;
  left: 42rem;
  font-size: 2rem;
  color: hsl(240, 30%, 85%);
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 4px;
  z-index: 1000;
  /*transition: color 0.3s ease;*/
}

/*.back-to-home:hover {
  color: #fff; /* Change color on hover */
  /*text-decoration: underline;
}*/


.post-read-more {
  color: hsl(240, 5%, 55%) !important;
  font-size:1rem;
  text-decoration: none;
}

.cats {
  color: var(--random-color) !important;
  padding: 3px 6px; /* Add consistent padding */
  border: 1px solid var(--random-color) !important; /* Transparent border to maintain size */
  border-radius: 2px; /* Optional: Round corners */
  transition: all 0.2s ease; /* Smooth transition for the hover effect */
  text-decoration: none !important;
}

.cats:hover {
  color: var(--body-color) !important;
  filter: brightness(1.2);
  border: 1px solid var(--body-color) !important;
  padding: 3px 6px;
  border-radius: 2px;
}

/*.categories-heading {
  color: var(--random-color) !important;
}*/

/* Default state: hidden */
body.preload {
  opacity: 0;
  visibility: hidden;
}

/* Fade-in animation */
body.fade-in {
  opacity: 1;
  visibility: visible;
  animation: fadeIn 0.25s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.article p a {
  color: hsl(230, 100%, 78%);
  text-decoration: underline;
  transition: all 0.3s ease;
}

.article p a:hover {
  color: #d2a234;
  text-decoration: none;
}

.tags-links {
  color: hsl(230, 100%, 78%) !important;
  text-decoration: underline !important;
  transition: all 0.3s ease;
}

.tags-links:hover {
  color: #d2a234 !important;
  text-decoration: none !important;
}