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

/*root*/
:root{
--clr-Yellow: #f4d04e;
--clr-Gray-950: #111111;
--clr-Gray-500: #6b6b6b;
--clr-White: #ffffff;

--ff-main: "Figtree", sans-serif;
--fs-main: 16px;
--fw-600: 600;
--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-600);
    color: var(--clr-Gray-500);
    background: var(--clr-Yellow);
}

/*text styles*/

.blog-category, .blog-meta, .blog-title, .author-name{
    color: var(--clr-Gray-950);
}

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

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

.blog-title{
    font-weight: var(--fw-800);
    font-size: 1.3rem;
    cursor: pointer;
    transition: .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: 8px 8px 0 var(--clr-Gray-950);
    background: var(--clr-White);
    transition: box-shadow .3s ease;
}

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

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

.author-image{
    width: 3rem;
}

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

}