@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
/* Breathing room after the last section */
#main {
  padding-bottom: 8em;
}

/* Hero section: cover photo with the welcome lines anchored at the bottom,
   over a gradient that darkens downward for legibility */
#main > section.hero {
  background-position: center 25%;
  background-size: cover;
  border-radius: 6px;
  border-top: 0;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0;
  overflow: hidden;
  padding: 8em 3em 2.5em 3em;
  position: relative;
  text-align: left;
}
#main > section.hero::before {
  background: linear-gradient(to top, rgba(24, 19, 16, 0.8), rgba(24, 19, 16, 0.25) 55%, rgba(24, 19, 16, 0.05));
  content: "";
  inset: 0;
  position: absolute;
}
#main > section.hero > * {
  position: relative;
}
#main > section.hero p.hero-hi {
  color: #ffffff;
  font-size: 1.9em;
  line-height: 1.25;
  margin: 0 0 0.2em 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
#main > section.hero p.hero-hi tt {
  color: #d9a441;
}
#main > section.hero p.hero-sub {
  font-size: 1.05em;
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* The section after the hero doesn't need the usual divider */
#main > section.hero + section {
  border-top: 0;
}

/* Slimmer fixed sidebar on desktop (theme default is 35%),
   with extra whitespace to the left of the sections */
@media screen and (min-width: 1281px) {
  #header {
    padding: 6em 3em 0 0;
    width: 26%;
  }
  #main {
    margin-left: 26%;
    max-width: 59em;
    padding-left: 7em;
    width: 74%;
  }
  #footer {
    width: 26%;
  }
}
/* The footer (social icons) now lives inside the sidebar header, in flow:
   no more overlap with the sidebar content when zoomed in */
#header #footer {
  background: none;
  bottom: auto;
  left: auto;
  padding: 2em 0 2.5em 0;
  position: static;
  width: auto;
}

/* Whenever the sidebar is fixed, let it scroll if its content is taller
   than the viewport (e.g. zoomed in). Flexbox pushes the icons to the
   bottom when there is room, and lets them flow naturally when there isn't */
@media screen and (min-width: 981px) {
  #header {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  #header > * {
    flex-shrink: 0;
  }
  #header > .image.avatar {
    align-self: flex-end;
  }
  #header #footer {
    margin-top: auto;
  }
}
#header .image.avatar {
  width: 9.5em;
}
#header h1.name {
  color: #ffffff;
  font-size: 1.5em;
  line-height: 1.2;
  margin: 0 0 0.25em 0;
}
#header p.job {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 1.5em 0;
}
#header h1.tagline {
  font-size: 1em;
}
#header nav#sidebar-nav {
  margin-top: 2em;
}
#header nav#sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#header nav#sidebar-nav li {
  margin: 0.5em 0;
  padding: 0;
}
#header nav#sidebar-nav a {
  border: 0;
  border-right: 2px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  display: inline-block;
  padding-right: 0.75em;
  margin-right: -0.75em;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.2s ease, border-color 0.2s ease;
}
#header nav#sidebar-nav a:hover {
  color: #d9a441;
}
#header nav#sidebar-nav a.active {
  border-right-color: #d9a441;
  color: #ffffff;
}
#header .sidebar-contact {
  margin-top: 2em;
}
#header .sidebar-contact ul.cv-buttons {
  list-style: none;
  margin: 0 0 0.75em 0;
  padding: 0;
}
#header .sidebar-contact ul.cv-buttons li {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0;
}
#header .sidebar-contact ul.cv-buttons a {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.65);
  display: inline-block;
  font-size: 0.85em;
  padding: 0.35em 0.9em;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
#header .sidebar-contact ul.cv-buttons a:hover {
  border-color: #d9a441;
  color: #ffffff;
}
#header .sidebar-contact p.email {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85em;
  margin: 0;
}
#header .sidebar-contact p.email a {
  border: 0;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
#header .sidebar-contact p.email a:hover {
  color: #ffffff;
}

/*# sourceMappingURL=custom.css.map */