/* Darkmode Lisa Frank Neon Rainbow Palette */
:root {
  /* Foundations */
  --bg-cosmic: linear-gradient(135deg, #090a2f 0%, #120626 50%, #03021a 100%);
  --lf-outline: #000000;
  
  /* Radioactive Neons */
  --lf-pink: #ff007f;
  --lf-orange: #ff5e00;
  --lf-yellow: #eaff00;
  --lf-green: #00ff66;
  --lf-blue: #00f0ff;
  --lf-purple: #7a00ff;
  
  /* Master Rainbow Gradient */
  --lf-rainbow: linear-gradient(90deg, 
    var(--lf-pink), var(--lf-orange), var(--lf-yellow), 
    var(--lf-green), var(--lf-blue), var(--lf-purple), var(--lf-pink)
  );
}

/* Base Body Styling */
body {
  background: var(--bg-cosmic);
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.leopard-rainbow-box {
  width: 100%;
  max-width: 600px;
  min-height: 200px;
  margin: 20px auto;
  
  /* Apply the rainbow, then layer the black leopard spots over it */
  background-image: 
    url('data:image/svg+xml,<svg xmlns="http://w3.org" width="60" height="60" viewBox="0 0 60 60"><path d="M10 5c-3 0-5 2-5 5s2 5 5 5 5-2 5-5-2-5-5-5zm2 3c1 0 2 1 2 2s-1 2-2 2-2-1-2-2 1-2 2-2zm25-4c-4 0-7 3-7 7s3 7 7 7 7-3 7-7-3-7-7-7zm2 4c1 1 1 3 0 4s-3 1-4 0-1-3 0-4 3-1 4 0zM12 42c-3 1-4 4-3 7s4 4 7 3 4-4 3-7-4-4-7-3zm25-10c-3-2-7-1-9 2s-1 7 2 9 7 1 9-2 1-7-2-9zm-13 3c1 1 1 2 0 3s-2 1-3 0-1-2 0-3 2-1 3 0zm-14 7c0-3-2-5-5-5s-5 2-5 5 2 5 5 5 5-2 5-5zm35 5c-2-2-5-2-7 0s-2 5 0 7 5 2 7 0 2-5 0-7z" fill="%23000000"/><path d="M12 8c0-2-1-3-3-3S6 6 6 8s1 3 3 3 3-1 3-3zm33 22c1-2 0-5-2-6s-5 0-6 2 0 5 2 6 5 0 6-2z" fill="%23000000" opacity="0.8"/></svg>'),
    var(--lf-rainbow);
  
  background-size: 120px 120px, 200% auto;
  background-blend-mode: normal;
  animation: rainbow-scroll 6s linear infinite;
  
  /* Thick Sticker Border & Retro Drop Shadow */
  border: 4px solid var(--lf-outline);
  box-shadow: 8px 8px 0px var(--lf-outline), 0 0 15px rgba(255, 0, 127, 0.4);
  border-radius: 12px;
}

@keyframes rainbow-scroll {
  to { background-position: 0 0, 200% center; }
}

.chiron-bar {
  width: 100%;
  overflow: hidden;
  background: var(--lf-outline);
  border-top: 4px solid var(--lf-pink);
  border-bottom: 4px solid var(--lf-blue);
  box-shadow: 0 0 15px var(--lf-purple);
  padding: 8px 0;
  white-space: nowrap;
}

.chiron-text {
  display: inline-block;
  font-family: 'Arial Black', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  padding-left: 100%;
  
  /* Apply rainbow to text */
  background: var(--lf-rainbow);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  animation: 
    chiron-move 20s linear infinite,
    rainbow-scroll 4s linear infinite;
}

@keyframes chiron-move {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}