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

/* root */
:root {
    --clr-Yellow: #f4d04e;
    --clr-white: #ffffff;
    --clr-Grey: #808080;
    --clr-Black: #121212;

    --ff-main: 'Figtree', sans-serif;
    --fs-main: 16px;
    --fw-500: 500;
    --fw-800: 800;
}
/* reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
}

h1 {
    line-height: 1.1;
}

body {
    font-family: var(--ff-main);
    font-size: var(--fs-main);
    font-weight: var(--fw-500);
    color: var(--clr-Grey);
    background: var(--clr-Yellow);
}

/* text styles */
.blog-category, .blog-meta, .blog-title, .author-name{
    color: var(--clr-Black);
}


.blog-category {
    display: inline-block;
    font-weight: var(--fw-800);
    padding: .5rem .8rem;
    border-radius: .2rem;
    background: var(--clr-Yellow);
}

.blog-category:hover{
    color: var(--clr-white);
}

.blog-meta {
    font-size: 14px;
}

.blog-title{
    font-weight: var(--fw-800);
    font-size: 1.4rem;
    cursor: pointer;
    transition: color .3s ease;
    
}

.blog-title:hover {
    color: var(--clr-Yellow);
}

.author-name{
    font-size: 14px;
    font-weight: var(--fw-800);
}

/* layout styles */
.author-data{
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* general styles */

.wrapper{
    display: grid;
    place-items: center;
    min-height: 100dvh;
}

.blog-container {
    max-width: 23em;
    padding: 1.5rem;
    margin: 0 1.5rem;
    border-radius: 1rem;
    box-shadow: 6px 6px 0 var(--clr-Black);
    background: var(--clr-white);
    transition: box-shadow .3s;
}

.blog-container:hover {
    box-shadow: 10px 10px 0 var(--clr-Black);
}

.blog-container > * + *{
    margin-top: 1rem;
}

.author-image{
    width: 3rem;
}

.blog-image{
    border-radius: .8rem;
}

.attribution { 
        font-size: 11px; 
        text-align: center; 
    }

    .attribution a { 
        color: hsl(228, 45%, 44%); 
    }