:root {
  color-scheme: light dark;

  --background-color: white;
  --text-color: black;
  --secondary-text-color: #565656;
  --link-color: #1b6ca8;
  --mail-icon-color: #2083a4;
  --github-icon-color: #23292d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: black;
    --text-color: white;
    --secondary-text-color: #989898;
    --link-color: #9ad1fd;
    --mail-icon-color: #53afff;
    --github-icon-color: white;
  }
}

body {
  font-family: system-ui, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  text-align: center;
}

section {
  margin-top: 3em;
}

h1 {
  font-size: 2.5em;
}

h2 {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  font-weight: normal;
}

p {
  font-size: 18px;
}

footer {
  margin-top: 64px;

  p {
    margin: 4px 0;
    font-size: 12px;
    color: var(--secondary-text-color);
  }
}

a,
a:visited {
  text-decoration: none;
  color: var(--link-color);
}

.icon {
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

#mail .icon {
  color: var(--mail-icon-color);
}

#github .icon {
  color: var(--github-icon-color);
}