@import "./epaper.css";

:root {
    --accent-color: #7a1f1f;
    --logo-color: #8d2520;

    --olive-bg-main: #d7c18a;
    --olive-bg-secondary: #f4e4b5;
    --olive-bg-tertiary: #b78a43;
    --olive-text-main: #25180d;
    --olive-text-secondary: #68431d;
    --olive-accent-primary: #8d2520;
    --olive-accent-secondary: #5d1714;
    --olive-accent-highlight: #d4a13f;

    --olive-accent-primary-rgb: 159, 45, 40;
    --olive-accent-secondary-rgb: 110, 31, 28;
    --olive-text-secondary-rgb: 97, 65, 34;

    --heading-color: #5d1714;
    --text-color-on-accent: #fff7dc;
    --background-primary: var(--olive-bg-main);
    --background-secondary: var(--olive-bg-secondary);
    --background-tertiary: var(--olive-bg-tertiary);
    --pre-background: #24170f;
    --pre-text-color: #f6e7c0;
    --vintage-border: #704116;
    --vintage-border-dark: #3f1d0b;
    --vintage-control-bg:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.16) 44%, rgba(98, 53, 16, 0.08) 100%),
        linear-gradient(to bottom, #f7e3ad, #d9b466);
    --vintage-control-hover-bg:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.2) 42%, rgba(89, 48, 14, 0.1) 100%),
        linear-gradient(to bottom, #ffe9b2, #d4a65a);
    --vintage-control-pressed-bg:
        linear-gradient(to bottom, rgba(83, 42, 11, 0.12), rgba(255, 255, 255, 0.12) 52%, rgba(255, 255, 255, 0.24) 100%),
        linear-gradient(to bottom, #cea052, #f1d084);
    --vintage-control-active-bg:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 45%, rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(to bottom, #a73931, #731c18);
    --vintage-control-active-hover-bg:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08) 44%, rgba(0, 0, 0, 0.14) 100%),
        linear-gradient(to bottom, #b5443b, #7c211c);
    --vintage-control-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 -1px 0 rgba(76, 39, 10, 0.18),
        0 1px 2px rgba(57, 31, 12, 0.2);

    background:
        linear-gradient(rgba(255, 255, 255, 0.08) 50%, rgba(80, 45, 14, 0.06) 50%),
        var(--background-primary);
    background-size: 100% 3px;
}

html,
body {
    color: var(--text-color);
    background-color: var(--background-primary);
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.08) 50%,
        rgba(80, 45, 14, 0.06) 50%
    );
    background-size: 100% 3px;
}

body,
.gavide--root-section {
    background:
        linear-gradient(rgba(255, 255, 255, 0.08) 50%, rgba(80, 45, 14, 0.06) 50%),
        var(--background-primary);
    background-size: 100% 3px;
}

h1,
h2,
h3,
h4,
h5,
.gavide--post-preview h2,
.gavide--blog-post h1,
.gavide--blog-post h2,
.gavide--pagepost h1 {
    color: #6e1f1c;
    text-shadow: 0 1px 0 rgba(255, 248, 222, 0.75);
}

.gavide--header menu {
    background:
        linear-gradient(to bottom, rgba(255, 236, 178, 0.55), rgba(255, 236, 178, 0.12) 46%, rgba(66, 32, 8, 0.14) 100%),
        linear-gradient(to bottom, #9b642f, #724315);
    border: 0;
    border-bottom: 1px solid var(--vintage-border-dark);
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 173, 0.58),
        inset 0 -1px 0 rgba(0, 0, 0, 0.34),
        0 2px 8px rgba(58, 31, 10, 0.32);
}

.gavide--header menu nav {
    max-width: 92rem;
    margin-inline: auto;
}

.gavide--nav-title,
.gavide--nav-title.sub {
    color: #fff2c8;
    text-shadow: 0 1px 1px rgba(41, 18, 4, 0.58);
}

