* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

:root {
    --main-font-color: #111;
    --link-font-color: #424242;
    --light-background-color: white;
    --codeblock-bkg-color: #f4f7fb;
    --border-radius: 5px;
    --element-margin: 2em;
    --wrapper-max-width: 820px;
    --wrapper-lr-margin: 30px;
    --wrapper-lr-padding: 30px;
}

body {
    font: 400 16px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: var(--main-font-color);
    margin: 0;
    padding: 0;
    background-color: var(--light-background-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* PAGE LAYOUT */

.wrapper {
    max-width: var(--wrapper-max-width);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--wrapper-lr-padding);
    padding-left: var(--wrapper-lr-padding);
}

.content {
    flex: 1;
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */ /* now direction changed with media */ 
}

.sidebar, .centerbar {
    flex-grow: 1;
}

.sidebar {
    flex-basis: 0;
    /* background-color: red; */
}

.footer {
    padding: 4px 0;
}

.header {
    border-top: 8px solid #262626;
}

.navigation {
    overflow: hidden;
    border-bottom: 1px solid #dcdcdc;
}

.footer {
    border-top: 1px solid #dcdcdc;
}

/* HEADER */

.header-image {
    display: block;
    background-repeat: no-repeat;
    background-position: left;
    height: 180px;
    text-align: center;
    padding: 20px;
    background-size: contain;
}

.header h1 {
    margin: 0;
    padding-top: 50px;
}


/* NAVIGATION */

.navigation a {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--link-font-color);
    border-radius: 4px;
}

.navigation a:hover {
    background-color: var(--link-font-color);
    color: var(--light-background-color);
}

.navigation-content {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-top: 1.0em;
    padding-bottom: 0.5em;
}

.navigation a.active {
    /* box-shadow: 0 4px 2px -2px lightgray; */
    font-weight: bold;
}

/* CONTENT */

.wrapped-content {
    padding: 20px 0px;
}

ul, ol {
    /* list-style-position: inside; */
}

.content-title h1 {
    font-size: larger;
}

.content-body {
    padding: 20px;
}

.content-body img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.content-body p {
    text-indent: 1em;
    /* line-height: 1.4em; */
    text-align: justify;
}

.content-body ul, .content-body ol {
    padding-left: 1.0em;
    text-align: justify;
}

/* .content-body ul li:not(:first-child), .content-body ol li:not(:first-child) { */
.content-body ul li, .content-body ol li {
    padding-top: 10px;
}

.content-body li > p:first-child {
    /* fixes extended list markdown */
    display: inline;
}

.content-body p+p {
    margin-top: 1em;
}

.content-body a, .content-body-a {
    color: var(--main-font-color);
}

.content-body pre, .content-body code, .content-body blockquote {
    background-color: var(--codeblock-bkg-color);
}

.content-body pre {
    padding: 4px;
}

.content-body > pre { /* fix for pre blocks not covered by div.pre {margin:1em 0;} of pd.highlight.css */
    margin: 1em 0;
}

.content-body pre.sourceCode, pre.text { /* code highlighted by pd */
    /* so it fits all code inside */
    width: 100%;
    padding: 4px 1em;
    overflow-x: scroll;
}

.content-body hr { /* horizontal line separators */
    border: 1px solid black;
    margin: 1em 0;
}

.hljs { /* code highlighted by highlight.js */ font-size: initial; }
.sourceCode, pre.text { /* code highlighted by pd */  font-size: initial; }
mjx-container { /* mathjax */ overflow-x: scroll;}

