section {
    min-height: 100vh;
    box-sizing: border-box;
}
section:nth-child(2n) {
    background: var(--background-color2);
}

section h1, h2, h3 {
    color: var(--text-emph-color);
    font-family: var(--special-font);
}
section h1 {
    text-transform: uppercase;
    margin: 20pt 0 40pt;
}
section h1::after {
    content: ' ';
    width: 50pt;
    height: 4pt;
    background-color: var(--highlight-color);
    margin-top: 20pt;
    display: block;
}
section h2, h3 {
    font-variant-caps: small-caps;
}
section h2 {
    padding-bottom: 10pt;
    border-bottom: 1px solid var(--highlight-color-reduced);
    margin: 50pt 0 30pt;
}
section h3 {
    margin: 30pt 0 20pt;
}

section p {
    margin: var(--default-margin) 0;
}

section em {
    font-style: normal;
    font-weight: bold;
    color: var(--text-emph-color-reduced);
}

section .list u:first-child {
    text-decoration: none;
    color: var(--text-color-reduced);
}

section code {
    color: var(--text-emph-color-reduced);
}


section .list {
    margin-bottom: 30pt;
}
section .list+.cv {
    padding-top: 30pt;
    border-top: 1px solid #8883;
}
/*
section .list > div { responsive }
*/
section .list > div:first-child div:first-child {
    font-family: var(--special-font);
    font-size: 120%;
    opacity: 70%;
}
section .list > div:first-child div:nth-child(2) {
    font-family: var(--special-font);
    font-size: 150%;
    margin: 10pt 0;
}
section .list > div:first-child div:nth-child(3) {
    opacity: 70%;
}
section .list > div:last-child p:last-child {
    margin-bottom: 0;
}


section .meta {
    margin: -10pt 0 20pt;
}
section .meta > * {
    margin-top: 10pt;
}
section .meta a::before {
    content: '\2197';
    margin-right: 10pt;
}
section .meta a[continued]::before {
    content: '|';
    margin-left: -15pt;
    margin-right: 10pt;
}
section .meta a {
    margin-right: 20pt;
}
section .meta a span {
    color: var(--text-color);
    font-weight: normal;
}
section .meta > span:not(:last-child) {
    margin-left: -15pt;
    margin-right: 20pt;
}
section .meta span:last-child:not(:first-child) {
    margin-left: 20pt;
}
section .meta > span:last-child {
    display: inline-block;
}
section .meta > span:last-child::before {
    content: var(--meta-prefix);
    color: var(--text-color-reduced);
}


#home {
    padding: 40vh 10% 10%;
}
#home .title {
    font-size: 300%;
}
#home .subtitle {
    display: inline-block;
    padding: 15pt 0;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}


#projects {
    --meta-prefix: 'Using: ';
}
#research {
    --meta-prefix: 'Co-authors: ';
}


#contact p {
    margin-top: 20pt;
}
#contact h3 {
    font-size: 400%;
    color: #AAA2;
}
#contact a {
    display: inline-block;
}
#contact span {
    display: inline-block;
    margin-top: 5pt;
}


section > p.img {
    text-align: center;
}
:root {
    --img-border-width: 15pt;
}
section .img {
    max-width: 100%;

    box-sizing: content-box;
    margin: 0 calc(-1*var(--img-border-width));
    border: var(--img-border-width) solid transparent;
    background: #8888;

    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(calc(-50% + var(--img-border-width)));
}
section .img img,
section .img video {
    max-width: 100%;
    display: inherit;
}
section .img.with-caption img,
section .img.with-caption video {
    border-bottom-width: calc(2 * var(--img-border-width));
}
/* section > .img.sequence > img:first-child { responsive } */


section .img.with-caption i {
    font-style: normal;
    display: block;
    position: relative;
    top: 3pt;
    text-align: left;
}

section .slider {
    display: inline-block;
    overflow-x: hidden;
    white-space: nowrap;
}
section .img .slider > * {
    position: relative;
    animation-iteration-count: infinite;
}
section .img .slider:hover > * {
    animation-play-state: paused;
}
section .img.with-caption .slider {
    padding-bottom: var(--img-border-width);
}
section .img.with-caption .slider i {
    display: inline-block;
    white-space: nowrap;
    max-width: 0;
    margin-left: -100% !important;
    margin-right: 100% !important;
    top: 15pt;
}
:root {
    --img-slider-delay: 4s;
}
section .img .slider.s3 > * {
    animation-name: slider-3;
    animation-duration: calc(3 * var(--img-slider-delay));
}
@keyframes slider-3 {
    0% { left: 0; }
    32% { left: 0; }

    33% { left: -100%; }
    65% { left: -100%; }

    66% { left: -200%; }
    99% { left: -200%; }

    100% { left: 0; }
}
section .img .slider.s7 > * {
    animation-name: slider-7;
    animation-duration: calc(7 * var(--img-slider-delay));
}
@keyframes slider-7 {
    0% { left: 0; }
    13% { left: 0; }

    14% { left: -100%; }
    27% { left: -100%; }

    28% { left: -200%; }
    41% { left: -200%; }

    42% { left: -300%; }
    55% { left: -300%; }

    56% { left: -400%; }
    69% { left: -400%; }

    70% { left: -500%; }
    83% { left: -500%; }

    84% { left: -600%; }
    99% { left: -600%; }

    100% { left: 0; }
}