@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz,wdth,wght,GRAD@8..144,75,100..500,50&display=swap');
main.container {
    display:  flex;
    flex-direction: column;
    align-items: center;
    padding-bottom:  5em;
    background: #fafaf9;
}
main.container {
    --font-family:  'Roboto Serif', serif;
    --font-weight:  400;
    line-height: 1.5em;
}
article :is(section.blog_body,article header) {
    max-width:  min(80vw,80ch);
}

article section.blog_body :is(h1,h2,h3,h4) {
    margin-left: 0px;
}

h3 span {
    overflow:  hidden;
    text-overflow: ellipsis;
    display: block;
    width:  100%;
}

article :is(a.footnote-ref,.footnotes a[href^="https://doi.org"], .footnotes a[href^="#"] ) {
    text-decoration: none;
    color: black;
    padding-left: 0.1em;
}
article span.refs sup + sup:before {
    content: ','
}
article span.refs {
    word-spacing: -0.4ch;
    margin-right: 0.4ch;
    margin-left:  -0.5ch;
}

article .footnotes hr {
    display: none;
}

#footnotes {
    font-size: 9pt;
    --main-color: var(--inactive-main-color);
}
#footnotes:after{
    content:  ' ';
    max-width: min(50vw,60ch);
    width: 80ch;
}

article :is(sup, sub) {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

article :is(sub) {
    top: 0.4em;
}

article header h3 {
    margin-bottom: 0px;
    max-width: calc( 100% - 2em );
}

article :is(header .author,header .date){
    width:  100%;
    display:  inline-block;
    margin-left:  1em;
    font-family: Verdana;
    font-size: 0.8em;
    opacity: 80%;
}
article :is(a.gene, a.protein) {
    padding: 0px;
    --main-color: var(--inactive-main-color);
    --darker-medium-main-color: var(--inactive-main-color);
    font-size: 0.75em;
}

article :is(aside, figure) {
    display: flex;
    flex-direction: column;
    align-items: center;    
}

article :is(aside.right, figure.right) {
    float:  right;
    margin-right: -20ch;
    margin-left: 1ch;
}

article :is(aside.left, figure.left) {
    float:  left;
    margin-left: -20ch;
    margin-right: 3ch;
}


figure img {
    max-height:  100%;
    max-width: 100%;
}

figcaption p {
    margin-bottom: 0px;
    margin-left:  1em;
    font-size:  0.8em;
}
figure + p:empty {
    margin:  0px;
}
figure + p:empty + p {
    margin-top:  0em;
}

article figure.medium {
    max-width: 50ch;
    max-height: 50ch;
}

article figure.medium_skinny {
    max-width: 30ch;
    max-height: 50ch;
}


article figure.small {
    max-width: 30ch;
    max-height: 30ch;
}

article .aspect_1_1 {
    aspect-ratio : 1 / 1; 
}

article .aspect_1_2 {
    aspect-ratio : 1 / 2; 
}


.tweet.info_card {
    max-width:  50ch;
    background: #f8f8f5;
    font-size: 0.9em;
}

.tweet-card {
    display:  flex;
    flex-direction: column;
    font-family: sans-serif;
}
.tweet-header {
    display:  inline-flex;
    width:  100%;
    flex-direction: row;
    align-items: center;
}
.tweet-author {
    font-size: 1em;
    flex-grow: 1;
}
.tweet-body, .tweet-footer, .quote-tweet .tweet-header {
    margin-left:  1ch;
    margin-right: 1ch;
    margin-top:  0;
    margin-bottom:  0;
}
.tweet-header img {
    border-radius: 9999px;
    height: 20pt;
}
.tweet-header a:any-link {
    text-decoration: none;
}
.tweet-footer a:any-link {
    text-decoration: none;
    color:  grey;
}
.tweet-header .tweet-author {
    margin-left: 0.5ch;
}

.tweet-header .tweet-author-name {
    color:  white;
    font-weight: 800;
    line-height: 1em;
    margin-bottom: 0.5ch;
}
.tweet-header .tweet-author-handle {
    color:  white;
    line-height: 1em;
}

.quote-tweet :is(.tweet-author-name,.tweet-author-handle) {
    color: black;
}
.quote-tweet {
    border:  solid #aaa 1px;
    border-radius: 10px;
    margin: 1ch;
    font-size: 0.8em;
}

.tweet-header .tweet-logo svg {
    width:  100%;
    height:  100%;
}
.tweet-header .tweet-logo svg path {
    fill: #fff;
}
.tweet-header .tweet-logo {
    height: 20pt;    
    aspect-ratio: 1 / 1;
}

@media (max-width: 1200px) {
    article :is(aside.right, figure.right) {
        margin-right: -5ch;
    }
    article :is(aside.left, figure.left) {
        margin-left: -5ch;
    }
}

@media (max-width: 992px) {
    article :is(aside.right, figure.right) {
        margin-right: 2ch;
    }
    article :is(aside.left, figure.left) {
        margin-left: 2ch;
    }
}

@media (max-width: 768px) {
    article :is(aside.right, figure.right, aside.left, figure.left) {
        float:  none;
        margin:  0 auto;
    }
}


@media print {
      header section.menu > ul li {
        display:none;
      }
      header section.menu > input + label + ul {
        height:  0.5em;
      }
      :root {
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
      }
      :root .documentation_root {
        --font-size: 8pt;
      }
      a.glyco, a.glyco:after, a.glyco:before {
        box-shadow: none;
        border-color:  transparent;
      }
      h3, h3:before, h3:after {
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;

      }
      article :is(aside.right, figure.right) {
        margin-right: -5ch;
        margin-left: 1ch;
      }
      article :is(aside.left, figure.left) {
        margin-left: -5ch;
        margin-right: 2ch;
      }


    }