.content-body blockquote {
    border-left: 4px solid #e4edf8;
    padding: 0.5em 0.5em 0.5em 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.content-body h1, .content-body h2, .content-body h3, .content-body h4, .content-body h5, .content-body h6 {
    margin-bottom: 0.5em;
}
.content-body * ~ h1, .content-body * ~ h2, .content-body * ~ h3, .content-body * ~ h4, .content-body * ~ h5, .content-body * ~ h6 {
    margin-top: 0.7em;
}

.sidebar * {
    text-align: left;
}

/* FOOTER */

.footer-content {
    display: flex;
    /* 
    flex-wrap: no-wrap; 
    align-items: center;
    justify-content: flex-start;
    */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}

.footer-content a,
.footer-content .footer-text-link {
    text-decoration: none; 
    margin: 6px;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-size: 1.0em; */
    /* font-weight: 500; */
    padding: 4px;
    min-width: 4em;
}

.footer-content img,
.footer-content .footer-text-link a {
    max-height: 100%;
    max-width: 100%;
}

.footer-text-link a {
    color: var(--main-font-color);
    text-decoration: underline 0.15em rgba(0, 0, 0, 0);
    transition: text-decoration-color 300ms, text-shadow 300ms;
}

.footer-text-link a:hover {
    color: var(--main-font-color);
    text-shadow: 1px 1px 1px lightgray;
    text-decoration-color: rgba(0, 0, 0, 1);
  }

.footer-content a:link,
.footer-content a:visited,
.footer-content a:hover,
.footer-content a:active {
    color: var(--main-font-color);
    /* text-decoration: none; */
}

/* DEVICE WIDTHS */

@media (max-width: 600px) {
    :root {
        --wrapper-lr-margin: 15px;
        --wrapper-lr-padding: 15px;
    }
    .content {
        min-height: 60vh;
    }

    .sidebar-content:empty {
        display: none;
    }
    
    .footer {
        padding: 8px 0;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    .footer-content .footer-text-link {
        height: 20px;
    }
    .content-body {
        padding: 20px 0;
    }
}


@media (max-width: 1200px) {
    .content {
        flex-direction: column;
    }

    .sidebar {
        flex-grow: 0;
        margin-left: unset;
        margin-right: unset;
        border-bottom: 1px solid lightgray;
    }

    .rightbar {
        border: none;
        display: none;
    }

    .wrapper {
        width: calc((100vw - (var(--wrapper-lr-margin) * 2)));
    } 

}

@media not (max-width: 1200px) {
    .sidebar-content {
        min-width: 180px;
        width: calc(((100vw - var(--wrapper-max-width)))/2 - var(--wrapper-lr-padding) * 2);
        max-width: min(20vw, calc(((100vw - var(--wrapper-max-width)) - var(--wrapper-lr-margin) * 2)/2));
    }
}

@media (max-width: 360px) {
    body {
        min-width: 300px;
    }
    .wrapper {
        min-width: 300px;
    }
}

@media (max-width: 400px) {
    :root {
        --wrapper-lr-margin: 10px;
        --wrapper-lr-padding: 10px;
    }
    body {
        font: 400 14px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
}

/* SIDEBAR */


.sidebar .wrapper {
    /* background-color: blue; */
}

.sidebar-content {
    padding: 20px 0;
    height: 100%;
    /* background-color: green; */
}

.sidebar .content-body {
    padding: 0;
}

.sidebar .content-title {
    font-size: small;
    font-weight: bold;
}

.sidebar .content-body {
    font-size: small;
}

.sidebar * ~ .content-title {
    margin-top: 1em;
}

/* HEADER ICONS */

.header-icon-bar {
    position: relative;
}

.header-icons-wrapper {
    display: flex;
    flex-wrap: nowrap; 
    align-items: center;
    justify-content: space-evenly;
    vertical-align: middle;
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 16px;
}

.header-icon-e {
    text-decoration: none; 
    margin: 4px 8px;
    height: 1.5em;
    padding: 4px;
    display: flex;
    align-items: center;
    /*
    border: 1px solid transparent;
    border-radius: 10px;
    */
}

.header-icon-e:hover {
    /*
    border: 1px solid black;
    border-radius: 10px;
    */
}

.header-icon-e span {
    margin-left:  auto;
    margin-right: auto;
    white-space: nowrap;
    filter: brightness(0%);
    font-size: small;
}

.header-icon-e span a.text-icon:hover {
    text-decoration: underline;
}

.header-icon-e  a {
    height: 100%;
    text-decoration: none;
} 

.header-icon-e  img {
    max-height: 100%;
    max-width: 100%;
    display: block;
}

.header-icon-e  a:link,
.header-icon-e  a:visited,
.header-icon-e  a:hover,
.header-icon-e  a:active {
    color: var(--main-font-color);
    /* text-decoration: none; */
}

.header-auth-bar a {
    color: var(--link-font-color);
    text-decoration: none;
}
.header-auth-bar a:hover {
    text-decoration: underline;
}

/* a) to show only some icons on smaller screens */
/*
@media (max-width: 600px) {
    .header-icon-e:nth-child(n+4) {
        display: none;
    }
}

@media (max-width: 500px) {
    .header-icons-wrapper {
        padding-right: 8px;
    }
    .header-icon-e:nth-child(n+3) {
        display: none;
    }
}
*/
/* b) to show all on small screens */

@media (max-width: 500px) {
    .header-icons-wrapper {
        position: unset;
        height: 2.2em;
        padding: unset;
    }
}

/******* ARTICLES *******/

.article-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.article {
    box-shadow: 0px 5px 5px -6px rgba(0, 0, 0, 0.2);
    padding-bottom: 15px;
}

.article:nth-child(n+2) { /* some separation between articles */
    padding-top: 1em;
}

.content-footer {
    padding-top: 1.5em;
}

.pagination {
    margin: 1.5em 0;
}

.pagination a {
    text-decoration: underline;
    color: var(--main-font-color);
}

a.copy-article-link-to-clipbpard {
    filter: grayscale(100%);
}

.styled-link-underline {
    text-decoration: none;
    color: var(--main-font-color);
    transition: text-decoration-color 300ms, text-shadow 300ms;
}

.styled-link-underline:hover {
    text-decoration: underline;
    color: var(--main-font-color);
    text-shadow: 1px 1px 1px lightgray;
    text-decoration-color: rgba(0, 0, 0, 1);
  }



/* for slideshows */

.slideshow {
    position: relative;
    /* background-color: #424242; */
    background-color: transparent;
    width: 100%;
    min-height: 100px;
    margin: 1em 0;
}

.slideshow img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 1s ease-in-out;
    object-fit: contain;
}

.slideshow img:first-child {
    opacity: 1;
}

.slideshow button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

.slideshow button {
    border-radius: 8px;
}

.slideshow button.prev {
    left: 10px;
}

.slideshow button.next {
    right: 10px;
}

.slideshow button.fullscreen {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px; /* Adjust to suit your needs */
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
}


/* experimental */

.centerbar {
    flex-grow: 1;
}

.sidebar {
    flex-grow: 0;
}

.header {
    /* border-top: 8px solid #262626; */
    border-top: 4px solid #262626;
  }

  
.centerbar .wrapped-content {
    padding-top: 30px;
}

@media not (max-width: 1200px) {

    .wrapper {
        height: 100%;
    }

    .wrapped-content {
        height: 100%;
        /* padding: 40px 0; */
    }

    .centerbar .wrapper {
        /* box-shadow: 15px 0 10px -15px rgba(0, 0, 0, 0.2), -15px 0 10px -15px rgba(0, 0, 0, 0.2); */
        box-shadow: -15px 0 10px -15px rgba(0, 0, 0, 0.2);
        padding-left: calc(var(--wrapper-lr-padding)*2); /* otherwise the shadow looks to close to body */
    }
  
    .navigation {
        /* border-bottom: 1px solid #dcdcdc; */
        border-bottom: 1px solid #ededed;
    }
    
    .footer {
        /* border-top: 1px solid #dcdcdc; */
        border-top: 1px solid #ededed;
    }
  
}




/* figcaption is generated by markdown */
figcaption {
    font-size: smaller;
}

/* custom style for members page */

.member-list h1, .member-list h2, .member-list h3, .member-list h4, .member-list h5, .member-list h6 {
    /* this unsets the default margins for header elements set under .content-body hn and .content-body * ~ hn */
    margin: initial;
    padding: initial;
}

.member-list {
    display: flex; 
    flex-direction: column; 
    gap: 2em;
}

.member {
    text-align: justify; 
    clear: both;
}

.member > .member-header, .member-image, .member-text {
    padding-left: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 8px;
}

.member-header {
    margin-bottom: 1em;
    font-size: 16px;
    background-color: var(--codeblock-bkg-color);
}

.member-name {
    font-weight: bold;
}

.member-type {
    color: var(--main-font-color);
    font-weight: 200;
    font-size: normal;
}

.member-image {
    display: block;
    float: left;
    width: fit-content;
    margin-right: 14px; 
}

.member-image > img {
    display: block;
    width: 160px;
    height: auto;
}

.member-text > p {
    text-indent: 0;
}

.member-text > p:first-child {
}

@media not (max-width: 500px) {
    .member-type:before {
        content: "(";
    }

    .member-type:after {
        content: ")";
    }
}

@media (max-width: 500px) {

    .member-type {
        display: block;
        padding: 0;
        font-size: smaller;
    }

    .member-header, .member-image, .member-text {
        margin-bottom: 1em;
    }

    .member-image {
        padding: 1em;
        width: 100% !important;
        margin-right: unset;
        float: unset;
    }

    .member-image > img {
        margin: auto;
        width: unset;
        max-height: 40vh;
    }
}


/* Material Icons */

.material-symbols-outlined {
  vertical-align: middle;
}



/* other pages in the sidebar */

.other_pages .other_page_element div {
    display: inline-block;
    max-width: calc(100% - 1.5em);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.other_pages .other_page_element.active{
    font-weight: bold;
}

.other_pages .other_page_element div a {
    text-decoration: none;
}

.other_pages .other_page_element a:hover {
    text-decoration: underline;
}

.other_pages .other_pages_visibility {
    /*
        color: transparent;
        text-shadow: 0 0 0 var(--main-font-color);
    */
    filter: grayscale(100%);
    display: inline-block;
    width: 1em;
    text-align: center;
}

.other_pages .other_page_element.is-planned * {
    color: rgb(209, 64, 64) !important;
}