@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');


:root {
 --white: hsl(0, 0%, 100%);
 --light-gray: hsl(212, 45%, 89%);
 --grayish-blue: hsl(220, 15%, 55%);
 --dark-blue: hsl(218, 44%, 22%);
}

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

body {
 background-color: var(--light-gray);
 font-family: 'Outfit', sans-serif;
 padding: auto;
}

.card {
 background-color: var(--white);
 border-radius: 15px;
 margin: 5em auto;
 padding: 0.75em 0.75em 2.1em;
 width: 275px;
 text-align: center;
}

.card img {
 width: 100%;
 border-radius: 10px;
}

h1, p {
 padding-left: 1em;
 padding-right: 1em;
 padding-top: 0.75em;
}

.card h1 {
 font-size: 1.15rem;
}

.card p {
 font-size: 0.85rem;
}


/* frontendmentor.io attribution */

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }



/* @media screen and (min-width: 375px) {
 
}

@media screen and (min-width: 1440px) {

} */