:root {
  --gray-900: rgb(20, 20, 20);
  --gray-800: rgb(31, 31, 31);
  --gray-700: rgb(51, 51, 51);
  --green: rgb(196, 248, 42);
  --white: rgb(255, 255, 255);

  --space-xxl: 40px;
  --space-xl: 24px;
  --space-lg: 16px;
  --space-md: 12px;
  --space-sm: 8px;
  --space-xs: 4px;
}

.no-margin {
  margin: 0;
}

body {
  height: 100vh;
  background-color: var(--gray-900);
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile {
  background-color: var(--gray-800);
  color: var(--white);
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--space-xl);
  border-radius: var(--space-md);
  box-sizing: border-box;
  padding: clamp(var(--space-xl), 7.5vw, var(--space-xxl));
  width: min(87.2vw, 28.5rem);
}

.profile__picture {
  width: 88px;
  border-radius: 50%;
  overflow: hidden;
}
.profile__picture img {
  width: 100%;
}

.name-location {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--space-xs);
}

.links {
  display: flex;
  flex-flow: column;
  gap: var(--space-lg);
  width: 100%;
}

.button {
  all: unset;
  cursor: pointer;
  background-color: var(--gray-700);
  text-align: center;
  padding: var(--space-md);
  border-radius: var(--space-sm);
  transition: background-color 0.3s ease-in-out;
}

.button:hover {
  color: var(--gray-700);
  background-color: var(--green);
}

.button:focus {
  color: var(--gray-700);
  background-color: var(--green);
}

.green {
  color: var(--green);
}

.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  line-height: 150%;
}

.bold {
  font-weight: bold;
}

.font--preset-1 {
  font-size: 1.5rem;
}

.font--preset-2 {
  font-size: 0.875rem;
}

@media (width >= 1024px) {
  .profile {
    width: 24rem;
  }
}