html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}




/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

sup {
    vertical-align: super;
    font-size: smaller;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    font-family: 'Fira Sans', 'Helvetica Neue', Arial, sans-serif;
}

p {
    text-align: justify;
}


h1,
h2,
h3,
h4,
h5 {
    font-weight: bold
}


header section {
    border-top: none;
    margin: 0;
}

main>section {
    margin-top: 2.5em;
}
.biblio main>section {
    margin-top: 0em;
}
.biblio h1 {
    margin-top: 0em;
}
header h1 a {color: black; text-decoration: none}

section>h2 {
    border-top: 2px solid black;
}

section section>h3 {
    border-top: 1px solid black;
    margin-top: 0.75em;
}

h4 {
    font-size: 1.25em;
    margin-bottom: 0.5em;
    padding-top: 0.5em;
}

h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
    padding-top: 0.5em;
}

h2 {
    font-size: 1.75em;
    margin-bottom: 0.5em;
    padding-top: 0.5em;
}

h1 {
    font-size: 2.5em;
    margin-top: 2em;
    margin-bottom: 0.5em;
    border-top: 4px solid black;
    padding-top: 0.5em;
}

p {
    margin-top: 0.5em;
    line-height: 1.33em
}

ul {
    margin-left: 1.5em;
}

ol {
    margin-left: 3em;
}

li {
    margin-top: 0.25em;
    line-height: 1.33em
}

img {
    transition: height 1s, min-height 1s;
}

img.cp {
    height: 10vh;
}
img.cp:hover {
    height: 11vh;
}

img.logo {
    height: 10vh;
    min-height: 100px;
}

img.usi,
img.cp {
    border-radius: 50%;
}

img.usi {
    margin-left: 1em;
}

