* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    font-family: 'Poppins', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: hsl(0, 0%, 98%);
}

.header{
    margin: 7.5rem auto;
    padding: 0 3rem;
    max-width: 525px;
    text-align: center;
}
.header-title {
    text-align: center;
    color: hsl(234, 12%, 34%);
    font-weight: 200;
    font-size: 2.5rem;
    margin: 0;
}

.header-subtitle {
    text-align: center;
    color: hsl(234, 12%, 34%);
    font-weight: 600;
    font-size: 2.5rem;
    margin: 0;
}

.header-paragraph {
    text-align: center;
    color: hsl(229, 6%, 66%);
    font-weight: 400;
    font-size: 1.5rem;
}

.cards{
    margin: 7.5rem 8% 0;
}
.card-supervisor{
    border-radius: 8px;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(180, 62%, 55%);
}
.card-team-builder{
    border-radius: 8px;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(0, 78%, 62%);
}

.card-karma{
    border-radius: 8px;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(34, 97%, 64%);
}
.card-calculator{
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(212, 86%, 64%);
}
.card-title {
    margin: 0;
    font-size: 2rem;
    color: hsl(234, 12%, 34%);
}
.card-paragraph {
    margin: 0;
    font-size: 1.3rem;
    color: hsl(229, 6%, 66%);
}


.card-image {
    padding-top: 3rem;
    display: flex;
    justify-content: right;
}

.attribution {
    margin-top: 5rem;
    font-size: 1rem; 
    text-align: center;
    font-weight: 300;
}

.attribution a {
    font-weight: 600;
    text-decoration: none;
    color: hsl(228, 45%, 44%); 
}

@media (min-width: 680px) {
    .header-paragraph {
        font-size: 1.4rem;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 3rem;       
    }
}


@media (min-width: 1250px) {
    .header-paragraph {
        font-size: 1.3rem;
    }
    
    .cards {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas: 
        "start mid1 end"
        "start mid2 end";       
    }

    .card-supervisor  {
        grid-area: start;
        align-self: center;
    }

    .card-team-builder {
        grid-area: mid1;
    }
    .card-karma {
        grid-area: mid2;
    }
    .card-calculator {
        grid-area: end;
        align-self: center;
    }

}