/* 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." */

/* --- Base Styles --- */
body {
  background-color: #121212;
  color: #f0f0f0;
  font-family: 'Albert Sans', sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #181818;
  padding: 1em 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h1 {
  font-family: 'Londrina Solid', sans-serif;
  font-size: 2.5em;
  color: #9b59b6;
   letter-spacing: 4px;
}

nav a {
  color: #f0f0f0;
  text-decoration: none;
  margin-left: 1em;
}

nav a:hover {
  color: #a16aff;
}


/* --- Homepage --- */

hr {
  border: none;               
  height: 2px;                
  background-color: #181818;  /* dark grey accent */
  margin: 1em 0;              /* space above and below */
}
.hero {
  text-align: center;
  padding: 2em;
}

.album-grid {
  display: flex;
  justify-content: center;
  gap: 2em;
  flex-wrap: wrap;
}

.album img {
  width: 200px;
  border-radius: 10px;
  transition: transform 0.2s;
}

.album img:hover {
  transform: scale(1.05);
}

.hero h4:hover {
  color: #a16aff;
  transition: color 0.3s ease;
}

.blog-preview {
  text-align: center;
  padding: 2em;
}

.blog-preview h2 {
  font-family: 'Albert Sans', sans-serif;
  color:#f0f0f0;
}

.post-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5em;
  margin-top: 1em;
}

.post-card {
  background-color: #181818;
  padding: 1.5em;
  border-radius: 10px;
  width: 250px;
  text-align: left;
  transition: transform 0.2s ease;
}

.post-card:hover {
  transform: translateY(-5px);
}

.post-card h3 {
  color: #f0f0f0;
  margin-bottom: 0.5em;
}

.post-card p {
  color: #aaa;
  font-size: 0.9em;
  margin-bottom: 1em;
}

.read-more {
  color: #9b59b6;
  text-decoration: none;
  font-weight: bold;
}

.read-more:hover {
  text-decoration: underline;
}


/* --- Review Page --- */
.review-page {
  display: flex;
  gap: 2em;
  padding: 2em;
  max-width: 900px;
  margin: 0 auto;
}

.review-page img {
  width: 300px;
  border-radius: 10px;
}

.review-content {
  max-width: 600px;
}

.rating {
  color: #9b59b6;
  font-size: 1.5em;
}
.review-content h3:hover {
  color: #a16aff;
  transition: color 0.3s ease;
}

/* --- Footer --- */
footer {
  text-align: center;
  padding: 1em;
  background-color: #181818;
  color: #888;
  font-size: 0.9em;
}