@font-face {
  font-family: "Figtree";
  src: url(./assets/fonts/Figtree-VariableFont_wght.ttf);
}

:root{

--clr-neutral-100: hsl(0, 0%, 100%);
--clr-neutral-500: hsl(0, 0%, 42%);
--clr-neutral-950: hsl(0, 0%, 7%);

--clr-yellow-400: hsl(47, 88%, 63%);

--clr-body: var(--clr-neutral-500);
--clr-heading: var(--clr-neutral-950);
--clr-avatar:  var(--clr-neutral-950);

--fw-light: 200;
--fw-regular: 500;
--fw-semi-bold: 600;
--fw-bold: 900;

--fs-body: 1rem;
--fs-heading: 1.4rem;
--fs-subheading: 0.8rem;
}

html {
  font-size: 16px
}

body {
  min-height: 100vh;           /* Full viewport height */
  display: flex;
  justify-content: center;     /* Center horizontally */
  align-items: center;         /* Center vertically */
  margin: 0;                   /* Remove default margin */
}

.main-card {
  background-color: var(--clr-neutral-100);
  border-color: var(--clr-neutral-950);
  border-style: solid;
  border-width: 1px;
  display: flex;
  margin-inline: auto;
  justify-content: center;
  align-items: center;
  width: 375px;
  border-radius: 1.25em;
  box-shadow: 0.5em 0.4em 0em var(--clr-neutral-950);
}

.img-container {
  margin: 1.25em 1.5em;
  display: block;
  max-width: 100%;
}

.avatar-container {
  font-family: Figtree, sans-serif;
}

.img-avatar{
  width: 1.8em;
  float: left;
  padding-right: 0.75em;
}

.img-article{
  width: 100%;
  border-radius: 0.65em;
}

p {
    font-family: Figtree, sans-serif;
    color: var(--clr-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
}

h1 {
    font-family: Figtree, sans-serif;
    font-weight: var(--fw-bold);
    font-size: var(--fs-heading);
    color: var(--clr-heading);
}

h3 {
    font-family: Figtree, sans-serif;
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-subheading);
    color: var(--clr-heading);
}

h4 {
    font-family: Figtree, sans-serif;
    font-weight: var(--fw-bold);
    font-size: var(--fs-subheading);
    color: var(--clr-heading);
    padding-top: 0.45em;
}

body {
  background-color: var(--clr-yellow-400);
}

img{
  max-width: 100%;
  display: block;
}

button {
  background-color: var(--clr-yellow-400);
  border-radius: 0.35em;
  border-style: none;
  font-family: Figtree, sans-serif;
  font-weight: var(--fw-bold);
  font-size: 0.80rem;
  margin-top: 1.5em;
  padding: 0.5em 0.8em;
}

h1:hover {
  color: var(--clr-yellow-400);
}