* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body, h1, p {
  margin-block-end: 0;
}
::selection {
    background-color: #2C7DFA;
    color: white;
}
:root {
    /* --------colors-------- */
    --clr-slate-900: hsl(218, 44%, 22%);
    --clr-slate-500: hsl(216, 15%, 48%);
    --clr-slate-300: hsl(212, 45%, 89%);
    --clr-white: hsl(0, 100%, 100%);

    /* --------typography-------- */
    --ff-sans: 'outfit', sans-serif;

    --fs-400: 1rem;
    --fs-600: 1.375rem; /* 22px */

    --fw-400: 400;
    --fw-700: 700;

    --lh-300: 1.2;
    --lh-400: 1.4;

    --ls-400: 0px;
    --ls-500: 0.2px;

    /* --------spacing-------- */
    --space-200: 16px;
    --space-300: 24px;
    --space-500: 40px;
}
html {
  font-size: 100%;
  scroll-behavior: smooth;
}
body {
    align-content: center;
    min-height: 100dvh;
    font-family: var(--ff-sans);
    font-size: var(--fs-400);
    font-weight: var(--fw-400);
    text-align: center;
    line-height: var(--lh-400);
    letter-spacing: var(--ls-500);
    color: var(--clr-slate-500);
    background-color: var(--clr-slate-300);
}
article {
    place-self: center;
    padding-inline: var(--space-200);
    padding-block: var(--space-200) var(--space-500);
    width: 320px;
    background-color: var(--clr-white);
    border-radius: 20px;
    box-shadow: 0 25px 25px hsl(0, 0%, 0%, 4.77%);

    img {
        margin-block-end: var(--space-300);
        width: 288px;
        border-radius: 10px;
    }
    h1 {
        margin-block-end: var(--space-200);
        font-size: var(--fs-600);
        font-weight: var(--fw-700);
        line-height: var(--lh-300);
        letter-spacing: var(--ls-400);
        color: var(--clr-slate-900);
    }
}