@font-face {
    font-family: "Outfit";
    src: url("./outfit_variable.ttf");
}

:root {
    --white: hsl(0, 0%, 100%);
    --slate300: hsl(212, 45%, 89%);
    --slate500: hsl(216, 15%, 48%);
    --slate900: hsl(218, 44%, 22%);
}
/*CSS Reset */

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

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}


body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}


ul[role='list'],
ol[role='list'] {
  list-style: none;
}


body {
  min-height: 100vh;
  line-height: 1.5;
}


h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}


h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

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

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


* {
    border: 0;
    margin: 0;
    box-sizing: border-box;
   

}
/* Mobile screens */
@media  (max-width:375px) {
    
}
body {
    background: var(--slate300);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-family: 'Outfit', system-ui, sans-serif;
}


.card {
    background: var(--white);
    padding: 18px;
    border-radius: 0.9rem;
    text-align: center;
    max-width: 20rem;

}
  


.card img {
    max-width: 100%;
    border-radius: 0.9rem;
    display: block;
    height: auto;
    
}

.text-section {
    padding: .9rem;
}

.text-section h2 {
    padding-bottom: 15px;
    color: var(--slate900);
    font-size: 1.4rem;
}

.text-section p {
    color: var(--slate500);
}