:root {
    --color-bg: white;
    --color-text: #585858;
    --color-text-a-not-visited: #1818A8;
    --color-text-a-hover: black;
    --color-menu-border: gray;
    --color-menu-bg: lightgray;
    --color-border: #f0f0f0;
    --color-hover-light: lightgray;
    --color-text-note: gray;

    --thin-size: 0.3em;
}
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: black;
        --color-text: #d8d8d8;
        --color-text-a-not-visited: #d8d8ff;
        --color-text-a-hover: white;
        --color-menu-bg: #181818;
        --color-hover-light: #383838;
    }
}

body {
    background: var(--color-bg);
}

img { filter: grayscale(1); }

@media (prefers-color-scheme: dark) {
    img { filter: grayscale(1) invert(1); }
}

* {
    font-family: sans-serif;
    font-size: 98%;
    color: var(--color-text);
}

a:not(:visited) {
    color: var(--color-text-a-not-visited);
}

a:hover {
    color: var(--color-text-a-hover);
}

a:not([href]) {
    color: var(--color-text);
}

h1 {
    font-size: 150%;
}

h2 {
    font-size: 110%
}

body {
    counter-reset: table_cnt img_cnt;
    max-width: 55em;
    margin: auto;
    padding: var(--thin-size);
}

blockquote {
    border-left: solid;
    padding-left: 1em;
}

p:has(+ ul) {
    margin-bottom: 0;
}

p ~ ul {
    margin-top: 0;
}

dt { float: left; font-weight: bold; }
dd { margin-inline-start: 1em; }
dd::before {  margin: 0 0.5em; content: '-'; }
dd::after { content: '.'; }
dt:hover, dt:hover + dd { background-color: var(--color-hover-light); }

#map { margin-right: 1em; float: left; }
#map ul { display: table; }
#map li { display: table-row; }
#map li a { display: table-cell; text-align: center; padding: 0 var(--thin-size); }
#map li a:first-of-type { text-align: left; }
#map li a:last-of-type { text-align: right; }
#map li:first-child { display: table-caption }
#map li:first-child a::before {
    content: '<<';
    padding-right: var(--thin-size);
    display: inline-block;
    text-decoration: none;
}

nav ul {
    list-style-type: none;
    padding-inline: 0;
}

#content nav ul li a:first-child::before, #content nav ul li:not(:has(a))::before {
    content: '\21D2';
    margin-right: var(--thin-size);
    display: inline-block;
    text-decoration: none;
}

.breadcrumb ul { display: flow-root; }
.breadcrumb li { float: left; }
.breadcrumb li:not(:first-child)::before{ content: '|'; padding: 0 var(--thin-size); }
.breadcrumb a.prev::before { content: '<'; display: inline-block; text-decoration: none; }
.breadcrumb a.next::after  { content: '>'; display: inline-block; text-decoration: none; }

table {
    width: 100%;
    margin-top: 1em;
}

tr:hover {
    background-color: var(--color-hover-light);
}

th, td {
    border: 1px solid var(--color-border);
    text-align: left;
    padding: 0.2em;
}

#index > th, #index > td {
    padding: 0.5em 0.2em;
}

#content {
    display: flex;
    flex-direction: column;
}

section:not(#index, #cscheme, #cscheme1, #cscheme2) td:last-child {
    white-space: nowrap;
}

tfoot tr:not(:first-child) td:first-child,
tbody:not(:only-of-type) tr:not(:first-child) td:first-child {
   padding-left: 1.5em;
}

caption {
    text-align: right;
}

caption::before {
    counter-increment: table_cnt;
    content: 'Таблица ' counter(table_cnt) ': ';
}

section {
    display: flow-root;
    clear: both;
}

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

figure {
    margin: auto;
    padding: 1em;
}
figure:not([class]) {
    float: left;
    clear: both;
    max-width: 100%;
    text-align: center;
}

figcaption {
    text-align: center;
    counter-increment: img_cnt;
}
figcaption::before {
    content: 'Рис. ' counter(img_cnt) ' - ';
}
figcaption:not(:has(*))::before {
    content: 'Рис. ' counter(img_cnt);
}

#package1, #package2, #cscheme1, #cscheme2 {
    width: 50%;
    min-width: min-content;
    float: left;
    clear: none;
}

#cscheme  table,
#cscheme1 table,
#cscheme2 table {
    width: auto;
}

#cscheme th,
#cscheme1 th,
#cscheme2 th {
    white-space: nowrap;
}

footer {
    clear: both;
    font-size: 70%;
    color: var(--color-text-note);
}

ins {
    text-decoration: inherit;
}
del {
    display: none;
    visibility: hidden;
}

#literature li:not(:last-child)::after {
    content: ';'
}
#literature li:last-child::after {
    content: '.'
}

/* Всплывающие изображения */
a[href$='.jpg'] {
  position: relative;
}

a[href$='.jpg']::after {
  position: absolute;
  display: inline-block;
  left: 0; bottom: 1.5em;
  visibility: hidden;
  opacity: 0;
  transition: ease 1s;
  content: var(--href);
  filter: grayscale(1);
}

a[href$='.jpg']:hover::after {
  visibility: visible;
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
    a[href$='.jpg']::after { filter: grayscale(1) invert(1); }
}

/* Всплывающее меню */
@media only screen and (max-width: 768px) {
    #map {
        float: none;
    }

    #map li:first-child, #map li a {
        display: inline-block;
    }

    /* menu button */
    #map::before {
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        content: '≡';
        font-size: 2.5em;
    }

    #map > ul {
        display: block;
        position: absolute;
        left: -100%;
        z-index: 1;
        width: calc(100% - 12em);
        list-style: none;
        text-align: center;
        background-color: var(--color-menu-bg);
        opacity: 0;
        margin: 0;
        padding: 0;
    }
    /* menu items */
    #map > ul > li {
        display: block;
        width: calc(100% - 1.6em);
        padding: 0.8em;
        font-size: 120%;
    }
    #map > ul > li:hover {
        background-color: var(--color-hover-light);
    }

    /* show menu */
    #map:hover > ul {
        display: block;
        left: 0;
        opacity: 1;
    }

    /* animation */
    #map > ul, #map > ul > * {
        transition-duration: .5s;
    }
}

@media print {
    #map, .breadcrumb { display: none; }
}