/*
searching css inter on google:
https://fonts.google.com/specimen/Inter
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300&display=swap');
@import url('./code.css');
@import url('./boxes.css');
@import url('./tool-tip.css');

/* see https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event#specifications */
:root {

    --theme_H: 216deg;
    --theme_Ha: 0;
    --theme_Ha: 120;
    --theme_HSL: var(--theme_H), 88%, 71%;
    --theme_lighter_HSL: var(--theme_H), 50%, 71%;

    --content-max-width: 100rem;--content-max-width: 75rem;
    --left-sidebar-width: 15em;
    --right-sidebar-width: 10em;

    --link-color: hsl(var(--theme_HSL));
    --topnav-color: rgba(255, 255, 255, 0.07);

    --header-height: 3.5rem;
    --header-border: 1px solid rgba(128, 128, 128, 0.5);
    --header-color: transparent;

    --text_color: rgb(220, 220, 220);
    /*--text_color: red;*/

    /* !!! */

    --background_image: none;

    --paper_color: hsla(0, 0%, 0%, 0.9);/*con questo ci vuole il bordo*/
    --paper_color: hsla(0, 0%, 10%, 0.9);
}
body[lc-dark-theme] {

    --background_image: url("/img/intero_blur.webp");

}
:root[light-mode] {

}

body fixed-bg-image {
    display: none;
}

body[bg-image] fixed-bg-image {
    display: block;

    z-index: -2;
    position: fixed;
    top: 0;

    width: 100%;
    height: 100%;

    /*filter: blur(4px);*/

    /*-moz-transition: background-image 1s ease-in-out;*/
    -webkit-transition: background-image 1s ease-in-out;
    transition: background-image 1s ease-in-out;
}

body[bg-image] article,
body[bg-image] lc-nav-index,
body[bg-image] lc-sidebar > div {
    background: var(--paper_color);
    border-radius: 1em;
}
body[bg-image] article {
    border: solid 1px rgba(128, 128, 128, 0.5);
    padding: 1em;
}
body[bg-image] header,
body[bg-image] lc-topnav {
    background: var(--paper_color);
}

body[bg-image] lc-sidebar > div {
    border-top: 4px solid rgb(0, 128, 128);
    padding: 0.5em;
}

