html {
  /* colors */
  --bg-grey: #F9F9FF;
  --dark-purple: #392C68;
  --light-purple: #F0EAFF;
  --text-grey: #EDE8FF;
  --mauve: #E9E3FA;
  --vibrant-purple: #4E1993;
  --purple-gradient: linear-gradient(to right, #0C0317, #1D073A, #210A3F);
  /* padding */
  --page-padding-inline: max(16px, 5vw);
  --page-padding-block: 1.5em;
}

body {
  font-family: Poppins, sans-serif;
  background-color: var(--bg-grey);
  font-size: clamp(18px, 1.2vw, 26px);
}

/* Reset */
@layer reset;

@layer reset {
  :where(body) {
    margin: 0;
  }

  :where(h1, h2, h3, h4, h5, h6, p) {
    margin-block: 0;
  }

  :where(img) {
    max-width: 100%;
  }

  :where(a, a:link, a:visited, a:hover, a:active) {
    text-decoration: none;
    color: inherit;
  }

  :where(b) {
    font-weight: 700;
  }
}