<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Psychobilly Graveyard</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Creepster&family=Oswald:wght@400;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="scanlines"></div>

  <header>
    <div class="logo-container">
      <h1 class="site-title">PSYCHOBILLY</h1>
      <h2 class="site-subtitle">GRAVEYARD</h2>
    </div>

    <p class="tagline">Where Mid-Century Rock 'n' Roll Meets the Living Dead</p>

    <nav>
      <a href="#events">Live Gigs</a>
      <a href="#jukebox">The Jukebox</a>
      <a href="#about">About</a>
    </nav>
  </header>

  <main>
    <section class="featured-issue">
      <div class="poster-frame">
        <div class="poster-content">
          <span class="badge">ONE NIGHT ONLY!</span>
          <h3 class="horror-text">MONSTER MASHUP 2026</h3>
          <p class="poster-details">Featuring The Nekromantix, Tiger Army & Local Ghouls</p>
          <p class="poster-date">OCTOBER 31st • LOS ANGELES, CA</p>
          <a href="#" class="btn-tickets">GET TICKETS BEFORE YOU DIE</a>
        </div>
      </div>
    </section>

    <section id="events" class="content-section">
      <h2 class="section-heading">UPCOMING LIVE CONCERTS</h2>

      <div class="events-table">
        <div class="event-row">
          <div class="event-date">
            <span class="month">JUN</span>
            <span class="day">28</span>
          </div>

          <div class="event-info">
            <h4>The Cramps Tribute Night</h4>
            <p>The Underworld Lounge • Austin, TX</p>
          </div>

          <div class="event-action">
            <a href="#" class="btn-sm">Tickets</a>
          </div>
        </div>

        <div class="event-row">
          <div class="event-date">
            <span class="month">JUL</span>
            <span class="day">15</span>
          </div>

          <div class="event-info">
            <h4>Greaser Nightmare Fest</h4>
            <p>Hell's Kitchen Grill • Chicago, IL</p>
          </div>

          <div class="event-action">
            <a href="#" class="btn-sm">Tickets</a>
          </div>
        </div>

        <div class="event-row">
          <div class="event-date">
            <span class="month">AUG</span>
            <span class="day">02</span>
          </div>

          <div class="event-info">
            <h4>Koffin Kats Live</h4>
            <p>The Void Club • Detroit, MI</p>
          </div>

          <div class="event-action">
            <a href="#" class="btn-sm ticket-out">SOLD OUT</a>
          </div>
        </div>
      </div>
    </section>

    <section id="jukebox" class="content-section">
      <h2 class="section-heading">THE HAUNTED JUKEBOX</h2>

      <div class="jukebox-container">
        <div class="audio-player-placeholder">
          <p>📻 <em>Insert your Spotify or Bandcamp playlist here</em></p>
          <div class="vinyl-record"></div>
        </div>
      </div>
    </section>
  </main>

  <footer id="about">
    <p>&copy; 2026 Psychobilly Graveyard. Keep it retro, keep it undead.</p>
  </footer>

</body>
</html>/* --- RESET & GLOBAL STYLES --- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #121212;
  background-image:
    radial-gradient(#1a1a1a 20%, transparent 20%),
    radial-gradient(#1a1a1a 20%, transparent 20%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  color: #e0e0e0;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px;
  padding-bottom: 50px;
}

/* --- VINTAGE CRT TV SCANLINE EFFECT --- */

.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 4px, 6px 100%;
  z-index: 9999;
  pointer-events: none;
}

/* --- REUSABLE TYPOGRAPHY --- */

.horror-text {
  font-family: 'Creepster', cursive;
  color: #39ff14;
  text-shadow: 3px 3px 0px #800020;
}

/* --- HEADER & NAVIGATION --- */

header {
  text-align: center;
  padding: 40px 20px;
  border-bottom: 5px double #800020;
  background: #0a0a0a;
}

.site-title {
  font-family: 'Oswald', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: #e0e0e0;
  line-height: 0.8;
}

.site-subtitle {
  font-family: 'Creepster', cursive;
  font-size: 4.5rem;
  color: #ff3333;
  text-shadow: 3px 3px 0px #000;
  letter-spacing: 4px;
}

.tagline {
  font-style: italic;
  color: #a0a0a0;
  margin-top: 10px;
  font-size: 1.1rem;
}

nav {
  margin-top: 25px;
}

nav a {
  color: #39ff14;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
  margin: 0 15px;
  text-transform: uppercase;
  transition: color 0.3s;
}

nav a:hover {
  color: #ff3333;
  text-shadow: 0 0 5px #ff3333;
}

/* --- MAIN CONTENT LAYOUT --- */

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.content-section {
  margin-top: 60px;
}

.section-heading {
  font-family: 'Creepster', cursive;
  color: #ff3333;
  font-size: 2.5rem;
  border-bottom: 2px solid #800020;
  padding-bottom: 10px;
  margin-bottom: 25px;
  text-shadow: 2px 2px 0px #000;
}

/* --- FEATURED GIG POSTER --- */

.featured-issue {
  background: #1a1a1a;
  border: 3px solid #ff3333;
  padding: 15px;
  box-shadow: 8px 8px 0px #000;
}

.poster-frame {
  border: 2px dashed #39ff14;
  padding: 30px 20px;
  text-align: center;
}

.badge {
  background: #ff3333;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  transform: rotate(-3deg);
  display: inline-block;
  margin-bottom: 15px;
}

.poster-frame h3 {
  font-size: 3.5rem;
  margin-bottom: 10px;
}

.poster-details {
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 5px;
}

.poster-date {
  color: #a0a0a0;
  font-weight: bold;
  margin-bottom: 25px;
}

.btn-tickets {
  display: inline-block;
  background: #39ff14;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.3rem;
  padding: 12px 25px;
  border: 2px solid #000;
  box-shadow: 4px 4px 0px #ff3333;
  transition: all 0.2s;
}

.btn-tickets:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #ff3333;
  background: #ff3333;
  color: #fff;
}

/* --- LIVE CONCERTS TABLE --- */

.events-table {
  background: #151515;
  border: 1px solid #333;
}

.event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #222;
}

.event-row:hover {
  background: #1f1f1f;
}

.event-date {
  background: #800020;
  padding: 8px;
  text-align: center;
  border-radius: 4px;
  min-width: 60px;
}

.event-date .month {
  display: block;
  font-size: 0.8rem;
  color: #39ff14;
  font-weight: bold;
}

.event-date .day {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}

.event-info {
  flex-grow: 1;
  padding: 0 20px;
}

.event-info h4 {
  font-size: 1.2rem;
  color: #fff;
}

.event-info p {
  color: #888;
  font-size: 0.9rem;
}

.btn-sm {
  background: #39ff14;
  color: #000;
  padding: 6px 12px;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.btn-sm.ticket-out {
  background: #333;
  color: #666;
  pointer-events: none;
}

/* --- JUKEBOX SECTION --- */

.audio-player-placeholder {
  background: #0a0a0a;
  border: 2px solid #800020;
  padding: 40px;
  text-align: center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.vinyl-record {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #ff3333 15%, #111 16%, #222 30%, #111 45%, #333 60%, #111 75%);
  border-radius: 50%;
  margin: 20px auto 0 auto;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* --- FOOTER --- */

footer {
  text-align: center;
  margin-top: 80px;
  color: #666;
  font-size: 0.9rem;
}