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

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap");

:root {
    --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%); 
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'Manrope', sans-serif;
    background-color: var(--light_grayish-blue);
    padding: 3em;
    box-sizing: border-box;
    min-height: 100vh;
    display: grid;
    place-items: center;
}

/*  Main Card Styling */

.card {
    width: 75em;
    margin: 0 auto;
    border-radius: 2em;
}

.card__container {
    display: flex;
}

/*  Card Image Styling   */

.card-img__wrapper {
    width: 30em;
    height: 28em;
}

.card-img {
    height: 100%;
    border-radius: 1em 0 0 1em;
}

/*  Card Text Styling    */

.card-info__container {
    background-color: white;
    border-radius: 0 1em 1em 0;
}

.card-info__title {
    color: var(--dark_grayish_blue);
    margin: 2em 2em 0;
}

.card-info__desc {
    color: var(--desaturated_dark_blue);
    font-size: 1.2rem;
    margin: 1em 3.2em 0;
}

/*  Profile Styling  */

.card-profile__container {
    display: flex;
    margin: 2em 3.8em 0em;
}

.card-profile__avatar {
    border-radius: 50%;
    height: 6.4em;
}

.card-user-info__name {
    color: var(--dark_grayish_blue);
    font-weight: 800;
}

.card-user-info__date {
    color: var(--desaturated_dark_blue);
}

.card-user-info__name,
.card-user-info__date {
    font-size: 1.2rem;
    margin: 0.5em 1em 0em;
}

/*  Share Button Pop Up  */

.card-share__wrapper {
    background-color: var(--light_grayish-blue);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3em;
    width: 3em;
    margin: 1.4em 1em 1em auto;
    position: relative;
}

.card-share__wrapper--active {
    display: flex;
}

.card-share-pop {
    display: flex;
    align-items: center;
    background-color: var(--dark_grayish_blue);
    width: 26em;
    height: 5.8em;
    border-radius: 1em;
    position: absolute;
    bottom: 6rem;
    right: -11.5rem;
    display: none;
}

.card-share-pop--active {
    display: flex;
}

.card-share-pop::after {
    position: absolute;
    content: "";
    bottom: -3.5rem;
    left: 50%;
    border: 20px solid transparent;
    border-top-color: var(--dark_grayish_blue);
    border-bottom: 0;
    margin: 0 0 2rem -2rem;
}

.card-share-pop__title {
    text-transform: uppercase;
    font-size: 1.8rem;
    color: var(--grayish_blue);
    letter-spacing: .4rem;
    margin: 1em 2.4rem;
}

.card-share-pop a {
    margin-right: 2.6em;
}

.pop-button__wrapper {
    background-color: var(--grayish_blue);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3em;
    width: 3em;
    margin: 1.4em 1em 1em auto;
    display: none;
}

.pop-button__wrapper--active {
    display: flex;
}

.attribution {
    font-size: 1.2rem;
    letter-spacing: .1em; 
    position: absolute;
    bottom: 2.8em;
}
.attribution a {
    color: var(--dark_grayish_blue);
    text-decoration: none;
    font-weight: 600;
}

@media screen and (min-width: 250px) and (max-width: 800px) {
    body {
        padding: 1.6em;
    }
    .card,
    .card__container {
        display: flex;
        flex-direction: column; 
    }
    .card {
        width: 35em;
        margin: 0 auto;
        box-shadow: 0 2px 10px rgb(156 156 156 / 10%);
    }
    .card-img__wrapper {
        width: 35em;
    }
    .card-img {
        width: 100%;
        border-radius: 1em 1em 0 0;
    }
    .card-info__container {
        border-radius: 0 0 1em 1em;
        margin-top: -.3em;
        padding-bottom: 1.2em
    }
    .card-share-pop {
        width: 35.2em;
        height: 8.8em;
        border-radius: 1em;
        bottom: -4rem;
        right: -4.8rem;
        border-radius: 0 0 1em 1em;
    }
    .card-share-pop::after {
        display: none;
    }
    .card-share-pop__title {
        margin: 1em 3.6rem;
    }
    .pop-button__wrapper {
        display: flex;
        margin: 0;
    }
}