html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  font-weight: 300;
  font-optical-sizing: auto;
}

body {
  display: flex;
  height: 100%;
  flex-direction: column;
  font-family: "Vazirmatn", sans-serif;
}

li {
  list-style: none;
}

a {
  color: #389ab0;
}

a:visited {
  color: #173f80;
}

.responsive-image {
  max-height: 500px;
  max-width: 100%; /* Ensures the image fits the container */
  height: auto; /* Maintains aspect ratio */
  width: auto; /* Maintains aspect ratio */
  display: block; /* Optional: removes extra space at the bottom */
}

.header {
  height: fit-content;
  font-family: "Quicksand", sans-serif;
  letter-spacing: 1.5px;
  padding: 15px;
}
.header a {
  color: inherit;
  text-decoration: none;
}

.page-body {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.navigation {
  float: left;
  padding: 20px;
  background-color: #dbd8d5;
  box-shadow: 0 1px 7px 1px #9c9c9c;
}
.navigation a {
  color: gray;
  text-decoration: none;
}
.navigation .current {
  font-weight: bold;
  color: #173f80;
}

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

.content {
  padding: 20px;
  height: min-content;
}
.content p {
  margin: 1.5rem 0;
}

@media only screen and (min-width: 481px) {
  .page-body {
    flex-direction: row;
  }
  .navigation {
    padding: 40px;
    background-color: inherit;
    box-shadow: none;
  }
  .nav {
    flex-direction: column;
    gap: 20px;
  }
  .content {
    padding: 40px;
  }
}
.date {
  font-size: 1rem;
  color: gray;
}

.category,
.category:visited {
  font-size: 1rem;
  color: #859ca8;
  text-decoration: none;
}

.preview {
  background-color: #f7f0e6;
  padding: 5px 20px;
  color: #5e5e5e;
  border-radius: 0px 10px 10px 10px;
}

.read-more,
.read-more:visited {
  font-size: 80%;
  color: #8f8f8f;
  text-decoration: none;
}

.small {
  font-size: 0.8rem;
}

.featured {
  margin: 0.5rem 0;
  font-weight: 500;
  color: gray;
}

.featured-title,
.featured-title:visited {
  font-size: 1rem;
  margin: 1rem 0;
  color: #8a8072;
}
.featured-title a,
.featured-title:visited a {
  text-decoration: none;
}

/*# sourceMappingURL=styles.css.map */