:root {
  /* garden colors: https://leonardocolor.io/theme.html?name=Garden&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%221.16%22%2C%221.56%22%2C%222.17%22%2C%223.07%22%2C%224.48%22%2C%226.69%22%2C%2210.05%22%2C%2214.35%22%2C%2218.58%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Ash%22%2C%22colorKeys%22%3A%5B%22%23ece2d5%22%2C%22%2387bcb8%22%2C%22%239ec3bc%22%2C%22%23f0e5d6%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%221.16%22%2C%221.56%22%2C%222.17%22%2C%223.07%22%2C%224.48%22%2C%226.69%22%2C%2210.05%22%2C%2214.35%22%2C%2218.58%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Sky%22%2C%22colorKeys%22%3A%5B%22%23000000%22%2C%22%23dbeaac%22%2C%22%23a0ddc0%22%2C%22%2357cdcc%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%221.16%22%2C%221.56%22%2C%222.17%22%2C%223.07%22%2C%224.48%22%2C%226.69%22%2C%2210.05%22%2C%2214.35%22%2C%2218.58%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Foliage%22%2C%22colorKeys%22%3A%5B%22%23000000%22%2C%22%2343a74c%22%2C%22%23476638%22%2C%22%23354b3b%22%2C%22%232d3d2f%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%221.16%22%2C%221.56%22%2C%222.17%22%2C%223.07%22%2C%224.48%22%2C%226.69%22%2C%2210.05%22%2C%2214.35%22%2C%2218.58%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Overalls%22%2C%22colorKeys%22%3A%5B%22%23000000%22%2C%22%23411911%22%2C%22%236d3a2b%22%2C%22%2399633e%22%2C%22%23af6657%22%2C%22%23c48369%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%221.16%22%2C%221.56%22%2C%222.17%22%2C%223.07%22%2C%224.48%22%2C%226.69%22%2C%2210.05%22%2C%2214.35%22%2C%2218.58%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Shadows%22%2C%22colorKeys%22%3A%5B%22%232d0e11%22%2C%22%234b4039%22%2C%22%23756552%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%221.16%22%2C%221.56%22%2C%222.17%22%2C%223.07%22%2C%224.48%22%2C%226.69%22%2C%2210.05%22%2C%2214.35%22%2C%2218.58%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A100%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
  --ash-100: #f5ede3;
  --ash-200: #c5d2c8;
  --ash-300: #85bab6; /* use */
  --ash-400: #709b98;
  --ash-500: #5a7e7b;
  --ash-600: #46615f;
  --ash-700: #324644;
  --ash-800: #202c2c;
  --ash-900: #0f1414;
  --sky-100: #e8f2cb; /* use */
  --sky-200: #9bdcc1;
  --sky-200a25: #9bdcc140;
  --sky-300: #51c0bf;
  --sky-300: #51c0bf;
  --sky-400: #44a1a0;
  --sky-500: #378281;
  --sky-600: #2b6464;
  --sky-700: #1f4848;
  --sky-800: #142e2e;
  --sky-900: #091515;
  --foliage-100: #e2f1e3;
  --foliage-200: #add9b1;
  --foliage-300: #79c07f;
  --foliage-400: #43a64c; /* use */
  --foliage-500: #458542;
  --foliage-600: #466438;
  --foliage-700: #324637; /* use */
  --foliage-700a25: #32463740;
  --foliage-800: #212d22;
  --foliage-900: #0f1410;
  --overalls-100: #f5ebe6;
  --overalls-200: #e5c9be;
  --overalls-300: #d4a693;
  --overalls-400: #c4836a;
  --overalls-500: #aa6551;
  --overalls-600: #834f35; /* use */
  --overalls-700: #663427;
  --overalls-800: #471d15;
  --overalls-900: #220d09;
  --shadows-100: #efedeb;
  --shadows-200: #d3cec8;
  --shadows-300: #b7afa5;
  --shadows-400: #9d9184;
  --shadows-500: #837563;
  --shadows-600: #685a4a;
  --shadows-700: #4b3f39;
  --shadows-800: #3a2423;
  --shadows-900: #240b0e; /* use */
  /* accents: https://leonardocolor.io/theme.html?name=Garden+accents&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%221.61%22%2C%222.17%22%2C%224.35%22%2C%226.9%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Accents%22%2C%22colorKeys%22%3A%5B%22%235fdde9%22%2C%22%23c55647%22%2C%22%23824185%22%2C%22%23d9a95a%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%221.61%22%2C%222.17%22%2C%224.35%22%2C%226.9%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A100%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
  --accent-cyan: #60dde8;
  --accent-cyan-dark: #1c919a;
  --accent-orange: #d9a75a;
  --accent-red: #c55747;
  --accent-purple: #824185;
  /* beat & flow colors: http://paletton.com/#uid=50I0X0kBQET8lSfmwGyHPo7Suc0 */
  --bf-orange-500: #ff9200;
  --bf-orange-100: #ffe3bd;
  --bf-orange-300: #ffb24c;
  --bf-orange-700: #c06e00;
  --bf-orange-900: #603700;
  --bf-lemon-500: #ffe800;
  --bf-lemon-100: #fff9bd;
  --bf-lemon-300: #ffef4c;
  --bf-lemon-700: #c0af00;
  --bf-lemon-900: #605700;
  --bf-berry-500: #ec0048;
  --bf-berry-100: #f8b7cb;
  --bf-berry-300: #ee4779;
  --bf-berry-700: #ac0034;
  --bf-berry-900: #56001a;
  --page-bg: var(--sky-100);
  --page-fg: var(--shadows-900);
  --nav-bg: var(--sky-200);
  --link-color: var(--accent-cyan-dark);
  --link-hover: var(--ash-700);
  --prose-code: var(--overalls-600);
  --prose-hr: var(--sky-200);
  --prose-caption: var(--overalls-600);
  --prose-aside-bg: var(--sky-200);
  --prose-pre-code: var(--shadows-900);
  --prose-pre-bg: var(--sky-200);
  --prose-blockquote: var(--ash-300);
  --prose-blockquote-subtle: var(--ash-200);
  --prose-footnotes: var(--shadows-600);
}
@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: var(--foliage-900);
    --page-fg: var(--ash-100);
    --nav-bg: var(--foliage-800);
    --link-color: var(--accent-cyan);
    --link-hover: var(--ash-400);
    --prose-code: var(--overalls-400);
    --prose-hr: var(--foliage-700);
    --prose-caption: var(--sky-100);
    --prose-aside-bg: var(--sky-800);
    --prose-pre-code: var(--shadows-100);
    --prose-pre-bg: var(--shadows-800);
    --prose-blockquote: var(--ash-800);
    --prose-blockquote-subtle: var(--ash-700);
    --prose-footnotes: var(--shadows-300);
  }
}

