@import url("https://rsms.me/inter/inter.css");

html,
button,
input,
select,
textarea,
.pure-g [class*="pure-u"] {
    font-family:
        InterVariable, Inter, Roboto, "Helvetica Neue", "Arial Nova",
        "Nimbus Sans", Arial, sans-serif;
    font-variant-alternates: character-variant(alt-1, open-4, uc-g-with-spur)
        styleset(square-punctuation, square-quotes, disambiguation);
}

html[data-theme="light"] {
    --color-link: #3494b7;
    --color-link-with-background: #c6cdd7;
    --color-navbar-item-inactive: rgba(0, 0, 0, 0.6);
    --color-navbar-item-active: rgba(0, 0, 0, 1);
    --color-navbar-item-in-section: #3494b7;
    --color-pill: var(--color-background-inline-code);
    --color-pill-hover: #acccd8b8;
    --home-link-underline-color: #acccd8;
    --color-navbar-item-active: #3494b7;
}

html[data-theme="dark"] {
    --color-link: #41b4de;
    --color-link-with-background: #c6cdd7;
    --color-navbar-item-inactive: rgba(255, 255, 255, 0.6);
    --color-navbar-item-active: rgba(255, 255, 255, 1);
    --color-navbar-item-in-section: #dddddd;
    --color-pill: var(--color-background-inline-code);
    --color-pill-hover: #000000b8;
    --home-link-underline-color: #41b4de;
    --color-navbar-item-active: #41b4de;
}

::-moz-selection {
    /* Code for Firefox */
    color: black;
    background: var(--color-pill-hover);
}

::selection {
    color: black;
    background: var(--color-pill-hover);
}

#bottom-meta > ul.post-tags {
    line-height: 0.8em;
    padding: 0px;
    margin-top: 16pt;
}

ul.post-tags > li.post-tag {
    display: inline-block;
    margin: 0pt 4pt 0pt 0pt;
    height: 32pt;
}

#bottom-meta > ul.post-tags > li.post-tag > a {
    background-color: var(--color-pill);
    padding: 8pt;
    border-radius: 4pt;
    font-size: 0.7em;
}

#bottom-meta > ul.post-tags > li.post-tag > a:hover {
    background-color: var(--color-pill-hover);
    padding: 8pt;
    border-radius: 4pt;
    font-size: 0.7em;
}

h1#postTitle {
    font-size: 3em !important;
    font-weight: 700;
    font-kerning: auto;
    letter-spacing: -1.5px !important;
    line-height: 1.2em !important;
}

span#post-date {
    font-size: 0.9em;
    color: #666;
}

div.postcard-item {
    background: var(--color-pill-hover) !important;
    box-shadow: none !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
    border-radius: 0.5rem !important;
    border: 1pt solid var(--color-pill);
}

div.postcard-post {
    display: flex;
    justify-content: space-between;
    align-items: last baseline;
}

div.postcard-item > div.postcard-post > a.postcard-title {
    text-decoration-line: none;
}

div.postcard-item > div.postcard-post > a.postcard-title:hover {
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-color: var(--home-link-underline-color) !important;
}

span.postcard-date,
span.note-date {
    font-size: 0.8em;
    vertical-align: baseline;
}

.pagination {
    margin-top: 1rem;
}

.postcard-meta,
.note-meta > ul.post-tags {
    padding-left: 0px !important;
}

.postcard-meta,
.note-meta > ul.post-tags > li.post-tag > a {
    padding: 8pt;
    font-size: 0.7em;
}

.postcard-meta,
.note-meta > ul.post-tags > li.post-tag > a:hover {
    padding: 8pt;
    font-size: 0.7em;
}

a.term-item:hover {
    border-bottom-color: var(--home-link-underline-color);
}

ul.list-layout > li > a:hover {
    border-bottom-color: var(--home-link-underline-color);
}

.line-numbers a:hover,
.related-posts-section a:hover,
#footer a:hover {
    text-decoration: underline !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color: var(--color-link) !important;
}

.auto-resizable-iframe {
    max-width: 100%;
    margin: 0px auto;
}

.auto-resizable-iframe > div {
    position: relative;
    padding-bottom: 75%;
    height: 0px;
}

.auto-resizable-iframe iframe {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    aspect-ratio: 16 / 9;
}

ul.music-grid {
    padding-left: 0px !important;
    list-style-type: none;
    list-style: none;
    display: block;
}

li.music-album {
    width: 120pt;
    display: inline-block;
    margin-left: 8px;
    vertical-align: top;
}

li.music-album img {
    border-radius: 16px;
}

li.music-album-separator {
    height: 160pt;
    text-align: center;
    padding-top: 32pt;
    font-size: 3em;
    font-weight: 800;
}

div#post-album-image {
    width: 120pt;
    overflow: hidden;
    float: left;
    margin-right: 18pt;
}

div#post-album-image img {
    width: 120pt !important;
    border-radius: 16px;
}

.breadcrumb ol {
    padding-left: 0;
}

.breadcrumb li {
    display: inline;
}

.breadcrumb li a {
    font-size: 0.7em;
}

.breadcrumb li a:hover {
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-color: var(--home-link-underline-color) !important;
}

.breadcrumb li:not(:last-child)::after {
    content: "»";
    font-size: 0.7em;
    margin: 0pt 4pt 0pt 4pt;
}

nav.breadcrumb {
    margin-bottom: 32pt;
}

h1.last-bitacora {
    font-size: 1.15em;
    font-weight: 400;
}

div.home-two-columns-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 16pt;
}

@media (max-width: 420pt) {
    div.home-two-columns-row {
        flex-direction: column;
        flex-wrap: wrap;
    }

    div.home-module {
        width: 100%;
    }
}

div.home-module li {
    margin: 0pt;
}

p#separator {
    text-align: center;
}

span#asterism {
    font-size: 2em;
    color: var(--color-navbar-item-in-section);
}

div.note-post-block {
    display: block;
    margin-bottom: 32pt;
}

div.note-post-block p {
    font-size: 0.8em;
}

div.note-post-block,
div.postcard-excerpt p {
    line-height: 1.7em;
}

div.note-post-block div.note-post a.note-title {
    font-weight: 800;
}

div.postcard-excerpt > p > a {
    color: var(--color-link);
}

div.note-excerpt > p > a {
    color: var(--color-link);
}

a.note-read-more {
    color: var(--color-link);
}

div.related-posts-section {
    background: var(--color-pill-hover) !important;
    box-shadow: none !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
    border-radius: 0.5rem !important;
    border: 1pt solid var(--color-pill);
}

div.related-posts-section > h2 {
    margin-top: 0pt;
}

ul.related-posts {
    padding-left: 0pt;
    list-style-type: none;
    line-height: 1.7;
}