* {
    font-family: "Cormorant Garamond", serif;
  }
  
  header {
    text-align:center;
    vertical-align: middle;
    background-image: url(SheetMusic1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: center;
    margin: 0px;
    padding: 69px;
  }

  .cormorant-garamond-light {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-style: normal;
  }

  h2 {
    margin-top: -50px;
    margin-bottom: -20px;
    font-size: 60px;
  }

  .navbar {
    font-size: 20px;
    margin-top: 40px;
    margin-bottom: -40px;
    padding-bottom: 0px;
    padding-top: 0px;
  }

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
  }

  .TopText {
    vertical-align: middle;
    text-align: center;
    font-size: 69px;
  }

  .AboutBody {
    padding-left: 200px;
    padding-right: 200px;
    vertical-align: middle;
    text-align: center;
    font-size: 1.5em;
  }

  .ListenBody {
    padding-left: 200px;
    padding-right: 200px;
    padding-bottom:20px;
    vertical-align: middle;
    text-align: center;
    font-size: 1.5em;
  }

/* Style the accordion container card look if desired */
  .accordion {
    border-radius: 8px;
    overflow: hidden;
  }

  /* Style the closed/default summary bar */
  details summary {
    /*background-color: #f8f9fa; /* Your default background color */
    /*color: #212529;             /* Your text color */
    padding: 1rem;
    cursor: pointer;
    list-style: none;          /* Hides default triangle arrow in some browsers */
    user-select: none;
    transition: background-color 0.2s ease;
  }

  /* Style the hover state */
  details summary:hover {
    background-color: #460054; /* Color when hovering */
  }

  /* Style when the <details> element is OPEN (clicked) */
  details[open] summary {
    background-color: #e7a5f6 !important; /* Change this to whatever color you want when open (e.g., a soft mint/green) */
    color: #470f51;            /* Text color when open */
  }

  /* Style the inner content area when expanded */
  details > div {
    padding: 1rem;
    background-color: #ffffff; /* Content background color */
  }

  details {
    margin: 5px;
    font-size: 18px;
  }
  details > * {
    padding: .75rem;
  }
  details > div {
    background: #ddd;
    border-radius: 0 0 5px 5px;
  }
  summary {
    border-radius: 5px;
    font-size: 20px;
    font-family: sans-serif;
    font-weight: bold;
    color: #fff;
    background: #0B486B;
    cursor: pointer;
    position: relative;
    transition: .3s;
    text-indent: 0px;
  }
  summary::marker {
    content: "";
  }
  summary::before {
    content:"";
    position:absolute;
    inset: .75rem;
    left: auto;
    aspect-ratio: 1;
    background: 
     conic-gradient(from 90deg at 26% 26%, #0000 90deg, #fff 0) 
      100% 100%/58% 58%;
    clip-path: inset(1px);
    transition: .3s;
  }
  details[open] summary::before {
    transform: rotate(45deg);
  }
  details[open] summary {
    border-radius: 5px 5px 0 0;
    background: #0b6b40;
    text-indent: 1rem;
  }

  #page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #ffffffbd;
  }

  #content-wrap {
    flex: 1; /* This magically fills all available empty space and pushes the footer down */
    padding-bottom: 0; /* No more guesswork padding needed */
  }

  #footer {
    vertical-align: middle;
    text-align: center;
    position: static; /* Removes absolute positioning bugs */
    background-color: rgb(255,220,255);
    background-size: cover;
    width: 100%;
    height: auto; /* Lets the footer adapt if it has multiple lines or multiple footers */
    padding: 1.5rem 0;
  }

  .grid-container{
    margin: 20px auto;
    width:100%;
    height:0;
    padding-bottom:100%;
    display:grid;
    grid-template-columns: auto auto;
    grid-row: auto auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    .grid-item{
      padding:20px;
      border-radius:10px;
      color:black;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:40px;
      font-family:sans-serif;
    }
  
  }

  .grid-title {
    font-size: 45px;
    display: grid;
    text-align: center;
    font-weight: bolder;
  }

  .grid-content {
    font-size: 25px;
    font-weight: lighter;
  }

  .aboutimage {
    max-width: 100%;
    padding-left: 0;
    margin-left: 0;
  }

  /* =========================
   Mobile Overrides (≤ 991.98px)
   Append to the END of indexstyle.css
   ========================= */
@media (max-width: 991.98px) {

  /* Comfortable side gutters + readable base */
  body { padding: 0 1rem; }

  /* Header & title scale down */
  header {
    padding: 24px;
    background-position: center;
  }

  header, #footer {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 0;
    padding-right: 0;
  }
  
  h2 {
    margin: 0 0 8px 0;
    font-size: clamp(28px, 7vw, 40px);
  }

  /* Navbar: vertical list, centered; works without JS */
  .navbar {
    font-size: 18px;
    margin-top: 16px;
    margin-bottom: -16px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar .navbar-collapse { display: flex !important; justify-content: center;} /* ensure menu is visible */
  .navbar .navbar-nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  /* Global media safety */
  img, video, canvas, svg { max-width: 100%; height: auto; }

  /* Portrait/profile image scales nicely */
  #profileimage img, .center {
    width: min(60vw, 220px);
  }

  /* Headline & body text sizing */
  .TopText { font-size: clamp(28px, 10vw, 40px); }
  .AboutBody, .ListenBody {
    padding-left: 0;
    padding-right: 0;
    font-size: 1.125rem;
  }

  /* Grid: remove square constraint, stack to single column, add breathing room */
  .grid-container{
    width: 100%;
    height: auto;
    padding-bottom: 0;
    margin: 16px auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }
  /* Your original CSS had nested `.grid-item{}` (Sass-style) inside `.grid-container{}`.
     Add explicit rules so they actually apply on the page. */
  .grid-item {
    padding: 8px;
    border-radius: 10px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px; /* this is just a container; text inside is sized below */
  }

  .grid-title { 
    font-size: clamp(22px, 5.5vw, 28px);
    text-align: center;
    font-weight: bolder;
  }
  .grid-content {
    font-size: clamp(16px, 4.5vw, 20px);
    font-weight: 300;
  }

  /* Ensure “aboutimage” elements don’t indent */
  .aboutimage { padding-left: 0; margin-left: 0; }
  /* If you want round images in these slots, uncomment:
     .aboutimage img { border-radius: 50%; } */

  /* Footer: avoid overlap with content on short screens */
  #content-wrap { padding-bottom: 7rem; } /* a bit more room just in case */
  #footer {
    position: static;
    height: auto;
    padding: 1rem 0;
    width: 100vw;
  }
}