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

:root {
    --yellow: #f4d04e;
    --gray-950: #111111;
    --gray-500: #6b6b6b;

    /* Font Family */
    --font-family-figtree: figtreefont, sans-serif;

    /* Text Preset 1 */
    --text-preset-1-font-family: var(--font-family-figtree);
    --text-preset-1-font-weight: 800; /* Extra Bold */
    --text-preset-1-font-size: 24px;
    --text-preset-1-line-height: 150%;
    --text-preset-1-letter-spacing: 0px;

    /* Text Preset 2 */
    --text-preset-2-font-family: var(--font-family-figtree);
    --text-preset-2-font-weight: 500; /* Medium */
    --text-preset-2-font-size: 16px;
    --text-preset-2-line-height: 150%;
    --text-preset-2-letter-spacing: 0px;

    /* Text Preset 3 */
    --text-preset-3-font-family: var(--font-family-figtree);
    --text-preset-3-font-weight: 500; /* Medium */
    --text-preset-3-font-size: 14px;
    --text-preset-3-line-height: 150%;
    --text-preset-3-letter-spacing: 0px;

    /* Text Preset 3 (Bold) */
    --text-preset-3-bold-font-family: var(--font-family-figtree);
    --text-preset-3-bold-font-weight: 800; /* Extra Bold */
    --text-preset-3-bold-font-size: 14px;
    --text-preset-3-bold-line-height: 150%;
    --text-preset-3-bold-letter-spacing: 0px;

    --spacing-300: 24px;
    --spacing-150: 12px;
    --spacing-100: 8px;
    --spacing-50: 4px;
}

.text-preset-1 {
    font-family: var(--text-preset-1-font-family);
    font-weight: var(--text-preset-1-font-weight);
    font-size: var(--text-preset-1-font-size);
    line-height: var(--text-preset-1-line-height);
    letter-spacing: var(--text-preset-1-letter-spacing);
}

.text-preset-2 {
    font-family: var(--text-preset-2-font-family);
    font-weight: var(--text-preset-2-font-weight);
    font-size: var(--text-preset-2-font-size);
    line-height: var(--text-preset-2-line-height);
    letter-spacing: var(--text-preset-2-letter-spacing);
}

.text-preset-3 {
    font-family: var(--text-preset-3-font-family);
    font-weight: var(--text-preset-3-font-weight);
    font-size: var(--text-preset-3-font-size);
    line-height: var(--text-preset-3-line-height);
    letter-spacing: var(--text-preset-3-letter-spacing);
}

.text-preset-3-bold {
    font-family: var(--text-preset-3-bold-font-family);
    font-weight: var(--text-preset-3-bold-font-weight);
    font-size: var(--text-preset-3-bold-font-size);
    line-height: var(--text-preset-3-bold-line-height);
    letter-spacing: var(--text-preset-3-bold-letter-spacing);
}

body {
    background-color: var(--yellow);
    width: 100%;
    height: 100%;
    display: flex;
}

.card {
    padding: var(--spacing-300);
    background-color: #ffffff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 24px;
    max-width: 327px;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 10px 5px var(--gray-950);
    border: 1px solid var(--gray-950);
}

.card .illustration {
    border-radius: 10px;
    width: 279px;
}

.card section.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    row-gap: 12px;
}

.card section.content .category {
    background-color: var(--yellow);
    border-radius: 4px;
    color: var(--gray-950);
    padding: 4px 12px;
}

.card section.content .date {
    color: var(--gray-950);
}

.card section.content .title {
    color: var(--gray-950);
}

.card section.content .title:hover {
    color: var(--yellow);
    cursor: pointer;
}

.card section.content .desc {
    color: var(--gray-500);
}

.card footer.author {
    display: flex;
    align-items: center;
    column-gap: var(--spacing-100);
    height: 24px;
}

.card footer.author img {
    width: 32px;
    height: 32px;
}

.card footer.author span {
    color: var(--slate-500);
}

@media (min-width: 376px) {
    .card {
        max-width: 376px;
    }
    .card .illustration {
        width: 100%;
    }
}