/* figtree-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: 'Figtree';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype');
}
/* figtree-italic - 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: 'Figtree';
  font-style: italic;
  font-weight: 400;
  src: url('./assets/fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype');
}
/* figtree-600 - 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: 'Figtree';
  font-style: normal;
  font-weight: 600;
  src: url('./assets/fonts/static/Figtree-Medium.ttf') format('truetype');
}
/* figtree-800 - 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: 'Figtree';
  font-style: normal;
  font-weight: 800;
  src: url('./assets/fonts/static/Figtree-ExtraBold.ttf') format('truetype');
}

body {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    font-weight: 600;

    --yellow-color: hsl(47, 88%, 63%);
}

* {
    margin: 0;
}

.attribution {
    display: none;
}

button {
    display: inline-block;
    padding: 5px 10px;
    background: hsl(47, 88%, 63%);
    border-radius: 4px;
    border: 0;
    font-size: 14px;
    font-weight: 800;
}

.user-profile {
    display: flex;
    gap: 10px;
    align-items: center;
    transform: translateY(16px);
}

.profile-pic {
    max-width: 25px;
    aspect-ratio: 1/1;
}

.card-description {
    color: hsl(0, 0%, 42%);
}

img {
    width: 100%;
}

h1 {
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
}

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

.screen-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: var(--yellow-color);
}

.card {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    gap: 18px;
    align-items: flex-start;
    padding: 20px;
    padding-bottom: 38px;
    border: 1px solid;
    border-radius: 16px;
    box-shadow: 8px 8px 0 hsl(0, 0%, 7%);
    background: hsl(0, 0%, 100%);
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.date {
    color: hsl(0, 0%, 7%);
}