@import url("gruvbox-material.css");

:root {
    --background: var(--bg0);
    --foreground: var(--fg0);
    --accent: var(--green);
    --faint_foreground: var(--grey0);
    --code_background: var(--bg_dim);
    --highlight_background: var(--bg3);
}

::selection, ::-moz-selection {
    background: var(--highlight_background);
}

a {
    color: var(--accent);
    /* actually i don't like how transitions look */
    /* transition: 0.3s; */
}

a:hover {
    color: var(--background) !important;
    background-color: var(--accent) !important;
    text-decoration-line: none;
}

.code-toolbar {
    border: 1px solid var(--bg3);
}

code {
    background: var(--code_background);
}

.post-meta {
    color: var(--faint_foreground);
}

.footnotes {
    color: var(--faint_foreground);
}

/* note: grey0 is actually fg0 with 0.5 opacity over bg0, so the below footer css has no effect. however, i've decided
 * to write it this way because i prefer to not use opacity to create colours when possible, instead setting
 * full-opacity explicit/unmodified colours. opacity is still used to create the dimmer hr in the footer.
 * I would set the hr full opacity but there isn't really a "dim green" I can use. */

.footer {
    opacity: 1 !important;
    color: var(--faint_foreground);
}

.footer hr {
    opacity: 0.5;
}

.socials-block {
    /* centre content inside div: */
    display: flex;
    justify-content: center;
    height: 50px;
    margin-top: 30px;
    margin-bottom: -10px;
}

.socials-icon {
    width: 50px;
    margin-top: 0px;
    /* https://codepen.io/sosuke/pen/Pjoqqp */
    filter:
        brightness(0)
        saturate(100%)
        invert(62%)
        sepia(27%)
        saturate(258%)
        hue-rotate(356deg)
        brightness(97%)
        contrast(81%)
    ;
    border: none;
}

.socials-icon:hover {
    /* https://codepen.io/sosuke/pen/Pjoqqp */
    filter:
        brightness(0)
        saturate(100%)
        invert(6%)
        sepia(2%)
        saturate(156%)
        hue-rotate(314deg)
        brightness(108%)
        contrast(80%)
    ;
}

/* required to clear the float */
.socials-block::after {
    content: "";
    clear: both;
    display: table;
}