html{
   width: 100%;
   height: 100%;
   font-size: 62.5%;
   font-family: 'poppins', sans-serif;
}
*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body{
   height: 100%;
   width: 100%;   
}
header{
   width: 32rem;
   height: 15rem;
   text-align: center;
   margin: 5rem auto 4rem auto;
}

header h1{
   font-size: 2.5rem;
   margin-bottom: 1rem;
   color: hsl(212, 6%, 44%);
   font-weight: 200;
   line-height: 140%;
   letter-spacing: 0.025rem;
}
header strong{
   display: block;
   color: hsl(234, 12%, 34%);
   font-weight: 600;
}
header p{
   color: hsl(210, 7%, 59%);
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 120%;
   letter-spacing: 0.01rem;
}
main{
   display: grid;
   gap: 3rem;
   margin-bottom: 3rem; 
}

.card{
   width: 32rem; 
   height: 24rem;
   padding: 2rem;
   border-radius: 0.8rem;
   background-color:hsl(0, 0%, 100%);
   position: relative;
   overflow: hidden;
   margin: 0 auto 0 auto;
   box-shadow:  0px 16px 30px -16px rgba(85, 84, 84, 0.3);
}
.card::before{
   content: " ";
   height: 0.4rem;
   width: 100%;
   background-color: aqua;
   position: absolute;
   top: 0;
   left: 0;  
}
.card h2{
   font-size: 1.7rem;
   line-height: 160%;
   margin-bottom: 0.5rem;
   font-weight: 600;
   margin-top: 1rem;
   color:  hsl(234, 12%, 34%);
}
.card p{
   font-size: 1.3rem;
   font-weight: 400;
   line-height: 160%;
   color: hsl(234, 12%, 34%);
}
.card img{
   width: 6.5rem;
   height: 6.5rem;
   position: absolute;
   bottom: 4rem;
   right: 3rem;
}
#supervisor::before{
   background-color:  hsl(180, 62%, 55%);
}
#team-builder::before{
   background-color: hsl(0, 78%, 62%);
   
}
#karma::before{
   background-color: hsl(34, 97%, 64%); 
}
#calculator::before{
   background-color:hsl(212, 86%, 64%);
} 
.attribution { 
   font-size: 1.1rem;
   text-align: center;
}
.attribution a {
   color: hsl(150, 90%, 27%);
}


@media (min-width: 600px){
   header{
      width: 53rem;
      height: 18rem;
      margin: 8.5rem auto 3rem auto;  
   }
   header h1{
      font-size: 3.5rem;
   }
   main{
      grid-template-columns: auto auto;
      grid-template-rows: repeat(3, auto);
      width: fit-content;
      height: fit-content;
      margin: 0 auto 3rem auto;
      gap: 3rem;
   }
   #supervisor{
      grid-area: 1/1/2/3;  
   }
   #team-builder{
      grid-area: 2/1/3/2;
   }
   #karma{
      grid-area: 2/2/3/3;
   }
   #calculator{
      grid-area: 3/1/4/3;
   }
}


@media (min-width: 1200px){
   header{
      margin: 10rem auto 4rem auto;
    }
    header h1{
      font-size: 4rem ;
    }

   main{
      margin: 0rem auto 4rem auto;
      grid-template-columns: repeat(3, auto);
      grid-template-rows: auto auto;
      width: fit-content;
      height: fit-content;
      align-items: center;
   }
   .card{
      width: 35rem; 
   }
   .card p{
      width: 28rem;
      line-height: 180%;
      letter-spacing: 0.05rem;
   }
   #supervisor{
      grid-area: 1/1/3/2;  
   }
   #team-builder{
      grid-area: 1/2/2/3;
   }
   #karma{
      grid-area: 2/2/3/3;
   }
   #calculator{
      grid-area: 1/3/3/4;
   }
}