<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GuitARRR: classical guitar and song arrangements and original compositions... with pirates.</title>
  <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-Akqfrbj/HpNVo8k11SXBb6TlBWmXXlYQrCSqEWmyKJe+hDm3Z/B2WVG4smwBkRVm" crossorigin="anonymous"></script>
  <style>
    body {
      line-height: 1;
      font: normal 15px/1.5em 'Helvetica Neue', Helvetica, Arial, sans-serif;
      color: #404040;
      line-height: 1.75;
      letter-spacing: 0.008em;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      scrollbar-gutter: stable both-edges;
      overflow-y: scroll;
    }

    #header {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    #header h1 {
      margin: 0;
      padding: 0;
      text-align: center;
    }
  
    main {
      max-width: min(750px, 96%);
    }
  
    a {
      text-decoration: none;
      color: #4295d9;
    }
  
    a:hover {
      color: #0366d6;
    }
  
    hr {
      display: block;
      border: none;
      height: 2px;
      margin: 40px auto;
      background: #eee;
    }
  
    h1, h2, h3 {
      font-weight: 400;
    }
  
    p {
      margin-block-start: 1.5em;
      margin-block-end: 1.5em;
      word-break: normal;
      overflow-wrap: anywhere;
    }
  
    #logo-image {
      width: 200px;  /* Adjust this value to your preferred size */
      height: auto;  /* This maintains the aspect ratio */
      margin: 0 auto;
    }

    nav {
      padding: 0;
      background: #fff;
      background: rgba(255, 255, 255, 0.9);
      margin: 0 auto;
      text-align: right;
      z-index: 100;
    }

    nav ul {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      padding: 0;
      margin: 0;
    }

    nav ul li {
      list-style: none;
    }
  
    nav a {
      top: 8px;
      right: 6px;
      padding: 8px 12px;
      font-size: 13px;
      line-height: 1.35;
      border-radius: 3px;
    }
  
    @media (max-width: 700px) {
      nav {
        padding: 20px 10px 0 0;
        background: #fff;
        background: rgba(255, 255, 255, 0.9);
        margin: 0 auto;
        text-align: right;
        z-index: 100;
      }
      nav a {
        padding: 8px 8px;
      }
    }

    #footer {
      margin-top: 100px;
      margin-bottom: 100px;
      text-align: center;
      color: #bbbbbb;
      font-size: 14px;
    }
  
    #footer .copyright {
      margin: 20px auto;
      font-size: 15px;
    }
  
    #footer .split {
      cursor: pointer;
    }
  
    #footer .split:hover path {
      fill: #ff3356;
      transition: 0.7s ease-out;
      cursor: pointer;
    }
  
    #social {
      display: flex;
      justify-content: center;
    }
  
    #social a {
      margin: 0 4px;
      width: 28px;
      height: 28px;
      padding: 0
    }
  
    #blueskyLogoContainer {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background-color: #bbbbbb;
      border: none;
      width: 10px;
      height: 10px;
      margin: 0;
    }


    /* Helm CSS */
    .piece-column {
      display: flex;
      flex-direction: column;
      gap: 20px;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 240px;
    }
    .piece-column-title {
      text-align: center;
      font-size: 20px;
    }
    
    .piece-card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      padding: 16px;
      width: calc(100% - 32px);
      transition: transform 0.2s ease;
    }
    
    .piece-card:hover {
      transform: translateY(-4px);
    }
    
    .piece-card img {
      width: 100%;
      height: 160px;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 12px;
    }
    
    .piece-card h2 {
      font-size: 18px;
      margin: 0 0 8px 0;
      color: #333;
    }
    
    .piece-card .description {
      font-size: 14px;
      color: #666;
      margin: 0;
    }

    .piece-card a {
      width: 100%;
      height: 100%;
    }

    /* Score Page CSS */
    .score-page {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

    .score-page h2 {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }

    .score-page img {
      max-width: 100%;
      height: auto;
      margin: 20px 0;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .score-page p {
      font-size: 16px;
      line-height: 1.6;
      color: #444;
      margin-bottom: 16px;
    }

    dt {
      float: left;
      clear: left;
      width: 120px; /* Adjust as needed */
      font-weight: bold;
    }
    dd {
      margin-left: 130px; /* Match or exceed dt width */
      margin-bottom: 0.5em;
    }
    
  </style>
</head>
<body>
  <header id="header">
    <a href="/" hx-get="/" hx-target="#main" hx-push-url="true">
      <h1>GuitARRR!</h1>
      <img src="/parrot.png" id="logo-image"/>
    </a>
    <nav>
      <ul>
        <li><a href="/" hx-get="/" hx-target="#main" hx-push-url="true">Helm</a></li>
        <li><a href="captains_log" hx-get="/captains_log" hx-target="#main" hx-push-url="true">Captain's Log</a></li>
        <li><a href="treasure_chest" hx-get="/treasure_chest" hx-target="#main" hx-push-url="true">Treasure Chest</a></li>
        <li><a href="crows_nest" hx-get="/crows_nest" hx-target="#main" hx-push-url="true">Crow's Nest</a></li>
      </ul>
    </nav>
  </header>
  <main id="main" hx-boost="true" hx-swap="innerHTML"></main>
  <footer id="footer">
    <p>&copy; 2025 Alexander Morgan</p>
    <div id="social">
      <a class="symbol" href="https://x.com/lexandermorgan" target="_blank">
        <svg fill="#bbbbbb" width="28" height="28" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;" xml:space="preserve">
        <g><path d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
        C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
        h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
        C438.532,59.576,430.49,40.204,414.41,24.123z M335.471,168.735c0.191,1.713,0.288,4.278,0.288,7.71
        c0,15.989-2.334,32.025-6.995,48.104c-4.661,16.087-11.8,31.504-21.416,46.254c-9.606,14.749-21.074,27.791-34.396,39.115
        c-13.325,11.32-29.311,20.365-47.968,27.117c-18.648,6.762-38.637,10.143-59.953,10.143c-33.116,0-63.76-8.952-91.931-26.836
        c4.568,0.568,9.329,0.855,14.275,0.855c27.6,0,52.439-8.565,74.519-25.7c-12.941-0.185-24.506-4.179-34.688-11.991
        c-10.185-7.803-17.273-17.699-21.271-29.691c4.947,0.76,8.658,1.137,11.132,1.137c4.187,0,9.042-0.76,14.56-2.279
        c-13.894-2.669-25.598-9.562-35.115-20.697c-9.519-11.136-14.277-23.84-14.277-38.114v-0.571
        c10.085,4.755,19.602,7.229,28.549,7.422c-17.321-11.613-25.981-28.265-25.981-49.963c0-10.66,2.758-20.747,8.278-30.264
        c15.035,18.464,33.311,33.213,54.816,44.252c21.507,11.038,44.54,17.227,69.092,18.558c-0.95-3.616-1.427-8.186-1.427-13.704
        c0-16.562,5.853-30.692,17.56-42.399c11.703-11.706,25.837-17.561,42.394-17.561c17.515,0,32.079,6.283,43.688,18.846
        c13.134-2.474,25.892-7.33,38.26-14.56c-4.757,14.652-13.613,25.788-26.55,33.402c12.368-1.716,23.88-4.95,34.537-9.708
        C357.458,149.793,347.462,160.166,335.471,168.735z"></path></g>
        </svg>
      </a>
      <a id="blueskyLogoContainer" class="ssbc-__link" href="https://bsky.app/profile/lexandermorgan.bsky.social" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg"  width="20" height="18" viewBox="0 0 600 535" version="1.1">
          <path d="m299.75 238.48c-26.326-51.007-97.736-146.28-164.21-193.17-63.677-44.919-88.028-37.186-103.82-29.946-18.428 8.3915-21.719 36.692-21.719 53.311s9.0496 136.57 15.138 156.48c19.745 66.145 89.674 88.522 154.17 81.282 3.2908-0.49362 6.5816-0.98723 10.037-1.3163-3.2908 0.49362-6.7461 0.98723-10.037 1.3163-94.445 13.986-178.52 48.374-68.284 170.96 121.1 125.38 166.02-26.82 189.06-104.15 23.035 77.169 49.526 223.94 186.75 104.15 103.17-104.15 28.301-156.97-66.145-170.96-3.2908-0.32908-6.7461-0.82269-10.037-1.3163 3.4553 0.49362 6.7461 0.82269 10.037 1.3163 64.499 7.2397 134.59-15.138 154.17-81.282 5.9234-20.074 15.138-139.86 15.138-156.48s-3.2908-44.919-21.719-53.311c-15.96-7.2397-40.148-14.973-103.82 29.946-66.967 47.058-138.38 142.16-164.7 193.17z" fill="#ffffff"/>
        </svg>
      </a>
    </div>    
  </footer>
</body>
</html>
