/* Custom Properties */

:root {
  /* Colors */
  --color-grey-900: #141414;
  --color-grey-800: #1f1f1f;
  --color-grey-700: #333333;
  --color-green: #c4f82a;
  --color-white: #ffffff;

  /* Spacing */
  --spacing-500: 40px;
  --spacing-300: 24px;
  --spacing-200: 16px;
  --spacing-150: 12px;
  --spacing-100: 8px;
  --spacing-50: 4px;
}

/* Typography */

@font-face {
  font-family: "Inter";
  font-display: swap;
  src: url("../fonts/Inter.ttf");
}

.text-preset-1 {
  font-family: Inter;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 36px */
  color: var(--color-white);
}

.text-preset-2 {
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 21px */
  color: var(--color-white);
}

.text-preset-2-bold,
.profile-link {
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
  color: var(--color-green);
}

/* Main */

main {
  width: 100vw;
  min-height: 100vh;
  background-color: var(--color-grey-900);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Profile Card */

.profile-card {
  /* layout */
  width: 327px;
  display: flex;
  padding: var(--spacing-300);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-300);
  /* style */
  border-radius: 12px;
  background: var(--color-grey-800);
  text-align: center;
}

/* Profile Avatar */

.avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
}

/* Name Location */

.name-location {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-50);
}

/* Profile Links */

.profile-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-200);
  width: 100%;
}

.profile-link {
  /* layout */
  display: flex;
  padding: var(--spacing-150);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-100);
  align-self: stretch;
  /* style */
  border-radius: 8px;
  background-color: var(--color-grey-700);
  text-decoration: none;
  color: var(--color-white);
}

.profile-link:hover {
  color: var(--color-grey-700);
  background-color: var(--color-green);
}

/* Utility */

.no-display {
  display: none;
}

/* TABLET (768px and up) */
@media (min-width: 48em) {
  /* Profile Card */

  .profile-card {
    width: 384px;
    padding: var(--spacing-500);
  }
}