body{
min-height: 130vh;
}
.firsthead_line{
  color: hsl(212, 6%, 44%);
  font-size: 40px;
  padding-bottom: 0px;
}
.secondhead_line{
  font-size: 40px;
  color: rgb(81, 79, 133);
  font-weight:600;
}
.headtext{
  font-size: 18px;
  width: 70vh;
  line-height: 1;
  justify-self: center;
  color: hsl(234, 12%, 34%);
}
.info{
  text-align: center;
  line-height: 0.5;
  padding-bottom: 10vh;
  padding-top: 10vh;
}
.card1,.card2,.card3,.card4{ 
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0px 1px 10px hsl(212, 86%, 64%);
  display: flex;
  max-width: 50vh;
  width: 35vh;
  min-height: 25vh;
  

}
.entirecard{
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 130vh;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}
.card4{
  border-top: solid 4px hsl(212, 86%, 64%);
}
.card3{
  border-top: solid 4px hsl(34, 97%, 64%);
}
.card2{
  margin-bottom: 20px;
  border-top: solid 4px hsl(0, 78%, 62%);
  margin-bottom: 30px;
}
.card1{
  border-top: solid 4px hsl(180, 62%, 55%);
}
.card1,.card4{
  height: 20vh !important;
}

.pic1,.pic2,.pic3,.pic4{
  object-fit: contain;
  width: 7vh;
  align-self: end;
}
.headtext1,.headtext2,.headtext3,.headtext4{
  font-weight: bold;
  font-size: larger;
  color: hsl(234, 12%, 34%);
}
.class1info,.class2info,.class3info,.class4info{
  margin-top: -15px;
  line-height: 0.1;
}
.detail1,.detail2,.detail3,.detail4{
  line-height: 1.3;
  color:hsl(212, 6%, 44%);
}
@media(max-width:700px){
  .entirecard{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

}