@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');

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

body{
    font-family:'Poppins',sans-serif;
    background:hsl(0,0%,98%);
    color:hsl(234,12%,34%);
}

.container{
    max-width:1200px;
    margin:0 auto;
    padding:5rem 2rem;
}

/* HEADER */

.header{
    max-width:540px;
    margin:0 auto 4rem;
    text-align:center;
}

.header h1{
    font-size:2.3rem;
    font-weight:200;
    color:hsl(234,12%,34%);
}

.header h2{
    font-size:2.3rem;
    font-weight:600;
    color:hsl(234,12%,34%);
    margin-bottom:1rem;
}

.header p{
    color:hsl(229,6%,66%);
    font-size:15px;
    line-height:1.7;
}

/* CARDS */

.cards{
    display:grid;
    gap:2rem;
}

.supervisor,
.team-builder,
.karma,
.calculator{
    background:#fff;
    border-radius:8px;
    padding:2rem;
    box-shadow:0 15px 30px rgba(131,166,210,.2);
}

.supervisor{
    border-top:4px solid hsl(180,62%,55%);
}

.team-builder{
    border-top:4px solid hsl(0,78%,62%);
}

.karma{
    border-top:4px solid hsl(34,97%,64%);
}

.calculator{
    border-top:4px solid hsl(212,86%,64%);
}

.middle-cards{
    display:flex;
    flex-direction:column;
    gap:2rem;
}

.supervisor h3,
.team-builder h3,
.karma h3,
.calculator h3{
    margin-bottom:1rem;
}

.supervisor p,
.team-builder p,
.karma p,
.calculator p{
    color:hsl(229,6%,66%);
    font-size:15px;
    line-height:1.6;
}

.supervisor img,
.team-builder img,
.karma img,
.calculator img{
    display:block;
    margin-left:auto;
    margin-top:2rem;
}

/* MOBILE */

@media (max-width:1023px){

    .cards{
        grid-template-columns:1fr;
    }

}

/* DESKTOP */

@media (min-width:1024px){

    .cards{
        grid-template-columns:1fr 1fr 1fr;
        align-items:center;
        gap:2rem;
    }

    .middle-cards{
        display:flex;
        flex-direction:column;
        gap:2rem;
    }

    .supervisor,
    .calculator{
        align-self:center;
    }

    .supervisor,
    .team-builder,
    .karma,
    .calculator{
        min-height:250px;
    }

}

/* FOOTER */

.attribution{
    text-align:center;
    font-size:11px;
    margin:4rem 0 2rem;
}

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