.gavide--nav-link span {
    color: #2c1708;
    background: var(--vintage-control-bg), #c9933f;
    border: 1px solid var(--vintage-border);
    border-radius: 0.55rem;
    box-shadow: var(--vintage-control-shadow);
    min-width: 4.35rem;
    padding: 0.55rem 1.05rem;
    text-shadow: 0 1px 0 rgba(255, 242, 201, 0.72);
    transition:
        background 0.14s ease,
        box-shadow 0.14s ease,
        filter 0.14s ease !important;
}

.gavide--nav-link[aria-current="page"] span,
.gavide--nav-link-li[aria-current="page"] .gavide--nav-link span {
    background: var(--vintage-control-active-bg), #7a1f1f;
    border-color: #45110f;
    color: #fff6dc;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.58);
}

@media screen and (max-width: 1300px) {
    .gavide--header menu {
        background:
            linear-gradient(to bottom, rgba(255, 236, 178, 0.55), rgba(255, 236, 178, 0.12) 46%, rgba(66, 32, 8, 0.14) 100%),
            linear-gradient(to bottom, #9b642f, #724315);
    }

    .gavide--nav-link span {
        padding-block: 0.45rem;
    }
}

.gavide--footer section,
.gavide--blog-tof,
.gavide--sidebar > figure,
.gavide--blog-article > figure,
.gavide--selector ul {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0) 45%),
        linear-gradient(to bottom, rgba(255, 249, 219, 0.94), rgba(224, 190, 113, 0.9)),
        #e7c77b;
    border: 1px solid #7b4c1e;
    border-radius: 0.72rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(84, 45, 14, 0.22),
        0 1px 4px rgba(64, 35, 12, 0.2),
        0 10px 22px rgba(84, 45, 14, 0.08);
}

.gavide--footer {
    background: transparent;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
}

.gavide--footer section {
    background:
        linear-gradient(rgba(255, 255, 255, 0.08) 50%, rgba(80, 45, 14, 0.06) 50%),
        var(--background-primary);
    background-size: 100% 3px;
    border-color: rgba(112, 65, 22, 0.5);
    box-shadow: none;
}

.gavide--footer section div {
    padding: 0.85rem 1rem;
    gap: 0.35rem;
}

label[for="lang-show"],
.gavide--search-input,
.gavide--selector ul li a {
    font-family: var(--font-family-ui);
    color: #2c1708;
    background: var(--vintage-control-bg), #e0bd72;
    border: 1px solid var(--vintage-border);
    border-radius: 0.72rem;
    box-shadow: var(--vintage-control-shadow);
    text-shadow: 0 1px 0 rgba(255, 239, 190, 0.7);
    transition:
        background 0.14s ease,
        box-shadow 0.14s ease,
        filter 0.14s ease !important;
}

label[for="lang-show"] {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.72rem 1rem;
}

.gavide--search-input {
    min-height: 3rem;
    padding: 0.72rem 1rem;
}

.gavide--search-input:focus {
    border-color: #8d2520;
    outline: none;
    box-shadow:
        var(--vintage-control-shadow),
        0 0 0 3px rgba(141, 37, 32, 0.2);
}

#lang-show:checked + ul {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 38%),
        linear-gradient(to bottom, #f1d58d, #c08a38),
        #d39c47;
    border-color: var(--vintage-border);
    border-radius: 0.82rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 3px 12px rgba(57, 31, 12, 0.28);
}

.gavide--selector ul li a {
    padding: 0.6rem 0.9rem;
    text-decoration: none;
}

.gavide--footer section,
.gavide--blog-tof,
.gavide--sidebar > figure,
.gavide--blog-article > figure {
    overflow: hidden;
}

.gavide--blog-post blockquote,
.gavide--pagepost blockquote {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0) 44%),
        linear-gradient(to bottom, rgba(255, 248, 218, 0.84), rgba(226, 190, 107, 0.56)),
        rgba(122, 31, 31, 0.07);
    border: 1px solid rgba(97, 65, 34, 0.38);
    border-inline-start: 0.42rem solid #8d2520;
    border-radius: 0.42rem;
    padding: 1rem 1.15rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 1px 2px rgba(65, 35, 12, 0.14);
}

.gavide--blog-post blockquote > :first-child,
.gavide--pagepost blockquote > :first-child {
    margin-top: 0;
}

