/* App wrapper */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;           /* allow it to grow as feed expands */
  width: 100vw;
}

/* Center the Spotify embed */
iframe[data-testid="embed-iframe"] {
  display: block;              /* makes margin centering work */
  margin: 2rem auto;           /* centers horizontally with spacing above/below */
  max-width: 800px;            /* optional: keeps it from being huge on large screens */
  width: 80%;                  /* keep your 80% width from HTML */
  height: auto;
  aspect-ratio: 80 / 50;  /* or approximate ratio: width / height */
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4); /* subtle lift effect */
}




/* Links grid */
.links-grid {
  display: flex;
  flex-wrap: wrap;          /* wrap if too many buttons */
  justify-content: center;  /* center horizontally */
  gap: 1rem;                /* space between buttons */
  margin: 2rem auto;        /* spacing above/below */
  max-width: 800px;         /* optional max width */
}

/* Link buttons */
.link-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: white;
  background-color: #ff00ff; /* bright magenta */
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.link-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(255, 0, 255, 0.5);
}








/* 3) Social links: sits at the bottom when content is short,
   otherwise lives at the end of the document flow */
.social-links {
  margin-top: auto;               /* <-- the key */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;

  width: 100%;
  padding: 0.75rem 0;
  box-sizing: border-box;
  overflow: hidden;
  /* optional background if you want separation from content
     background: rgba(0,0,0,0.5); */
}

/* 4) Links */
.social-links a {
  text-decoration: none;
  color: white;
  font-size: clamp(1rem, 2vw, 1.5rem);
  display: inline-block;
  transition: filter 0.2s ease;
}

.social-links a:hover {
  filter: drop-shadow(0 0 5px magenta);
}