:root {
    --clr-yellow: hsl(47, 88%, 63%);
    --clr-white: hsl(0, 0%, 100%);
    --clr-gray-500: hsl(0, 0%, 42%);
    --clr-gray-950: hsl(0, 0%, 7%);

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

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

a {
    text-decoration: none;
}

h1, h2, h3, p {
    padding: 0;
    margin: 0;
}

h1 {
    font-family: "Figtree";
    font-weight: 800;
    line-height: 150%;
    font-size: 24px;
    color: var(--clr-gray-950);
}

h2 {
    font-family: "Figtree";
    font-weight: 500;
    line-height: 150%;
    font-size: 14px;
    color: var(--clr-gray-950);
}

h3 {
    font-family: "Figtree";
    font-weight: 800;
    line-height: 150%;
    font-size: 14px;
    color: var(--clr-gray-950);
}

p {
    font-family: "Figtree";
    font-size: 16px;
    line-height: 150%;
    font-weight: 500;
    color: var(--clr-gray-500);
}

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--clr-yellow);
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
}

.card {
    max-width: 384px;
    background-color: var(--clr-white);
    border: 1px solid var(--clr-gray-950);
    border-radius: 20px;
    box-shadow: 8px 8px 0px var(--clr-gray-950);
}

.card-content {
    padding: var(--pd-300);

    display: flex;
    flex-direction: column;
    gap: var(--pd-300);
}

.card-text {
    display: flex;
    flex-direction: column;
    gap: var(--pd-150);
}

.card__image {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.card-text__category {
    background-color: var(--clr-yellow);
    padding: var(--pd-50) var(--pd-150);
    border-radius: var(--pd-50);

    width: fit-content;
}

.card-text__title:is(:hover, :active, :focus) {
    color: var(--clr-yellow);
}

.card-avatar {
    display: flex;
    align-items: center;
    gap: var(--pd-150);
}

.card-avatar__image {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.attribution {
    font-size: 11px;
    text-align: center;
    color: var(--clr-gray-950);
    font-family: "Figtree";
}

.attribution a {
    color: hsl(228, 70%, 33%);
    text-decoration: none;
}