/* Alternetive style. COLOR : #681AF8; */
/* Background color and its animation */
/* set custom property (for animation) */
@property --color-start {
  syntax: '<color>';
  inherits: false;
  initial-value: #05DBF2; }

@property --color-end {
  syntax: '<color>';
  inherits: false;
  initial-value: #7d17d1; }

@property --halo-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%; }

@property --halo-y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 25%; }

/* background color animation */
@-webkit-keyframes cover-bg-color-animation {
  0% {
    --halo-x: 10%;
    --halo-y: 25%;
    --color-start: #f89f1a;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  50% {
    --halo-x: 90%;
    --halo-y: 55%;
    --color-start: #1af8e6;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  100% {
    --halo-x: 10%;
    --halo-y: 25%;
    --color-start: #f89f1a;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; } }
@keyframes cover-bg-color-animation {
  0% {
    --halo-x: 10%;
    --halo-y: 25%;
    --color-start: #f89f1a;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  50% {
    --halo-x: 90%;
    --halo-y: 55%;
    --color-start: #1af8e6;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  100% {
    --halo-x: 10%;
    --halo-y: 25%;
    --color-start: #f89f1a;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; } }

/* Hero background color */
.cover-bg-color {
  /* default value in case of gradient animation is not supported by the browser */
  --color-start: #f89f1a;
  --color-end: #681af8;
  --halo-x: 10%;
  --halo-y: 25%;
  background: radial-gradient(50vw 50vw at var(--halo-x) var(--halo-y), rgba(50, 22, 85, 0.3), transparent), radial-gradient(100% 100% at 50% 50%, rgba(248, 26, 219, 0.4), transparent), linear-gradient(to bottom right, var(--color-start), var(--color-end));
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-name: cover-bg-color-animation;
          animation-name: cover-bg-color-animation; }

/* Navbar menu color */
@media screen and (min-width: 992px) {
  .nav-fullscreen-lg .navbar-nav::before {
    background: #681af8; } }