.btn,
button:not(#header-menu button, [type="submit"]),
[type="submit"] {
  font-family: "Palatino" !important;
  padding: 1.1rem 1rem 0.9rem 1rem;
  border: var(--border-light);
  width: 90%;
  cursor: pointer;
  min-width: fit-content;
  border-radius: 20px;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: bold;
  color: hsl(220, 29%, 90%);
  transform: scale(0.92);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;

  background: radial-gradient(
    circle at center,
    hsl(from var(--c-purple) h s calc(l + 2)),
    hsl(from var(--c-purple) h s calc(l + 2)) 30%,
    hsl(from var(--c-purple) h s calc(l - 5)) 80%
  );
  box-shadow: 0px 5px 10px 2px
    light-dark(hsla(270, 80%, 40%, 0.8), hsla(270, 80%, 0%, 0.5));

  &:hover,
  &:focus-visible {
    transform: scale(1);
    color: white;
    background: radial-gradient(
      circle at center,
      hsl(from var(--c-purple) h s calc(l + 10)),
      hsl(from var(--c-purple) h s calc(l + 5)) 60%,
      hsl(from var(--c-purple) h s calc(l - 5)) 90%
    );
    box-shadow: 0px 10px 20px 2px
      light-dark(hsla(270, 80%, 45%, 0.7), hsla(270, 80%, 0%, 0.4));
  }

  &:active {
    transform: scale(0.9);
  }

  &:is(#light &):before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 50%;
    border-radius: 19px 19px 0 0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0)
    );
    pointer-events: none;
    z-index: 2;
  }
}