body {
    font-family: Poppins;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
h1 {
    margin-top: 30px;
    margin-bottom: 0;
    font-size: 2em;
    font-weight: 200;
    color: hsl(229, 6%, 66%);
    text-align: center;
}

h2 {
    margin: 0;
    font-size: 2em;
    font-weight: 400;
    color: hsl(234, 12%, 34%);
    text-align: center;
}

.description {
    text-align: center;
}

h3  {
    color: hsl(234, 12%, 34%);
}
div p {
    font-size: 15px;
    color: hsl(229, 6%, 66%);

}
.grid-box { 
    display: grid;
    grid-template-columns: repeat(3, 350px);
    grid-template-rows: repeat(4, 110px);
    grid-gap: 30px;
    justify-content: center;
}

.supervisor {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-top: 3px solid hsl(180, 62%, 55%);
    border-radius: 5px;
    padding-left: 30px;
    grid-column: 1;
    grid-row: 2 / span 2;
}

.teambuilder{
    box-shadow: 0 4px 8px 0 rgba(116, 111, 111, 0.2);
    border-top: 3px solid hsl(0, 78%, 62%);
    border-radius: 5px;
    padding-left: 30px;
    grid-column: 2;
    grid-row: span 2;

}

.karma {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-top: 3px solid hsl(34, 97%, 64%);
    border-radius: 5px;
    padding-left: 30px;
    grid-column: 2;
    grid-row: span 2;
}

.calculator {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-top: 3px solid hsl(212, 86%, 64%);
    border-radius: 5px;
    padding-left: 30px;
    grid-column: 3;
    grid-row: 2 / span 2;
}

img {
    position: relative;
    margin: 30px 30px 30px 230px;
}
.attribution { 
    font-size: 11px; 
    text-align: center;
    margin-top: 30px;
}
.attribution a { 
    color: hsl(228, 45%, 44%); 
}

@media screen and (max-width: 600px) {

        h1 {
            font-size: 12px;
            text-align: center;
        }
        h2 {
            font-size: 14px;
            text-align: center;
        }

        h3 {
            font-size: 11px;
        }
        
        div p {
            font-size: 10px;
        }
        .description p {
            font-size: 8px;
        }
    
        .grid-box {
            grid-gap: 50px;
        }

        .supervisor {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            width: 180px;
            height: 140px;
            grid-column: 2;
            grid-row: 1;
            margin: auto;
            padding-left: 20px;
            
        }
        
        .teambuilder{
            box-shadow: 0 4px 8px 0 rgba(116, 111, 111, 0.2);
            width: 180px;
            height: 140px;
            grid-column: 2;
            grid-row: 2;
            margin: auto;
            padding-left: 20px;
        }
        
        .karma {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            width: 180px;
            height: 140px;
            grid-column: 2;
            grid-row: 3;
            margin: auto;
            padding-left: 20px;
        }
        
        .calculator {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            width: 180px;
            height: 140px;
            grid-column: 2;
            grid-row: 4;
            margin: auto;
            padding-left: 20px;
        }
         div img {
            width: 30px;
            position: relative;
            margin: 20px 10px 0 130px;

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