@property --button-fill {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --button-fill-stop {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --rg-1-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --rg-1-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --rg-2-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 20%;
}

@property --rg-2-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 70%;
}

@property --rg-3-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 70%;
}

@property --rg-3-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 20%;
}

@property --rg-4-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --rg-4-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

.gradient-button {
  padding: 7%;
  border-radius: 100vw;
  border: 5px solid transparent;
  transition: --button-fill 1s, --button-fill-stop 0.5s;
  -webkit-animation: gradient-movement 5s alternate infinite ease-in-out;
          animation: gradient-movement 5s alternate infinite ease-in-out;
  -webkit-animation-delay: calc(sibling-index() * -2000ms);
          animation-delay: calc(sibling-index() * -2000ms);
	
  background: radial-gradient(circle, var(--button-fill) var(--button-fill-stop), transparent) padding-box, radial-gradient(circle 120px at var(--rg-1-x) var(--rg-1-y), #c5e259, transparent) border-box, radial-gradient(circle 150px at var(--rg-2-x) var(--rg-2-y), #83c439, transparent) border-box, radial-gradient(circle 160px at var(--rg-3-x) var(--rg-3-y), #c5e259, transparent) border-box, radial-gradient(circle 200px at var(--rg-4-x) var(--rg-4-y), #83c439, transparent) border-box;

  background-position: center, center, bottom right, top left, top right,
    bottom left;

  background-repeat: no-repeat;
	width: 100%;
	color: #153d77;
    font-family: 'Indivisa Text Sans Black Italic';
    font-size: 1.5em;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    box-shadow: 0 15px 30px 0 rgb(5 16 44 / 48%);
	margin-bottom: 5%;
}

@-webkit-keyframes gradient-movement {
  30% {
    --rg-1-x: 70%;
    --rg-1-y: 20%;
  }

  40% {
    --rg-2-x: 120%;
    --rg-2-y: 50%;
  }
  45% {
    --rg-4-x: -10%;
    --rg-4-y: 10%;
  }
  50% {
    --rg-3-x: 50%;
    --rg-3-y: 50%;
  }

  70% {
    --rg-1-x: -10%;
    --rg-2-y: -20%;
  }
}

@keyframes gradient-movement {
  30% {
    --rg-1-x: 70%;
    --rg-1-y: 20%;
  }

  40% {
    --rg-2-x: 120%;
    --rg-2-y: 50%;
  }
  45% {
    --rg-4-x: -10%;
    --rg-4-y: 10%;
  }
  50% {
    --rg-3-x: 50%;
    --rg-3-y: 50%;
  }

  70% {
    --rg-1-x: -10%;
    --rg-2-y: -20%;
  }
}

.gradient-button:hover,
.gradient-button:focus-visible {
  --button-fill-stop: 100%;
  --button-fill: var(--button-fill-hover, #c5e259);
	color: #0350bc;
}

.gradient-button.bordered {
  --button-fill-stop: 100%;
  --button-fill: #1d285c;
}

.gradient-button.bordered:is(:hover, :focus-visible) {
  --button-fill-stop: 0%;
  --button-fill: transparent;
}