.gavide--blog-post blockquote > :last-child,
.gavide--pagepost blockquote > :last-child {
    margin-bottom: 0;
}

.gavide--tags li,
.gavide--post-preview ul li,
.gavide--blog-article > figure > ul > li,
.gavide--sidebar > figure > ul > li {
    color: #2c1708;
    background: var(--vintage-control-bg), #d8ad5e;
    border-color: var(--vintage-border);
    border-radius: 0.55rem;
    box-shadow: var(--vintage-control-shadow);
    overflow: hidden;
    text-shadow: 0 1px 0 rgba(255, 239, 190, 0.7);
    transition:
        background 0.14s ease,
        box-shadow 0.14s ease,
        filter 0.14s ease !important;
}

.gavide--tags li a,
.gavide--post-preview ul li a,
.gavide--blog-article > figure > ul > li a,
.gavide--sidebar > figure > ul > li a {
    color: inherit;
    display: block;
    padding: 0.34rem 0.72rem;
    text-decoration: none !important;
}

pre[class*="language-"] {
    background:
        linear-gradient(to bottom, #322014, #21130c),
        var(--pre-background);
    border: 1px solid #7b4c1e;
    border-radius: 0.35rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 172, 0.16),
        0 1px 4px rgba(55, 30, 12, 0.28);
}

.logo-skeleton {
    fill: #8d2520;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.2s ease-out !important;
    filter: none;
}

.logo-skeleton:hover {
    animation: vintage-logo-press 0.28s ease-out !important;
    filter: none;
}

@keyframes vintage-logo-press {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(0.96);
    }

    100% {
        transform: scale(1.02);
    }
}

.social-icon {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.08) 42%, rgba(0, 0, 0, 0.12)),
        linear-gradient(to bottom, #a73931, #731c18),
        #8d2520;
    border: 1px solid #50120f;
    border-radius: 0.68rem;
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0.36rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 5px rgba(54, 25, 10, 0.28);
    fill: #fff7dc;
    transition:
        background 0.14s ease,
        box-shadow 0.14s ease,
        filter 0.14s ease !important;
}

.social-icon svg {
    width: 100%;
    height: 100%;
}

.gavide--nav-link:hover span,
label[for="lang-show"]:hover,
.gavide--selector ul li a:hover,
.gavide--tags li:hover,
.gavide--post-preview ul li:hover,
.gavide--blog-article > figure > ul > li:hover,
.gavide--sidebar > figure > ul > li:hover,
.social-icon:hover {
    background: var(--vintage-control-hover-bg), #d8ad5e;
    filter: saturate(1.03);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        inset 0 -1px 0 rgba(76, 39, 10, 0.16),
        0 1px 4px rgba(57, 31, 12, 0.24);
}

.gavide--nav-link[aria-current="page"]:hover span,
.gavide--nav-link-li[aria-current="page"] .gavide--nav-link:hover span,
.social-icon:hover {
    background: var(--vintage-control-active-hover-bg), #8d2520;
}

.gavide--nav-link:active span,
label[for="lang-show"]:active,
.gavide--selector ul li a:active,
.gavide--tags li:active,
.gavide--post-preview ul li:active,
.gavide--blog-article > figure > ul > li:active,
.gavide--sidebar > figure > ul > li:active,
.social-icon:active {
    background: var(--vintage-control-pressed-bg), #d8ad5e;
    filter: brightness(0.98);
    box-shadow:
        inset 0 1px 2px rgba(57, 31, 12, 0.28),
        inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}

.gavide--nav-link[aria-current="page"]:active span,
.gavide--nav-link-li[aria-current="page"] .gavide--nav-link:active span,
.social-icon:active {
    background: var(--vintage-control-active-bg), #7a1f1f;
}

hr {
    border-color: rgba(97, 65, 34, 0.34);
}

html,
body {
    scrollbar-color: #7a1f1f #efe2bd;
}

::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background-color: #efe2bd !important;
}

::-webkit-scrollbar-thumb {
    background-color: #7a1f1f !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9f2d28 !important;
}