@media (prefers-color-scheme: light) {
  :root {
    --name-color: #d30f39;
    --pronouns-color: #6c6f85;
    --font-color: #4c4f69;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --name-color: #f38ba8;
    --pronouns-color: #a6adc8;
    --font-color: #c8d0ee;
  }
}

:root {
  --title-weight: 600;
}

/* Name header */
#name {
  font-size: calc(var(--font-size) * 2.5);
  font-weight: var(--title-weight);
  color: var(--name-color);
}

#subname {
  margin-top: 0;
  font-size: calc(var(--font-size) * 1.07);
  margin-bottom: 1.5em;
}

#pronouns {
  font-size: calc(var(--font-size) * 0.8);
  color: var(--pronouns-color);
}

#avatar {
  width: calc(var(--font-size) * 5);
  border-radius: 50%;
  float: right;
}

/* breakpoint */
@media only screen and (max-width: 640px) {
  #avatar {
    position: absolute;
    width: calc(var(--font-size) * 4);
    left: 10px;
    top: -30px;
  }
}

/* Description */
h1 {
  font-weight: var(--title-weight);
  font-size: calc(var(--font-size) * 1.6);
  margin-bottom: 0;
}

/* Friends */
#friends a:hover {
  opacity: 1;
}

#friends a {
  padding-right: 10px;
}

#friends h1 {
  margin-bottom: 18px;
}