:root {
    --font-family: "Manrope";
    --font-family-url: "./assets/fonts/static/Manrope-Regular.ttf";
    --very-dark-grayish-blue: hsl(217, 19%, 35%);
    --desaturated-dark--blue: hsl(214, 17%, 51%);
    --grayish-blue: hsl(212, 23%, 69%);
    --light-grayish-blue: hsl(210, 46%, 95%);
    --font-body-size: 1.3rem;
}

@font-face {
    font-family: var(--font-family);
    src: url("var(--font-family-url)");
}

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

body {
    font-family: var(--font-family), sans-serif;
    background-color: var(--light-grayish-blue);
    color: var(--very-dark-grayish-blue);
    font-size: var(--font-body-size);
}

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

section {
    margin: 5rem auto;
}

.article {
    width: 85%;
    max-width: 80rem;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.row {
    display: flex;
}

.articleImg {
    width: 36%;
    max-height: 100%;
    object-fit: cover;
    object-position: 0% 0%;
    border-radius: 1rem 0 0 1rem;
}

.articleContent {
    width: 46%;
    margin: 3rem auto;
}

.articleContent h1 {
    color: var(--very-dark-grayish-blue);
    font-size: 2rem;
}

.articleContent .articleContentTxt {
    color: var(--desaturated-dark--blue);
    margin: 1rem 0 2.5rem;
    line-height: 1.5;
}

.articleAvatar {
    display: flex;
    align-items: center;
}

.articleAvatar .articleAvatarImg {
    width: 4rem;
    border-radius: 50%;
    margin-right: 1rem;
}

.articleAvatar .articleAvatarInfo {
    line-height: 1.5;
}

.articleAvatar .articleAvatarName {
    font-weight: 700;
}

.articleAvatar .articleAvatarDate {
    color: var(--grayish-blue);
}

.articleAvatar .articleAvatarShare {
    margin-left: auto;
    background-color: var(--light-grayish-blue);
    padding: 0.8em;
    border-radius: 10rem;
}



/*-- RESPONSIVE --*/

@media screen and (max-width: 600px) {
    .articleContent h1 {
        font-size: 1.6rem;
    }

    .article {
        flex-direction: column;
    }

    .articleImg {
        width: 100%;
        border-radius: 1rem 1rem 0 0;
    }

    .articleContent {
        width: 80.5%;
    }
}