:root {
      --wrap: 760px;
      --body: #111;
      --muted: #555;
      --link: #003399;
      --visited: #003399;
      --rule: #cfcfcf;
    }

    html { box-sizing: border-box; }
    *, *:before, *:after { box-sizing: inherit; }

    body {
      margin: 0;
      color: var(--body);
      background: #fff;
      font: 14px/1.5 Verdana, Arial, Helvetica, sans-serif;
    }

    a { color: var(--link); text-decoration: none; }
    a:hover { text-decoration: underline; color: #B87333; }
    a:visited { color: var(--link); }

/* Download links */

.download-link {
  background: url('/media/icon/loving-kindness-download-icon.png') no-repeat right center;
  display: inline-block;
}

    .wrap {
      max-width: var(--wrap);
      margin: 0 auto;
      padding: 36px 24px 24px;
    }

    header {
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .search-area {
      text-align: right;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      position: relative;
      top: -60px;
    }

    .searchbar { display: flex; flex-direction: column; align-items: flex-end; }
    .searchbar input[type="search"] { width: 225px; padding: 3px 4px; border: 1px solid #888; border-radius: 1px; height: 20px; margin-bottom: 2px; margin-right: 5px;}
    .searchbar button { padding: 1px 8px; font-size: 12px; border: 1px solid #888; background: #eee; border-radius: 1px; cursor: pointer; align-self: flex-start; }

    .quote {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(calc(-50% + 12px));
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-style: italic;
      color: #444;
      line-height: 1.4;
      width: 250px;
      text-align: right;
      white-space: pre-line;
      Margin-right: 5px;
    }

    .logo-title { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
    .logo { width: 96px; height: 96px; background: url('../media/images/gotama-buddha.svg') no-repeat center/contain; border: none; flex-shrink: 0; }
    .titles h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 32px; margin: 0; line-height: 1.1; margin-left: 0; text-align: center }
    .tag { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 23px; color: #333; margin-top: 8px; margin-left: 0; text-align: center }

    hr { border: 0; height: 1px; background: var(--rule); margin: 24px 0; }

    .group { margin: 18px 0; padding: 0 12px; }
.group > *:not(.label) {
  margin-left: 20px;
}
    .label { display: block; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: var(--link); margin-bottom: 2px; }

    footer { margin: 18px auto 0; text-align: center; font-size: 12px; color: var(--muted); }
    footer .links a { color: var(--link); }

    @media (max-width: 820px) {
      :root { --wrap: 92vw; }
      .quote { position: static; text-align: right; margin-top: 8px; transform: none; right: 0; }

/* Hide search area on small screens */
  .search-area {
    display: none;
  }

    }