:root {
    /* Colors */
    --Yellow: hsl(47, 88%, 63%);
    --White: hsl(0, 0%, 100%);
    --Gray-500: hsl(0, 0%, 42%);
    --Gray-950: hsl(0, 0%, 7%);

    /* Font */
    --ff-base: "Figtree", serif;
    --fw-normal: 500;
    --fw-bold: 800;
}

/* ----- Global ----- */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--Yellow);
    font-family: var(--ff-base);
    min-height: 37.5rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

/* ----- Layout ----- */
.card {
    background-color: var(--White);
    width: 87.25%;
    max-width: 24rem;
    border: .0625rem solid var(--Gray-950);
    border-radius: 1rem;
    box-shadow: .625rem .625rem 0rem var(--Gray-950);
    padding: 1.5rem;
    display: grid;
    gap: 1rem;

}

.card__img {
    border-radius: .75rem;
}

.card__category {
    width: fit-content;
    background-color: var(--Yellow);
    font-size: .625rem;
    font-weight: var(--fw-bold);
    border-radius: .25rem;
    padding: .25rem .75rem;
}

.card__published-date {
    font-size: .6875rem;
    font-weight: var(--fw-normal);
}

.card__title a {
    color: var(--Gray-950);
    font-size: 1.1875rem;
    font-weight: var(--fw-bold);
    text-decoration: none;
}

.card__title a:hover {
    transition: 250ms;
    color: var(--Yellow);
}

.card__description {
    color: var(--Gray-500);
    font-size: .875rem;
}

.card__profile-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card__profile-img {
    max-width: 2rem;
}

.card__profile-name {
    font-weight: var(--fw-bold);
    font-size: .75rem;
}

/* ----- Footer ----- */
.attribution {
    font-size: .6875rem;
    text-align: center;
}
.attribution a {
    color: var(--Gray-950);
    font-weight: var(--fw-bold);
}

.attribution a:hover {
    transition: 250ms;
    opacity: .7;
}

@media (min-width: 24rem) {
    .card__category {
        font-size: .8125rem;
    }

    .card__published-date {
        font-size: .875rem;
    }

    .card__title a {
        font-size: 1.5rem;
    }
    .card__description {
        font-size: 1rem;
    }
}