/* root */
:root {
  /* COLORS */
  --clr-purple-100: #dbd1fc;
  --clr-purple-500: #7551dc;
  --clr-yellow-100: #f9eee2;
  --clr-yellow-500: #ffcc6a;
  --clr-white: #fff;
  --clr-black: #121212;
  --clr-bg: #f6f5f6;

  /* TYPOGRAPHY */
  --ff-main: "DM Sans", serif;

  --fs-xs: 1.8rem;

  /* TYPOGRAPHY */
  --fs-sm: 3.2rem;
  --fs-md: 4rem;
  --fs-lg: 6.2rem;

  --line-height-xs: 2rem;
  --line-height-sm: 2.8rem;
  --line-height-md: 3.6rem;
  --line-height-lg: 5.8rem;

  --fw-400: 400;
  --fw-500: 500;

  /* SPACINGS */
  --spacing-500: 4rem;
  --spacing-400: 3.2rem;
  --spacing-300: 2.4rem;
  --spacing-200: 1.6rem;
  --spacing-100: 0.8rem;
}

@media screen and (max-width: 1200px) {
  :root {
    /* TYPOGRAPHY */
    --fs-sm: 2.8rem;
    --fs-md: 3.6rem;
    --fs-lg: 5.4rem;

    --line-height-sm: 2.6rem;
    --line-height-md: 3rem;
    --line-height-lg: 4.8rem;
  }
}

@media screen and (max-width: 576px) {
  :root {
    /* TYPOGRAPHY */
    --fs-sm: 2.6rem;
    --fs-md: 3.2rem;
    --fs-lg: 4.6rem;

    --line-height-sm: 2.4rem;
    --line-height-md: 2.8rem;
    --line-height-lg: 4.2rem;
  }
}

html {
  /* Set the default height */
  height: 100%;
}


body {
  /* Body */
  /* let body uses the available space */
  min-width: fit-content;
  /* Ensure the max width stretch to the entire viewport width */
  max-width: 100vw;
  /* Inherit height from html.  */
  min-height: 100%;
}

html {
  /* Reset HTML font size, work with rem easier. */
  font-size: 62.5%;
}

body {
  background-color: var(--clr-bg);
  font-family: var(--ff-main);
  color: var(--black);
}

img {
  width: 80%;
  height: 80%;
}

/* FONTS */

/* || COLORS || */
.yellow {
  color: var(--yellow-500);
}

.purple {
  color: var(--purple-500);
}

.white {
  color: var(--white);
}

/* || FONT STYLE || */
.italic {
  font-style: italic;
}

/* COMMON TEXT PRESET
*/
.text-lg {
  font-size: var(--fs-lg);
  line-height: var(--line-height-lg);
}

.text-md {
  font-size: var(--fs-md);
  line-height: var(--line-height-md);
}

.text-sm {
  font-size: var(--fs-sm);
  line-height: var(--line-height-sm);
}

.text-xs {
  font-size: var(--fs-xs);
  line-height: var(--line-height-xs);
}

.fw-regular {
  font-weight: var(--fw-400);
}

.fw-medium {
  font-weight: var(--fw-500);
}

/* Center content with grid */
.grid-center {
  display: grid;
  place-content: center;
}