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

@font-face {
    font-family: "Figtree";
    src: url("./assets/fonts/Figtree-VariableFont_wght.ttf") format("truetype");
    font-weight: 500 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-primary: hsl(47, 88%, 63%);
    --color-ink: hsl(0, 0%, 7%);
    --color-ink-muted: hsl(0, 0%, 42%);
    --color-surface: hsl(0, 0%, 100%);
    --color-link: hsl(228, 45%, 44%);

    --color-page-bg: var(--color-primary);
    --color-category: var(--color-primary);
    --color-category-hover: var(--color-ink-muted);
    --color-card-bg: var(--color-surface);
    --color-card-border: var(--color-ink);
    --color-card-shadow: var(--color-ink);
    --color-heading: var(--color-ink);
    --color-heading-hover: var(--color-primary);
    --color-body-text: var(--color-ink-muted);
    --color-author-hover: var(--color-primary);

    --font-size-label: 0.875rem;
    --font-size-body: 1rem;
    --font-size-heading: 1.5rem;
    --font-weight-bold: 800;
    --line-height-default: 1.5;
    --font-size-attribution: 0.6875rem;

    --width-card: min(100%, 24rem);
    --min-height-card: 32.625rem;
    --gap-card-inner: 1.5rem;
    --gap-content-inner: 0.75rem;
    --padding-card: 1.5rem;
    --padding-category: 0.25rem 0.75rem;
    --size-avatar: 2rem;

    --radius-card: 1.25rem;
    --radius-cover: 0.625rem;
    --radius-category: 0.25rem;
    --border-card: 1px solid var(--color-card-border);
    --shadow-card: 8px 8px 0px var(--color-card-shadow);

    --transition-hover: 0.2s ease;
}

body {
    font-family: "Figtree", sans-serif;
    background-color: var(--color-page-bg);
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
}

.blog-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--color-card-bg);
    width: var(--width-card);
    min-height: var(--min-height-card);
    border: var(--border-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--padding-card);
    gap: var(--gap-card-inner);
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-card-inner);
}

.blog-card__cover {
    width: 100%;
    border-radius: var(--radius-cover);
    display: block;
}

.blog-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-content-inner);
    align-items: flex-start;
}

.blog-card__category {
    display: inline-block;
    font-size: var(--font-size-label);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-category);
    background-color: var(--color-category);
    padding: var(--padding-category);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--transition-hover);
}

.blog-card__category:hover {
    background-color: var(--color-category-hover);
}

.blog-card__date {
    font-size: var(--font-size-label);
    line-height: var(--line-height-default);
}

.blog-card__title {
    font-size: var(--font-size-heading);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    transition: color var(--transition-hover);
}

.blog-card__title a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-hover);
}

.blog-card__title a:hover {
    color: var(--color-heading-hover);
}

.blog-card__excerpt {
    font-size: var(--font-size-body);
    line-height: var(--line-height-default);
    color: var(--color-body-text);
}

.blog-card__author {
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-label);
    gap: var(--gap-content-inner);
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-hover);
}

.blog-card__author:hover {
    color: var(--color-author-hover);
}

.blog-card__avatar {
    width: var(--size-avatar);
}

.attribution {
    font-size: var(--font-size-attribution);
    text-align: center;
}
.attribution a {
    color: var(--color-link);
}

@media (prefers-reduced-motion: reduce) {
    .blog-card__category,
    .blog-card__title a,
    .blog-card__author {
        transition: none;
    }
}