<div class="scene-container" aria-hidden="true">
  <div class="background"></div>
  <div class="stars" id="stars"></div>
  <div class="sun"></div>
  <div class="mountains">
    <div class="mountain mountain1"></div>
    <div class="mountain mountain2"></div>
    <div class="mountain mountain3"></div>
    <div class="mountain mountain4"></div>
    <div class="mountain mountain5"></div>
  </div>
  <div class="grid"></div>
  <div class="overlay"></div>
  <div class="vignette"></div>
</div>

<div class="page-container">
  <header>
    <h1 class="logo">RETROWAVE BLOG</h1>
    <p class="tagline">SYNTHWAVE STORIES FROM THE DIGITAL GRID</p>
    <nav aria-label="Main Navigation">
      <a href="#" aria-current="page">Home</a>
      <a href="#">Articles</a>
      <a href="#">Reviews</a>
      <a href="#">Gallery</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <div class="content">
    <main class="main-content">
      <article class="post">
        <h2 class="post-title">The Rise of Synthwave Music</h2>
        <div class="post-meta">
          <time datetime="2025-02-27" class="post-date">February 27, 2025</time>
          <span class="post-author">By Neon Rider</span>
        </div>
        <div class="post-content">
          <p>The neon-soaked streets of a digitally reimagined 1980s have become the backdrop for one of modern music's most distinctive genres. Synthwave, with its nostalgic melodies and retro-futuristic aesthetics, continues to capture hearts across the digital landscape.</p>
          <p>From its humble beginnings in the late 2000s to its current status as a cultural phenomenon, this genre has evolved while staying true to its core inspirations: 80s film soundtracks, arcade games, and vintage synthesizers.</p>
          <a href="#" class="read-more">Read More</a>
        </div>
      </article>

      <article class="post">
        <h2 class="post-title">Cyberpunk 2077: Five Years Later</h2>
        <div class="post-meta">
          <time datetime="2025-02-25" class="post-date">February 25, 2025</time>
          <span class="post-author">By Digital Dreamer</span>
        </div>
        <div class="post-content">
          <p>Five years after its turbulent launch, Cyberpunk 2077 has transformed into the game it was always meant to be. With numerous updates, expansions, and a dedicated community, Night City has never felt more alive and immersive.</p>
          <p>We explore how this ambitious project overcame its initial challenges to become one of the defining cyberpunk experiences in gaming history, influencing everything from fashion to music along the way.</p>
          <a href="#" class="read-more">Read More</a>
        </div>
      </article>

      <article class="post">
        <h2 class="post-title">Retro Computing: The Modern Revival</h2>
        <div class="post-meta">
          <time datetime="2025-02-20" class="post-date">February 20, 2025</time>
          <span class="post-author">By Pixel Pioneer</span>
        </div>
        <div class="post-content">
          <p>The distinctive glow of CRT monitors and the mechanical clack of vintage keyboards are making a surprising comeback in today's digital workspace. Enthusiasts are embracing retro computing not just for nostalgia, but for tangible benefits in focus and creativity.</p>
          <p>From Commodore 64 restorations to custom-built DOS gaming rigs, we dive into the growing community that's finding new value in old technology.</p>
          <a href="#" class="read-more">Read More</a>
        </div>
      </article>

      <nav class="pagination" aria-label="Pagination">
        <a href="#" aria-label="Previous page">&laquo;</a>
        <a href="#" class="active" aria-current="page">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#" aria-label="Next page">&raquo;</a>
      </nav>
    </main>

    <aside class="sidebar">
      <section class="widget">
        <h3 class="widget-title">Search</h3>
        <form class="search-form" role="search">
          <label for="search-input" class="visually-hidden">Search the blog</label>
          <input type="search" id="search-input" class="search-input" placeholder="Search...">
          <button type="submit" class="search-button">Go</button>
        </form>
      </section>

      <section class="widget">
        <h3 class="widget-title">Categories</h3>
        <nav aria-label="Categories">
          <ul class="categories-list">
            <li><a href="#">Synthwave Music</a></li>
            <li><a href="#">Retro Gaming</a></li>
            <li><a href="#">Digital Art</a></li>
            <li><a href="#">Cyberpunk Culture</a></li>
            <li><a href="#">Technology</a></li>
            <li><a href="#">Film Reviews</a></li>
          </ul>
        </nav>
      </section>

      <section class="widget">
        <h3 class="widget-title">Recent Posts</h3>
        <nav aria-label="Recent Posts">
          <ul class="recent-posts-list">
            <li><a href="#">The Evolution of VR Technology</a></li>
            <li><a href="#">Top 10 Synthwave Albums of 2024</a></li>
            <li><a href="#">The Art of Pixel Animation</a></li>
            <li><a href="#">Interview: The Midnight</a></li>
            <li><a href="#">Neon and Chrome: Aesthetic Guide</a></li>
          </ul>
        </nav>
      </section>
    </aside>
  </div>

  <footer>
    <nav class="footer-links" aria-label="Footer Navigation">
      <a href="#">About</a>
      <a href="#">Contact</a>
      <a href="#">Privacy Policy</a>
      <a href="#">Terms of Service</a>
    </nav>
    <p class="copyright">© 2025 Retrowave Blog. All rights reserved.</p>
  </footer>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'Outrun';
  src: url('https://fonts.cdnfonts.com/css/outrun-future') format('woff2');
}