img.usi:hover {
    animation-name: usibbb;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes usibbb {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}


nav {
    display: flex;
    width: 100%;
    margin-top: 2em;
    flex-wrap: wrap;
    background-color: rgba(255, 255, 255, 0.8);
}

nav a {
    color: black;
    font-size: 1.25em;
    text-decoration: none;
    padding: 0.5em;
    border-radius: 1px
}

nav a:hover {
    color: white;
    background-color: black;
    font-size: 1.25em;
}

nav a {
    transition: color 0.5s, background-color 2s;
}

footer {
    text-align: center;
    margin-bottom: 48vh;
}

h1,
h1 a,
h2,
h3,
h4 {
    transition: color 0.5s, background-color 2s;
}

section:hover>h1 a,
section:hover>h1,
section:hover>h2,
section:hover>h3,
section:hover>h4 {
    color: white;
    background-color: black
}

h2 a {
    float: right;
    color: white;
    margin-right: 0.5em;
}

h2,
h3,
h4 {
    border-bottom-right-radius: 0.75em;
    /* height: 0.85em; */
    line-height: 1em
}

body {
    display: flex;
    flex-direction: column;
}

main {
    align-self: stretch;
    margin-bottom: 100vh;
}

.svisible {
    font-weight: bold
}

.shidden {
    font-weight: normal
}

nav a {
    display: block;
    min-width: 12.5em;
}

.pubindex nav a {
    min-width: 30vw;
}

a.download {color: black; text-decoration: none; border-radius: 5px; padding-right: 5px; padding-top: 2px; padding-bottom:0; margin-left: 0.5em;}
a.download:hover {background-color: black; color: white; }
a.download:hover+span {opacity: 1;}
a.download+span {opacity:0.1;}
a.download+span {transition:opacity 0.5s;}
a.download {transition: color 1s, background-color 0.5s;}

ol.pl li {
    list-style: none;
}
ol.pl li:before { 
    content: counter(plcounter) ". "; 
    counter-increment: plcounter -1;
    margin-left: -2em;
}

code {
    font-family: "Fira Mono";
}

.biblio pre {
    background-color: rgba(0,0,0,0.05);
}

code.bibtex {
    white-space: pre-wrap;
    padding: 1em;
    line-height: 1.5em;
}

a.author, a.year {color: black; text-decoration: none}
a:hover {text-decoration: underline;}

body.biblio main article section section:first-child p {font-size: 1.25em;} 

body.biblio aside {flex: 0;}
body.biblio article>section {flex: 2;}
body.biblio aside img {width: 40vw; max-width: 512px;}
body.biblio aside img,
body.pubcovers div.thumb img {transition: box-shadow 1s; }
body.biblio aside img,
body.pubcovers div.thumb img {box-shadow: rgba(0,0,0,0.25) 1px 1px 5px; margin-left: 1em; resize: both}
body.biblio aside img:hover,
body.pubcovers div.thumb img:hover {box-shadow: rgba(0,0,0,0.75) 1px 1px 10px; }


body.pubcovers h4 {text-align: center}
body.pubcovers ol img {height: 20vh; }
body.pubcovers div.thumb {min-width: 10vw; max-width: 22vw; text-align: center; margin-bottom: 2em;}
body.pubcovers ol {display: flex; flex-wrap: wrap; justify-content: center; align-content: center;}
body.pubcovers div.thumb li {margin: 1em; text-align: left; opacity: 0.9;}

body.pubcovers div.thumb:hover li {margin-left: 1em; margin-right: 1.5em; text-align: left; opacity: 1;}
body.pubcovers div.thumb:hover img {height: 25vh;}

body.pubcovers div.thumb img {transition: height 1s;}
body.pubcovers div.thumb:hover img {transition: height 0.5s;}




@media (min-height: 800px) {

    .home header {
        position: fixed;
        width: 100%;
        top: 0;
        height: auto;
        overflow: auto;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        background-color: rgba(255, 255, 255, 0.8);
    }
}

@media (max-width: 640px) and (orientation: portrait) {

    p,
    li {
        font-size: 18px;
    }

    nav a {
        min-width: 80vw;
    }

    header section h1 {
        padding: 0;
        margin: 0;
        padding-top: 0.5em;
        padding-left: 0.25em;
    }

    img.logo {
        min-height: 75px;
    }

    header section {
        display: flex;
        width: 100%;
        flex-direction: column-reverse;
        justify-content: flex-start;
        height: 80vh;
        margin-top: 0;
    }
}

@media (max-width: 640px) and (orientation: landscape) {

    p,
    li {
        font-size: 12px;
    }

    header section h1 {
        padding: 0;
        margin: 0;
        padding-left: 0.5em;
        padding-top: 0.25em;
    }

    img.logo {
        min-height: 75px;
    }

    header section {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        flex-direction: column-reverse;
        height: 95vh;
        margin-top: 0;
    }

    nav a {
        min-width: 45vw;
    }

    main>section {
        min-height: 100vh;
    }

}

@media (max-width: 640px) {

    body {
        font-size: 18px;
    }

    header img.cp {
        max-width: 10vh;
        min-width: 150px;
        min-height: 150px;
        margin-left: auto;
        margin-right: auto;
    }



}

@media (max-width: 800px) and (min-width: 640px) {

    body {
        font-size: 15px;
    }

    p,
    li {
        font-size: 12px;
    }

    nav a {
        min-width: 40vw;
    }

    img.logo {
        min-height: 100px;
    }
    header img.cp {
        order: 0;
        max-width: 10vh;
        min-width: 125px;
        min-height: 125px;
        margin-left: auto;
        margin-right: auto;

    }
}

@media (max-width: 1023px) {

    main {
        padding: 0;
    }

    main p {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    main ol,
    main ul {
        padding-right: 0.25em;
    }

    main h1,
    main h2,
    main h3,
    main h4 {
        padding-left: 0.25em;
        padding-right: 0.25em;
    }

    header section {
        display: flex;
        width: 100%;
        flex-direction: column-reverse;
    }
    header section h1 {
        margin-top: 0;
        height: auto;
    }

    /*header section > img {float: left; margin-right: 0.5em;}
    
    header section div {float: right; margin-top: -5.5em;}*/
    header section div {
        display: flex;
        justify-content: flex-end;
    }
    header section div img:last-child {
        order: 1;
    }
    header section div img:first-child {
        order: 2;
    }
    /* header section div img:first-child {display: none;} */

    body.biblio aside img {max-height: 90vh; width: 90vw;}
    body.biblio aside {text-align: center; margin-top: 2em; margin-bottom: 2em;}
}



@media screen and (min-width: 1024px) {

body.biblio article {display: flex;}
body.biblio article section section:last-child {margin-bottom: 1em;}
body.biblio aside img {max-width: 40vw;}

    main {
        padding: 1em;
    }

    header {
        margin: 0;
        padding: 1em;
    }

    header section {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
    header section h1 {
        flex: 2;
        margin: 0;
        margin-left: 0.5em;
        border-top-width: 4px;
        margin-bottom: -4px;
        height: 8vh;
    }
}
/*
@page {
  size: A4;
  margin: 30mm 17mm 17mm 17mm;
}*/

@media print {

    @page { counter-increment: page } @page:first { counter-reset: page 9 } 

    @page {
        size: A4 portrait;
        margin: 2em;
     }

    header nav {display: none;}
    #publications .download {display: none;}
    .xcv header {position: fixed; top: -2em; width: 100%;}
    .cv header h1 {margin: 0; margin-bottom: 1em; font-size: 2em;}

    b {font-weight: bold}
/*    html, body {
    width: 210mm;
    height: 297mm;
  }*/
  header {
   display: table-header-group; height: 3em;
}
section {page-break-inside: avoid;}

footer {display: table-footer-group; margin: 0;}
footer:after {
    counter-increment: page;
    content: counter(page) "/" counter(pages);
}
footer a {display: none;}

a {color: black;}
a:visited {color: black;}

}