/** 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 
 **/
* {
  box-sizing: border-box;
}

@media (min-width: 600px) and (max-width: 1200px) {}

.sticker {
  --c5: #000000;
  --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(1rem, 1.5vw, 1.5rem);
  text-transform: uppercase;
  color: var(--c5);
}

@media (min-width: 1200px) {
  .sticker {
    /*
  --c1: #ef548f;
  --c2: #ef8b6d;
  --c3: #cfef6b;
  --c4: #3bf0c1;
  --c5: #bb4af0;
  */
    --c5: #000000;
    --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(1.5rem, 2vw, 2rem);
    text-transform: uppercase;
    color: var(--c5);
  }
}

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

.sticker span {
  background: linear-gradient(var(--shine-angle), 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;
}