/* ============== Layout and Formatting Titles and Subtitles =================*/

/* Center the listing */
.quarto-listing {
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Title of page "Notes · Thoughts · Blog" */
.title {
  font-family: "Petrona";
  font-size: 3rem;
  color: #FA2FBD;
  font-weight: 500;
  line-height: 3em !important; /* Adds more space around title */
  text-align: center;
}

/* Subtitle of page: "This blog serves as my..." */
.subtitle {
  font-family: 'Bebas Neue', sans-serif;
  color: #666260;
  text-transform: none;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center !important;
  padding-left: 10rem;
  padding-right: 10rem;
  margin-bottom: 5em !important;
}

/* ===================== Format Single Posts in List ========================*/

/* Title of listing (h3.no-anchor.listing-title) */
h3.no-anchor.listing-title {
  font-family: "Petrona"; /* 'Bebas Neue', sans-serif; */
  color: #235347 !important; 
  font-size: 20px;
  text-transform: none;
  text-decoration: none !important; 
}

h3.no-anchor.listing-title:hover {
  text-decoration: underline; 
}

/* Listing date */
.listing-date {
  color: #7F8A80;
  text-decoration: none !important; 
}

/* Listing author */
.listing-author {
  color: #98A399;
  text-transform: none;
  text-decoration: none !important; 
  font-size: 15px;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Blog post images */
div.listing img.listing-image {
  width: 150px !important; /* Set the desired width */
  height: auto !important; /* Maintain aspect ratio */
}

/* Hover effect for references */
.section-ref:hover {
  position: relative;
  cursor: pointer;
}

/* ===================== Responsive Adjustments ======================== */

@media screen and (max-width: 768px) {
  
  .quarto-listing {
    max-width: 90%;
  }

 .title {
    font-size: 1.8rem;
    line-height: 1.5em !important;
  }


  .subtitle {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
}