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

:root{

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

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

.container{
    font-family: 'Poppins';
    font-weight: 200;
    font-size: 14px;

    padding: 18px;
    background-color: var(--White);

    width: 100dvw;
    height: 100dvh;
}

h1{
    text-align: center;
}

h1 span{
    font-weight: 200;
}

.bio{
    font-weight: 400;
    text-align: center;
}

section{
    padding: 24px;


    width: 360px;
    height: 240px;

    background-color: var(--White);
   
    border-radius: 8px;
}

.supervisor{
    box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.2), 0px -4px var(--Cyan) ;
}

.team-builder{
    box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.2), 0px -4px var(--Red) ;
}

.karma{
    box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.2), 0px -4px var(--Orange) ;
}

.calculator{
    box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.2), 0px -4px var(--Blue) ;
}

img{
    position:relative ;
    left: 70%;
    padding: 15px;
}

@media (min-width: 1000px){

    .container{
        font-size: 15px;
      
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-columns: repeat(3, 400px);
     }

     h1,
     .bio,
     .team-builder,
     .karma
     {
        grid-column: 2/2;
     }

   .supervisor{
    grid-column: 1/1;
        position: relative;
        top: 50%;
    }

    .calculator{
        grid-column: 3/3;
        position: relative;
        bottom: 50%;
    }

}

@media (max-width: 999px){
    .container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    section{
        margin-top: 30px;
    }

}