html {
    background-attachment:fixed;
    background-size:cover;
    height:100%;
    font-family:"Alegreya",serif;
    font-size:20px;
    /* background:#e5e7eb; */
    background:#a9bdad;
    /* background:#b2c2cf; */
    /* background:#d9bf8a; */
    /* background:#c7b4b6; */
    /* background:#d3d0d7; */
    /* background:#d3d4c7; */
    /* background:#e3d0a8; */
    /* background:#ecd3a0; */
    /* background:#decdb3; */
    color:#000;
    /* background:#525c67; */
    /* color:antiquewhite; */
}

body {
    display:flex;
    flex-direction:column;
    min-height:100%;
    line-height:1.7rem;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    position:relative;
}

body > header {
    position:sticky;
    top:0;
    /* background:#e5e7eb; */
}

body > header,
body > footer {
    padding-top:10px;
    padding-bottom:10px;
    z-index:2;
}

body > header a:hover {
    border:none;
    /* color:#dbdb5b */
}

section {
    margin-bottom:1lh;
}

.active {
    font-weight:700;
}

h1, h2, h3, h4, h5, h6 {
    font-family:"Karla", arial, sans-serif;
}

h1 {
    font-weight:700;
    font-size:1em;
}

h1 a:hover { 
    text-decoration:none;
}

h2 {
    font-size:22px;
    font-weight:700;
}

h2 ~ span { font-size:22px; }

h3 {
    font-weight:700;
    margin-bottom:1lh;
}

h3 ~ span { font-size:21px; }

article {
    counter-reset:paragraph;
}

b, strong {
    font-weight:bold;
}

i, em {
    font-style:italic;
}

small {
    font-size:10px;
    font-family:monospace;
}

a { color:currentColor; text-decoration:none; position:relative; z-index:2; }

main p { 
    position:relative;
    text-indent:1lh;
    counter-increment:paragraph;
    max-width:60ch;
}

main p::before {
    content:counter(paragraph);
    position:absolute;
    left:-55px;
}

main a { color:rgba(0,0,0,0.4); border-bottom:1px solid currentColor; }
main a:hover { color:rgba(0,0,0,0.6); }

/* main a::after {
    content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg>');
} */

img, video { 
    display:block;
    max-width:100%;
    cursor:pointer;
    /* margin-bottom:1lh; */
    /* max-height:80vh; */
    /* mix-blend-mode:multiply; */
    /* box-shadow:0px 1px 5px rgba(0,0,0,0.1); */
}

img.focused, video.focused {
    /* position:absolute; */
    position:fixed;
    top:10px;
    left:10px;
    max-width:90vw;
    max-height:90vh;
    /* cursor:grab; */
    margin-left: auto;
	margin-right: auto;
	text-align: center;
	left: 0;
	right: 0;
    z-index:999;
}

.backdrop {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	opacity:0.8;
	z-index:99;
    display:none;
    cursor:pointer;
}

canvas {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    z-index:1;
    width:100%;
    height:100%;
}

/* img { width:100%; height:auto; margin-bottom:15px; box-shadow:0px 0px 5px 0px rgba(0,0,0,0.2) } */

/* table { text-align:left }
table thead, table tfoot { font-weight:800 } */



/* @media screen and (max-width: 1000px) {

    body > header,
    body > footer {
        position:static;
    }

    body, body .grid-columns-template { grid-template-columns:1fr 1fr 1fr; }

    body.show-grid .grid-columns-template > div:nth-child(3) { display:none; }

    .gs-2 { grid-column-start:1; }
    .gs-3 { grid-column-start:2; }
    .gs-4 { grid-column-start:3; }

    .ge-3, .ge-4, .ge-5 { grid-column-end:4; }
}

@media screen and (max-width: 600px) {
    body, body .grid-columns-template { grid-template-columns:1fr 1fr; }

    body.show-grid .grid-columns-template > div:nth-child(2) { display:none; }

    .gs-3, .gs-4 { grid-column-start:1; }

    .ge-5 { grid-column-end:3; }
} */

/**
 * PAGES
 */

.double-page {
    display:flex;
    margin:0 auto;
    position:relative;
}

.page {
    display:grid;
    background:#FFF;
    box-sizing:border-box;
    border:1px solid #CCC;
    font-size:1.3vh;
    line-height:2.2vh;
}

.page-a-ratio {
    /* width:14.8cm; */
    /* height:21cm; */
    height:90vh;
    aspect-ratio:1/1.414
}

.page h2,
.page h2 ~ span {
    font-size:1.8vh;
}

.page p {
    text-align:justify;
    text-justify:auto;
}

.page small,
.page .small {
    font-size:1vh;
}

.double-page .pagination {
    font-size:1.3vh;
    position:absolute;
    bottom:3vh;
}

.double-page .pagination:not(:last-child) {
    left:5%;
}

.double-page .pagination:last-child {
    right:5%;
}

@media (max-aspect-ratio: 3/2) {

    .double-page {
        display:block;
        margin-bottom:1lh;
    }

}