html {
    color: #000000;
    background-color: #ffffff;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14pt;
    cursor: crosshair;
    scrollbar-color: #000000 #dfdfdf;
    scrollbar-width: thin;
}

* {
    scroll-behavior: smooth;
    transition: color 0.2s ease-in-out,
		background-color 0.2s ease-in-out;
}

*::-webkit-scrollbar {
    display: none;
}

.kmcrux {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

::selection {
    opacity: 100%;
    text-shadow: none;
    color: #000000;
}

img::selection {
    opacity: 100%;
    background: rgba(0, 0, 0, 0.99);
    text-shadow: none;
    color: #ffffff;
}

ul {
    list-style: none;
    list-position: inside;
}

ul li::before {
    content: "+ ";
}

a:link {
    color: #000000;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: #000000;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: #000000;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: #000000;
    background-color: transparent;
    text-decoration: none;
}

i {
    color: inherit;
}

sup {
    font-family: 'Jost', sans serif;
    font-style: bold;
    font-weight: 700;
    font-size: 12pt;
    text-decoration: none;
}

.csl-entry {
    text-indent: -1.5em;
    margin-left: 1.5em;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-size: 14pt;
    text-align: justify;
}

a.calnum {
    color: #0000ff;
    font-family: 'Inconsolata', sans serif;
    font-style: bold;
    font-size: 14pt;
    font-weight: 700;
    text-decoration: underline;
}

a.calref {
    color: #0000ff;
    font-family: 'Inconsolata', monospace;
    font-style: bold;
    font-weight: 900;
    font-size: 14pt;
    text-decoration: line-through 2px;
}

.caldef {
    margin-bottom: 1em;
    font-family: 'Inconsolata', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 12pt;
    text-align: left;
}

.calpara {
    display: inline;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14pt;
    text-align: left;
}

.footnum {
    font-family: 'Jost', sans serif;
    font-style: bold;
    font-weight: 700;
}

.footref {
    font-family: 'Jost', sans serif;
    font-style: bold;
    font-weight: 700;
    font-size: 12pt;
}

.footpara {
    display: inline;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14pt;
    text-align: justify;
}

.blockfoot {
    color: #0000ff;
    display: inline;
    font-family: 'Cardo', sans-serif;
    font-style: normal;
    font-size: 14pt;
    text-align: justify;
    line-height: 1.5;
}



.footdef {
    margin-bottom: 1em;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14pt;
    text-align: justify;
}

body {
    color: #000000;
    text-align: center;
    line-height: 1.5;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16pt;
    min-height: 100%;
    -moz-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    scrollbar-color: #000000 #dfdfdf;
    scrollbar-width: thin;
    margin: 0 auto;
}

.body_vert {
    color: #000000;
    text-align: center;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16pt;
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

h1 {
    color: #000000;
    text-align: center;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 27pt;
    margin: 0 auto;
    line-height: 1.5;
    width: 100vw;
}

h2 {
    color: #000000;
    text-align: center;
    font-family: 'Cardo', serif;
    font-weight: 700;
    font-size: 20pt;
    margin: 0 auto;
    line-height: 1.5;
}

h2.index {
    color: #000000;
    text-align: left;
    text-justify: auto;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20pt;
    margin: 0 auto;
    line-height: 1.5;
}

h3 {
    color: #000000;
    text-align: center;
    font-family: 'Cardo', serif;
    font-weight: 700;
    font-size: 18pt;
    margin: 0 auto;
    line-height: 1.5;
}

p {
    color: #000000;
    text-align: justify;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16pt;
}

p.comment {
    color: #3f3f3f;
    text-align: jusitfy;
    font-family: 'Jost', sans-serif;
    font-style: normal;
    font-size: 14pt;
    line-height: 1.5;
}

p.cal {
    color: #000000;
    text-align: center;
    font-family: 'Inconsolata', monospace;
    font-weight: 400;
    font-style: normal;
    font-size: 14pt;
    line-height: 1.5;
}

blockquote {
    text-align: justify;
    font-style: normal;
    font-family: 'Jost', sans-serif;
    font-style: normal;
    font-size: 13pt;
    border-left: 2px solid #3f3f3f;
    padding: 0em 10px;
    color: #0000ff;
}

p.block {
    color: #0000ff;
    text-align: justify;
    font-family: 'Jost', sans-serif;
    font-style: normal;
    font-size: 13pt;
    line-height: 1.5;
}

.main.blockquote {
    text-align: justify;
    font-style: normal;
    line-height: 1.5;
    border-left: 2px solid #3f3f3f;
    padding: 0em 10px;
}

p.main-block {
    color: #0000ff;
    text-align: justify;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-size: 15pt;
    line-height: 1.5;
}

p.colofon {
    color: #000000;
    text-align: justify;
    justify-content: justify;
    font-family: 'Jost', sans-serif;
    font-style: normal;
    font-size: 14pt;
    line-height: 1.5;
}

.ind{
    color: #000000;
    text-align: justify;
    justify-content: justify;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16pt;
    line-height: 1.5;
}

p.editor {
    color: #3f3f3f;
    text-align: center;
    font-family: 'Jost', sans-serif;
    font-style: normal;
    font-size: 14pt;
    line-height: 1.5;
}

.crux_2 {
    color: #000000;
    text-align: center;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 27pt;
    margin: 0 auto;
    margin-top: 1vh;
    line-height: 1.5;
}

.cruz_negra_2 {
    color: #000000;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 27pt;
    line-height: 1.5;
    margin: 0 auto;
}

.errorx {
    color: #000000;
    font-family: 'Jost', sans serif;
    font-style: bold;
    font-weight: 900;
    font-size: 160pt;
    text-align: center;
}

.error {
    color: #000000;
    font-family: 'Jost', sans serif;
    font-style: bold;
    font-weight: 900;
    font-size: 50pt;
    text-align: center;
}

.colofonparacode {
    color: inherit;
    background-color: inherit;
    text-align: center;
    font-family: 'Inconsolata', monospace;
    line-height: 1.0;
}

code {
    color: inherit;
    font-family: 'Inconsolata', monospace;
    font-weight: 700;
    font-style: normal;
    font-size: 14pt;
    overflow-wrap: break-word;
    text-align: justify;
}

code.jost {
    color: inherit;
    text-align: center;
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: 14pt;
    line-height: 1.5;
}

footer {
    text-align: center;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #000000;
    background-color: #ffffff;
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 13pt;
    margin: 0 auto;
    bottom: 0px;
    line-height: 1.5;
    flex-shrink: 0;
    width: 100vw;
    position: relative;
    z-index: 3;
}

/*Layout Division*/
.container {
    text-align: center;
    max-width: 100%;
    width: 85%;
    min-height: 340px;
    height: calc(100vh - 200px);
    column-gap: 5px;
    display: flex;
    justify-content: center; /* Horizontal centering */
}

div.scroll {
    background-color: transparent;
    max-width: 100%;
    width: 90%;
    max-height: 100%;
    min-height: 340px;
    height: 100%;
    text-align: left;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1em;
    scrollbar-color: #000000 #dfdfdf;
    scrollbar-width: thin;
    flex-grow: 1;
    overflow-wrap: break-word;
    hyphens: auto;
}


div.scrollnote {
    background-color: transparent;
    max-width: 100%;
    width: 40%;
    min-height: 340px;
    height: 100%;
    text-align: left;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1em;
    flex-grow: 1;
    scrollbar-color: #000000 #dfdfdf;
    scrollbar-width: thin;
    overflow-wrap: break-word;
    hyphens: auto;
}

div.scrollimg{
    background-color: transparent;
    max-width: 100%;
    width: 40%;
    min-height: 340px;
    height: 100%;
    text-align: left;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1em;
    flex-grow: 1;
    scrollbar-color: #000000 #dfdfdf;
    scrollbar-width: thin;
    overflow-wrap: break-word;
    hyphens: auto;
}



/* Darken a image when hovering over it.*/
img {
    max-width: 100%;
    height: auto; /* Maintain the aspect ratio */
}

figure {
    font-family: 'Cardo', serif;
    font-style: normal;
    font-size: 14pt;
    text-align: justify;
    line-height: 1.5;
    max-width: 100%;
    width: 100%;
    height: auto; /* Maintain the aspect ratio */
    margin: 0;
}

figcaption {
    font-family: 'Cardo', serif;
    font-style: normal;
    font-size: 14pt;
    text-align: justify;
    line-height: 1.5;
    max-width: 100%;
    height: auto; /* Maintain the aspect ratio */
}

.figsym{
    font-family: 'Jost', sans serif;
    font-style: bold;
    font-weight: 700;
    max-width: 100%;
    height: auto; /* Maintain the aspect ratio */
}


.image-container {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.image-container img {
    width: 100%;
    display: block;
    transition: filter 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    filter: blur(25px) grayscale(100%) opacity(1) brightness(0.52) ;
    justify-content: center;
}

.overlay-text {
    font-family: 'Jost', sans serif;
    font-style: bold;
    font-weight: 700;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    color: #ffffff;
    z-index: 2;
}

.image-container:hover img {
    filter: blur(0);
}

/* Exclusivo para la página de 'Imágenes' */
div.scrollthumb {
    background-color: transparent;
    max-width: 100%;
    width: 90%;
    text-align: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1em;
    scrollbar-color: #000000 #dfdfdf;
    scrollbar-width: thin;
    flex-grow: 0;
}

#image-cont {
    display: flex; /* Usa flexbox para organizar las imágenes en una fila */
    justify-content: center; /* Centra las imágenes horizontalmente */
    align-items: flex-start; /* Centra las imágenes verticalmente */
}

#image-cont img {
    width: 240px;
    margin-right: 16px;
    height: auto;
    filter: brightness(0.9) grayscale(100%);
    transition: filter 0.3s ease-in-out;
    position: relative;
}

#image-cont img .url-letter {
    display: none;
}

