/* Base layout */
body {
  margin: 0;
  padding: 0;
  font-family: 'Share Tech Mono', monospace;
  /* Background GIF uploaded to Neocities */
  background: url('hell.gif') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Stack Heavenly Sins + card */
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Heavenly Sins header */
.heavenly-header {
  font-size: 48px;
  color: #ff0000;
  text-shadow: 0 0 10px #f00, 0 0 20px #f00, 0 0 40px #f00;
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
  margin-bottom: 20px;
  z-index: 3;
}

/* Neon red glow for ALL text */
* {
  color: #fff;
  text-shadow:
    0 0 5px #f00,
    0 0 10px #f00,
    0 0 20px #f00,
    0 0 40px #f00,
    0 0 80px #f00;
  position: relative;
}

/* Flicker effect */
h1, h2, h3, h4, h5, h6, p, .footer, .button {
  animation: flicker 2s infinite alternate;
}

@keyframes flicker {
  0%,19%,21%,23%,25%,54%,56%,100% {
    opacity:1;
    text-shadow:0 0 5px #f00,0 0 10px #f00,0 0 20px #f00,0 0 40px #f00,0 0 80px #f00;
  }
  20%,24%,55% { opacity:0.3; text-shadow:none; }
}

/* Glitch effect */
.glitch { position: relative; display: inline-block; }
.glitch::before,.glitch::after { content: attr(data-text); position: absolute; left:0; top:0; width:100%; overflow:hidden; clip: rect(0,900px,0,0); color:#fff; text-shadow:-2px 0 #f00; }
.glitch::before { left:2px; animation: glitchTop 2s infinite linear alternate-reverse; }
.glitch::after { left:-2px; animation: glitchBottom 2s infinite linear alternate-reverse; }

@keyframes glitchTop { 0% {clip:rect(0,9999px,0,0);}10% {clip:rect(10px,9999px,50px,0);}20% {clip:rect(5px,9999px,20px,0);}30% {clip:rect(15px,9999px,60px,0);}40% {clip:rect(25px,9999px,30px,0);}100% {clip:rect(0,9999px,0,0);} }
@keyframes glitchBottom { 0% {clip:rect(0,9999px,0,0);}10% {clip:rect(60px,9999px,100px,0);}20% {clip:rect(40px,9999px,80px,0);}30% {clip:rect(70px,9999px,120px,0);}40% {clip:rect(20px,9999px,90px,0);}100% {clip:rect(0,9999px,0,0);} }

/* Card */
.card {
  background: rgba(20,20,20,0.4);
  border-radius:10px;
  padding:20px;
  width:800px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 0 25px rgba(255,0,0,0.9);
  position: relative;
  z-index:2;
}

/* Left */
.left { width: 40%; }

/* Divider line */
.line { height:2px; background:linear-gradient(to right,#f00,transparent); margin:15px 0; box-shadow:0 0 20px #f00,0 0 40px #f00; }

/* Right image */
.right img { width:300px; height:auto; opacity:0.9; filter:brightness(1.2) contrast(1.3); box-shadow:0 0 40px #f00; border-radius:8px; }

/* Footer */
.footer { margin-top:15px; font-style:italic; }

/* Button */
.button { margin-top:20px; display:inline-block; padding:8px 20px; background:#111; border:1px solid #f00; text-decoration:none; border-radius:5px; transition:0.3s; box-shadow:0 0 15px #f00,0 0 30px #f00; }
.button:hover { background:#f00; color:#000; text-shadow:none; }

/* Scanlines overlay */
.scanlines {
  pointer-events:none;
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  background:repeating-linear-gradient(to bottom, rgba(255,0,0,0.08), rgba(255,0,0,0.08) 2px, transparent 2px, transparent 4px);
  animation: scan 4s linear infinite;
  z-index:1;
}
@keyframes scan { from {background-position:0 0;} to {background-position:0 100%;} }

/* Now Playing */
.now-playing {
  margin-top: 15px;
  font-size: 14px;
  font-family: 'Share Tech Mono', monospace;
  color: #ff4444;
  background: rgba(255,0,0,0.08);
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-block;
}

.progress-container {
  width: 200px;
  height: 6px;
  background: rgba(255,0,0,0.2);
  border-radius: 3px;
  margin-top: 6px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: #ff4444;
  box-shadow:0 0 6px #ff0000;
}

.timestamps {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin-top:4px;
  color:#ff4444;
  text-shadow:0 0 6px #ff0000;
}