@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/nebula-sans-book.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nebula Sans";
  src: url("/assets/fonts/nebula-sans-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --background: #fff8e7;
  --ink: #000;
  --link-blue: #0077c0;
  --link-pink: #ea4c88;
  --link-purple: #554fcf;
  --link-black: #101010;
  --occupation: #e3724b;
  --location: #ba1c58;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--background);
}

body {
  min-height: 100%;
  margin: 0;
  padding: 2em;
  overflow-wrap: break-word;
  color: var(--ink);
  background: var(--background);
  font-family: "Nebula Sans", sans-serif;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.3;
  font-synthesis: none;
}

main {
  display: block;
  max-width: 30em;
  margin: 0 auto;
  padding: 2em;
  border-radius: 1em;
  background: var(--background);
  text-align: center;
}

h1 {
  margin: 0;
  font-weight: 700;
}

strong {
  font-weight: 700;
}

.content-section {
  --section-accent: var(--link-blue);

  margin-top: 3em;
  text-align: left;
}

.content-section h2 {
  margin: 0 0 0.65em;
  color: var(--section-accent);
  font-size: 1em;
  letter-spacing: 0;
  text-transform: uppercase;
}

#work-bio {
  --section-accent: var(--link-purple);
}

#personal-bio {
  --section-accent: var(--link-pink);
}

#elsewhere {
  --section-accent: var(--link-blue);
}

#profile-picture-container {
  margin: 0 auto 1em;
  color: #555;
}

#profile-picture {
  display: inline-block;
  width: 8.7em;
  height: 8.7em;
  border-radius: 100%;
  object-fit: cover;
}

.metadata {
  display: inline-block;
  margin: 0.5em;
  padding: 0 0.5em;
}

.fa-briefcase {
  color: var(--occupation);
}

.fa-location-dot {
  color: var(--location);
}

.social-icon {
  width: 1.25em;
  text-align: center;
}

a:link,
a:visited {
  color: var(--ink);
  border-bottom: 1px dotted var(--ink);
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  text-decoration: none;
}

a:focus-visible {
  border-radius: 0.15em;
  outline: 3px solid color-mix(in srgb, currentColor 35%, transparent);
  outline-offset: 0.14em;
}

.blue-link a {
  color: var(--link-blue);
}

.pink-link a {
  color: var(--link-pink);
}

.purple-link a {
  color: var(--link-purple);
}

.black-link a {
  color: var(--link-black);
}

#footer {
  margin-top: 5em;
}

hr {
  height: 1px;
  margin: 1.5em 0;
  border: 0;
  background: #333;
}

@media (min-width: 501px) {
  main {
    max-width: 36em;
  }
}

@media (max-width: 500px) {
  body {
    padding: 1em;
    font-size: 1em;
  }

  main {
    padding: 1.5em;
  }
}