@font-face {
    font-family: Poppins;
    src: url("./fonts/Poppins-VariableFont_wght.otf");
    font-display: swap;
}
:root {
    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 62%, 55%);
    --orange: hsl(34, 97%, 64%);
    --blue: hsl(212, 86%, 64%);
    --dark-grey: hsl(234, 12%, 34%);
    --light-grey: hsl(210, 38%, 95%);
}
/* css reset  */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
}
ul[role='list'], ol[role='list'] {
  list-style: none;
}
html:focus-within {
  scroll-behavior: smooth;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}
input, button, textarea, select {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
/* css reset end */
}
body {
    min-height: 100vh;
    margin: 1rem auto;
    font-family: "Poppins";
    background-color: var(--light-grey);
    max-width: 23rem;
}
.center {
    text-align: center;
}
h1 {
    display: none;
}
.firsth2 {
    font-weight: 200;
}
.secondh2 {
    font-weight: 600;
    margin-bottom: 1rem;

}
p {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    font-weight: 200;
    padding-bottom: 1rem;
}
h3 {
  font-weight: 600;
}
.firstp {
text-align: center;
}
.card {
    background-color: white;
    margin: 1.6rem auto;
    border-radius: 5px;
    padding: 2rem 2rem 4rem;
    text-align: left;
    box-shadow: 0 0.2rem 0.75rem rgb(0, 0, 0, 0.18);
}
.card img {
    width: 3rem;
    float: right;
  
}
.supervisor {
     border-top: 5px solid var(--cyan);  
}
.team-builder {
     border-top: 5px solid var(--red);  
}  
.karma {
     border-top: 5px solid var(--orange);  
}  
.calculator {
     border-top: 5px solid var(--blue);  
}

@media (min-width: 48rem) {
  body {
    max-width: 75rem;
    margin: 0 auto;
    padding: 2rem;
  }
  .container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }
  .card-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 8rem);
    gap: 1rem;
    column-gap: 2rem;
    padding: 2rem;
    align-items: center;
    justify-content: center;
  }
  .supervisor {
    grid-column: 1 / 3;
    grid-row: 2 /3;
  }
  .team-builder {
    grid-column: 3 / 5;
  }
  .karma {
    grid-column: 3 / 5;
    grid-row: 3 / 4;
  }
  .calculator {
    grid-column: 5 / 7;
    grid-row: 2 / 3;
  }
}
.attribution {
     font-size: 11px; text-align: center; 
}
.attribution a {
       color: hsl(228, 45%, 44%); 
}