body {
    background: rgb(21, 20, 26);
    background-image: var(--background_image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /*color: white;*/
    color: var(--text_color);
    /*font-family: 'Times New Roman', Times, serif;*/
    font-family: sans-serif;
    /*font-size: 12pt;*/
    padding: 0;
    margin: 0;

    font-family: 'Inter', sans-serif;
}

lc-content, lc-content *, header, header * {
    /*border: 2px solid gray;
    margin: 2px;*/
}

header {
    background: var(--header-color);
    padding: 0;
    border-bottom: var(--header-border);
    overflow: hidden;
}

header > * {
    max-width: var(--content-max-width);
    margin: auto;
    display: flex;
    height: 2em;
    height: var(--header-height);
}

header .button, header .search-form {
    height: var(--header-height);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

header img.logo {
    border-top-width: 0.35em;
    border-bottom-width: 0.35em;
    border-style: solid;
    border-color: transparent;
    height: 100%;
    width: 5em; /*!!! da migliorare*/
    box-sizing: border-box;
}

header .button > * {
    /*display: inline-block;*/
    display: fle;

    padding-left: 0.5em;
    padding-right: 0.5em;
}

header a, header a:hover,
header a:visited, header a:visited:hover {
    color: inherit;
    text-decoration: inherit;
}

header .links {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    flex-grow: 1;

    color: gray;
}

header .search-form {
    min-width: 10em;
    flex-shrink: 1;
}

lc-topnav {
    display: block;

    background-color: var(--topnav-color);
    border-bottom: var(--header-border);

    padding: 0.5em;
}

lc-topnav > * {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    max-width: var(--content-max-width);
}

lc-topnav a, lc-topnav a:visited {
    color: inherit;
    text-decoration: none;
    /*border-left: 1px solid gray;*/
    padding-left: 0.25em;
    padding-right: 0.25em;
}
lc-topnav a:not(:last-of-type):after, lc-topnav a:not(:last-of-type):hover:after {
    content: " >";
    margin-left: 0.5em;
    text-decoration: none;
    color: gray;
}
header a:hover, header a:visited:hover,
lc-topnav a:hover, lc-topnav a:visited:hover
{
    color: var(--link-color);
}

lc-content {
    display: grid;
    grid-template-columns: [first-start] var(--left-sidebar-width) [first-end content-start] auto [content-end last-start] var(--right-sidebar-width) [last-end];
    column-gap: 0.5em;
    /*gap: 1em;*/

    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
}

lc-nav-index {
    list-style-type: none;
    display: block;
    
    font-size: 85%;
}
.in-nav-index {
    display: none;
}
.out-nav-index-container {
    grid-column: last-start / last-end;
    grid-row: 1/2;
}
.out-nav-index-container > lc-nav-index.out-nav-index {
    top: 0;
    position: sticky;
}
lc-nav-index > aside {
    /*top: 0;
    position: sticky;*/
}
lc-nav-index > aside > li {
    border: none;
    border-left: 2px solid gray;
    margin: 0;
    padding: 0.25em;
    padding-left: 0.5rem;
    margin-left: 0.5rem;

    transition: all 0.25s;
}
lc-nav-index > aside > li[active], lc-nav-index > aside > li[slightly-active] {
    border-left-color: hsl(var(--theme_HSL));
    background-color: hsl(var(--theme_HSL), 0.125);
}
lc-nav-index > aside > li[active] {
    color: hsl(var(--theme_HSL));
}

lc-nav-index > aside > li.sub {
    padding-left: 1rem;
    font-size: 75%;
}

lc-nav-index > aside {
    /*max-height: 80vh;*/
    max-height: 30em;
}

lc-nav-index > aside a, lc-nav-index > aside a:visited,
lc-nav-index > aside a:hover, lc-nav-index > aside a:visited:hover {
    color: inherit;
    text-decoration: inherit;
}

lc-nav-index > aside a:hover, lc-nav-index > aside a:visited:hover {
    color: var(--link-color);
}

lc-sidebar {
    grid-column: first-start / first-end;
    grid-row: 1/2;
}

lc-sidebar, lc-nav-index > aside {
    overflow: auto;
}

article {
    /*grid-column-start: second;*/
    grid-column: content-start / content-end;
    grid-row: 1/2;
    /*overflow-x: hidden;*/
    overflow: hidden;
}

@media only screen and (max-width: 70em) {
    :root {
        --right-sidebar-width: 0;
    }
    lc-content {
        /*grid-template-rows: 50vh auto;*/
        grid-template-rows: auto;
    }
    lc-sidebar, lc-nav-index > aside {
        /*max-height: 40vh;*/
        /*overflow: auto;*/
        /*overflow: hidden;*/
        /*overflow: unset;*/
    }
    lc-sidebar {
        overflow: unset;
    }
    /*lc-nav-index {
        grid-column: first-start / first-end;
        grid-row: 2 / 3;
    }*/
    .in-nav-index {
        /*background-color: aquamarine;*/
        position: sticky;
        /*color: red;*/
        display: block;
        top: 0px;
        /*height: 100%;*/
        /*display: block;
        max-height: 10em;*/
    }
    lc-nav-index.out-nav-index {
        display: none;
    }
    lc-sidebar {
        grid-row: 1 / 3;
    }
    article {
        grid-row: 1 / 3;
    }
}
@media only screen and (max-width: 40em) {
    :root {
        --left-sidebar-width: 0;
    }
    lc-content {
        grid-template-rows: unset;
    }
    lc-nav-index {
        display: none;
    }
    lc-nav-index, lc-sidebar {
        grid-column: content-start / content-end;
        grid-row: auto;
    }
    lc-sidebar {
        /*grid-row: auto;*/
        grid-row: 2 / 3;
    }
    article {
        grid-row: 1 / 2;
    }
}

article h1 {
    text-align: center;
    font-size: 200%;
    color: hsl(var(--theme_lighter_HSL));
}
article h2 {
    font-size: 175%;
    border-bottom: 1px solid var(--link-color);
    color: hsl(var(--theme_lighter_HSL));
}
article h3 {
    font-size: 125%;
    color: hsl(var(--theme_lighter_HSL));
}
article h4 {
    /*font-size: 125%;*/
}
/*article a, article a:visited*/
lc-content a, lc-content a:visited {
    color: var(--link-color);
}

article h1 a, article h1 a:visited,
article h2 a, article h2 a:visited,
article h3 a, article h3 a:visited,
article h4 a, article h4 a:visited,
article h5 a, article h5 a:visited,
article h6 a, article h6 a:visited {
    text-decoration: inherit;
    color: inherit;
}
article h2 a:hover, article h2 a:visited:hover,
article h3 a:hover, article h3 a:visited:hover,
article h4 a:hover, article h4 a:visited:hover,
article h5 a:hover, article h5 a:visited:hover,
article h6 a:hover, article h6 a:visited:hover {
    text-decoration: underline;
}
article h2 a:hover::after, article h2 a:visited:hover::after,
article h3 a:hover::after, article h3 a:visited:hover::after,
article h4 a:hover::after, article h4 a:visited:hover::after,
article h5 a:hover::after, article h5 a:visited:hover::after,
article h6 a:hover::after, article h6 a:visited:hover::after {
    content: " #";
    margin-left: 0.5em;
    text-decoration: none;
    color: gray;
}

lc-sidebar ul {
    list-style-type: none;
    padding-left: 1em;
}

/* https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp */
lc-content *::-webkit-scrollbar {
    width: 10px;
}

lc-content *::-webkit-scrollbar-track {
    background: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

:target {
    animation: target-animation 5s;
}

@keyframes target-animation {
    from {
        background: hsla(var(--theme_HSL), 0.75);
        /*border: 1px solid hsl(var(--theme_HSL));*/
    }

    to {
        background: transparent;
        /*background: inherit;
        border: inherit;*/
    }
}

/*
========================================================================
*/
table.basic-table {
    width: 100%;
}
/*.basic-table tr td:first {
    width: 75%;
}*/
table.basic-table, table.basic-table th, table.basic-table td {
    border-collapse: collapse;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;

    vertical-align: top;
}
.basic-table td {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
table.basic-table th, table.basic-table td {
    border-left: 1px solid gray;
}
table.basic-table th:first-of-type, table.basic-table td:first-of-type {
    border-left: none;
}

.basic-table td, .basic-table th {
    padding: 0.5em;
}

table.basic-table td.return-type, table.basic-table td.type {
    width: 20%;
    text-align: right;
}

article details {
    border-radius: 0.5em;
    border-left: 0.25em solid var(--link-color);
    margin-left: 0.25em;
    padding-left: 0.5em;
}

article details summary { 
    cursor: pointer;
}

/*do not print closed details*/
@media print {
    article details:not([open]) {
        display: none;
    }
}

@keyframes target-fade {
	from { background-color: cyan}
	to { background-color: transparent; }
}

.tooltip {
    position: relative;
}

/*
https://www.w3schools.com/css/css_tooltip.asp
https://codepen.io/otwm/pen/yLLwvJz
*/
.tooltip .tooltiptext {
    all: initial;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    overflow: hidden;
    top: 0;
    display: block;
    text-decoration: none;

    text-align: left;

    border-radius: 0.5em;
    border: 1px solid gray;
    background-color: black;
    color: white;
    font-size: 85%;
    padding: 0.5em;

    z-index: 1;

}

.tooltip .tooltiptext {
    transition: 0.25s all ease;
    /*top: -2em;*/
    transform: perspective(100em) translate(0, 3em);
    transform: perspective(100em) rotateX(-45deg) translate(0, 5em);
    /* hide after 0.5s */
    transition-delay: 0.5s;
}

.tooltip:hover {
    background: rgba(127, 127, 127, 0.5);
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;

    /* show after 1s */
    transition-delay: 1s;

    /*top: 1.5em;*/
    transform: perspective(100em) translate(0, 1.5em);
}

p, article .p, article .paragraph {
    display: block;
    /*padding-top: 0.5em;
    padding-bottom: 0.5em;*/

    --top-bottom-margin: 0.5em;
    margin-top: var(--top-bottom-margin);
    margin-bottom: var(--top-bottom-margin);
    /*margin: initial;*/

    /* https://www.w3schools.com/cssref/css3_pr_text-justify.asp */
    text-align: justify;
    text-justify: inter-word;
}

p::before, article .p::before, article .paragraph::before {
    content: "";
    padding-right: 0.25em;
    padding-right: 0.5em;
}

lc-figure-a {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.5em;
    /*border: solid 1px red;
    background: red;*/
}

lc-figure-a .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5em;

    width: fit-content;

    border: 1px solid gray;
    border-radius: 0.5em;
}

lc-figure-a .label {
    font-size: 85%;
    /*width: 50%;*/
    max-width: 25em;
}

lc-figure {
    display: block;
    width: 50%;
    margin: auto;
    margin-top: 0.5em;
    margin-bottom: 0.5em;

    border: 1px solid gray;
    border-radius: 0.5em;
    padding: 0.5em;
}

lc-figure:not(.float) {
}

lc-figure.float {
    width: 33%;
    margin: 0.5em;
}
lc-figure.float.left {
    float: left;
}
lc-figure.float.right {
    float: right;
}

/* TODO auto? */
.float {
    float: right;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}

.float, .float-left, .float-right {
    margin: 0.5em;
    max-width: 50%;
}

.max-width-05 {
    max-width: 5%;
}
.max-width-10 {
    max-width: 10%;
}
.max-width-15 {
    max-width: 15%;
}
.max-width-20 {
    max-width: 20%;
}
.max-width-25 {
    max-width: 25%;
}
.max-width-30 {
    max-width: 30%;
}
.max-width-35 {
    max-width: 35%;
}
.max-width-40 {
    max-width: 40%;
}
.max-width-45 {
    max-width: 45%;
}
.max-width-50 {
    max-width: 50%;
}
.max-width-55 {
    max-width: 55%;
}
.max-width-60 {
    max-width: 60%;
}
.max-width-65 {
    max-width: 65%;
}
.max-width-70 {
    max-width: 70%;
}
.max-width-75 {
    max-width: 75%;
}
.max-width-80 {
    max-width: 80%;
}
.max-width-85 {
    max-width: 85%;
}
.max-width-90 {
    max-width: 90%;
}
.max-width-95 {
    max-width: 95%;
}
.max-width-100 {
    max-width: 100%;
}

.circled,
[class*="circled-"] {
    border-radius: 50%;
    border: 1px solid gray;
    padding: 0.25em;
}

.squared,
[class*="squared-"] {
    border-radius: 0.5em;
    border: 1px solid gray;
    padding: 0.25em;
}
div.squared,
div[class*="squared-"] {
    margin: 0.5em;
}

/* TODO move!!! */
/*tex-math {
    /*border: solid 5px gray;* /
    margin: auto;
    max-width: 100%;
    min-width: 20%;
    width: fit-content;
    display: block;
}
tex-math[class*="squared"] {
    padding: 0.25em;
}*/

/* TODO move!!! */
.width-05 { width: 5%; }
.width-10 { width: 10%; }
.width-15 { width: 15%; }
.width-20 { width: 20%; }
.width-25 { width: 25%; }
.width-30 { width: 30%; }
.width-35 { width: 35%; }
.width-40 { width: 40%; }
.width-45 { width: 45%; }
.width-50 { width: 50%; }
.width-55 { width: 55%; }
.width-60 { width: 60%; }
.width-65 { width: 65%; }
.width-70 { width: 70%; }
.width-75 { width: 75%; }
.width-80 { width: 80%; }
.width-85 { width: 85%; }
.width-90 { width: 90%; }
.width-95 { width: 95%; }
.width-100 { width: 100%; }

.underlined,
[class*="underlined-"] {
    /*border-bottom: 1px solid gray;*/
    /*padding-bottom: 0.25em;*/

    text-decoration: underline;
}

.strike-through, .strikeout, .sout, .strikethrough, .st,
[class*="strike-through-"], [class*="strikeout-"], [class*="sout-"], [class*="strikethrough-"]
/*, [class*="st-"] causes issues with "skip-1st-line" */
{
    text-decoration: line-through;
}

.squared-red, .circled-red {
    border-color: red;
}
.squared-blue, .circled-blue {
    border-color: cornflowerblue;
}
.squared-green, .circled-green {
    border-color: green;
}
.squared-yellow, .circled-yellow {
    border-color: yellow;
}
.squared-orange, .circled-orange {
    border-color: orange;
}

.underlined-red,
.strike-through-red, .strikeout-red, .sout-red, .strikethrough-red, .st-red {
    text-decoration-color: red;
}

.underlined-blue,
.strike-through-blue, .strikeout-blue, .sout-blue, .strikethrough-blue, .st-blue {
    text-decoration-color: cornflowerblue;
}

.underlined-green,
.strike-through-green, .strikeout-green, .sout-green, .strikethrough-green, .st-green {
    text-decoration-color: green;
}

.underlined-yellow,
.strike-through-yellow, .strikeout-yellow, .sout-yellow, .strikethrough-yellow, .st-yellow {
    text-decoration-color: yellow;
}

.underlined-orange,
.strike-through-orange, .strikeout-orange, .sout-orange, .strikethrough-orange, .st-orange {
    text-decoration-color: orange;
}


/*
https://stackoverflow.com/questions/39858998/zoom-in-and-out-on-mouse-click-with-css
*/
lc-figure img {
    cursor: zoom-in;
}
lc-figure img:active {
    -webkit-transform: scale(2);
    transform: scale(2);
    cursor: zoom-out;
}

tex-math {
    display: block;
}
i-math {
    display: inline;
}

/*
================================
        COURSES TIMELINE
================================
*/

.courses-timeline {
    /*border : 1px solid gray;*/

    display: grid;

    /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/

    grid-template-rows: repeat(auto-fit, 1.25em);

    grid-gap: 0.25em;
    grid-row-gap: 0.5em;
    padding: 0.25em;
}
.courses-timeline > .course {
    grid-column: 1;
    /*grid-row: 1;*/

    border-radius: 0.5em;

    background: gray;
}

/*
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode


*/
.courses-timeline > .course > * {
    /*mix-blend-mode: difference;*/
    color: white;
    font-weight: bold;
    /*filter: invert(100%);*/
}

.courses-timeline > .course a, .courses-timeline .course > a:active, .courses-timeline .course > a:focus, .courses-timeline .course > a:hover {
    display: block; size: 100%;

    color: inherit;
    text-decoration: none;
    text-align: center;
    text-shadow: 0 0 0.25em black;
    /*https://css-tricks.com/almanac/properties/t/text-stroke/*/
}

/*
GitHub Copilot chose these colors
https://stackoverflow.com/questions/57835697/how-to-properly-cycle-through-nth-of-type
*/
.courses-timeline>.course:nth-of-type(30n+1) {
    background: red;
}
.courses-timeline>.course:nth-of-type(30n+2) {
    background: blue;
}
.courses-timeline>.course:nth-of-type(30n+3) {
    background: cyan;
}
.courses-timeline>.course:nth-of-type(30n+4) {
    background: green;
}
.courses-timeline>.course:nth-of-type(30n+5) {
    background: gray;
}
.courses-timeline>.course:nth-of-type(30n+6) {
    background: orange;
}
.courses-timeline>.course:nth-of-type(30n+7) {
    background: yellow;
}
.courses-timeline>.course:nth-of-type(30n+8) {
    background: purple;
}
.courses-timeline>.course:nth-of-type(30n+9) {
    background: brown;
}
.courses-timeline>.course:nth-of-type(30n+10) {
    background: pink;
}
.courses-timeline>.course:nth-of-type(30n+11) {
    background: magenta;
}
.courses-timeline>.course:nth-of-type(30n+12) {
    background: teal;
}
.courses-timeline>.course:nth-of-type(30n+13) {
    background: violet;
}
.courses-timeline>.course:nth-of-type(30n+14) {
    background: salmon;
}
.courses-timeline>.course:nth-of-type(30n+15) {
    background: gold;
}
.courses-timeline>.course:nth-of-type(30n+16) {
    background: indigo;
}
.courses-timeline>.course:nth-of-type(30n+17) {
    background: navy;
}
.courses-timeline>.course:nth-of-type(30n+18) {
    background: crimson;
}
.courses-timeline>.course:nth-of-type(30n+19) {
    background: lime;
}
.courses-timeline>.course:nth-of-type(30n+20) {
    background: olive;
}
.courses-timeline>.course:nth-of-type(30n+21) {
    background: teal;
}
.courses-timeline>.course:nth-of-type(30n+22) {
    background: violet;
}
.courses-timeline>.course:nth-of-type(30n+23) {
    background: salmon;
}
.courses-timeline>.course:nth-of-type(30n+24) {
    background: gold;
}
.courses-timeline>.course:nth-of-type(30n+25) {
    background: indigo;
}
.courses-timeline>.course:nth-of-type(30n+26) {
    background: navy;
}
.courses-timeline>.course:nth-of-type(30n+27) {
    background: crimson;
}
.courses-timeline>.course:nth-of-type(30n+28) {
    background: lime;
}
.courses-timeline>.course:nth-of-type(30n+29) {
    background: olive;
}
.courses-timeline>.course:nth-of-type(30n+30) {
    background: teal;
}


/*
https://www.usability.gov/how-to-and-tools/methods/color-basics.html#:~:text=Cool%20colors%20include%20green%2C%20blue,more%20subdued%20than%20warm%20colors.
*/

/*
================================
        RENDER PREVIEW
================================
*/
.render-preview {
    background: rgb(30, 30, 30);
    border-radius: 0.5em;
    border: 1px solid gray;
    padding: 0.25em;
}


.text-align-center {
    text-align: center;
}

p:first-of-type {
    margin-top: 0;
}
p:last-of-type {
    margin-bottom: 0;
}


.top-notice {
    --rgb: 128, 128, 128;

    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    border-color: rgb(var(--rgb));
    background: rgba(var(--rgb), 0.25);
    text-align: center;

    padding: 0.25em;
}

.top-notice.orange {
    --rgb: 255, 165, 0;
}

article > img, article > p > img {
    display: block;
    max-width: 80%;
    margin: auto;
}

.color-red, .red {
    color: red;
}

/* TODO REMOVE, test only */
@media print {
    body > * {
        display: none;
    }
    body {
        background: transparent;
    }
    :root {
        --text_color: black;
        --paper_color: transparent;
    }
    lc-content {
        display: block;
    }
    lc-content > * {
        display: none;
    }
    lc-content > article {
        display: block;
    }
    tex-math, i-math {
        break-inside: avoid;
    }
    article h1,
    article h2,
    article h3,
    article h4,
    article h5,
    article h6 {
        color: black;
    }

    lc-nav-index {
        grid-column: first-start / first-end;
        grid-row: 1 / 2;
    }
    lc-content {
        grid-row: 2 / 3;
    }

    .no-print {
        display: none;
    }
}

figure {
    margin: auto;
    max-width: 85%;
    width: fit-content;
    padding: 0.5em;
    border-radius: 0.5em;
    border: 1px solid gray;
    box-sizing: border-box;
}
figure img {
    display: block;
    max-width: 100%;
    margin: auto;
}

figcaption {
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
}

table {
    border-collapse: collapse;
    /*border: 1px solid gray;*/
    margin: auto;
    max-width: 85%;
    width: fit-content;
}

table thead {
    background: rgba(128, 128, 128, 0.1);
}
table tbody {
    background: rgba(128, 128, 128, 0.05);
}

table td, table th {
    border: 1px solid gray;
    padding: 0.5em;
}

table th {
    border-bottom: 2px solid gray;
}

.font-relative-size-0-25 {
    font-size: 0.25em;
}
.font-relative-size-0-50 {
    font-size: 0.5em;
}
.font-relative-size-0-75 {
    font-size: 0.75em;
}
.font-relative-size-1-25 {
    font-size: 1.25em;
}
.font-relative-size-1-50 {
    font-size: 1.5em;
}
.font-relative-size-2 {
    font-size: 2em;
}
.font-relative-size-3 {
    font-size: 3em;
}


lc-defs {
    display: none;
}