.hero {
  display: grid;
  justify-items: center;
  row-gap: 1.5rem;
}

.hero strong {
  color: var(--pico-primary);
  font-weight: bold;
}

.hero h1 {
  font-weight: normal;
}

.hero .hi {
  margin-right: 0.2em;
}

.bio {
  text-align: center;
}

.profile-picture {
  width: 10rem;
  height: 10rem;
  border-radius: 100%;
}

body > footer {
  border-top: 1px solid var(--pico-muted-border-color);
  text-align: center;
  font-size: 0.75em;
}

body > header > nav > ul > li:first-child {
  margin-right: 1em;
}

[data-theme=light],
:root:not([data-theme=dark]) {
  --display-only-light: initial;
  --display-only-dark: none;
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --display-only-light: none;
    --display-only-dark: initial;
  }
}
[data-theme=dark] {
  --display-only-light: none;
  --display-only-dark: initial;
}

.dark-only {
  display: var(--display-only-dark);
}

.light-only {
  display: var(--display-only-light);
}