body{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  background-color: hsl(0, 0%, 98%);
}

main {
  padding: 25px;
  font-family: poppins;
}

p{
  font-weight: 400;
}

h1 {
  font-size: clamp(1rem, 6vw,2rem);
  font-weight: 200;
}

p{
  font-size: clamp(13px, 4vw, 17px);
  color: hsl(212, 6%, 44%);
}

h2 { 
  font-size: clamp(0.8rem, 5vw, 1.5rem);
}

img {
  display: block;
  margin-left: auto;
}

.darkgray {
  color: hsl(234, 12%, 34%)
}

.mb-50px {
  margin-bottom: 50px;
}

.card {
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: 11px;
  margin-bottom: 40px;
  padding: 10px;
}

.bt-cyan{
  border-top: 4px solid hsl(180, 62%, 55%);
}

.bt-red {
  border-top: 4px solid hsl(0, 78%, 62%);
}

.bt-orange {
  border-top: 4px solid hsl(34, 97%, 64%);
}

.bt-blue {
  border-top: 4px solid hsl(212, 86%, 64%)
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}



@media (min-width: 500px) {
    main {
      padding: 5rem 5rem 0;
    }

    h1{
      margin: auto;
      max-width: 400px;
    }
    #subtitle {
      max-width: 600px;
      text-align: center;
      margin: 0 auto 50px;
    }
    
    #card-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 50px;
    }

    .card{
      margin-bottom: 0;
    }

    .card1{
      grid-column: 1;
      grid-row: 1/3;
      align-self: center;
    }

    .card2 {
      grid-column: 2;
      grid-row: 1;
    }
    .card3{
      grid-column: 2;
      grid-row: 2;
    }

    .card4 {
      grid-column: 3;
      grid-row: 1/3;
      align-self: center;
    }

}