/* CSS HEX */
:root {
    --jet: #353535ff;
    --chinese-red: #aa3322ff;
    --pale-silver: #c4bbafff;
    --space-cadet: #292640ff;
    --xiketic: #0f101aff;
    --blue-ryb: #4056f4ff;
    --raisin-black: #241e1eff;
    --dim-gray: #756b6bff;
    --pewter-blue: #93A8ACff;

    --celestial-blue: #5299D3;
    --white-smoke: #F1EDEE;
    --midnight-blue: #18206F;
    --penn-blue: #17255A;
    --eerie-black: #172121;
    --vista-blue: #8EA4D2;


    /* solarized dark colors */
    --base00: #657b83;
    --base01: #586e75;
    --base02: #073642;
    --base03: #002b36;
    --base0: #839496;
    --base1: #93a1a1;
    --base2: #eee8d5;
    --base3: #fdf6e3;

    --yellow: #b58900;
    --orange: #cb4b16;
    --red: #dc322f;
    --magenta: #d33682;
    --violet: #6c71c4;
    --blue: #268bd2;
    --cyan: #2aa198;
    --green: #859900;

    --main-bg: var(--base02);
    --content-bg: var(--base03);
    --primary-text: var(--base0);
    --secondary-text: var(--base01);
    --primary-link: var(--magenta);
    --primary-link-hover: var(--red);
    --secondary-link: var(--blue);
    --ternary-link: var(--yellow);
}

@font-face {
    font-family: "Genesis";
    src: url("/fonts/NiseGenesis.TTF");
}

/*
 * Page text: Krub
 * Headings & Top nav: Lalezar 
 */

body {
    background-color: var(--main-bg);
    color: var(--primary-text);
    font-family: 'Krub', sans-serif;
    scrollbar-width: none;
    padding: 0;
    margin: 0;
    overscroll-behavior: none;
}

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

h1,h2,h3,h4,h5,h6 {
    color: var(--primary-text);
    font-family: 'Lalezar', display;
}

p {
    height: fit-content;
    line-height: 1.5;
}

a:link, a:visited {
    color: var(--primary-link);
    text-decoration: none;
}

a:hover, a:active {
    text-decoration: underline;
}

a.tag {
    color: var(--secondary-link);
}

a.permalink {
    padding: 0 5px;
}

a.summary {
    color: var(--primary-text);
}

.big {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 auto;
    padding: 0;
    flex: 1;
}

.header-nav {
    width: 350px;
    position: sticky;
    top: 0px;
}

header {
    display: flex;
    flex-flow: row wrap;
    flex-shrink: 0;
    position: sticky;
    top: 0px;
    height: 300px;
}

header h1 {
    font-family: "Genesis", 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    color: var(--pewter-blue);
    width: 350px;
}

header a.sitetitle {
    text-decoration: none;
}


nav {
    flex: 0 0 100px;
    text-align: right;
    position: sticky;
    top: 300px;
}

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

/*nav li {
    display: inline;
}*/

nav li a {
    display: inline-block;
    padding: 15px 20px;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0.1s;
    font-family: 'Nova Mono', monospace;
    font-weight: bold;
    font-size: 0.9em;
}

nav li a:link, nav li a:visited {
    color: var(--ternary-link);
}

main {
    flex: 1;
    display: flex;
    background-color: rgba(23,33,33,0.7);
    padding: 0 150px;
    flex-flow: row wrap;
    /* gap: 20px; */
    z-index: 1;
    /* margin: 0 0.1rem; */
}

.sidebar {
    flex: 3 1;
    margin: 0 2rem;
}

.sidebar p {
    line-height: 1;
}

.content {
    flex: 8 1;
    padding: 0 1rem;
}

article p {
    text-indent: 1rem;
    text-align: justify;
}

section.posts ul {
    list-style-type: none;
}

article time {
    color: var(--secondary-text);
}

article a.title {
    color: var(--yellow);
}

code {
    background-color: black;
    padding: 10px;
    overflow-x: scroll;
    color: white;
}

pre code{
    display: block;
}

ul.pagination {
    list-style: none;
    text-align: center;
}

li.page-item {
    display: inline;
    padding: 0.3rem;
}


footer {
    padding: 0 0 15px 0px;
    text-align: center;
    color: var(--secondary-text);
    border-top: 1px solid var(--secondary-text);
    position: sticky;
    top: 450px;
}

footer div {
}

footer ul.social {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

footer li.social {
    display: inline;
}

footer li.social a {
    display: inline-block;
    padding: 0 10px;
    color: var(--secondary-link);
}

#webmentions img { max-height: 1.2em; margin-right: -1ex; }

.hidden {
    display: none;
}

.center {
    text-align: center;
}

/*
 * Links page
 */


#links-main {
    display: flex;
    flex-flow: row wrap;
}

#links-main li {
    padding: 7px 0;
}

.links-column {
    flex: 1 1 300px;
    overflow-wrap: break-word;
    height: fit-content;
}

.hover-links {
    position: relative;
    border-bottom: 1px dotted var(--secondary-link);
}

a.hover-links:hover {
    text-decoration: none;
}

.hover-links:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    max-width: 340px;
    min-width: 200px;
    background-color: var(--main-bg);
    color: var(--primary-text);
    text-align: center;
    border: 4px double var(--primary-text);
    border-radius: 5px;
    padding: 5px;
    transition: opacity 0.3s ease-in-out;
    position: absolute;
    z-index: 1;
    left: -50px;
    top: -250%;
}

.hover-links:hover:before {
    opacity: 0.8;
    visibility: visible;
}

@media only screen and (max-width: 450px) {
    div.nav {
        border: none;
    }

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

    .big {
        flex-direction: column;
        width: unset;
    }

    .column {
        border: none;
        background: none;
        max-width: unset;
        margin: 0 auto;
        padding: 0.2rem;
    }

    #content {
        padding: 0;
    }

    div.titlex {
        margin: 0 auto;
    }
}