.pill-primary {
  --pill-bg: var(--color-theme-primary, #ff03b3); /* grijpt de actuele theme-color */
  --pill-fg: #fff;

  background: var(--pill-bg);
  color: var(--pill-fg);
  padding: .5em 1.2em !important;
  border-radius: 999px;
  font-weight: 600;
  display: inline-block;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  letter-spacing: .5px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  background: var(--pill-bg);
  color: var(--pill-fg);
  border: 1px solid var(--pill-border);
  /* box-shadow: 0 0 0 var(--theme-color, #ff03b3); */
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Outline variant: geen fill, wel border */
.pill.outline {
  --pill-bg: transparent;
  --pill-fg: var(--theme-color, #ff9900);
  --pill-border: 2px solid var(--theme-color, #ff9900);
  box-shadow: none;
}

/* Kleine variant */
.pill.small {
  padding: .15em .6em;
  font-size: .75rem;
}

/* Hover effect */
.pill:hover {
  color: var(--theme-color, #ff03b3);
  filter: brightness(1.05);
  cursor: default;
}


/* padding */
.footer-top {
  padding-top: 40px; /* Adjust the value as needed */
}


.pill-secondary {
  --pill-bg: var(--color-theme-secondary, #ff03b3); /* grijpt de actuele theme-color */
  --pill-fg: #fff;

  background: var(--pill-bg);
  color: var(--pill-fg);
  padding: .5em 1.2em !important;
  border-radius: 999px;
  font-weight: 600;
  display: inline-block;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  letter-spacing: .5px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  background: var(--pill-bg);
  color: var(--pill-fg);
  border: 1px solid var(--pill-border);
  /* box-shadow: 0 0 0 var(--theme-color, #ff03b3); */
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Outline variant: geen fill, wel border */
.pill.outline {
  --pill-bg: transparent;
  --pill-fg: var(--theme-color, #ff9900);
  --pill-border: 2px solid var(--theme-color, #ff9900);
  box-shadow: none;
}

/* Kleine variant */
.pill.small {
  padding: .15em .6em;
  font-size: .75rem;
}

/* Voorbeeld alternatieve kleur: groen */
.pill--green {
  --pill-bg: #198754;
  --pill-fg: #fff;
  --pill-border: transparent;
}

.pill.outline.pill--green {
  --pill-bg: transparent;
  --pill-fg: #198754;
  --pill-border: 2px solid #198754;
}

/* Hover effect */
.pill:hover {
  color: var(--theme-color, #ff03b3);
  filter: brightness(1.05);
  cursor: default;
}


/* padding */
.footer-top {
  padding-top: 40px; /* Adjust the value as needed */
}