* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 244vh;
  background: linear-gradient(0.27turn, #acc8d4, #ebf8e1, #dfccb8);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.header {
  width: 100%;
}
#nav {
  height: 7.8em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
}

#nav p {
  text-align: center;
  line-height: 1.5em;
}

#nav h2 {
  padding: 1em;
}

.cards {
  width: 90%;
  height: 90%;
  margin-top: 3.9em;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit,minmax(180px,280px));
  justify-content: center;
  gap: 1.5em;
  

}

.card {
  height: 390px;
  border-radius: 0.5em;
  background-color: rgb(243, 243, 242);
  box-shadow: 13px 12px 40px rgb(20, 20, 20,0.9);
  transition: transform 0.5s ease-in-out;
}

.card:hover{
  border: 3px solid rgb(167, 167, 172);
  border-radius: 0.6em;
  transform: scale(1.04);
  cursor: pointer;;
}

.img_card {
  width: 100%;
  height: 50%;
    overflow: hidden;   
  
}

.img {
  width: 100%;
  height: 100%;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  transition: transform 0.9s ease-in-out;
}

.img:hover{
transform: scale(1.08);
}

.cardContainer {
  width: 100%;
  height: 50%;
  padding: 1em;
}

.elements {
  width: 100%;
  height: 46%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.elements p {
  font-size: 13.9px;
  color: rgb(88, 86, 86);
}

.items {
  width: 100%;
  height: 28%;
  margin-top: 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar {
  width: 43%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* transition: transform 0.3s ease-in-out; */

}

/* .avatar img:hover{
  transform: scale(1.2);
} */


.ava1 {
  width: 1.8em;
  background-color: antiquewhite;
  border-radius: 2em;
}

#btn {
  padding: 0.3em;
}

.content p {
  font-size: 12px;
  color: rgb(119, 116, 116);
}

.content h5 {
  color: blue;
}

/*for image*/
/*https://source.unsplash.com/300x200/?nature*/

/*avatars
<img src="https://api.dicebear.com/7.x/avataaars/svg">
*/