:root {
  --spotify-green: hsl(141, 73%, 42%);
  --email-red: hsl(5, 81%, 56%);
  --facebook-blue: hsl(220, 46%, 48%);
  --github-purple: hsl(264, 28%, 45%);
  --linkedin-blue: hsl(201, 100%, 35%);
  --discord-purple: hsl(227, 58%, 65%);
  --infobox-image-size: 175px;
}

#infobox {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 10px;
  gap: 10px;
  position: sticky;
}

#infobox-image {
  width: var(--infobox-image-size);
  height: var(--infobox-image-size);
  border-radius: 150px;
  padding: 15px;
}

#infobox-name {
  font-size: 20pt;
  font-weight: bold;
}

#infobox-icons {
  display: flex;
  gap: 12px;
  padding-top: 5px;
}

#infobox-icons a {
  text-shadow: unset;
  transition-property: none;
  background-image: none;
}

label {
  text-align: center;
}

.icon {
  color: var(--main-color);
  transition: 300ms;
  transition-property: color;
}

.fa-envelope:hover {
  color: var(--email-red);
}

.fa-facebook-square:hover {
  color: var(--facebook-blue);
}

.fa-github:hover {
  color: var(--github-purple);
}

.fa-linkedin:hover {
  color: var(--linkedin-blue);
}

.fa-spotify:hover {
  color: var(--spotify-green);
}

.fa-discord:hover {
  color: var(--discord-purple);
}