/* importing fonts */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

/*** variables ***/
:root {
  /* fonts */
  --main-font-family: 'Figtree', sans-serif;
  /* font sizes */
  --h1-font-size: 1.25em; /* 20px */
  --p-font-size: 0.875em; /* 14px */
  --smaller-font-size: 0.75em; /* 12px */
  /* font colors */
  --light-font-color: #7f7f7f;
  /* background colors */
  --main-background-color: #f4d04e;
  /* base colors */
  --color-white: white;
  --color-black: black;
  /* widths */
  --card-width: 20.438rem;
  --card-illustration-width: 17.438rem;
  --card-category-width: 4.563rem;
  /* margins */
  --card-margins: 9.75rem auto 9rem;
}

@media (min-width: 992px) {
  :root {
    /* font sizes */
    --h1-font-size: 1.5em; /*24px */
    --p-font-size: 1em; /* 16px */
    --smaller-font-size: 0.875em; /* 14px */
    /* widths */
    --card-width: 24rem;
    --card-illustration-width: 21rem;
    --card-category-width: 5.125rem;
    /* margins */
    --card-margins: 13.65rem auto 12.75rem;
  }
}

/*** reset ***/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* typography */
  font-family: var(--main-font-family);
  color: var(--color-black);
  font-size: 1em;
  font-weight: 500;
  /* base */
  min-width: 20em; /* 320px */
  background-color: var(--main-background-color);
  /* display .attribution at bottom */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
}

/* typography */
h1 {
  font-size: var(--h1-font-size);
  font-weight: 800;
  line-height: 125%;
  margin: 0.9rem 0;
}

p {
  color: var(--light-font-color);
  font-size: var(--p-font-size);
  line-height: 150%;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover h1,
a:active h1 {
  color: var(--main-background-color);
}

/* components */
.card img {
  border-radius: 0.625rem;
  object-fit: cover;
  object-position: center;
}

.card .illustration {
  width: var(--card-illustration-width);
}

.card {
  display: inline-block;
  width: var(--card-width);
  background-color: var(--color-white);
  border: 1.6px solid var(--color-black);
  border-radius: 1.25rem;
  padding: 1.35rem;
  box-shadow: 8px 8px var(--color-black);
  margin: var(--card-margins);
}

.category {
  /* typography */
  color: var(--color-black);
  font-size: var(--smaller-font-size);
  font-weight: 800;
  line-height: 125%;
  /* styling */
  width: var(--card-category-width);
  background-color: var(--main-background-color);
  border-radius: 0.25rem;
  padding: 0.35rem 0.75rem;
  margin: 1.35rem 0 0.75rem;
}

.date {
  color: var(--color-black);
  font-size: var(--smaller-font-size);
  font-weight: 600;
}

.author {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.author p {
  color: var(--color-black);
  font-weight: 800;
}

/* challenge attribution in footer */
.attribution {
  text-align: center;
  font-size: 0.7em;
}

.attribution a {
  text-decoration: underline;
}