:root {
  --tailwind-green-700: #15803d;
  --tailwind-red-700: #b91c1c;
  --tailwind-red-300: #fca5a5;
  --tailwind-red-200: #fecaca;
  --tailwind-red-100: #fee2e2;
  --tailwind-sky-400: #38bdf8;
  --tailwind-sky-300: #7dd3fc;
  --tailwind-sky-200: #bae6fd;
  --tailwind-sky-100: #e0f2fe;
  --tailwind-sky-50: #f0f9ff;
  --tailwind-slate-50: #f8fafc;

  --md-default-bg-color: var(--tailwind-slate-50);
  --md-primary-fg-color: var(--tailwind-green-700);
  --md-primary-bg-color: var(--tailwind-sky-50);
  --md-accent-fg-color: var(--tailwind-red-700);
  --md-accent-bg-color: var(--tailwind-sky-50);

  --md-admonition-icon--friend: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/></svg>');
}

/* Add gradient to static background. */
body {
  background: linear-gradient(var(--tailwind-sky-100), white);
  background-position: center;
  background-attachment: fixed;
}

/* Remove background from TOC sidebar. */
.md-nav--secondary .md-nav__title {
  background: none;
  box-shadow: none;
}

/* Use full width. Useful for main images. */
.width100 {
  width: 100%;
}

/* Keep elements on the same line. */
.oneline {
  white-space: nowrap;
  margin-right: 8px;
}

/* Do not display h1 headers and remove margins (effectively not rendering them at all). */
h1 {
  margin: 0px;
  display: none;
}

/* Reduce the h2 margin, preventing large blank space on mobile. Use as { .first } on the first such
header of each page if it is the very first element. */
h2.first {
  margin-top: 0.64em;
}

/* Change FontAwesome icon color. */
.twemoji {
  color: var(--md-primary-fg-color);
}

.md-content__inner {
  padding-top: 0px;
}

.md-content__inner:before {
  display: none;
}

.title-caption {
  max-width: 100%;
  margin: 0px;
}

/* ==== Animate Header Button (Small Screen Only) ==== */

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.75);
  }
  30% {
    transform: scale(1);
  }
}

label.md-header__button.md-icon[for="__drawer"] {
  animation: pulse 3000ms infinite;
}

/* ==== Exco Profiles ==== */

div.admonition:has(div.exco-profile) {
    background: unset;
    border: unset;
    box-shadow: unset;
    transition: unset;
    font-size: unset;
}

div.exco-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

div.exco-profile > img {
  max-width: 96px;
  aspect-ratio: 1;
  margin-bottom: 8px;
}

/* ==== Events Embedded Screen Size Toggle ==== */

/* Only show on large screens. */
@media (max-width: 500px) {
  .show-largescreen-only {
    display: none;
  }
}

/* Only show on small screens. */
@media (min-width: 501px) {
  .show-smallscreen-only {
    display: none;
  }
}

/* ==== Membership Fee Cards ==== */

div.admonition:has(div.fees-standard) {
  background: linear-gradient(30deg, var(--tailwind-red-200), white);
}

div.admonition:has(div.fees-airgun) {
  background: linear-gradient(30deg, var(--tailwind-sky-200), white);
}

/* ==== Contact Page Links */

div.grid.cards.contact > ul > li {
  border: unset;
  border-radius: unset;
  padding: unset;
  transition: unset;
}

div.grid.cards.contact > ul > li:hover, div.grid.cards.contact > ul > li:focus-within {
  box-shadow: unset;
}

div.grid.cards.contact-socials {
  grid-template-columns: repeat(auto-fit, 10rem);
}

div.grid.cards.contact-locations {
  grid-template-columns: repeat(auto-fit, 10rem);
}

/* ==== Admonition: Friend (based on quote) ==== */

.md-typeset .admonition.friend,
.md-typeset details.friend {
  border-color: #9e9e9e;
}
.md-typeset .friend > .admonition-title,
.md-typeset .friend > summary {
  background-color: #f5f5f5;
  /* Add this to remove icon. */
  padding-left: 0.6rem;
}
.md-typeset .friend > .admonition-title::before,
.md-typeset .friend > summary::before {
  /* Set display to none, remove others to remove icon. */
  display: none;
  /* background-color: #9e9e9e; */
  /* -webkit-mask-image: var(--md-admonition-icon--friend); */
  /* mask-image: var(--md-admonition-icon--friend); */
}

div.friend-div {
  display: flex;
  align-items: center;
}

div.friend-div > .friend-img {
  max-width: 64px;
  aspect-ratio: 1;
}

div.friend-div > .friend-text {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 12px;
}