/* CSS RESETS */

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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, p {
  margin-block-end: 0;
}

h1, h2 {
  line-height: 1.2;   /* Set shorter line heights on headings and interactive elements */
  text-wrap: balance; /* Balance text wrapping on headings */
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Hiding class, making content visible only to screen readers but not visually */
/* "sr" meaning "screen-reader" */
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

/* FONTS */

/* outfit-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/outfit-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/outfit-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* CUSTOM VARIABLES */

:root {

    /* COLORS */

    --clr-white: hsl(0, 0%, 100%);
    --clr-slate-300: hsl(212, 45%, 89%);
    --clr-slate-500: hsl(216, 15%, 48%);
    --clr-slate-900: hsl(218, 44%, 22%);

    /* TYPOGRAPHY */

    --ff-main: "Outfit", sans-serif;
    --fs-body: 0.938rem;
    --fs-heading: 1.375rem;

    /* SPACINGS */

    --space-200: 1rem;
    --space-300: 1.5rem;
    --space-500: 2.5rem;

    /* BORDER-RADIUS */

    --rounded-xs: 10px;
    --rounded-sm: 20px;

    /* BOX-SHADOW */

    --card-shadow: 0px 25px 25px 0px rgb(0 0 0 / 0.05);

}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--ff-main);
    font-size: var(--fs-body);
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--clr-slate-500);
    background-color: var(--clr-slate-300);
    padding: var(--space-300);
    min-height: 100vh;
    min-height: 100dvh;
}

.card {
    background-color: var(--clr-white);
    border-radius: var(--rounded-sm);
    box-shadow: var(--card-shadow);
    max-width: 20rem;
    padding: var(--space-200) var(--space-200) var(--space-500);
    text-align: center;
}

.card__img {
    width: 100%;
    height: auto;
    border-radius: var(--rounded-xs);
    margin-block-end: var(--space-300);
}

.card__text-container {
    padding-inline: var(--space-200);
}

.card__title {
    font-size: var(--fs-heading);
    font-weight: 700;
    color: var(--clr-slate-900);
    margin-block-end: var(--space-200);
}