/* =========================
   CSS VARIABLES
   ========================= */

:root {
  --pink: #ff51c9;
  --pink-soft: #ffd5f6;

  --blue: #48c8ff;
  --blue-soft: #d8f4ff;

  --yellow: #ffcf4e;
  --yellow-soft: #fff3c9;

  --mint: #31e6ae;
  --mint-soft: #cfffee;

  --purple: #b084ff;
  --purple-soft: #f1e6ff;

  --orange: #ff8b3d;
  --orange-soft: #ffe3cc;

  --bg-soft: #fff9ff;

  --text-main: #151827;
  --text-muted: #6c6f82;

  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-soft: 0 22px 55px rgba(60, 80, 160, 0.25);

  --max-width: 1180px;
}

/* =========================
   RESET
   ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  scroll-behavior: smooth;
}

/* =========================
   BASE STYLES
   ========================= */

body {
  display: flex;
  flex-direction: column;
  font-family: "Poppins", sans-serif;
  color: var(--text-main);
  background: radial-gradient(
    circle at top,
    #fff3ff 0,
    #ffffff 45%,
    #ffeef9 100%
  );
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* =========================
   STICKY FOOTER SUPPORT
   ========================= */

.site-footer {
  margin-top: auto;
}