@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
}
section {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
/* =========
   header 
   =========
 */
header {
  text-align: center;
  padding: 1rem 0;
  line-height: 2;
}
header h2 {
  font-size: 1.4rem;
  color: hsl(212, 6%, 44%);
  opacity: 0.7;
  font-weight: 400;
}
header h1 {
  font-size: 1.45rem;
  color: hsl(234, 12%, 34%);
  font-weight: 600;
}
header p {
  font-size: 0.7rem;
  color: hsl(212, 6%, 44%);
  font-weight: 400;
  opacity: 0.7;
}
/* =========
   header 
   =========
 */
/* =========
    main
    =========
 */
main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1.6rem;
}

main .card {
  max-width: 250px;
  box-shadow: 2px 8px 8px hsl(212, 6%, 44%), -1px 0px 3px hsl(212, 6%, 44%);
  padding: 1rem;
  border-radius: 3px;
}
.supervisor {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  border-top: 3px solid hsl(180, 62%, 55%);
}
.team-builder{
    grid-column: 2;
    grid-row: 1;
    border-top: 3px solid hsl(0, 78%, 62%);
}
.karma {
    grid-column: 2;
    grid-row: 2;
    border-top: 3px solid hsl(34, 97%, 64%);
}
.calculator{
    grid-column: 3;
    grid-row: 1/ span 2;
    align-self: center;
    border-top: 3px solid hsl(212, 86%, 64%)
}
main .text h3 {
  font-size: 1rem;
  color: hsl(234, 12%, 34%);
  font-weight: 600;
}
.card .logo {
  margin-top: 1.6rem;
  display: flex;
   justify-content: end;
}
main .logo img {
  width: 35px;
}
main .text p {
  font-size: 0.7rem;
  color: hsl(212, 6%, 44%);
}
/* =========
    main end
    =========
 */
 /* ========
    footer 
    ========
 */
.attribution {
  font-size: 11px;
  text-align: center;
  color: hsl(212, 6%, 44%)
}
.attribution a {
  color: hsl(228, 45%, 44%);
}
 /* ========
    footer end
    ========

/* Responsive */
@media(max-width: 630px){
    main{
       display: block;
    }
    section{
        padding: 0.5rem;
    }
    .card{
        margin: 1rem 0;
        width: 300px;
    }
}