#image-cont img:hover .url-letter {
    display: block;
}

.url-letters-container {
    position: relative;
    display: flex;
    width: 100%;
}

.url-letters {
    font-family: 'Jost', sans-serif;
    font-style: bold;
    font-weight: 700;
    font-size: 16px;
    color: inherit;
    padding: 5px;
    border-radius: 5px;
    margin-right: 0px; /* Ajusta el margen derecho según sea necesario */
    position: relative;
    vertical-align: flex-start;
}

.url-letters:not(:first-child) {
    margin-left: 0px;
}

.image-container:hover .overlay-text {
    opacity: 0;
}

.random-image-container {
    position: relative;
    margin: 10px;
}

.random-image-container img {
    max-width: 100%;
    height: auto;
    filter: brightness(0.9) grayscale(100%);
    transition: filter 0.3s ease-in-out;
}

.random-image-container:hover img {
    max-width: 100%;
    height: auto;
    filter: brightness(1) grayscale(0%);
}

#image-cont img:hover {
    max-width: 100%;
    margin-right: 16px;
    height: auto;
    filter: brightness(1) grayscale(0%);
}

#thumbnail-container {
    display: flex;
    justify-content: center;
    max-width: 100%;
    height: auto;
    margin-top: 20px;
    flex-wrap: wrap; /* Allow thumbnails to wrap to the next line if needed */
}