:root {
  font-family: "Work Sans";
  font-size: 18px;
  line-height: 1.5;
}

body {
  margin: 0;
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}
body .left-side,
body .right-side {
  flex-grow: 1;
}
body .left-side {
  background: var(--bf-orange-700);
}
body .right-side {
  background: var(--bf-berry-700);
}

.content {
  max-width: 960px;
  background-color: var(--bf-lemon-300);
  color: var(--bf-lemon-900);
}

.pack-banner {
  display: block;
  padding-top: 62px;
  max-width: 100%;
  margin: 0 auto;
}

.download-links-container {
  margin: 0 auto;
  padding: 1rem;
  max-width: 836px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.download-links-container .download-links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 1rem;
}
.download-links-container .download-links-grid .download-link {
  padding: 0.5rem;
  border-bottom: 2px solid;
  text-align: center;
}
.download-links-container .download-links-grid .download-link a,
.download-links-container .download-links-grid .download-link a:hover {
  color: inherit;
  text-decoration: none;
}
.download-links-container .download-links-grid .download-link.primary {
  background: var(--bf-berry-700);
  border-bottom-color: var(--bf-berry-900);
  color: var(--bf-berry-100);
  font-size: 1.5rem;
}
.download-links-container .download-links-grid .download-link.primary span {
  font-size: 1rem;
}
.download-links-container .download-links-grid .download-link.patch {
  background: var(--bf-lemon-700);
  border-bottom-color: var(--bf-lemon-900);
  color: var(--bf-lemon-100);
}
.download-links-container .download-links-grid .download-link.courses {
  background: var(--bf-orange-700);
  border-bottom-color: var(--bf-orange-900);
  color: var(--bf-orange-100);
}
.download-links-container .download-links-grid .download-link span {
  font-size: 0.875rem;
}
.download-links-container .download-links-grid .download-contents {
  font-style: italic;
}

.song-list-header {
  margin: 0;
  padding: 1rem;
  text-align: center;
  font-size: 2.25rem;
  font-weight: normal;
}

.song-list {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: center;
  margin: 0;
  padding: 2rem 0;
}
.song-list > li {
  display: flex;
  flex-direction: column;
  max-width: 418px;
}
.song-list > li > .sx {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  background-color: var(--bf-berry-900);
  color: var(--bf-berry-100);
}
.song-list > li > .sx > .difficulty {
  font-size: 1.5rem;
  color: var(--bf-berry-100);
  padding: 0.5rem;
}
.song-list > li > .sx > .tech {
  color: var(--bf-berry-300);
}
.song-list > li > .lowers {
  display: flex;
  flex-direction: row;
  background: var(--bf-berry-100);
  color: var(--bf-berry-900);
}
.song-list > li > .lowers > * {
  padding: 0.5rem;
}
.song-list > li > .lowers > .sh {
  background-color: var(--bf-berry-700);
  color: var(--bf-berry-100);
}
.song-list > li > .lowers > .sm {
  background-color: var(--bf-berry-500);
}
.song-list > li > .lowers > .se {
  background-color: var(--bf-berry-300);
}
.song-list > li > .lowers > .sn {
  background-color: var(--bf-berry-100);
}