/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Google Fonts Import for the fonts you selected */
@import url('https://googleapis.com');

body {
  margin: 0;
  padding: 20px;
  min-height: 100vh;
  box-sizing: border-box;
  color: #ffffff;
  
  /* 1. Pink Zebra Print Background Setup */
  /* Replace 'zebra.jpg' with your actual image path or URL */
  background-image: url('https://i.pinimg.com/736x/8d/18/b7/8d18b76fecd2585aafa9f6b62b1afdf8.jpg'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #000000; /* Fallback if image fails */
  
  position: relative;
}

/* 2. Glam Rock Stage Spotlight Overlay */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  /* Creates a bright pink/purple center spotlight fading into deep concert arena shadows */
  background: radial-gradient(circle at center, rgba(255, 0, 127, 0.15) 0%, rgba(20, 1, 36, 0.75) 50%, rgba(0, 0, 0, 0.95) 100%);
  pointer-events: none;
  z-index: 0;
}

/* 3. 80s Metal Chrome Title Text */
h1 {
  font-family: "Anton", sans-serif;
  font-size: 4.5rem;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 2px;
  margin-top: 40px;
  margin-bottom: 20px;
  text-align: center;
  
  /* 80s Metal Chrome Gradient Fill */
  background: linear-gradient(to bottom, #ffffff 0%, #999999 46%, #000000 50%, #ff007f 54%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Electric Cyan & Neon Pink Outer Glows */
  filter: drop-shadow(0 0 8px #00ffff) drop-shadow(0 0 20px #ff007f);
  
  /* Ensures text sits cleanly above the background mask layer */
  position: relative;
  z-index: 1;
}

/* 4. Neon Rocker Content Box (Slashed Design) */
.rock-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 30px;
  
  /* Dark leather/smoke background texture with opacity */
  background-color: rgba(10, 3, 15, 0.85); 
  
  /* Electric neon cyan border with a matching soft blur glow */
  border: 3px solid #00ffff;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), inset 0 0 15px rgba(255, 0, 127, 0.3);
  
  /* Custom asymmetric 80s jagged/slashed corner clip-path */
  clip-path: polygon(0% 15px, 15px 0%, 100% 0%, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0% 100%);
  
  position: relative;
  z-index: 1;
}

/* 5. Clean, Readable Rock Typography */
p { 
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 1.5px;
  line-height: 1.4;
  color: #f0f0f0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  margin-bottom: 15px;
}

nav {
  background-color: black;
  padding: 15px;
  text-align: center;
  border: 3px solid hotpink;
}

nav a {
  display: inline-block;
  padding: 8px 15px;
  border-right: 2px solid hotpink;
}

nav a:last-child {
  border-right:none;
}

.box {
  background-color: black;
  border: 3px solid hotpink;
  padding: 15px auto;
  margin: 20px auto;
  max-width: 700px;
}

.welcome {
  text-align: center;
  }
  
.music-page {
  background-image: url('synthwave.jpeg'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #000000;
  }  

.y2k-page {
  background-image: url('https://i.etsystatic.com/59901827/r/il/87b8cd/7064791702/il_fullxfull.7064791702_cx8x.jpg'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #000000;
  }  

body {
  cursor: url("lightning.png"), auto;
  }
  
  body.music-page::before {
  /* Creates a bright pink/purple center spotlight fading into deep concert arena shadows */
  background: none;
}

.playlist-box {
  background: rgba(10, 3, 15, 0.45);
  border: 5px solid hotpink;
  padding: 30px auto;
  margin: 20px auto;
  max-width: 500px;
  text-align: center;
  }
  
  .music-intro {
    text-align: center;
    }
    
  .music-nav { 
    background: rgba(10, 3, 15, 0.45);
    border: 2px solid #ff00ff;
    padding: 10px;
    margin: 20px auto;
    max-width: 700px;
    text-align: center;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.5)
  }
   
   .music-nav a {
     color: white;
     text-decoration: none;
     font-weight: bold;
     margin; 0 12px;
     } 
     
    .music-nav a:hover{
      color: #ff00ff;
      text-shadow: 0 0 8px #ff00ff
      } 
      
      .eighties-page {
        background-image: url("eighties.jpeg");
        background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #000000;
        }
        
      .artist-card {
        background: rgba(10, 3, 15, 0.65)
        border: 4px solid #00ffff;
        padding: 20px;
        margin: 20px auto;
        max-width: 500px;
        text-align: center;
        box-shadow: 0 0 8px #00ffff, 0 0 18px #00ffff;
        }