body {
  font-variant-numeric: oldstyle-nums;
}

.profile-picture {
  border-radius: 0.5rem;
}

.socials {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
}

.social-link {
  --size: 3rem;

  display: block;
  height: var(--size);
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  overflow: hidden;
  background: var(--bg-img) center / contain no-repeat;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.3s;
}

.social-link:hover {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}

.social-link__img {
  --brightness: 1.1;

  display: block;
  backdrop-filter: blur(calc(var(--size) / 3)) saturate(50%)
    brightness(var(--brightness));
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: calc(var(--size) / 4.5);
}

.social-link--linkedin .social-link__img,
.social-link--github .social-link__img {
  --brightness: 1.25;
}