avatars.css

.main{
    padding: 34px;
}
.heading{
    margin-top: 8px;
    text-align: center;
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(to right, #30cfd0 20%, #330867 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}
.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 13px;
}
.row{
    /* max-width: 30vw; */
    /* max-height: 80vh; */
    border: 2px solid rgb(17, 15, 59);
    border-radius: 10px;
    padding: 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.row img{
    max-width:25vw;
    max-height: 40vh;
    border: 10px solid rgb(29, 90, 156);
    border-radius: 7px;
}
.row h1{
    color: #095555;
    
}
.row button{
    color: white;
    /* border-image: linear-gradient(to right,#3acfd5 0%,#3a4ed5 100% )1;
    border-radius: 15px;
    border-width: 4px;
    border-style: solid; */
    border: 3px solid aqua;
    border-radius: 15px;
    background-color: rgb(7, 8, 74);
    padding: 10px;
    box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
}
.row button:hover{
    background-image: linear-gradient(144deg,
    #af40ff,
    #5b42f3 50%,
    #00ddeb);
    border: 2px solid rgb(7, 8, 74);
    cursor: pointer;
}
.row2 img{
    margin-top: 34px;
}
.row2 h1{
    margin-top: 43px;
}



 /* tablet  Responsive Styles */
 @media (max-width: 1100px) {
    .header {
      position: unset;
    }
    .navigation {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .navigation .navbar {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-top: 20px;
      margin-right: 0 !important;
    }
    .navbar .navbar-up {
      gap: 20px;
      display: flex;
    }

    .navigation .navbar a {
      margin: 10px 0;
      font-size: 12px;
    }
    .navigation .homeDiv #homeBtn {
      min-width: 30px;
    }
    .navigation .homeDiv #homeBtn a {
      font-size: 14px;
    }
    .footer-content {
      flex-direction: column;
      align-items: center;
      
      margin: 0px 40px 0px 0px;
    }
    .footer-section p {
      font-size: 14px;
    }
    .social-icons a i {
      font-size: 22px;
      margin: 5px;
    }
    
    .footer-section {
      margin-bottom: 0;
    }
    .creatorDiv {
      margin-top: 20px;
      margin-right: 30px;
    }
    .creatorDiv p {
      font-size: 12px;
    }
    .searchForm {
      display: flex;
      margin: 20px 0px -10px 35px;
    }
    .searchInput {
      width: 180px;
      height: 30px;
      padding: 5px 12px;
      border-radius: 50px;
      border: 0;
      font-size: 12px;
      margin-bottom: 20px;
    }

    .searchForm button {
      top: 0px;
      right: 45px;
      margin-bottom: 20px;
    }
    .searchForm button i {
      padding: 9px 15px;
      font-size: 15px;
    }
  }
  /* Mobile Responsive Styles */
  @media (max-width: 668px) {
    .header {
      position: unset;
      margin-right: 0;
    }
    .navigation {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .navigation .navbar {
      display: flex;
      flex-direction: column;
      margin-top: 20px;
    }
    .navigation .navbar a {
      margin: 0;
      font-size: 12px;
    }
    .navbar .navbar-up {
      display: flex;
      flex-direction: column;
    }

    .navigation .homeDiv #homeBtn {
      min-width: 80px;
    }
    .navigation .homeDiv #homeBtn a {
      font-size: 14px;
    }
    .footer-content {
      flex-direction: column;
      align-items: center;
      margin: 0px 0px 0px 0px;
    }
    .footer-section p {
      font-size: 14px;
    }
    .social-icons a i {
      font-size: 22px;
      margin: 5px;
    }
    .footer-section {
      margin-bottom: 0;
    }
    .creatorDiv {
      margin-top: 20px;
      margin-right: 30px;
    }
    .creatorDiv p {
      font-size: 12px;
    }
    .searchForm {
      display: flex;
      margin: 20px 0px -10px 35px;
    }
    .searchInput {
      width: 280px;
      height: 30px;
      padding: 5px 12px;
      border-radius: 50px;
      border: 0;
      font-size: 12px;
    }

    .searchForm button {
      top: 0px;
      right: 45px;
    }
    .searchForm button i {
      padding: 9px 15px;
      font-size: 15px;
    }
  }

  @media (max-width: 768px) {
    .footer-content {
      flex-direction: column;
      align-items: center;
      padding: 0 20px;
      
    }
  
    .footer-section {
      text-align: center;
      margin: 15px 0;
      
    }
    .container{
        grid-template-columns: 1fr;
    }
   
  }