/* FONTES =================================================================== */
@font-face {
    font-family: 'New Aster';
    src: url('/assets/fonts/NewAster-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
/* GERAIS =================================================================== */
kbd {
    padding: 1px 2px 0;
    border-radius: 3px;
    border: 1px solid #666;
    border-color: grey;
    font-family: monospace;
    box-shadow: 2px 2px grey;
}
body {
    background-image: url('/assets/img/zeleznik2-bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    margin: auto;
    max-width: 1220px;
    font-family: 'Open Sans', Arial, sans-serif;
}
main {
    width: 1220px;
    margin: 0 auto; /* centraliza */
    background: rgba(240, 240, 240, 0.9); /* translúcido */
    box-sizing: border-box;
    padding: 20px 20px 10px 20px; /* ver "back-to-top" margin */
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'New Aster', serif;
}
a {
    color: #3474a6;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
blockquote {
    background-color: #13377d;
    color: white;
    padding: 1px 35px;
    border-radius: 10px;
    position: relative;
    display: flow-root; /* background acompanha o texto caso haja imagem */
    a {
        color: #00FFFF !important;
    }
}
blockquote::before,
blockquote::after {
    font-size: 40px;
    position: absolute;
    line-height: 1;
}
blockquote::before {
    content: "\275D"; /* aspas esquerda */
    top: -1px;
    left: 0;
}
blockquote::after {
    content: "\275E"; /* aspas direita */
    bottom: -16px;
    right: 0;
}
li {
    margin: 0 0 5px 0;
}
/* LINHA */
hr {
    border: 1px solid #13377d;
    margin: 0 auto;
}
hr.border-2px {
    border: 2px solid #13377d;
}
/* TABELAS */
th {
    vertical-align: bottom;
}
td {
    vertical-align: top;
}
td, th {
    padding: 0px 16px; /* vertical horizontal */
}
/* DIV: NOTAS =============================================================== */
div.important,
div.note,
div.tip,
div.warning,
div.caution {
    padding: 0px 1em 0px 4em; /* cima direita embaixo esquerda */
    background-repeat: no-repeat;
    background-position: 0.5em 0.5em;
    background-color: #ffffcb;
    border: 0.1em solid #cccca3;
    min-height: 26px;
}
div.important {
    background-image: url('data:image/webp; charset=UTF-8; base64, UklGRl4DAABXRUJQVlA4WAoAAAAQAAAAHwAAHwAAQUxQSH4BAAAJBjnati1O9f1DJoY7VHSkCivgonOOu/sGXEo/pXbutfsS3K2Nu+tM8JH/38H7R8QEwGr37E5ft6ea/v/4VZo4Dr8L3ZoYamlqwcSt0NthW86b38bdKhmrcuLbDae1vo97PYysMrn/Y5+Vri9+lew6/F+7zBzvBxnZZwPSYXLJrxBPZeSS0eABJ/FVDw0aXO4E7/bLK9pnGDc2207AlEr8nVME7HaL2E2Aj0T6COgV0gfAKcRJgCZEIyApJEHAfyH/CXhYFVB/SMBbXYB8CyD/ZoHbwqs8ATic4ZY7TCujd6uctNtRA5z+3eAy/+M0GcvJ2DyH+ehkwwSF0T91W/qfsTIzcXkrq59WFywtyCfryl6PYqA6AeXM9g81zUSvf9h5TnE5VacBIzAgcHjrta+J6rxMfru+7WiQgcDIUG9IXQNq8WdHd21YvXH3sWeyVtegS1k3WKhWpCwXC/lcNp1KppDJ5QvFUhkSCwaAJrPIIZtJAUmkkM5k0ylZ0AkAVlA4ILoBAACwCgCdASogACAAPpE6mEelo6KhMAgAsBIJbACdMoR5n4B+QH4zdEg4bxsMBtgOQA9y28zegB+wHWl100kBQAe5v6NSYry/YT+OFOpW6KymOTgZy75cvIPZls17z9QAAP0g7KH7Qy4cFvsuXUNi0m0XQo1UFXmn9vCx0cd3XyMAituIXlzc0jwTPUbxi4MaV+9BDcK0sV0ge/TeXJXarlcP0KccC97D/xidybWtbNnDBh3JQfl1CCPziwLb9/eRea53pPlb1e8h0jG/QF8q7tQnXW6Lzft8A/9n5aXkJ/0nhwf7XDouYWgwaPWQoOC80hGlr4hBjDtiKywT6MaBfsjxbgfiaTQQ1BDVy4jUf8PZttYZWBv76Ye/xTl0T34VkCU+XvaOHz5QlKMz7GfP3nuMjm01sX7/WyHq8xKqvtxd+5kR8nRAaGAvefgoBVFtaTGxGtfI3ZEhxjfQMU9PhGOhO92SUf8eroB+cGRgtUy5E5Ix8Kz4n1dcNWVHzP0eEGEuDZQPfLBH0YSG+nHqkekWJwjcSOAIirubcfP5vc5V9ekqD0fmMBpMOYvmtKNhylPFd2Wr3EOHgAAA');
}
div.note {
    background-image: url('data:image/webp; charset=UTF-8; base64, UklGRkICAABXRUJQVlA4WAoAAAAQAAAAHwAAHwAAQUxQSKUAAAABgJNt27LseTjc3ZncJYCnIAMJmEgBCThYYSQDCb6dAO7u8t78MkfEBNC/1efBBNoXPyLZ3Zwu/Ib5Il7zpHYWdq486V/E1Z+MxF06T86AwUP+Ahw+NM+A+YN0Ae71RPYjYp6j1vqCXFXpgj01qH2EXHqkkjAS0RSzIrqAiVEsR8lVKBVObvCGojHB0ZDXIGe5SqvT6YXqdFqVnImYmWVCmZnpDwQAVlA4IHYBAAAwCQCdASogACAAPo02mUelIqKhMBgMAKARiWwAnTKEdn6DOSXifiS/rN75PoA3iv0AP1A9Lz2Uv2l9IcmhT39Zv/Fy1/8Ausb8xiPb5ItxjbVQAP73AUlzd3ruDcIAoKtMV7P68y8tsK+0agayFMzuzdFg7e7/fm/9aB37tRqkn9/uMh8G//jRQUjTIX5efKd/J73i14DQs+eGuqLskMYGZK74xtHoNIWpiDNUEGJtGlE5m95fryC8qgnMnsESFLHodsJWo/tCToPvaNtHq4n3zWmQGOvHNCDtxfIerae4abZFUoFZS8A0A5ToATVGejzfBSP2XF5qghW1Z+Bdfxxf3c1/7yYwQ4VnSxdlM5Mzm99Huhq2cOa3yKCNG7tvtN940HXkz6yP8l3PlZtqlIKv0PvC85cOCo1WEpbyJ+faq3/lX8dLz50jd1fV/GV22NPZrvrXrE5tO/MB3bfaIo9lwkNzBbM08QvqA3gupKC5tiRbch4AAA==');
}
div.tip {
    background-image: url('data:image/webp; charset=UTF-8; base64, UklGRoYDAABXRUJQVlA4WAoAAAAQAAAAHwAAHwAAQUxQSO0BAAANkHRrmyHJ+t9IldFj27a1tG1jbdvYGzvbtm3bLHcXIjMihlF5JiImAP+zq0u/BgXw48bmvSl7Rs9OcgAFGnRpO3eNDcb2JP5u+fXZ5XvRbMi2NP5kIOCau9WI3iKLsUkAYOCwNE51X+sKq+SCEwCAcVO3CKDHtMLTV0Sl+qUBMA5CNQEiGHUFu26WGgaAmTqDBVUIMM4KDtooVQGAqVLCNAsEptAz+cu9kPIAlAghuAJOjXBAs3yePKk8D1I650JwjRpv83ks3ZUH6fs1U2CaEBrPZL4UqvnC8Od+lFs52JNJVf/6MZmOBooMYDu08l/3yW1tUtIZj9Wr/jXm9ZQXDyuWDkfXyomu23yOq4XPtKubP3Tl+cMFntAgZPli1Bm3+bj8gSdh3pr1qhEahazvLdvqvVP3oyuplDjX+eVG2Hi5LY0nK75RKh0rU+brTTuiH6qXibYM6nkHnEUjh+zAyP3VDJT0oWOh99tg673cNoAgANg4e9ASAAFAVWaTir8bJV/atGja37AFNi/EP/tusSnp/sdrX5Jlpxpao4H93QBCx9cVcjCLUTlD5cqrTc6RDmT2hhqpScGZkhYSRBAFhOwuXQVPwm25qVIVDLLC4uAimZz6BeVqujWn5mYC8sKkzILFvqk+aKqqEvwTAFZQOCByAQAAUAcAnQEqIAAgAD6ROJlJJaMiITAYCACwEglkAJ0yhHztIBuAVLH6U3+SsnKiyzwEvcl5ibCbaczHb2HzBC5tDeplAAD+8Mu+V0Sl2klpbP3s/YQtdt2wQ4mzNPyqtbe7InWPLzho+8mB1orS040F5MfbBoNJ53RYohJFFxr9+PJS+ui6izJyqMt9PapCGnnugEFz0vWeAjvmQHA00NzEK07aKAACjfpzLbVVrqBzalfK/TbNHNXv5tbnHB+fOlcBfzjmr2d2+qnS69s4z6lMTYfpNVZ+9ht44eg1qWWyDkABBkJ/y3gbYoq1vP8Rixeq7HGAZuHX5zvwm6gis+t5ArYokp/lud3+4grRTqTLjrYZGfze+NnpFpVBCFBUIMfsjPamyXqN47lh6ufy84hgScZ+k0rv+dQfANOyF+wMCUL69gAFiyTq3HZreSZ760e+DrVyq+SVDje8CYRZn9NVPakgOCenqJdY3zbIGZbeB+EYAA==');
}
div.warning {
    background-image: url('data:image/webp; charset=UTF-8; base64, UklGRtoCAABXRUJQVlA4WAoAAAAQAAAAHwAAHwAAQUxQSM8AAAABgGvbtrFn/0Zs27b5MLbZsbKN10lplqlcfueLf597vy5lREwAfLc42BsQbyMeLQh1kkOQ5gV6yCFM06w+ckikKcag4pBKwz6GFYdkpd/LKDmkUyeACcWhIbUADo3/w9ZVLf4cANZUeb/vOQCwQrJ+n1LgdYnk/DzGw+cCyfh+iARzicS+b+LA9IveVUW+r0vjg3Q+dIFx2ScfvK+z5vykEF8whCTkHPJOG/JTgvXgGvyi0vJKquobm5oaasoK0iLteojrDGarzW6zmg06MAEAVlA4IOQBAABQCgCdASogACAAPpE4lkeloyIhMAgAsBIJbACdMoRwN664zWeq9ZX6AHld+yX+03oxmAsZh/ZP2AOkP6AH7ALboXQfz/MGlvJQ+qOIj6sSfs6y7Mo7KfxW0bLAAP7ytDRyJXP9ydkv0yfQvjKwSjtzGaFXZBPIXFTuOlTXkZTrFNZuqM9oLvX/8SFyB/6sWcf9SH0wvFK2Zlh/NoZba79t2Ud8Rtg9Kd66eKkmHBhEN7H/bgbf/wa+ck71nmR8IB+7F3/3aqTXP9CcDukIG6o649AgTmhewQa+7bvVyg9d7d2MrB/vpCTek8vDS1FLORdbiN2/Nzdep5xfv1RbNYKvdX7Z45yS4moHM/+6XUj7bzHgOFXkJaF1nI/JNq6ZVLB8fTOWgKBxWiN97muCaIMdYv2c5uZRn3xakhzp3zF5S+cJTNKC0H781YKkVIHb4HcrvK1FCiWQeqN8xxPvpTfNC1i9Yp/mvTsSfCQFfS/3pEc6N12eTn06rq/Zrbs5U/9JsUtisqlj1uSSw7Tvz/L/p8M59/U4rynSz9ZLF3QQrylskXHt4hAU+PBGZlvhDVfyOARArZddscoQilWIAkwtXKI4jbN/t7LsPsWnHo7L8wTspo2JA7e/k4sXZfNMZzXR1AAA');
}
div.caution {
    background-image: url('data:image/webp; charset=UTF-8; base64, UklGRs4CAABXRUJQVlA4WAoAAAAQAAAAHwAAHwAAQUxQSEEAAAABYBBAbRy0TP60TMss3P4BrYCImACVA0R4HIjX3OLiYw4PVTgo4x+p/R9/SGGtwlyEvYZgjhtDITG5VVtIkiKaIABWUDggZgIAAPANAJ0BKiAAIAA+MRSIQqIhIRQGqCADBLYATplCJAOGz5gOOjJZ0a/kvsAyAHmA3QD9busA9ADyrvYs/b5+d01/4CubIs/PBzwvPnsBfyL+a/631gPXB6N37ANdfjQ7wQfH3ZeDeBv6+KEL+OBFLb1CfhBv6X+VQAD+//7owX9k99L2Cb0AK+yvQGYJV8gBEJRrnEtV7kHDrWCEP/alHGAEh6I/oDAc7o5r5KiC5r1lxEKaRpOQ/LlgR96CJ87Z1WJClPcN+8R/0ef/Bn+crUv4npf0gmSDIOVwoBxPI120vanhnRNvOv4rrN9yHOIuAIKQ5z5ynkLJJXLhDMRIP11Jye//z4y094rCjJ/YJsgGJeFSJbDo8C0flfN7gBQMkn38iSP//tNE8D+Qz2F//hrrf/wRlMGO9ZbPZJnHgUZARFJM98aFcPDvaT4N1j5BNWoHm75aig/HRfIHSpfbmzdanlXbO5TPvoQFZqO4c/ml+8somzoc9baZniu2GjjFrk/ukIEQq7uBpfB1O/WRcEMS/5+pSfs0Ocw/x4e/1lQ4qxeP5n9BAn4T2+SKbMsuSVb8ggNEJJ0EZsv/GCipmVKGL/OcTwGJToi6lRuKHZoX1i1br939VfsPY0q4z//vjB/+oyDUwdb4sxsnL/uuqPuZJ1ulRN+8Pyb/XL/Hvh7zedHOAUXyQFjKPNf6FdvgI3t69wJTwuoH8Pb9aIN11/h2hI3F4lo5gsC40coV2Qf8X8CsZUOIlOKKmOsZJ5iyLDVohvZq78KSVIDUzlGtGAHXkDRp6egR4/MD/8VAju0Wh7RM1MAA');
}
.exemplo {
    background-color: #f0f0f0;
    border-left: 4px solid #13377d;
    padding: 8px 16px;
    border-radius: 4px;
}
.exemplo::before {
    content: "Exemplo: ";
    font-weight: bold;
    font-style: normal;
}
/* FIGURAS ================================================================== */
figure.right,
figure.left,
figure.center {
    display: block;
    padding: 0px;
    text-align: center;
    font-size: small;
}
figure.right {
    clear: right;
    float: right;
    margin: 10px 0px 10px 10px;
}
figure.left {
    clear: left;
    float: left;
    margin: 10px 10px 10px 0px;
}
figure.center {
    clear: center;
    float: center;
    margin: 10px;
    figcaption {
        margin: 0 auto;
    }
}
/* CLASSES GERAIS =========================================================== */
.footer,
.navbar {
    background-color: #27272a;
    width: auto;
    display: flex;
    align-items: center;
    color: white;
    font-size: 90%;
}
.footer {
    height: 96px;
    justify-content: center;
}
.navbar {
    height: 48px;
    font-weight: 600;
    text-transform: uppercase;
    a {
        display: inline-flex;
        align-items: center;
        height: 48px;
        padding: 0 16px;
        color: white;
    }
    a:hover {
        background-color: #13377d;
        text-decoration: none;
    }
}
.main-layout {
    display: flex;
    gap: 20px;
    flex-direction: row-reverse; /* row = esquerda | row-reverse = direita */
}
.sidebar {
    width: 330px;
    min-width: 330px;
    max-width: 330px;
    overflow: hidden; /* ou overflow-x: hidden */
}
.sidebar-header {
    display: inline-block;
    margin-top: 20px;
    border-radius: 3px 3px 0 0;
    padding: 8px;
    background-color: #13377d;
    color: white;
}
.container-posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    flex: 1;
    min-width: 0; /* crucial em flex: evita overflow empurrar o grid */
}
.thumbnail {
    width: 100%;
    height: auto;
    max-width: 640px;
    max-height: 320px;
}
.card-title {
    margin-bottom: 7px;
    line-height: 1.25;
}
.article-header {
    text-align: center;
}
.article-content {
    a {
        color: blue;
    }
}
.article-meta {
    margin-top: 7px;
    font-size: small;
    color: dimgray;
}
.back-to-top {
    text-align: center;
    font-size: x-large;
    color: white;
    margin: 20px auto 0 auto; /* ver page-wrapper padding */
    padding: 0;
    background-color: #4c3a75;
    border-radius: 5px;
    width: 40px;
    height: 40px;
}
.back-to-top:hover {
    background-color: #8163dc;
}
.table-at-center {
    margin-left: auto;
    margin-right: auto;
}
.table-center {
    td, th {
        text-align: center;
    }
}
.table-center-1st-col {
    td:nth-child(1), th:nth-child(1) {
        text-align: center;
    }
}
.table-center-all-except-1st {
    td:not(:nth-child(1)), th:not(:nth-child(1)) {
        text-align: center;
    }
}
.table-lines-only {
    border-collapse: collapse;
    td {
        border-top: 1px solid black;
        padding: 5px 10px;
    }
}