/* Stretch the background image to exactly fit the viewport (may distort aspect ratio) */
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #fff;
}
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Use SVG/image in public/ as background and stretch to fill both dimensions (distorts to fit) */
  background-image: url('julia.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%; /* stretch to fit viewport exactly */
}
.content { padding: 1.25rem; background: rgba(0,0,0,0.35); border-radius: 8px; }
h1 { margin: 0 0 0.5rem; font-size: clamp(1.25rem, 5vw, 2.5rem); }
p { margin: 0; }