/*
### Primary

- Red: hsl(0, 78%, 62%)
- Cyan: hsl(180, 62%, 55%)
- Orange: hsl(34, 97%, 64%)
- Blue: hsl(212, 86%, 64%)

### Neutral

- Grey 500: hsl(234, 12%, 34%)
- Grey 400: hsl(212, 6%, 44%)
- White: hsl(0, 0%, 100%)

*/
:root{
    --Red: hsl(0, 78%, 62%);
    --Cyan: hsl(180, 62%, 55%);
    --Orange: hsl(34, 97%, 64%);
    --Blue: hsl(212, 86%, 64%);

    --Grey500: hsl(234, 12%, 34%);
    --Grey400: hsl(212, 6%, 44%);
    --White: hsl(0, 0%, 100%);

}


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body, html{
    height: 100%;
    width: 100%;
    padding: 10px;
}

body{
    justify-content: center;
    align-items: center;
}

.container{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.header{
    width: 100%;
    height: auto;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.container .header h2:first-of-type{
    font-weight: 200;
}

.container .header h2{
    color: var(--Grey500);
    font-weight: 600;
}

.container .header p{
    margin-top: 10px;
    max-width: 500px;
    font-size: 15px;
    color: var(--Grey400);
    margin: 0 auto;
}

.main{
    margin-top: 20px;
    width: 85%;
    height: auto;
    max-width: 950px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    position: relative;
    justify-content: center;
}

.main .card{
    width: 300px;
    height: 200px;
    padding: 20px;
    text-align: left;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 5px 8px var(--Grey400);
}

.main .card h3{
    font-weight: 600;
    color: var(--Grey500);
}

.main .card p{
    font-weight: 200;
    font-size: 13px;
    color: var(--Grey500);
}

.main .card div{
    width: 100%;
    height: 100%;
    display: flex;
    align-items:flex-end;
    justify-content: end;
}

.card-supervisor{
    border-top: 5px solid var(--Cyan);
    position: absolute;
    left: 0;
}

.card-teambuilder{
    border-top: 5px solid var(--Red);
}

.card-karma{
    border-top: 5px solid var(--Orange);
}

.card-calculator{
    border-top: 5px solid var(--Blue);
    position:absolute;
    right: 0;
}

@media (max-width:1080px){
    
    .main{
        justify-content: initial;
    }

    .card-calculator{
    border-top: 5px solid var(--Blue);
    position:initial;
    }
    
    .card-supervisor{
    border-top: 5px solid var(--Cyan);
    position:initial;
    }

}