body, html {
    font-family: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
    /*background: #fefefe;*/
    /*background: #fffdf7; */
    /*background: #fff9e8; */
    background: url("/images/patterns/dot-grid.png") repeat;
    background-color: rgba(255, 253, 247, 1); /* Tint color */
    background-blend-mode: multiply;
    background-size: 270px;
}

.clear {
    clear: both;
    width: 0; height: 0;
}

#wrapper {
    max-width: 960px;
    margin: 0 auto;
}

header {
    /*background-color: #557799;*/
    margin-top: 20px;
    padding-bottom: 0.5em;
    /*border-bottom: 2px solid #ccc;*/
}
#profile-picture {
    background: url("/images/profile-picture-square.jpg") center;
    /*background-position-y: top;*/
    background-size: cover;
    border: 1px solid #ccc;
    border-radius: 20px;
    height: 200px;
    width: 200px;
    margin: 0 auto;
}
header #header-right {
    margin-top: 1.5em;
}
header h1 {
    margin-top: 0.5em;
}
header .links {
    text-align: right;
    margin-top: 7px;
}
header .links img {
    width: 32px;
    height: 32px;
    margin-left: 5px;
}
@media (max-width: 768px) {
    header h1, header .links {
        text-align: center;
    }
    header .links {
        margin-bottom: 1em;
    }
}

main {
    /*background-color: #997788;*/
    margin-top: 2em;
}

main section {
    padding-bottom: 1em;
    margin-bottom: 2em;
    /*border-bottom: 1px solid black;*/
}
main section h2 {
    margin-bottom: 0.5em;
}

#intro {
    font-size: 1.4em;
    max-width: 860px;
    text-align: justify;
}
#intro a {
    text-decoration: none;
}
#intro a:hover {
    text-decoration: underline;
}
#intro img {
    display: inline;
    height: 16px;
    margin: 0 0 4px 5px;
    padding: 0;
}

.publication {
    margin-bottom: 2em;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 1em;
    border-radius: 3px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #ccc, 0 1px 5px #333;
}

.publication .teaser-image {
    min-height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ccc, 0 1px 4px #333;
}
@media (max-width: 768px) {
    .publication .teaser-image.square {
        width: 200px;
        margin: 0 auto;
    }
}

.publication h3 {
    font-size: 1.2em;
}
@media (min-width: 769px) {
    .publication h3 {
        font-size: 1.3em;
        /*font-weight: bold;*/
    }
}
@media (max-width: 768px) {
    .publication h3 {
        margin-top: 1em;
    }
}
.publication ul {
    margin: 0; padding: 0;
    list-style: none;
}
.publication ul li {
    margin: 0; padding: 0;
    display: inline;
}
.publication .note {
    font-size: 0.8em;
}
.publication .links {
    text-align: right;
    margin-top: 2em;
}
.publication .links li {
    margin-left: 5px;
}

.publication .affiliation-footnote {
    color: #999;
    font-style: italic;
}

.publication:last-child {
    margin-bottom: 0;
}

footer {
    /*background-color: #995577;*/
    text-align: right;
    font-size: 0.8em;
    margin-bottom: 1em;
}