mylloon.fr/static/css/index.css

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

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

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

/* Page theme */
main {
  color: var(--font-color);
  font-size: var(--font-size);
  padding: 2em 1em;
  font-family: "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--font-color);
  margin: 0 auto;
  max-width: 640px; /* breakpoint */
}

/* 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) {
  main {
    margin-inline: 0;
  }

  .avatar {
    position: absolute;
    width: calc(var(--font-size) * 4);
    transform: translate(
      calc(var(--font-size) * -19),
      calc(var(--font-size) * -3.7)
    );
  }
}

/* Description */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--title-weight);
  font-size: calc(var(--font-size) * 1.6);
  margin-bottom: 0;
}