/* stup-id.ca — Black, Red & Blue rock band vibe stylesheet

Updated color scheme for higher contrast */


:root{ --bg-top: #000000; --bg-bottom: #1a0000; --accent-1: #e50914;          /* red accent / --accent-2: #00b4ff;          / electric blue / --metal: #cccccc; --paper: #f0f0f0;             / light gray for readable text */ --grunge-opacity: 0.18; --max-width: 1100px; }

html,body{height:100%;} body{ margin:0; min-height:100%; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(26,0,0,0.92) 60%), url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?>%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600'%3E%3Cfilter id='grain'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.1'/%3E%3C/svg%3E") center/1800px 1200px repeat, radial-gradient(ellipse at center, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.7) 100%); color: var(--paper); line-height:1.5; padding:40px 20px; }

.container{ max-width:var(--max-width); margin:0 auto; backdrop-filter: blur(2px); padding:40px; box-shadow: 0 20px 60px rgba(255,0,0,0.2); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.4)); border-radius:12px; border: 1px solid rgba(255,0,0,0.2); }

.band-logo{ display:inline-block; font-family: 'Impact', 'Anton', sans-serif; font-size: clamp(36px, 6vw, 92px); letter-spacing: -0.02em; transform: skewX(-6deg) rotate(-1deg); padding: 6px 18px; color: var(--accent-1); text-transform:uppercase; position:relative; text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(229,9,20,0.6), 0 0 25px rgba(0,180,255,0.3); } .band-logo .metal-edge{ display:block; font-size:0.4em; color:var(--accent-2); text-shadow:0 0 6px rgba(0,180,255,0.8); }

h2, h3{ font-family: 'Georgia', serif; color: var(--accent-2); margin:18px 0 10px; } h2::after{ content:""; display:block; height:4px; width:40%; background: linear-gradient(90deg, rgba(0,180,255,0.0), rgba(0,180,255,0.6), rgba(0,180,255,0.0)); margin-top:8px; filter: blur(1px); }

/*.neon{ color: var(--accent-1); text-transform:uppercase; letter-spacing:0.15em; text-shadow:0 0 8px rgba(229,9,20,0.8),0 0 20px rgba(229,9,20,0.4); }
*/
.neon {
  color: #e60000; /* strong red base */
  text-transform: uppercase;
  letter-spacing: 0.15em;

  /* tuned glow that avoids overexposure on Android */
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.8),           /* subtle grounding shadow */
    0 0 6px rgba(230, 0, 0, 0.7),         /* main red glow */
    0 0 12px rgba(230, 0, 0, 0.5),        /* secondary glow */
    0 0 24px rgba(230, 0, 0, 0.3);        /* outer soft glow */

  /* optional: keeps red saturated under different color spaces */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.grunge{ background: linear-gradient(180deg, rgba(50,0,0,0.4), rgba(0,0,0,0.6)); border:1px solid rgba(255,0,0,0.2); padding:22px; border-radius:8px; box-shadow: inset 0 -8px 30px rgba(255,0,0,0.4); }

.album-cover{ width:320px; height:320px; border-radius:6px; overflow:hidden; display:inline-block; box-shadow: 0 12px 40px rgba(255,0,0,0.4); border:1px solid rgba(255,0,0,0.2); background: linear-gradient(135deg, rgba(229,9,20,0.15), rgba(0,180,255,0.05)); }

.btn{ display:inline-block; padding:10px 18px; border-radius:6px; text-decoration:none; font-weight:700; letter-spacing:0.06em; box-shadow:0 6px 16px rgba(255,0,0,0.4); background:linear-gradient(180deg, rgba(255,0,0,0.2), rgba(0,0,0,0.5)); border:1px solid rgba(255,0,0,0.4); color:var(--paper); }

.btn--accent{ background:linear-gradient(180deg, rgba(0,180,255,0.2), rgba(0,0,0,0.5)); border:1px solid rgba(0,180,255,0.4); }

.stage{ height:420px; border-radius:10px; position:relative; display:flex; align-items:center; justify-content:center; margin:24px 0; overflow:hidden; background-image:radial-gradient(circle at 30% 20%, rgba(229,9,20,0.15), rgba(0,0,0,0.0) 6%), linear-gradient(180deg, rgba(0,180,255,0.05), rgba(0,0,0,0.25)); }

.lyrics{ font-family:'Times New Roman',serif; font-size:1.05rem; color:var(--paper); text-indent:1.6em; max-width:800px; }

@media (max-width:720px){ .container{padding:22px} .album-cover{width:220px;height:220px} .stage{height:280px} .band-logo{font-size: clamp(28px, 10vw, 64px)} }