/* css styles */
.title {
  font-size: 19px !important;
  color: maroon !important; 
  #color: #02075D !important; /*this is slightly darker shade of navy*/
    #font-family: Ink Free;
    font-family: Bradley Hand ITC;
    font-weight: bold;
    text-align: center;
}
.subtitle {
 font-size: 19px !important;
  color: maroon !important;
    #font-family: Ink Free;
    font-family: Bradley Hand ITC;
    font-weight: bold;
    text-align: center; 
}
.home-container img {
  float: left;
  margin-right: 50px; /* Adjust this for more/less space */
  margin-left: 50px;      /* Forces the image to the far left */
}
* {
  box-sizing: border-box;
}

/* Prevents horizontal overflow across the entire site */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
/* In your styles.css file */
@media screen and (max-width: 767px) {
  /* CSS rules for screens smaller than 768px (common mobile breakpoint) */
  .my-custom-class {
    width: 100%; /* Make elements full width */
    display: block;
  }
}
a:hover {
  color: maroon; 
  text-decoration: underline;
}
/* Re-run the loading of website if you like these new configurations after thinking about it */
/* 1. Create your thick custom line on the left-side container */
.quarto-about-trestles .about-entity {
  border-right: 1.5px solid #fffff0 !important; 
  padding-right: 2em !important;
  margin-right: 1em !important;
}

/* 2. Remove the default faint grey line from the right-side container */
.quarto-about-trestles .about-contents {
  border-left: none !important;
}

/* 3. Also remove it from the links container (some themes put it here) */
.quarto-about-trestles .about-links {
  border-left: none !important;
}
/*Add this block to the bottom of your styles.css. It tells the browser:
"If the screen is narrower than 768px (typical tablet/phone size), change the border." */

/* Responsive adjustments for Mobile */
@media (max-width: 768px) {
  /* Option A: Hide the thick line on mobile entirely */
  .quarto-about-trestles .about-entity {
    border-right: none !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    
    /* Optional: Add a horizontal line instead if you want a separator */
    border-bottom: 0.8px solid #fffff0	 !important;
    padding-bottom: 1.5em !important;
    margin-bottom: 1.5em !important;
  }

  /* Ensure the default grey line stays hidden on mobile too */
  .quarto-about-trestles .about-contents,
  .quarto-about-trestles .about-links {
    border-left: none !important;
  }
}