:root{
    --yellow:hsl(47, 88%, 63%);
    --white:hsl(0, 0%, 100%);
    --g500:hsl(0, 0%, 42%);
    --g950:hsl(0, 0%, 7%);
    --typo:"Figtree", serif;
}
body{
    background-color: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 20vh;
}
main{
    background-color: var(--white);
    width: 48vh;
    height: 62vh;
    border-radius: 2vh;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 7px 7px 0px 0px rgba(0,0,0,0.87);
    margin-bottom: 10vh;
}
.container{
    width: 90%;
    height: 93%;
    margin: auto;
    font-size: 16px;
    font-family: var(--typo);
}
.container-image{
    background-image: url(../images/illustration-article.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 45%;
    border-radius: 2vh;
}
.container-learning{
    background-color: var(--yellow);
    padding: 0.5vh;
    width: 26%;
    margin-top: 3vh;
    border-radius: 0.5vh;
    text-align: center;
    font-weight: 800;
    margin-bottom: 1vh;
}
.container-published{
    font-size: 13px;
    margin-top: 1vh;
    margin-bottom: 1vh;
    color: var(--g950);
}

.container-header{
    color: var(--g950);
    margin-bottom: 1vh;
    font-weight: 800;
    font-size: 25px;
}

.container-info{
    color: var(--g500);
    margin-bottom: 1vh;
}
.container-publisher{
    display: flex;
    align-items: center;
    margin-top: 2vh;
    font-weight: 800;

}
.container-publisher__img{
    background-image: url(../images/image-avatar.webp);
    height: 4vh;
    width: 4vh;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 2vh;

}

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