body {
    font-family: "Outfit", sans-serif;
    color: hsl(234, 12%, 34%);
    background-color: #F6F5F6;
}

.box {
    width: 280px;
    padding: 25px;
    /*border: solid 1px black;*/
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    background: white;
}

.box1 {
    grid-area: supervisor;
    border-top: 4px solid hsl(180, 62%, 55%);
    margin-right: -220px;
}

.box2 {
    grid-area: team-builder;
    border-top: 4px solid hsl(0, 78%, 62%);
    margin-bottom: -70px;
}

.box3 {
    grid-area: karma;
    border-top: 4px solid hsl(0, 78%, 62%);
    margin-top: -120px;
}

.box4 {
    grid-area: calculator;
    border-top: 4px solid hsl(212, 86%, 64%);
    margin-left: -220px;
}

.box-title {
    font-size: 18px;
    font-weight: bold;
}

.container {
    display: grid;
    grid-template-areas:
        ".    team-builder   ."
        "supervisor .      calculator"
        ".    karma          .";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
    justify-items: center;
    align-items: center;
    margin-top: 60px;
}

svg {
    float: right;
}

.upper {
    text-align: center;
}