:root {
  --neon-pink: #ff00cc;
  --neon-blue: #36e2f8;
  --neon-purple: #b026ff;
  --deep-purple: #220033;
  --dark-bg: #0f0c29;
  --grid-color: rgba(54, 226, 248, 0.5);
}

body {
  background-color: var(--dark-bg);
  color: white;
  font-family: 'Arial', sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.scene-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  perspective: 1000px;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #000000 0%, #220033 80%, #b026ff 100%);
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: white;
  border-radius: 50%;
  animation: twinkle 2s infinite alternate;
}

.sun {
  position: absolute;
  width: 200px;
  height: 200px;
  background: linear-gradient(to top, var(--neon-pink), #ffc107);
  border-radius: 50%;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 40px 15px var(--neon-pink);
  z-index: -1;
  opacity: 0.8;
}

.grid {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40vh;
  background-image: 
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      var(--grid-color) 20%,
      var(--grid-color) 30%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      to right,
      var(--grid-color),
      var(--grid-color) 1px,
      rgba(0, 0, 0, 0) 1px,
      rgba(0, 0, 0, 0)
    );
  background-size: 40px 40px;
  transform: rotateX(60deg);
  transform-origin: bottom;
  animation: moveGrid 15s linear infinite;
}

.mountains {
  position: absolute;
  width: 100%;
  height: 200px;
  bottom: 30%;
  z-index: -1;
}

.mountain {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 200px solid #1b0033;
}

.mountain1 { left: 10%; }
.mountain2 { left: 30%; border-bottom-color: #2d0057; }
.mountain3 { left: 50%; border-bottom-color: #3e007a; }
.mountain4 { left: 70%; border-bottom-color: #2d0057; }
.mountain5 { left: 90%; }

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  z-index: 3;
  pointer-events: none;
}

.vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 150px 50px rgba(0, 0, 0, 0.7);
  z-index: 4;
  pointer-events: none;
}

/* Blog Structure */
.page-container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header {
  text-align: center;
  padding: 40px 0;
}

.logo {
  font-size: 4rem;
  font-weight: bold;
  color: white;
  margin-bottom: 10px;
  text-shadow: 
    0 0 10px var(--neon-pink),
    0 0 20px var(--neon-pink),
    0 0 30px var(--neon-pink);
  animation: flicker 2s infinite alternate;
}

.tagline {
  font-size: 1.5rem;
  color: var(--neon-blue);
  letter-spacing: 5px;
  text-shadow: 0 0 10px var(--neon-blue);
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}

nav a {
  color: white;
  text-decoration: none;
  transition: all 0.3s;
}

header nav {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  gap: 30px;
}

header nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  padding: 10px 20px;
  border: 2px solid transparent;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
}

header nav a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: var(--neon-blue);
  transition: all 0.3s;
  box-shadow: 0 0 10px var(--neon-blue);
}

header nav a:hover {
  color: var(--neon-blue);
}

header nav a:hover::before {
  left: 0;
}

.content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin-top: 50px;
}

