:root{
  --background-color: #FFFFFF;
  --surface-color:#F5F5F5;
  --skeleton-color:#D9D9D9;
  --shape-transparency:rgba(255, 255, 255, 0.56);

  --text-color-primary:#313131;
  --text-color-secondary:#6C6C6C;
  
  --font-family: 'Poppins', sans-serif;
  --font-lg:2rem;
  --font-md:0.875rem;
  --font-sm:0.75rem;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-bold:700;
}

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

} 

body{
 font-family:var(--font-family);
  background-color:var(--background-color);
  color:var(--text-color-secondary);
  font-size:var(--font-md);
}

header{
  display:flex;
  justify-content:space-between;
  padding:1.25rem 2rem;
  background-color:var(--surface-color);
}

header ul{
  display:flex;
  align-items:center;
  list-style:none;
  gap: 1rem;
  font-size:var(--font-sm);

}

a{
  text-decoration:none;
  color:var(--text-color-secondary);
   font-size:var(--font-sm);
}

.profile{
  display:flex;
  justify-content:space-between;
  padding:2rem;
  align-items:center;
  background-color:var(--surface-color);

}

.profile-info{
  display:flex;
  gap:2rem;
}

.profile-info img.avatar{
  width: 11rem;
  height: 11rem;

}

.profile-details{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  width: 24rem;
  height: 10.5rem;
  font-size:var(--font-sm);

}
h1{
  font-size:var(--font-lg);
  color:var(--text-color-primary);
  font-weight:var(--font-weight-bold);
}
.stats{
  display:flex;
  flex-direction:column;
  gap:1rem;
  width: 17.5rem;
  height: 6.5rem;
  font-size:var(--font-sm);

}

.stat{
  display:flex;
  gap:0.5rem;

}

.gallery{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  padding:1.5rem 2rem;
  justify-content:center;
}
.gallery img{
  width: 17.875rem;
  height: 17.875rem;
}

footer{
  padding:1.5rem 4.0625rem;
  display:flex;
  justify-content:space-between;
}

.footer-links{  
  
  display:flex;
  gap:1rem;

}

@media (max-width: 80rem){
  header{
    padding:1rem 1.25rem;
  }

  header ul{
    gap:0.75rem;
  }

  .profile{
    flex-direction:column;
    align-items:flex-start;
    gap:1.5rem;
    padding:1.5rem 1.25rem;
  }

  .profile-info{
    align-items:center;
    gap:1.25rem;
  }

  .profile-info img.avatar{
    width:7.5rem;
    height:7.5rem;
  }

  .profile-details{
    width:auto;
    height:auto;
    max-width:35rem;
  }

  .stats{
    flex-direction:row;
    flex-wrap:wrap;
    width:auto;
    height:auto;
    gap:0.75rem 1.5rem;
  }

  .gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap:1rem;
    padding:1.25rem;
  }

  .gallery img{
    width:100%;
    height:auto;
    aspect-ratio:1;
    object-fit:cover;
  }

  footer{
    flex-wrap:wrap;
    gap:0.5rem 1rem;
    padding:1.25rem;
  }
}

@media (max-width: 40rem){
  header{
    align-items:center;
  }

  header nav li:nth-child(2),
  header nav li:nth-child(3){
    display:none;
  }

  .profile-info{
    align-items:flex-start;
    flex-direction:column;
    gap:1rem;
  }

  .profile-info img.avatar{
    width:6rem;
    height:6rem;
  }

  h1{
    font-size:1.5rem;
  }

  .stats{
    flex-direction:column;
    gap:0.625rem;
  }

  footer{
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
  }

  .footer-links{
    justify-content:center;
  }

  .footer-links{
    flex-wrap:wrap;
    gap:0.25rem 1rem;
  }
}