/* Animated Button */
.animate-effect {
  color: #fff;
  display: grid;
  place-content: center;
  text-shadow: 0 1px 0 #000;
  width: -moz-fit-content; /* for Firefox */
  width: fit-content;
  --border-angle: 0turn;
  --main-bg: conic-gradient(
    from var(--border-angle),
    #213,
    #112 5%,
    #112 60%,
    #213 95%
  );
  border: 2px solid transparent;
  border-radius: 1rem;
  --gradient-border: conic-gradient(
    from var(--border-angle),
    transparent 25%,
    #08f,
    #f03 99%,
    transparent
  );
  animation: bg-spin 3s linear infinite;
  background: var(--main-bg) padding-box, var(--gradient-border) border-box,
    var(--main-bg) border-box;
  background-position: 50%;
}

@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

/* Custom property for --border-angle */
@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

.circle-motion {
  color: #fff;
  display: grid;
  text-shadow: 0 1px 0 #000;
  --border-angle: 0turn;
  --main-bg: conic-gradient(
    from var(--border-angle),
    #111433,
    #111222 5%,
    #111422 60%,
    #111c33 95%
  );
  border: 2px solid transparent;
  --gradient-border: conic-gradient(
    from var(--border-angle),
    transparent 25%,
    #08f,
    transparent 99%,
    transparent
  );
  animation: bg-spin 3s linear infinite;
  background: var(--main-bg) padding-box, var(--gradient-border) border-box,
    var(--main-bg) border-box;
  background-position: 50%;
  transition: transform 0.3s ease, text-shadow 0.3s ease, background 0.3s ease;
}

.circle-motion:hover {
  animation-play-state: paused;
  text-shadow: 0 1px 5px #08f;
  border: 2px solid transparent;
  --gradient-border: conic-gradient(
    from var(--border-angle),
    transparent 25%,
    #1b0a31,
    transparent 99%,
    transparent
  );
  --main-bg: conic-gradient(
    from var(--border-angle),
    #0d3b3ba1,
    #042a3575 5%,
    #0a23459c 60%,
    #100a4a93 95%
  );

  background: var(--main-bg) padding-box, var(--gradient-border) border-box,
    var(--main-bg) border-box;
  transform: scale(1.05);
}

@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

.resume-button:hover {
  animation-play-state: paused;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}
/* _________________________ */