/* Tie-dye animated backdrop */
html,body{height:100%}
body{
  margin:0;display:flex;color:#fff;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(circle at 20% 20%,#ff3b3b,#ff9f1a,#ffe600,#2bd24b,#00a2ff,#7a3df1,#d31ed3);
  background-size:400% 400%;animation:tiedye 30s ease infinite;
}
@keyframes tiedye{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

nav{width:220px;background:rgba(0,0,0,.55);padding:20px;box-sizing:border-box}
nav h2{margin:0 0 10px}
nav a{display:block;margin:8px 0;padding:9px 12px;color:#fff;text-decoration:none;border-radius:8px;background:rgba(255,255,255,.1)}
nav a:hover{background:rgba(255,255,255,.25)}

main{flex:1;padding:20px;background:rgba(0,0,0,.35);overflow:auto}
h1,h2{margin-top:0}
.card{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:14px;margin:12px 0}
.linklist{list-style:none;padding:0;margin:0}
.linklist li{margin:10px 0}
.linklist a{color:#ffdd57;text-decoration:none}
.linklist a:hover{text-decoration:underline}

/* Optional Steal Your Face badge (appears if img/syf.png exists)*


cat > ~/web/apache/html/index.html <<'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Grateful Dead Home</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <h2>Menu</h2>
    <a href="index.html">Home</a>
    <a href="dead-links.html">Grateful Dead Links</a>
  </nav>

  <main>
    <h1>Grateful Dead</h1>

    <div class="card">
      <h2>Richmond, VA 23235 — Weather</h2>
      <a href="https://wttr.in/23235" target="_blank" rel="noopener">
        <img src="https://wttr.in/23235.png?m" alt="Weather for 23235" style="max-width:100%;border-radius:12px">
      </a>
      <p style="opacity:.8">Click the image for the full, live forecast.</p>
    </div>

    <div class="card">
      <h2>Other Links</h2>
      <p><a href="https://www.foxnews.com" target="_blank" rel="noopener">Fox News</a></p>
      <p><a href="https://relix.com" target="_blank" rel="noopener">Relix</a></p>
      <p><a class="gd-link" href="dead-links.html" style="display:inline-block;padding:10px 14px;background:#e53935;color:#fff;border-radius:8px;text-decoration:none;font-weight:600;">Visit the Grateful Dead Links Page →</a></p>
    </div>
  </main>

  <!-- Optional SYF badge (only shows if img/syf.png exists) -->
  <div class="syfbadge"><img src="img/syf.png" alt="Steal Your Face" onerror="this.parentElement.style.display='none'"></div>
</body>
</html>
