/* @font-face {
    font-family: 'Figtree';
    src: url('../assets/fonts/Figtree-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Figtree';
    src: url('../assets/fonts/Figtree-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

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

@font-face {
    font-family: 'Figtree';
    src: url('../assets/fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
} */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');



:root {
    --color-yellow: hsl(47, 88%, 63%);
    --color-white: hsl(0, 0%, 100%);
    --color-gray-500: hsl(0, 0%, 42%);
    --color-gray-950: hsl(0, 0%, 7%);
    --size-medium: 1.5rem;
}


body {
    margin: 0;
    
    font-family: "Figtree", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-yellow);
    height: 100vh;
    width: 100%;
}

.card-container {
    width: 100%;
    max-width: 320px;
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-950);
    border-color: var(--color-gray-950);
    padding: var(--size-medium);
    border-radius: 20px;
    box-shadow: 10px 10px;
}


.banner {
    border-radius: 10px;
    width: 100%;
}

.post-category {
    display: flex;
    justify-content: center;
    font-weight: bold;
    background-color: var(--color-yellow);
    padding: 8px;
    width: 80px;
    border-radius: 5px;
}

.post-title {
    cursor: pointer;
}

.post-title:hover {
    color: var(--color-yellow);
}

.post-description {
    color: var(--color-gray-500);
    line-height: var(--size-medium);
}

.post-author {
    display: flex;
    align-items: center;
}

.user-photo {
    width: 40px;
}

.user-name {
    margin-left: 10px;
}