@font-face {
  font-family: 'Georgia Brush';
  src: url('./fonts/georgia-brush.otf') format('truetype');
}

:root {
  --soft-cream: #fff7f3;
  --golden-dusk: #e6b55c;
  --blush-breeze: #ffd2d8;
  --sunset-apricot: #ffa07a;
  --wild-bloom: #f96d63;
  --blue-haze: #8ac5ce;
  --lavender: #d5c6d6;
  --indigo: #0e2d3c;
}

body, html {
  height: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

.hero {
  background-image: url('assets/img/kid-hero.png');
  background-size: cover;
  background-position: center;
  height: 100vh;
  position: relative;
}

.overlay {
  background: linear-gradient(
    to bottom,
    rgba(255, 247, 243, 0.7), /* soft-cream */
    rgba(255, 210, 216, 0.4), /* blush-breeze */
    rgba(255, 170, 122, 0.3)  /* sunset-apricot */
  );
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
}

.logo {
  width: 320px;
  margin-bottom: 1.5rem;
}

.pronto {
  font-family: 'Georgia Brush', cursive;
  font-size: 4rem;
  color: var(--indigo);
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0.5rem 1.2rem;
  border-radius: 1rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}