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

:root {
  --font-size: 20px;

  --green: hsl(75, 94%, 57%);
  --grey-700: hsl(0, 0%, 20%);
  --grey-800: hsl(0, 0%, 12%);
  --grey-900: hsl(0, 0%, 8%);
  --white: hsl(0, 0%, 100%);

  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-md-1: 1.25rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  font-size: var(--font-size);
}

html,
body {
  height: 100%;
}

body {
  background-color: var(--grey-900);
  font-family: inter;
  min-height: 100vh;
}

body,
a {
  color: white;
  text-decoration: none;
}

main {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
  padding-inline: 1.5rem;
  width: 100%;
}

.profile-card {
  background-color: var(--grey-800);
  border-radius: 1rem;
  container-type: inline-size;
  display: grid;
  gap: var(--spacing-md);
  justify-self: center;
  padding: var(--spacing-lg);
  width: clamp(15rem, 100%, 19rem);

  .profile-card__header {
    display: grid;
    font-size: clamp(14px, 6cqw, 18px);
    gap: var(--spacing-md);
    text-align: center;

    .profile-card__image {
      justify-self: center;
      border-radius: 100%;
      width: clamp(80px, 30cqw, 90px);
    }

    .profile-card__user-details {
      display: grid;
      gap: var(--spacing-xs);

      .profile-card__name {
        font-weight: 600;
      }

      .profile-card__location {
        color: var(--green);
        font-size: 0.6em;
        font-weight: 600;
        letter-spacing: 0.5px;
      }
    }

    .profile-card__description {
      font-size: 0.7em;
      font-weight: 400;
      letter-spacing: 0.5px;
    }
  }

  .profile-card__social-media {
    font-size: clamp(14px, 5.34cqw, 16px);

    .social-media__list {
      display: grid;
      gap: var(--spacing-sm);
      list-style-type: none;

      .social-media__item {
        background-color: var(--grey-700);
        border-radius: 0.5rem;
        padding-block: var(--spacing-sm);
        text-align: center;
        cursor: pointer;

        &:hover {
          background-color: var(--green);
        }

        &:hover .social-media__link {
          color: var(--grey-800);
        }

        .social-media__link {
          font-size: 0.9em;
          font-weight: 500;
        }
      }
    }
  }
}