/* variables */

:root {
    --left-margin: 250px;
    --solarized-color: #FDF6E3;
    --text-color: #2E3436;
    --icon-background-color: #D0D0FF;
    --icon-background-color-hover: #A0A0EE;
    --selection-background-color: #586E75;
    --sidebar-background-color: #EDE6D3;
    --toc-hover-color: #DDD6C3; /* #FDF6E3 jumping over #EDE6D3*/
    /* --small-screen: 750px; */
    /* small screen at 750px, though @media can't read variables... */
}

/**************************************/
/*                BASE                */
/**************************************/

/* TOC links scroll instead of jump */
html {
    scroll-behavior: smooth;
}

/* default foreground and background, also some breathing space between lines */
body {
    font-family: "Times New Roman", Times, serif;
    margin: 0;
    margin-left: var(--left-margin);
    line-height: 1.5;
    background: var(--solarized-color);
    color: var(--text-color);
}

#content {
    /* variable percentage, from (0 5 0 5) @750px to (0 30 0 10) at @1500px */
    padding: 0 calc(((100% - 750px + var(--left-margin)) / 2) + 5%) 0 calc(((100% - 750px + var(--left-margin)) / 10) + 5%);
}

.title {
    display: none;
}

/* when selecting text */
::selection {
    color: white;
    background: var(--selection-background-color);
}

/* cursor and underline for links */
a {
    position: relative;
    cursor: pointer;
    text-decoration: underline;
}

/* unvisited link */
a:link {
    color: black;
}

/* visited link */
a:visited {
    color: black;
}

/* mouse over link */
a:focus,
a:hover {
    color: #0000EE;
}

/* selected link */
a:active {
    color: #EE0000;
}

/* class to hide stuff */
.hidden {
    display: none;
}

/* For GNU Emacs to show when focused */
/* *::after { */
*:focus::after {
    background-color: #202020;
    color: white;
    margin: 0 -500px 0 0;
    position: absolute;
    bottom: 120%;
    left: 0;
    content: attr(title);
}

/* allows splitting words to avoid overflows */
p {
    overflow-wrap: break-word;
    hyphens: auto;
}



/**************************************/
/*               SIDEBAR              */
/**************************************/

/* Everything related to the left sidebar */

.sidebar {
    text-align: center;
    height: 100%;
    border-right: 2px solid black;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--left-margin);
    /* background-color: #644117; */
    background-color: var(--sidebar-background-color);
}

.sidebar .myname {
    margin: 0;
    font-size: 2em;
    font-weight: bold;
}

.sidebar img {
    margin: auto;
    display: block;
}

.sidebar a {
    margin:auto;
    display: inline-block;
    text-align: center;
}

.sidebar a img {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

#table-of-contents h2 {
    display: none;
}

#table-of-contents ul {
    padding: 0 0 10px 0;
}

#table-of-contents li::marker {
    content: "";
}

#table-of-contents li {
    /* background-color: white; */
    background: var(--solarized-color);
    border: 1px solid black;
    margin: 0px 10px;
}

#table-of-contents li a {
    height: 100%;
    width: 100%;
    text-decoration: none;
}

#table-of-contents li a:hover,
#table-of-contents li a:focus {
    background-color: var(--toc-hover-color);
}



/**************************************/
/*                 BIO                */
/**************************************/

.bio {
    font-size: 22px;
}



/**************************************/
/*             PUBLICATION            */
/**************************************/

/* About publication class and everything inside */

/* represents a paper, title as h3 */
.publication {
    line-height: 1;
    /* width: max(80%, 335px); */
    width: 100%;
    border: 1px solid black;
    border-right: 2px solid;
    border-bottom: 2px solid;
    background-color: white;
    /* padding was annoying for icon bar */
    /* padding: 5px 10px 0px 10px; */
    margin: 0 0 20px 0; /* between two papers */
}

.publication a img {
    width: 20px;
    height: 30px;
    /* vertical-align: middle; */ /* not centered... */
}

/* links on the left of the bar */
.publication a {
    font-size: 20px;
    /* font-weight: bold; */
    display: inline-block;
    /* border-left: 1px solid black; */
    float: left;
    text-align: center;
    width: 60px;
    height: 30px;
    /* padding: 5px 0; /\* some top padding *\/ */
    background-color: var(--icon-background-color);
    /* color: black; */
    /* font-size: 20px; */
    position: relative;
}

/* clickable on the right of the bar */
details {
    --icons: 1; /* each icon takes up 60px of the bar */
    width: calc(100% - (var(--icons) * 60px));
    background-color: var(--icon-background-color);
    display: inline-block;
    height: 30px;
}
[icons="1"] { --icons: 1; }
[icons="2"] { --icons: 2; }
[icons="3"] { --icons: 3; }
[icons="4"] { --icons: 4; }
[icons="5"] { --icons: 5; }

details summary::marker {
    content: "";
}
details[open] summary::marker {
    content: "Hide ";
}

details > summary {
    height: 30px;
    width: 100%;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    align-content: center;
    text-align: right;
    /* text-indent: 5px; */
    /* direction: rtl; */
}

/* text block hidden by default */
.abstract {
    display: none;
}

/* turn visible when previous details is clicked */
details[open] ~ .abstract {
    display: block;
    background-color: #F5F5F5;
    padding: 2px 6px;
    margin: 0;
    text-align: left;
    line-height: 1.1;
}

/* hover color for clickable elements of the bar */
.publication a:hover,
.publication a:focus,
.publication summary:hover,
.publication summary:focus {
    background-color: var(--icon-background-color-hover);
}

/* standard tooltip with arrow for links */
/* fixed width of 80px for centering, else need to use eg flexbox
   https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_perfect_center */
.tooltip {
    visibility: hidden;
    width: 80px;
    background-color: #202020;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 120%;
    left: 50%;
    margin-left: -40px;
}
.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #202020 transparent transparent transparent;
}
:hover > .tooltip,
:focus > .tooltip {
    visibility: visible;
}

/* title of the publication */
.publication > h3 {
    margin-left: 16px;
    margin-right: 16px;
}

/* conference of the publication */
.publication .conference {
    margin: -16px 16px;
}

/* authors of the publication */
.publication .authors {
    margin-left: 16px;
    margin-right: 16px;
}



/**************************************/
/*           SMALL SCREENS            */
/**************************************/

/* every changes for small screens */

@media screen and (max-width: 750px) {

    details[open] summary::marker {
        content: "";
    }

    body {
        margin-left: 20px;
        margin-right: 20px;
    }

    #content {
        padding: 0;
    }

    .sidebar {
        margin-left: -20px;
        margin-right: -20px;
        display: block;
        height: unset;
        border-right: unset;
        position: unset;
        top: unset;
        left: unset;
        width: unset;
    }

}



/**************************************/
/*               OTHER                */
/**************************************/

.footer {
    line-height: 1;
}

/* no longer needed, can force div of float to take space */
.clear {
    clear: both;
}