.main-content {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 40px;
  border: 1px solid rgba(54, 226, 248, 0.3);
  box-shadow: 0 0 20px rgba(54, 226, 248, 0.2);
}

.post {
  margin-bottom: 60px;
  position: relative;
}

.post:last-child {
  margin-bottom: 0;
}

.post-title {
  font-size: 2rem;
  margin-bottom: 15px;
  color: white;
  position: relative;
  display: inline-block;
}

.post-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--neon-pink);
  box-shadow: 0 0 10px var(--neon-pink);
}

.post-meta {
  font-size: 0.9rem;
  color: #b0b0b0;
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
}

.post-content {
  line-height: 1.6;
  color: #e0e0e0;
}

.post-content p {
  margin-bottom: 20px;
}

.read-more {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(to right, var(--neon-purple), var(--neon-pink));
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.3s;
  box-shadow: 0 0 10px rgba(176, 38, 255, 0.5);
}

.read-more:hover {
  box-shadow: 0 0 20px rgba(176, 38, 255, 0.8);
  transform: translateY(-2px);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.widget {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 30px;
  border: 1px solid rgba(54, 226, 248, 0.3);
  box-shadow: 0 0 20px rgba(54, 226, 248, 0.2);
}

.widget-title {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--neon-blue);
  position: relative;
  padding-bottom: 10px;
}

.widget-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background: var(--neon-blue);
  box-shadow: 0 0 10px var(--neon-blue);
}

.search-form {
  display: flex;
}

.search-input {
  flex: 1;
  padding: 10px 15px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 5px 0 0 5px;
}

.search-button {
  padding: 10px 15px;
  background: var(--neon-purple);
  color: white;
  border: none;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

.categories-list, .recent-posts-list {
  list-style: none;
}

.categories-list li, .recent-posts-list li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.categories-list li:last-child, .recent-posts-list li:last-child {
  border-bottom: none;
}

.categories-list a, .recent-posts-list a {
  color: #e0e0e0;
  text-decoration: none;
  transition: all 0.3s;
  display: inline-block;
  width: 100%;
}

.categories-list a:hover, .recent-posts-list a:hover {
  color: var(--neon-blue);
  text-shadow: 0 0 5px var(--neon-blue);
}

footer {
  margin-top: 80px;
  padding: 40px 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 2;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.footer-links a {
  color: #b0b0b0;
  text-decoration: none;
  transition: all 0.3s;
}

.footer-links a:hover {
  color: var(--neon-blue);
}

.copyright {
  color: #707070;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}

.pagination a {
  display: inline-block;
  padding: 8px 15px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s;
  border: 1px solid rgba(54, 226, 248, 0.3);
}

.pagination a:hover, .pagination a.active {
  background: var(--neon-purple);
  box-shadow: 0 0 10px rgba(176, 38, 255, 0.5);
}

@keyframes moveGrid {
  0% { background-position: 0 0; }
  100% { background-position: 0 40px; }
}

@keyframes twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 
      0 0 10px var(--neon-pink),
      0 0 20px var(--neon-pink),
      0 0 30px var(--neon-pink);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

/* Responsive Design */
@media (max-width: 900px) {
  .content {
    grid-template-columns: 1fr;
  }

  .sidebar {
    order: -1;
  }

  .logo {
    font-size: 3rem;
  }

  nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .main-content, .widget {
    padding: 20px;
  }

  .logo {
    font-size: 2.5rem;
  }

  .tagline {
    font-size: 1rem;
  }

  nav a {
    font-size: 1rem;
    padding: 5px 10px;
  }
}

function createStars() {
  const starsContainer = document.getElementById('stars');
  const count = 150;

  for (let i = 0; i < count; i++) {
    const star = document.createElement('div');
    star.className = 'star';

    const x = Math.random() * 100;
    const y = Math.random() * 100;

    star.style.left = `${x}%`;
    star.style.top = `${y}%`;

    const size = Math.random() * 2 + 1;
    star.style.width = `${size}px`;
    star.style.height = `${size}px`;

    star.style.animationDelay = `${Math.random() * 2}s`;

    starsContainer.appendChild(star);
  }
}

window.onload = function() {
  createStars();
};