html { 
    scroll-behavior: smooth; 
}

body {
    padding: 0 2em;
    margin: auto;
    min-width: 900px;
    max-width: 1280px;
    margin: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17.5px;
    background: hsl(0, 0%, 18%);
    color: hsl(0, 0%, 75%);
}

a {
    color: hsl(0, 0%, 95%);
    text-decoration: none;
}

a img {
    display: inline-block;
    vertical-align: bottom;
    height: 1.5em;
    width: 1.5em;
    margin-right: .3em;
}

p {
    text-align: justify;
}

nav {
    position: fixed;
    background: hsl(0, 0%, 18%);
    display: block;
    width: 100%;
    text-transform: lowercase;
    font-size: 150%;
    font-variant: small-caps;
    line-height: 2.2em;
    left: 0;
    padding-left: 2em;
    height: 3em;
}

nav a {
    display: inline-block;
    margin-right: 1.5em;
}

main {
    display: flow-root;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
    color: hsl(0, 0%, 95%);   
    font-weight: lighter;
    font-variant: small-caps;
    line-height: .85;
    margin-bottom: .25em;
}

h1, h2 {
    text-transform: lowercase;
}

h1 {
    font-size: 300%;
}

h2 {
    font-size: 170%;
}

h3 {
    font-size: 125%;
}

section {
    display: flex;
    flex-direction: row;
    margin-top: 1.5em;
    scroll-margin-top: 5em;
}

section > header {
    width: 33%;
}

section > article {
    width: 67%;
}

#home {
    margin: 8em 0 6em 0;
}

#home header {
    text-align: center;
}

#home .names {
    font-size: 140%;
    text-transform: lowercase;
    font-variant: small-caps;
    letter-spacing: .12em;
    color: hsl(0, 0%, 95%);
}

#home .initials {
    letter-spacing: normal;
}

#home .role {
    font-size: 120%;
}

#home .affiliation, #home .department {
    font-size: 90%;
    font-style: italic;
}

footer {
    text-align: center;
    margin: 2em 0 5em 0;
}

.card {
    background-color: #373636;
    border: 2px solid #555;
    border-radius: .2em;
    margin-bottom: 1em;
    padding: 1em 1.2em;
}

.card p {
    font-size: 85%;
}

.card .buttons {
    margin: 2em 0 1em 0;
}

.card .buttons a {
    padding: .5em .7em;
    margin-right: 1em;
    line-height: 1.6;
    font-size: 85%;
    border: 1px solid hsl(0, 0%, 95%);
    border-radius: .2em;
    color: hsl(0, 0%, 95%);
}

.photo {
    width: 75%;
    border-radius: 50%;
}

.link-list {
  margin: .5em 0;
}

.link-list a {
  text-decoration: none;
  line-height: 1.6;
  display: inline-block;
  margin: 0 1em .3em 0;
}

.link-list a:hover {
  text-decoration: underline;
}

.avatar {
  border: 1px solid hsl(0, 0%, 70%);
  border-radius: 50%;
}

.position {
    overflow: auto;
    margin: 1em 0 1em 0;
}

.position .icon {
    width: 4em;
    border: 1px solid hsl(0, 0%, 95%);
    float: left;
    margin-right: 1em;
}

.position .subtitle {
    font-size: 85%;
}