members.css

html, body, .groups, .members {
    height: 100%;
    width: 100%;
    background: #262626;
}
.members-title{
  color: #f24405;
  font-size: 3em;
  font-weight: bold;
  text-align: center;
  margin-top: 3em;

}
.member {
  margin-bottom: 20px;
  /* background: linear-gradient(220deg,#f24405,#592202 70%); */
  background: #262626;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.767);
  text-align: center;
  border: 1px solid transparent;
  height: 90%;
  margin-left: 3em;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
}

@media screen and (max-width: 756px) {
  .member{
    margin-left: 0;
  }
}

.member:hover{
  transition: .3s;
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  animation: bord 1.7s forwards linear;
  -webkit-animation: bord 1.7s forwards linear;
}

@keyframes bord {
  0%{
    border-left: 1px solid #f24405;
  }
  25%{
    border-top: 1px solid #f24405;
  }
  50%{
    border-right: 1px solid #f24405;
  }
  100%{
    border-bottom: 1px solid #f24405;
    border-right: 1px solid #f24405;
    border-left: 1px solid #f24405;
    border-top: 1px solid #f24405;
  }
}

.avatar{
  border-radius:50%;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  -ms-border-radius:50%;
  -o-border-radius:50%;
}

.chef .member:first-child{
  background: url(./assets/img/cards/card6.png) center;
}

.trainers .member-cont:nth-child(2) .member{
  background: url(./assets/img/cards/card5.png) center;
}

.trainers .member-cont:nth-child(3) .member{
  background: url(./assets/img/cards/card4.png) center;
}

.trainers .member-cont:nth-child(4) .member{
  background: url(./assets/img/cards/card2.png) top;
}

.trainers .member-cont:first-child .member{
  background: url(./assets/img/cards/card3.png) right;
}

.member img {
  margin: -1px -1px -2px -1px;
  width: 50%;
  padding: 0;
  position: relative;
  top: -15%;
  left: 25%;
  /* border-radius: 50%; */
}
.member:hover img{
  transition: .6s;
  border: .1px solid #f2440577;
  -webkit-transition: .6s;
  -moz-transition: .6s;
  -ms-transition: .6s;
  -o-transition: .6s;
}

.member .member-content {
  padding: 0 20px 30px 20px;
  position: relative;
  bottom: 0%;
}
.member h4, .member .h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
  color: whitesmoke;
}
.member span {
  font-style: italic;
  display: block;
  font-size: 16px;
  /* color: #e6e6e6; */
  color:cornflowerblue;
}
.member p {
  padding-top: 10px;
  font-weight: 500;
  color: rgb(206, 206, 206);
}
.trainer {
    padding-top: 15px;
    border-top: 1px solid #eef0ef;
}
.trainer .trainer-profile img {
max-width: 50px;
border-radius: 50px;
}
.trainer .trainer-profile span {
padding-left: 10px;
font-weight: 600;
font-size: 16px;
color: #888;
}
.trainer .trainer-rank {
font-size: 16px;
color: #888;
}
.trainer .trainer-rank .users-icons::after {
content: "✅";
}