/* --- Fonts --- */

/* Director */
@font-face
{
    font-family: 'Director';
    src:url('fonts/Director/Director-Regular.ttf');
}
@font-face
{
    font-family: 'Director';
    font-weight: bold;
    src:url('fonts/Director/Director-Bold.ttf');
}
@font-face
{
    font-family: 'Director';
    font-weight: 300; /* Light */
    src:url('fonts/Director/Director-Light.ttf');
}

/* Fahkwang */
@font-face
{
    font-family: 'Fahkwang';
    src:url('fonts/Fahkwang/Fahkwang-Regular.ttf');
}
@font-face
{
    font-family: 'Fahkwang';
    font-style: italic;
    src:url('fonts/Fahkwang/Fahkwang-Italic.ttf');
}
@font-face
{
    font-family: 'Fahkwang';
    font-weight: bold;
    src:url('fonts/Fahkwang/Fahkwang-Bold.ttf');
}
@font-face
{
    font-family: 'Fahkwang';
    font-style: italic;
    font-weight: bold;
    src:url('fonts/Fahkwang/Fahkwang-BoldItalic.ttf');
}
@font-face
{
    font-family: 'Fahkwang';
    font-weight: 300; /* Light */
    src:url('fonts/Fahkwang/Fahkwang-Light.ttf');
}
@font-face
{
    font-family: 'Fahkwang';
    font-style: italic;
    font-weight: 300; /* Light */
    src:url('fonts/Fahkwang/Fahkwang-LightItalic.ttf');
}

/* Generic stuff */
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

img
{
    max-width: 100%;
    display: block;
}

a
{
    text-decoration: none;
    color: inherit;
}

.nobreak
{
    display: inline-block;
}

.fr_api
{
    font-family: 'Noto Serif', 'Times', serif;
    display: none;
}

/* Components */
html
{
    scroll-snap-type: y proximity;
}

body
{
    /* background: blue; */
    max-width: 1000px;
    margin: auto;
    margin-bottom: 80vh;
    background-image:
        linear-gradient(rgba(20, 100, 180, 0) 0%, rgba(20, 100, 180, 0.8) 100%),
        linear-gradient(rgba(200, 110, 180, 0) 0%, rgba(235, 110, 210, 0.5) 100%);
    background-repeat: repeat-x, repeat-x;
    background-attachment: fixed, scroll;
    background-position: bottom, bottom;
    font-family: 'Fahkwang', Helvetica, sans-serif;
    font-size: 0.9em;
    font-weight: 300;
    display: flex;
}

body b
{
    font-weight: bold;
}

header
{
    /* background: red; */
    max-width: 600px;
    position: sticky;
    top: 20vh;
    text-align: right;

    padding-left: 1em;
    padding-right: 1em;
    border-right: solid 2px;
    align-self: flex-start;
}

header h1
{
    font-family: 'Director', serif;
    font-weight: 300;
}

nav
{
    max-height: 0;
    transition: max-height 0.25s ease-in;
    overflow: clip;
}

header:hover nav
{
    max-height: 10em;
    transition: max-height 0.25s ease-out;
}

nav a
{
    padding-left: 1em;
    font-family: 'Fahkwang';
    font-weight: bold;
    border-left: solid 2px rgba(0,0,0,0);
}

nav a:hover
{
    border-left: solid 2px rgba(0,0,0,1);
}

main
{
    /* background: green; */
    margin-top: 20vh;
    padding-left: 1em;
    padding-right: 1em;
    width: 60%;
}

section
{
    scroll-margin-top: 20vh;
    scroll-snap-align: start;
    margin-bottom: 20vh;
}

section h1
{
    font-family: 'Director', serif;
    font-weight: 300;
    margin-bottom: 1em;
    padding-top: 0.2em;
    font-size: 1.5em;
}

section p a
{
    border-bottom: solid 0px;
    transition: border-bottom 0.1s ease-in;
}

section p a:hover
{
    border-bottom: solid 2px;
    transition: border-bottom 0.1s ease-out;
}

section p, dl
{
    margin-bottom: 1em;
}

section dt, dd
{
    display: inline
}

section dt
{
    font-weight: bold;
}

section dt:before {
    content: "";
    display: block;
}

section dt:after {
    content: ":";
}

section li {
    padding-left: 1.5em;
    background-size: 1em;
    background-repeat: no-repeat;
    background-position: 0% 0.2em;
}

section li a {
    padding-right: 1em;
    border-right: solid 2px rgba(0,0,0,0);
}

section li a:hover {
    border-right: solid 2px rgba(0,0,0,1);
}

section li.journalArticle {
    background-image: url(graphics/icons/article.svg);
}

section li emph {
    font-weight: bold;
}

section li.email {
    background-image: url(graphics/icons/email.svg);
}

section li.email span {
    visibility: hidden;
}

section li.email:hover span {
    visibility: visible;
    padding-left: 1em;
    margin-left: 1em;
    border-left: solid 2px;
}


section li.email span b {
    display: none;
}


section li.github {
    background-image: url(graphics/icons/github.svg);
}

section li.scholar {
    background-image: url(graphics/icons/scholar.svg);
}

section li.orcid {
    background-image: url(graphics/icons/orcid.svg);
}

section li.researchgate {
    background-image: url(graphics/icons/researchgate.svg);
}

section li.prereview {
    background-image: url(graphics/icons/prereview.svg);
}

section li.preprint {
    background-image: url(graphics/icons/preprint.svg);
}

section li.bussilab {
    background-image: url(graphics/icons/bussilab.svg);
}

section li.bluesky {
    background-image: url(graphics/icons/bluesky.svg);
}

section li.soundcloud {
    background-image: url(graphics/icons/soundcloud.svg);
}


@media (max-width: 600px)
{
    html
    {
        height: 100%;
    }

    body
    {
        height: 100%;
        margin-bottom: 0vh;
        display: flex;
        flex-flow: column;
        padding-right: 2em;
        padding-left: 2em;
    }

    header
    {
        position: static;
        margin-top: 10vh;
        width: 100%;
        border-right: solid 0px;
        border-bottom: solid 2px;
        padding-bottom: 1em;
        padding-right: 0em;
        padding-left: 0em;
    }

    main
    {
        margin-left: 0%;
        margin-top: 0;
        width: 100%;
        overflow: scroll;
        flex-grow: 1;
        scroll-snap-type: y proximity;
    }

    section
    {
        scroll-margin-top: 0vh;
    }

    #about .image
    {
        order: 2;
        flex: 0 1 8em;
        margin-right: -1em;
        padding-top: 1em;
    }
}

#about
{
    display: flex;
}

#about .image
{
    order: 2;
    flex: 0 1 8em;
    padding-left: 1em;
}

#about .image img
{
    border-radius: 0%;
    border: solid 2px;
}

#about .content
{
    order: 1;
    flex: 2 1 80%;
}

#about dd:hover .fr_api
{
    display: inline;
}