@import "./typography.css";

/* --------------main-content img-box-------------- */

.image-box{
   display: inline-flex;
 overflow: hidden;
justify-content: center;
width: 80%;
   border: 1px solid var(--primary-color);
   height: 10vh;
   list-style: none;
}

.avatar-1{
   position: relative;
   color: white;
   padding: 8px 10px;
   width: 60px;
   border-radius: 5rem;
   top: 5px;
   right: 10px;
   margin: auto;
}

.avatar-2{
   position: relative;
   color: white;
   padding: 8px 10px;
   width: 60px;
   border-radius: 5rem;
   top: 5px;
   right: 30px;
   margin: auto;
}

footer{
    color: var(--background-color);
    position: relative;
    top: 5rem;
}

/* --------------for mobiles------------------- */

@media only screen and (max-width: 600px) {
   body{
      display:flex;
justify-content: center;
flex-wrap: wrap;
flex-shrink: 1;
      flex-direction: column;
   }
   .image-box{
      display: inline-flex;
    
    overflow: hidden;
   justify-content: center;
   width: 60%;
      border: 1px solid var(--primary-color);
      height: 10vh;
      list-style: none;
   }
   
   .avatar-img{
       margin-top: 5rem;
       width: 45px;
     
     border-radius: 5rem;
   }
   
 
}

/* ------different sizing images-------- */

.size-box::first-letter{
color: var(--primary-color);
}
.size-box>p{
font-size: 20px;
}

.image-box-size{
   display: inline-flex;
    
    overflow: hidden;
  
  justify-content: center;
 height: 7rem;
    border: 1px solid var(--primary-color);
    width: 80%;
   list-style: none;
}
.avatar-img-1{
   position: relative;
    color: white;
    padding: 8px 10px;
    width: 45px;
    border-radius: 5rem;
    top: 10px;
    right: -40px;
    margin: auto;
}
.avatar-img-2{
   position: relative;
   color: white;
   padding: 8px 10px;
   width: 55px;
   border-radius: 5rem;
   top: 10px;
   right: -18px;
   margin: auto;
}
.avatar-img-3{
   position: relative;
   color: white;
   padding: 8px 10px;
   width: 65px;
   border-radius: 5rem;
   top: 10px;
   right: 1px;
   margin: auto;
}
.avatar-img-4{
   position: relative;
   color: white;
   padding: 8px 10px;
   width: 85px;
   border-radius: 5rem;
   top: 10px;
   right: 20px;
   margin: auto;
}

/* ----------grouped avatar images------- */
.grouped-avatars::first-letter{
   color: var(--primary-color);
}

.grouped-avatars>p{
   font-size: 18px;

}

.image-grouped-avatars{
   display: inline-flex;
    
    overflow: hidden;
  
  justify-content: center;
  height: 5rem;
    border: 1px solid var(--primary-color);
    width: 80%;
      list-style: none;
}
.avatar-group-1{
   position: relative;
   color: white;
   padding: 8px 10px;
   width: 60px;
   border-radius: 5rem;
   top: 10px;
   right: -50px;
   margin: auto;
}
.avatar-group-2{
   position: relative;
   color: white;
   padding: 8px 10px;
   width: 60px;
   border-radius: 5rem;
   top: 10px;
   right: -30px;
   margin: auto;
}
.avatar-group-3{ 
   position: relative;
   color: white;
   padding: 8px 10px;
   width: 60px;
   border-radius: 5rem;
   top: 10px;
   right: -11px;
   margin: auto;
}
.avatar-group-4{
   position: relative;
   color: white;
   padding: 8px 10px;
   width: 60px;
   border-radius: 5rem;
   top: 10px;
   right: 10px;
   margin: auto;
}


/* -------card csss---------- */
.aside{
   width: 14%;
}

.card{
   font-size: 0.8rem;
}