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

:root {
    font-size    : 15px;
    --dark-blue  : hsl(233, 47%, 7%);
    --desat-blue : hsl(244, 38%, 16%);
    --soft-violet: hsl(277, 64%, 61%);
    --main-white : hsl(0, 0%, 100%);
    --p-white    : hsla(0, 0%, 100%, 0.75);
    --stat-white : hsla(0, 0%, 100%, 0.6);
    --font-1     : 'Inter', sans-serif;
    --font-2     : 'Lexend Deca', sans-serif;
}


html {
    margin         : 0;
    height         : 100vh;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.card {
    width           : 80vw;
    text-align      : center;
    background-color: var(--desat-blue);
    border-radius   : 10px;
    margin-top      : 1rem;
    margin-bottom   : 1rem;
    box-shadow      : 0px 2px 8px var(--soft-violet);
    font-family     : var(--font-1);
    overflow: hidden;
}

.background {
    width           : 100%;
    height          : 200px;
    background-color: rgba(217, 144, 252, 0.9);
}

.background-img {
    background     : url(../images/image-header-mobile.jpg);
    background-size: cover;
    width          : 100%;
    height         : 100%;
    mix-blend-mode : multiply;
}

.cite {
    color : var(--main-white);
    width : 80%;
    margin: 1rem auto;
}

.give_value {
    color: var(--soft-violet);
}

.description {
    color : var(--p-white);
    width : 80%;
    margin: 1rem auto;
}

.attribution {
    font-size : 11px;
    text-align: center;
}

.stat {
    margin-bottom: 1rem;
}

.stats_container {
    color  : var(--main-white);
    padding: 1rem 1rem;
}

.stat_value {
    color      : white;
    font-weight: 700;
    font-size  : 1.5rem;
}

.stat_description {
    font-size  : 12px;
    font-family: var(--font-2);

}

.attribution a {
    color: hsl(228, 45%, 44%);
}

@media (min-width: 720px) {
    .card {
        width         : 95%;
        margin        : 0 auto;
        display       : flex;
        flex-direction: row-reverse;
        overflow: hidden;
    }

    .background {
        height          : 360px;
    }
    .background-img {
        background     : url(/images/image-header-desktop.jpg);
        background-size: cover;
    }

    .stats_container {
        display        : flex;
        justify-content: space-around;
    }

    .principal {
        display        : flex;
        flex-direction : column;
        justify-content: center;
    }

    .cite {
        font-size    : 2rem;
        margin-bottom: 2rem;
    }
}