@charset "UTF-8";
@namespace svg url(http://www.w3.org/2000/svg);
:root {
    --bg: #f8f8ff;
    --bgtext: #fff;
    --red: #c33;
    --dark:hsl(47,5%,33%);
}

@font-face {
    font-family: InterVariable;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("InterVariable.woff2") format("woff2");
}
@font-face {
    font-family: InterVariable;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("InterVariable-Italic.woff2") format("woff2");
}
@font-feature-values InterVariable {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        alt-4:            2; /* Open four */
        alt-6:            3; /* Open six */
        alt-9:            4; /* Open nine */
        alt-l:            5; /* Lower-case L with tail */
        alt-u:            6; /* Simplified u 👎 */
        alt-ss:           7; /* Alternate German double s */
        alt-I:            8; /* Upper-case i with serif */
        alt-G:           10; /* Capital G with spur */
        alt-a:           11; /* Single-story a 👎 */
        alt-f:           12; /* Compact f 👎 */
        alt-t:           13; /* Compact t 👎 */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}

/* safe fonts loading */
body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    text-rendering: optimizeSpeed;
    color: var(--dark);
}

.fonts-ok body {
    font-family: InterVariable;
    font-weight: 300;
    font-variant-alternates: character-variant(alt-1, alt-3, alt-4, alt-6, alt-9, alt-l, alt-I) styleset(round-quotes-and-commas, disambiguation-except-zero);
    text-rendering: optimizeLegibility;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


a.brand {
    color: var(--dark);
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0.5rem 1rem;
}

/** Styling svg symbols */
a.brand svg {
    fill: var(--red);
    stroke: var(--dark);
}


a.brand:hover svg {
    stroke: var(--red);
    fill: var(--dark);
}

a.brand .name {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 95%;
}

a.brand .moto {
    line-height: 105%;
}

a.brand:hover .moto {
    color: var(--red);
}

a.tab {
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 95%;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

a.tab::before {
    content: "•";
    padding-right: 0.5rem;
    color: var(--red);
}

a.tab:hover::before {
    color: var(--dark);
}


a.tab:hover {
    background-color: var(--bgtext);
    box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
    color: var(--red);
  }

a.brand svg {
    float: left;
    width: 5rem;
    height: 5rem;
}

h1 {

}

#hero {
    height: 50vh;
    position: relative;
}

/* The hero image */
#hero > .image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("nuclio-hero.jpg");
    height: 100%;
    filter: blur(1px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
  
#hero > .text {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 15%;
    padding-right: 15%;
    text-align: center;
    color: #d0d0ff;
    font-size: 5vh;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0px 0px 4px var(--dark);
}

.csl-bib-body,
article.article,
article.text {
    max-width: 40rem;
    background-color: var(--bgtext);
    margin-left: auto;
    margin-right: auto;
    padding: 2rem;
}

.csl-bib-body,
.landing article.article {
    padding: 0;
    background-color: inherit;
}

.abstract {
    background-color: var(--bg);
    padding: 1rem;
}

p {
    text-align: justify;
}

#footer {
    height: 12rem;
}

a.csl-entry {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
}

a.csl-entry:hover {
    background-color: var(--bgtext);
}