.thumbnail {
    width: 100%;
    max-width: 34px;
    height: 100%;
    cursor: pointer;
    margin-right: 5px; /* Add some space between thumbnails */
    margin-bottom: 5px; /* Add space below each row of thumbnails */
}




/* Add this media query for mobile screens */
@media screen and (max-width: 1000px) {
    .container {
	flex-direction: column; /* Stack the divs vertically on small screens */
	height: 100%;
	min-height:100%;
	max-width: 80%;
	width: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center; /* Horizontal centering */
    }

    div.scrollnote,
    div.scrollimg {
	max-width: 90%; /* Allow the divs to take up the full width on small screens */
	width: 100%;
	font-size: 0.9em;
	min-height: 0vh;
	max-height: 40vh;
    }

    div.scroll {
	max-width: 90%; /* Allow the divs to take up the full width on small screens */
	width: 100%;
	font-size: 0.9em;
	max-height: 40vh;
	min-height: calc(100vh - (300px + 70px));
    }

    div.scrollthumb {
	max-width: 90%; /* Allow the divs to take up the full width on small screens */
	width: 100%;
	height: 100%;
	font-size: 0.9em;
	max-height: 40vh;
	min-height: calc(100vh - (300px + 70px));
    }

    .crux_2,
    .cruz_negra_2 {
	color: #000000;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	font-family: 'Cardo', serif;
	font-style: normal;
	font-weight: 700;
	font-size: 20pt;
	line-height: 1.5;
	margin: 0px auto;
    }

    h2,
    h2.index,
    h2.hcal {
	color: #000000;
	text-align: center;
	text-justify: auto;
	font-family: 'Cardo', serif;
	font-style: normal;
	font-weight: 700;
	font-size: 16pt;
	margin: 0 auto;
	line-height: 1.5;
    }

    blockquote,
    p.block,
    footer,
    footer {
	font-size: 11pt;
    }

    a.calnum,
    a.calref,
    .calpara,
    .footpara,
    .footdef,
    .blockfoot,
    p.comment,
    p.cal,
    p.colofon,
    p.editor,
    code,
    .csl-entry {
	font-size: 12pt;
    }

    body, p, .ind {
	font-size: 14pt;
    }

    p.main-block {
	font-size: 13pt;
    }

/* Secciónpara la página de "Imágenes" */
    #image-cont img {
        margin: 0 0 10px 0; /* Adjust margin for vertically stacked images */
	width: 100%; /* Make sure images don't exceed the container width */
    }

    #image-cont {
	display: block; /* Usa flexbox para organizar las imágenes en una fila */
	justify-content: center; /* Centra las imágenes horizontalmente */
	align-items: flex-start; /* Centra las imágenes verticalmente */
    }

    .thumbnail {
	width: 100%;
	max-width: 100px;
	height: 100%;
	cursor: pointer;
	margin-right: 5px; /* Add some space between thumbnails */
	margin-bottom: 5px; /* Add space below each row of thumbnails */
    }

    #image-cont img:hover {
	max-width: 100%;
	margin-right: 16px;
	height: auto;
	filter: brightness(1) grayscale(0%);
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {

    ::selection {
	opacity: 100%;
	background: rgba(0, 0, 0, 0.99);
	text-shadow: none;
	color: #dfe3e6;
    }

    img::selection {
	opacity: 100%;
	background: rgba(223, 227, 230, 0.99);
	text-shadow: none;
	color: #101416;
    }

.image-container img {
    filter: blur(25px) grayscale(100%) opacity(0.7) brightness(1) ;
}
    html,
    body,
    b,
    div.kmcrux,
    div.body_vert {
	background-color: #000000;
	color: #dfe3e6;
    }

    h1.errorx,
    h1.error,
    footer,
    div.kmcrux a {
	background-color: #000000;
	color: #dfe3e6;
	overflow: auto;
    }

    div.body_vert b,
    div.body_vert p,
    a.h1,
    h1,
    h2,
    a.h2,
    h2.hcal,
    h3,
    h4,
    h5,
    h6,
    p.cal,
    h2.index,
    .footpara,
    .cruz_negra_2,
    .crux_2.h1,
    div.scroll,
    div.scrollnote,
    div.scrollimg,
    div.scrollthumb,
    a:active,
    a:link,
    a:visited {
	color: #dfe3e6;
	scrollbar-color: #dfe3e6 #595959;
	scrollbar-width: thin;
    }

    div.body_vert p.editor,
    div.body_vert p.comment {
	color: #abb1b1;
    }

    a.calnum,
    div.body_vert p.block,
    div.body_vert p.main-block,
    div.body_vert .blockfoot
    {
	color: #2997ff;
    }

    div.body_vert blockquote {
	color: #abb1b1;
	border-left: 2px solid rgb(223, 227, 230);
	padding: 0em 10px;
    }

    a.calref {
	color: #2997ff;
	font-size: 14pt;
	text-decoration: line-through 2px;
    }

}