body {
  font-family: "Inter", sans-serif;
  margin: 0 auto;
  max-width: 50em;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

textarea {
  font-family: "Inter", sans-serif;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hero-photo {
  border-radius: 100%;
}

.hero-greeting {
  color: hsl(215, 92%, 25%);
  font-size: 32px;
}

.hero-intro {
  color: hsl(215, 92%, 35%);
  font-size: 20px;
}

.hero-socials {
  list-style: none;
  padding: 0;

  display: flex;
  gap: 10px;
}

.button {
  border: none;
  padding: 5px 8px;
  border-radius: 4px;
  font-weight: 500;
  color: inherit;
  background-color: hsl(0, 0%, 90%);
  text-decoration: none;
}

.button:hover {
  opacity: 0.7;
  transition: color 0.5s;
}

.button-primary {
  color: hsl(0, 0%, 15%);
  background-color: hsl(0, 0%, 90%);
}

.button-twitter {
  color: hsl(215, 93%, 15%);
  background-color: hsl(215, 93%, 85%);
}

.button-github {
  color: hsl(0, 0%, 90%);
  background-color: hsl(0, 0%, 15%);
}

.button-youtube {
  color: hsl(0, 93%, 15%);
  background-color: hsl(0, 93%, 85%);
}