/* Define the regular Montserrat font */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  /* Define the variable font weight range */
  font-style: normal;
}

/* Define the italic Montserrat font */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  /* Define the variable font weight range */
  font-style: italic;
}

/* We will move this external later*/
.blog-body {
  background-color: #f6f6f6;
  margin: 0px;
}

.blog-font {
  font-family: "Montserrat" !important;
}

.blog-post-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Align children in a column */
  justify-content: center;
  /* Center children vertically */
  align-items: center;
  /* Center children horizontally */
  margin: 0px;
}

.blog-post-header {
  font-weight: bold;
  color: #333;
  margin-bottom: 1em;
  text-align: left;
  margin-left: 10%;
  margin-right: 10%;
  max-width: 825px;
  margin-top: 2em;
}

.blog-post-subtitle {
  font-size: 1.4em;
  font-weight: bold;
  color: #777;
  margin-bottom: 0.5em;
}

.blog-post-date {
  font-size: 0.7em;
  font-weight: normal;
  color: #888;
  margin-bottom: 0.5em;
}

.blog-article-image {
  width: 100%;
  height: auto;
  margin-bottom: 1em;
  text-align: left;
  max-width: 1100px;
  padding: 0%;
  margin-left: 0;
  margin-right: 0;
  padding: 0px;
}

.blog-article-image img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-article-image p {
  font-size: 0.9em;
  font-weight: normal;
  color: #888;
  margin-bottom: 0.5em;
  margin-left: 0.25em;
}

.blog-article-body,
.blog-article-body-first {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 0.5em;
  line-height: 1.7em;
  max-width: 725px;
  margin: 0%;
}

.blog-article-body-first p:first-of-type::first-letter {
  font-size: 3em;
  /* Make the first letter 3 times the base font size */
  float: left;
  /* Float the first letter to the left */
  line-height: 1em;
  /* Ensure the first letter does not affect the line height */
  margin: 0 0.1em 0 0;
  /* Add some margin to the right of the first letter */
  font-weight: bold;
  /* Optional: Make the first letter bold */
}

.blog-post-container a {
  color: #007bff;
  text-decoration: none;
}

.blog-post-container h1 {
  font-size: 4em;
  font-weight: bold;
  color: #333;
  line-height: 1em;
  margin-bottom: 0.5em;
}

.blog-post-container h2 {
  font-size: 1.7em;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.7em;
  margin-top: 2em;
}

.blog-post-container h3 {
  font-size: 1.3em;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5em;
}

.blog-post-container h4 {
  font-size: 1em;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5em;
}

/* For mobile */
@media (max-width: 700px) {
  .blog-article-image p {
    font-size: 0.9em;
    font-weight: normal;
    color: #888;
    margin-bottom: 0.5em;
  }

  .blog-post-subtitle {
    font-size: 0.9em;
  }

  .blog-article-body,
  .blog-article-body-first {
    margin-left: 5%;
    margin-right: 5%;
  }

  .blog-post-date {
    font-size: 0.7em;
  }

  .blog-post-container h1 {
    font-size: 3em;
  }

  .blog-post-container h2 {
    font-size: 1.7em;
  }

  .blog-post-container h3 {
    font-size: 1.2em;
  }

  .blog-post-container h4 {
    font-size: 0.8em;
  }

  .blog-article-body-first p:first-of-type::first-letter {
    font-size: 3em;
    /* Make the first letter 3 times the base font size */
    float: left;
    /* Float the first letter to the left */
    line-height: 1em;
    /* Ensure the first letter does not affect the line height */
    margin: 0 0.1em 0 0;
    /* Add some margin to the right of the first letter */
    font-weight: bold;
    /* Optional: Make the first letter bold */
  }
}

.stars {
  display: flex;
  position: relative;
  padding: 1rem;
  white-space: nowrap;
  align-items: center;
  margin: 0;
  width: fit-content;
}

.stars img {
  width: 50px;
}

.cover {
  background: white;
  height: 100%;
  overflow: hidden;
  mix-blend-mode: color;
  position: absolute;
  top: 0;
  right: 0;
}

img[src$="star.svg"] {
  fill: gold;
}