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

:root{
  --grey1: #595959;
  --grey2: #7F7F7F;
  --grey3: #A5A5A5;
  --grey4: #CCCCCC;
  --white: #F2F2F2;
  --margin: 12px;
  --green: #07a407;
  --light-green: #90e690;
  --blue : rgba(120, 120, 255, 0.966);
}

body{
  min-height: 100vh;
  width: 100%;
  background-color: var(--grey4);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:"inter", sans-serif;
}

.profile-card{
  background-color: var(--white);
  height: max-content;
  max-width: 300px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  position: relative;
}



.avatar-wrapper{
  width: 100%;
  height: 300px;
  transition: .3s ease-out;
}
.avatar-wrapper:hover {
  cursor: pointer;
  transform: scale(.99);
}
.avatar-wrapper img{
  object-fit: cover;
  width: 100%;
  max-width: 300px;
  height: 100%;
  transition: .3s ease-in-out;
}
.avatar-wrapper img:hover{
  border-radius: 1rem;
}

.username{
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  margin: 10px 5px;
  cursor: pointer;
  transition: .5 ease;
}
.username .user-tick{
  background-color: var(--green);
  border-radius: 100%;
  border: none;
  width: 50px;
  height: 20px;
}
.username:hover{
  transition: .3s ease;
}


p{
  font-size: .75rem;
  margin-left: 10px;
  color: var(--grey1);
  font-weight: 500;
}
.about{
  border-left: 2px solid #cccccc54;
  display: inline-block;
  margin-left: 10px;
  height: 90px;
  margin-block: 5px;
}

.icon-group{
  display: flex;
  align-items: center;
  font-size: .8rem;
  font-weight: 700;
  margin: 0px 9px 0px;
  cursor: pointer;
  gap: 10px;
}

.icon-group .group{
  display: flex;
  align-items: center;
  font-size: .6rem;
  color: #595959;
  transition: .1s ease;
  gap: 2px;
}
.icon-group .group .digits{
  margin: 0;
  padding: 0;
  font-weight: 500;
  font-size: .6rem;
  z-index: 3;
}

.icon-group span lord-icon {
  color: var(--grey1);
  vertical-align: middle;
  opacity: .1 !important;
}


ul{
  font-size: .65rem;
  font-weight: 600;
  margin: 5px;
  padding: 0;
  color: var(--grey1);
}

ul li {
  font-size: .6rem;
  color: var(--grey2);
  margin-left: var(--margin);
  font-weight: 500;
}
ul li::marker{
  color: var(--grey4);
}

.socials{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 9px;
  cursor: pointer;
  transition: .3s ease-in-out;
  position: relative;
}
.socials span {
  font-size: .7rem;
  transition: .3s ease;
  color: var(--grey2);
}
.socials a:hover{
  transition: .3s ease;
  transform: scale(1.2);
  font-weight: 700;
}


.socials span:hover > i{
  transition: .3s ease;
  opacity: 0;
  transform: translateX(5px);
}


.socials i {
  transform: scale(.9);
  z-index: -1;
}

.socials button{
  background-color: var(--light-green);
  color: var(--green);
  border: none;
  padding: 5px;
  font-weight:500;
  transition: .3s ease-out;
  height: 30px;
  width: 80px;
  position: absolute;
  right: 0px;
  font-weight: 600;
}
.socials button:hover{
  border-radius: .2rem;
  cursor: pointer;
}

.socials button:active{
  transform: scale(1.1);
}



.time {
  font-size: .4rem;
  font-weight: 500;
  color: var(--grey1);
  opacity: .5;
}

.socials a {
  text-decoration: none;
  color: var(--grey2);
}