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

:root {
    --fig-font: "Figtree", sans-serif;
    --weight-400: 400;
    --weight-800: 800;
    --line-height: 150%;
    --letter-spacing: 0px;
    --text-size-1: 24px;
    --text-size-2: 16px;
    --text-size-3: 14px;
}

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

body {
    font-family: var(--fig-font);
    background-color: #F4D04E;
    color: #111111;
    display: flex;
    min-height: 100vh;
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    padding-inline: 24px;
}

.card {
    background-color: #FFFFFF;
    margin: auto;
    max-width: 384px;
    max-height: 522px;
    min-width: 327px;
    min-height: 501px;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border: 1px solid #111111;
    box-shadow: 8px 8px #111111;
}

.card img {
    border-radius: 10px;
}

.text-content {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 12px;
}

.text-content #button {
    background-color: #F4D04E;
    padding-block: 4px;
    padding-inline: 12px;
    max-width: 82px;
    border-radius: 4px;
    font-weight: var(--weight-800);
    font-size: var(--text-size-3);
    text-align: center;
}

.text-content #publish {
    font-weight: var(--weight-400);
    font-size: var(--text-size-3);
}

.text-content #title {
    font-weight: var(--weight-800);
    font-size: var(--text-size-1);
}

.text-content #title:hover {
    color: #F4D04E;
    cursor: pointer;
}

.text-content #text {
    font-weight: var(--weight-400);
    font-size: var(--text-size-2);
    color: #6B6B6B;
}

.author {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: var(--weight-800);
    font-size: var(--text-size-3);
}

.author img {
    width: 32px;
}