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

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

    --ff: 'Figtree', sans-serif;
    --fs: 16px;
    --fw-500: 500;
    --fw-800: 800;
}

/* reset */

*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

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

h1 {
    line-height: 1.4;
}

body {
    line-height: 1.4;
    font-family: var(--ff);
    font-size: var(--fs);
    font-weight: var(--fw-500);
    color: var(--gray);
    background: var(--yellow);
}

/* text style*/
.blog-category, .blog-meta, .blog-title, .author-name {
    color: var(--dark-gray);
}
.blog-category {
    
    display: inline-block;
    font-size: 14px;
    background: var(--yellow);
    padding: 0.3rem 0.8rem;
    color: var(--dark-gray);
    font-weight: var(--fw-800);
    border-radius: 0.3rem;
}

.blog-meta {
    font-size: 14px;
    font-weight: var(--fw-500);
}

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

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

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

/* layout styles */

.author-data {
    display: flex;
    place-items: center;
    gap: 1rem;
    padding-top: 0.5rem;

}

/* general styles */

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

.blog-container {
    background: var(--white);
    max-width: 23em;
    padding: 1.5rem;
    margin: 0 1.5rem;
    border-radius: 1rem;
    box-shadow: 7px 7px 0 var(--dark-gray);
    border: 1px solid var(--dark-gray);
}

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


.author-image {
    width: 2rem;
}

.blog-image {
    border-radius: .6rem;
    padding-bottom: .3rem;
    
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }