/* CSS adapted from: https://codepen.io/5t3ph/pen/mdVZYpr, found from https://freefrontend.com/ */

/* Kudos to Lynn for assisting in fixing the original solution! */
/* https://codepen.io/lynnandtonic/pen/RwrzzjQ */

/** DO YOU LOVE CSS? 
Share your love with the rest of the CSS community by contributing to Style Stage - a modern CSS showcase styled by community contributions
@link stylestage.dev 
**/

.sticker {
  --c1: #ef548f;
  --c2: #ef8b6d;
  --c3: #cfef6b;
  --c4: #3bf0c1;
  --c5: #bb4af0;
  --shine-angle: 15deg;
  display: inline-grid;
  grid-template-areas: "text";
  place-items: center;
  font-family: "Alegreya Sans SC", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(3rem, 15vw, 10rem);
  text-transform: uppercase;
  color: var(--c5);
}

.sticker-lg {
  font-size: clamp(6rem, 30vw, 20rem);
}

.sticker span {
  background: linear-gradient(
      15deg,
      rgba(255, 0, 0, 0) 0%,
      rgba(255, 0, 0, 0) 35%,
      rgba(255, 255, 255, 0.98) 49.95%,
      rgba(255, 255, 255, 0.98) 50.15%,
      rgba(255, 0, 0, 0) 65%,
      rgba(255, 0, 0, 0)
    ),
    linear-gradient(
      to right,
      var(--c1),
      var(--c2),
      var(--c3),
      var(--c4),
      var(--c5)
    );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.01em rgba(0, 0, 0, 0.6);
}

.sticker > *,
.sticker::before,
.sticker::after {
  grid-area: text;
}

.sticker::before,
.sticker::after {
  content: attr(data-text);
  color: #fff;
}

.sticker::before {
  -webkit-text-stroke: 0.21em white;
  background: no-repeat linear-gradient(white, white) 15% 50% / 85% 60%;
}

.sticker::after {
  text-shadow: 0.07em 0.08em 0.05em rgba(0, 0, 0, 0.75),
               -0.07em -0.05em 0.05em rgba(0, 0, 0, 0.75);
  z-index: -2;
}