html {
  --mco-brand-blue: #0c94f8;
  --mco-light-blue: #77b4d1;
  --mco-dark-blue: #001021;
  --mco-white: #f5eed8;
  --mco-light-green: #a0c1b9;
  --mco-dark-green: #21897e;
}

body {
  font: normal 1rem "Inter", sans-serif;
  color-scheme: light;
  color: var(--mco-dark-blue);
}

code {
  word-break: break-all;
  font-family: inherit;
}

.text-xl {
  font-size: 33px;
  line-height: 40px;
}

.text-xl::before {
  content: "";
  margin-bottom: -0.2424em;
  display: table;
}

.text-xl::after {
  content: "";
  margin-top: -0.2424em;
  display: table;
}

.text-l {
  font-size: 19.25px;
  line-height: 24px;
}

.text-l::before {
  content: "";
  margin-bottom: -0.2597em;
  display: table;
}

.text-l::after {
  content: "";
  margin-top: -0.2597em;
  display: table;
}

.text-m {
  font-size: 16.5px;
  line-height: 24px;
}

.text-m::before {
  content: "";
  margin-bottom: -0.3636em;
  display: table;
}

.text-m::after {
  content: "";
  margin-top: -0.3636em;
  display: table;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.main-nav-link {
  color: white;
  background: var(--mco-dark-blue);
  padding: 0 1rem;
  height: 3rem;
  border-radius: 0.5rem;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-weight: bold;
}

.main-nav-link:hover {
  opacity: 0.85;
}

.main-nav-link-queer {
  color: var(--mco-dark-blue);
  background-image: linear-gradient(
    45deg,
    hsl(18deg 100% 50%) 0%,
    hsl(32deg 100% 50%) 7%,
    hsl(44deg 100% 50%) 15%,
    hsl(59deg 100% 47%) 22%,
    hsl(78deg 100% 62%) 29%,
    hsl(110deg 100% 73%) 36%,
    hsl(149deg 100% 66%) 44%,
    hsl(169deg 100% 50%) 51%,
    hsl(185deg 100% 48%) 58%,
    hsl(195deg 100% 50%) 65%,
    hsl(205deg 100% 50%) 72%,
    hsl(225deg 95% 63%) 79%,
    hsl(254deg 79% 64%) 86%,
    hsl(279deg 65% 55%) 93%,
    hsl(301deg 100% 37%) 100%
  );
}

.bg-dark-blue {
  background-color: var(--mco-dark-blue);
}

.bg-brand-blue {
  background-color: var(--mco-brand-blue);
}

.text-white {
  color: white;
}

.text-brand-blue {
  color: var(--mco-brand-blue);
}

.container {
  max-width: 80rem;
  padding: 2rem;
  margin: 0 auto;
  display: grid;
  flex-direction: column;
  align-items: start;
  gap: 2rem;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  mix-blend-mode: soft-light;
  opacity: 0.75;
}

.hero-logo {
  width: 6rem;
  height: 6rem;
}

.hero-main-link {
  background: white;
  color: var(--mco-brand-blue);
  padding: 0 1rem;
  height: 3rem;
  border-radius: 0.5rem;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-weight: bold;
  width: 100%;
  justify-content: center;
}

.hero-main-link:hover {
  opacity: 0.85;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-social-link {
  width: 3rem;
  height: 3rem;
  padding: 0.25rem;
  display: block;
  background: white;
  border-radius: 0.5rem;
}

.hero-social-link:hover {
  opacity: 0.85;
}

.inline-link {
  color: var(--mco-brand-blue);
}

.gallery {
  padding-top: 0;
  padding-bottom: 0;
}

.gallery-image {
  aspect-ratio: 1;
  border-radius: 2rem;
  object-fit: cover;
}

.donate-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2rem;
}

.donate-list-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--mco-white);
  border-radius: 1rem;
}

.donate-list-item > img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex-shrink: 0;
}

.donate-list-item > span > * {
  display: block;
}

.donate-list-item > span > :first-child {
  font-weight: bold;
}

.donate-form {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  align-self: start;
}

.donate-form > p:first-child {
  font-weight: bold;
  line-height: 1;
}

.donate-form-amount {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.donate-form-amount label {
  display: block;
  position: relative;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: thin solid var(--mco-dark-blue);
  cursor: pointer;
}

.donate-form-amount label:focus-within,
.donate-form-amount input[type="number"]:focus-visible,
.donate-form input[type="checkbox"]:focus-visible,
.donate-form button[type="submit"]:focus-visible {
  outline: 2px solid var(--mco-brand-blue);
}

.donate-form-amount label:has(input[type="radio"]:checked),
.donate-form-amount label:hover {
  background-color: var(--mco-dark-blue);
  color: var(--mco-white);
}

.donate-form-amount label > input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.donate-form-amount input[type="number"] {
  appearance: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: thin solid var(--mco-dark-blue);
  width: 4.8rem;
  display: none;
}

.donate-form-amount label:has(input[value="custom"]:checked) {
  display: none;
}

.donate-form-amount:has(input[value="custom"]:checked) input[type="number"] {
  display: revert;
}

.donate-form label:has(input[type="checkbox"]) {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.donate-form input[type="checkbox"] {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: thin solid var(--mco-dark-blue);
  border-radius: 0.25rem;
  margin: 0;
}

.donate-form input[type="checkbox"]::after {
  content: "✔";
  font-size: 0.75rem;
  color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.donate-form
  label:has(input[type="checkbox"]:not(:checked)):hover
  input[type="checkbox"]::after {
  color: var(--mco-dark-blue);
  opacity: 0.5;
}

.donate-form input[type="checkbox"]:checked {
  background-color: var(--mco-dark-blue);
  position: relative;
}

.donate-form input[type="checkbox"]:checked::after {
  color: var(--mco-white);
  opacity: 1;
}

.donate-form button[type="submit"] {
  background-color: var(--mco-dark-green);
  color: var(--mco-white);
  padding: 0.25rem 0.75rem;
  border: none;
  border-radius: 1rem;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
}

.donate-form button[type="submit"]:hover {
  opacity: 0.85;
}