/* LEVELS 1-5 */

/* Base: your colored/metal fill inside the letters */
/* Base fill (keep your metal or red gradient here) */
.shiny {
  position: relative;          /* <-- key: create positioning context */
  display: inline-block;       /* box hugs the text width */
  background: linear-gradient(0deg, #AF0E00, #E34234, #AF0E00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 0 rgba(180,50,30,.6));
  isolation: isolate;          /* keep blend local to this element */
}

/* Moving gleam on top of the same glyphs */
.shiny::after {
  content: attr(data-text);    /* duplicate the exact text */
  position: absolute;          /* <-- key: overlay */
  inset: 0;                    /* top/right/bottom/left = 0 */
  z-index: 1;                  /* above the base text */
  pointer-events: none;

  /* ensure identical shaping */
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: pre;            /* preserve spaces exactly */

  /* the highlight stripe */
  background: linear-gradient(
    120deg,
    transparent 10%,
    rgba(255,200,170,1) 50%,
    transparent 90%
  );
  background-size: 300% 100%;
  background-position: -200% 0;
  
  background-repeat: no-repeat, no-repeat;

  -webkit-background-clip: text;   /* clip the gleam to glyphs */
  -webkit-text-fill-color: transparent;

  mix-blend-mode: color-dodge;      /* lighten the base fill */
  animation: shine-sweep 6s linear infinite;
  will-change: background-position;
}

@keyframes shine-sweep {
  to { background-position: 200% 0; }
}

/* If your h1 sets a color, neutralize it when shiny is used */
h1.shiny { color: transparent; }

@font-face {
  font-family: "Showcard Gothic";
  src: url("fonts/Showcard.woff2") format("woff2"),   /* modern browsers */
       url("fonts/Showcard.woff") format("woff"),     /* fallback */
       url("fonts/Showcard.ttf") format("truetype");  /* last resort */
  font-weight: normal;
  font-style: normal;
}

.showcard { 
  font-family: "Showcard Gothic", cursive, sans-serif; 
  font-weight: normal; 
  letter-spacing: 0.2em;
}

h1 {
  font-family: "Showcard Gothic", cursive, sans-serif;
  font-size: 100px;
  /* color: #E34234; */
  font-weight: normal;
  letter-spacing: 0.2em;   /* spread letters apart */
  text-align: Center;
}

h2 {
  font-family: "Showcard Gothic", cursive, sans-serif;
  font-size: 30px;
  /* color: #E34234; */
  font-weight: normal;
  letter-spacing: 0.05em;   /* spread letters apart */
  text-align: Center;
}

body {
  background-color: black;
  color: white;
  font-family: Verdana;
  text-align: Center;
}

input, textarea {
  width: 100%;
  max-width: 640px;
  padding: 12px 14px;
  margin: 6px 0 16px;
  background: linear-gradient(#1f1f1f,#000000);
  color: #E34234;
  border: 1px solid #E34234;
  border-radius: 8px;
  box-sizing: border-box;
}

a:hover {
  color: #E34234;
}

a:active {
  color: #E34234;
}

a:link {
  color: #E34234;
}

a:visited {
  color: #AF0E00;
}