/*
GRADIENT: https://colordesigner.io/color-scheme-builder?mode=lch#38116E-A80062-E33931-E69900-A8ED12
/* Another from mycolor.space
#38116e, #a80061, #e33c32, #e49800, #a8eb12

*/


body {
  background: linear-gradient(#000000 20%, #210030 100%);
}

html { height: 100%; }

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

h1 {
  filter: drop-shadow(5px 5px black);
  font-family: "Exo", sans-serif;
  font-size: 15vw;
  font-weight: 900;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  margin: auto;
  text-transform: uppercase;
  background-image: linear-gradient(to right top, #38116e 30%, #a80061, #e33c32, #e49800, #a8eb12);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: 6.5rem;
  }
}

/**
 * `@property` is required for the animation to work.
 * Without it, the angle values won’t interpolate properly.
 *
 * @see https://dev.to/afif/we-can-finally-animate-css-gradient-kdk
 */
 @property --bg-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}

/**
 * To animate the gradient, we set the custom property to 1 full
 * rotation. The animation starts at the default value of `0deg`.
 */
@keyframes spin {
  to {
    --bg-angle: 360deg;
  }
}


article {
  /* add the animation, but pause it by default */
  animation: spin 2.5s infinite linear paused;
  
  /**
   * Using `background-origin` we can create a “border” using two gradients. And to
   * make the gradients better-looking, we use OKLCH.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
   * @see https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
   */
  background:
    /* Background colors don’t work with `background-origin`, so use a gradient. */
    linear-gradient(
        to bottom,
        oklch(0.1 0.2 240 / 0.95),
        oklch(0.1 0.2 240 / 0.95)
      )
      padding-box, /* ends at inner border edges */
    conic-gradient(
        from var(--bg-angle) in oklch longer hue,
        oklch(0.85 0.37 0) 0 0
      )
      border-box; /* extends to outer border edges */
  
  /* a clear border lets the background gradient shine through */
  border: 6px solid transparent;

  /* unpause the animation on hover */
  &:hover {
    animation-play-state: running;
  }
}

/******************************************************************
 * Other styles to make the demo look nice
 ******************************************************************/

* {
  box-sizing: border-box;
}

article {
  border-radius: 1rem;
  box-shadow: 0.125rem 0.25rem 0.25rem 0.5rem oklch(0.1 0.37 315 / 0.25);
  color: white;
  padding: 1rem 5rem;
  

  & h2 {
    line-height: 1.1;
    margin: 0;
  }

  & p {
    margin: 0.75rem 0 0;
  }
}



/* --color-1: #2F2933;
--color-2: #3B2B47;
--color-3: #7F00E0;
--color-4: #5B317A;
--color-5: #6800b8; */

/* gradient from cllaws
darkest: #3D126C
"neon": #5909BA
smoothlighter: #7543BE
lighest: #987FE7
base: #5B2B99
base-darker: #4B0D92
*/

/* Gradient from colormagic
#2d2046
#3d2b5f
#4d3777
#5d438e
#6e4fb0
*/

/*
Generic Gradient from mycolor.space 
Purple to yellow (dope fiery)

#38116E
#920B6D
#D03960
#F67650
#FFB74E
#F9F871
*/

/* Another from mycolor.space
#38116e, #a80061, #e33c32, #e49800, #a8eb12
*/