/* REM NOTE:
   CSS is how we teach the browser "vibes"
*/

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont;
  margin: 0;
  background: #fff6fb;
  color: #333;
}

img {
  max-width: 100%;
  height: auto;
}

.hero {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, #ffd6ec, #e0f3ff);
}

.hero img {
  width: clamp(96px, 18vw, 160px);   /* scales nicely across devices */
  max-width: 160px;                 /* hard cap */
  max-height: 160px;                /* hard cap (prevents tall images) */
  height: auto;                     /* keep aspect ratio */
  object-fit: cover;                /* fills circle without stretching */
  border-radius: 50%;
  display: block;
  margin: 0 auto 1rem;
}

main {
  padding: 1.5rem;
  max-width: 800px;
  margin: auto;
}

.card {
  background: white;
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.card.fun {
  text-align: center;
}

footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  color: #777;
}

button {
  background: #ff80bf;
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
}

button:hover {
  transform: translateY(-2px);
}

/* Make cards feel cozy */
.card {
  transition: transform .15s ease;
}

.card:hover {
  transform: scale(1.01);
}