/* ==UserStyle==
@name           rosé pine anarchism
@namespace      veryroundbird.house
@version        1.0.0
@description    Tweaks theanarchistlibrary.org to be more readable (larger text, fonts for legbility) and also more cute
@author         Carly Smallbird
@var select font "Font" {
    "system:System*": "font-family: system-ui, sans-serif",
    "atkinson:Atkinson Hyperlegible": "'Atkinson Hyperlegible', sans-serif",
    "geometria:Geometria": "'Geometria', sans-serif",
    "lexend:Lexend": "'Lexend', sans-serif",
    "sourceserif:Source Serif Pro": "'Source Serif Pro', serif",
    "ibmplexserif:IBM Plex Serif": "'IBM Plex Serif', serif",
    "spacemono:Space Mono": "'Space Mono', monospace",
    "sligoil:Sligoil": "'Sligoil', monospace",
    "custom:Custom": "var(--customfont)"
}
@var text customfont "Custom Font" ""
==/UserStyle== */

@-moz-document domain("theanarchistlibrary.org") {
    :root {
        --background: #faf4ed;
        --surface: #fffaf3;
        --overlay: #f2e9e1;
        --muted: #9893a5;
        --subtle: #797593;
        --text: #575279;
        --love: #b4637a;
        --gold: #ea9d34;
        --rose: #d7827e;
        --pine: #286983;
        --foam: #56949f;
        --iris: #907aa9;
        --highlightlow: #f4ede8;
        --highlightmed: #dfdad9;
        --highlighthi: #cecacd;
        --darkencolor: #000000;
        
        @media (prefers-color-scheme: dark) {
            --background: #232136;
            --surface: #2a273f;
            --overlay: #393552;
            --muted: #6e6a86;
            --subtle: #908caa;
            --text: #e0def4;
            --love: #eb6f92;
            --gold: #f6c177;
            --rose: #ea9a97;
            --pine: #3e8fb0;
            --foam: #9ccfd8;
            --iris: #c4a7e7;
            --highlightlow: #2a283e;
            --highlightmed: #44415a;
            --highlighthi: #56526e;
            --darkencolor: #FFFFFF;
        }
    }
    
    /* GENERAL COMPONENTS */
    
    body {
        font-family: var(--font);
        font-size: 16px;
        background-color: var(--background);
        color: var(--text);
    }
    
    a {
        color: var(--love);
    }
    
    a:hover {
        color: color-mix(in srgb-linear, var(--love), var(--darkencolor) 50%);
    }
    
    blockquote {
        font-size: 20px;
        font-style: italic;
        border-left: 8px var(--rose) solid;
    }
    
    blockquote blockquote {
        border-color: var(--gold);
    }
    
    hr {
        border-color: var(--highlighthi);
    }
    
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        color: var(--text);
        font-family: var(--font);
    }
    
    h1, .h1 {
        font-size: 2.5em;
    }
    
    h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
        color: var(--subtle);
    }
    
    .well,
    .jumbotron {
        background-image: none;
        background-color: var(--surface);
        border-color: var(--highlighthi);
    }
    
    .text-primary, .text-primary:hover {
        color: var(--foam);
    }
    
    .fa-border {
        border-width: 1px;
        border-color: var(--highlighthi);
        background-color: var(--surface);
    }
    
    .label-default {
        background-color: var(--iris);
        color: var(--background);
    }
    
    .badge {
        background-color: var(--foam);
    }
    
    /* BUTTONS */
    
    .btn-primary {
        background-image: none;
        background-color: var(--pine);
        color: var(--background);
        border-color: color-mix(in srgb-linear, var(--pine), var(--darkencolor) 20%);
    }
    
    .btn-primary:hover,
    .btn-primary:focus {
        background-color: color-mix(in srgb-linear, var(--pine), var(--darkencolor) 20%);
        border-color: color-mix(in srgb-linear, var(--pine), var(--darkencolor) 40%);
    }
    
    .btn-default {
        background-color: var(--rose);
        color: var(--background);
        border-color: color-mix(in srgb-linear, var(--rose), var(--darkencolor) 20%);
        background-image: none;
        text-shadow: none;
    }
    
    .btn-default:hover,
    .btn-default:focus {
        background-color: color-mix(in srgb-linear, var(--rose), var(--darkencolor) 20%);
        border-color: color-mix(in srgb-linear, var(--rose), var(--darkencolor) 40%);
        color: var(--background);
    }
    
    .btn-sm, .btn-group-sm > .btn {
        font-size: 14px;
    }
    
    /* FORM CONTROLS */
    
    legend {
        border-color: var(--highlighthi);
        color: var(--subtle);
    }
    
    .form-control {
        border-color: var(--highlighthi);
        color: var(--text);
    }
    
    .form-control::placeholder {
        color: var(--muted);
    }
    
    .form-control::-moz-placeholder {
        color: var(--muted);
    }
    
    .form-control::-webkit-placeholder {
        color: var(--muted);
    }
    
    .form-control:focus {
        border-color: var(--pine);
        box-shadow: inset 0 1px 1px color-mix(in srgb-linear, var(--muted), transparent 25%), 0 0 8px color-mix(in srgb-linear, var(--pine), transparent 40%);
    }
    
    /* PAGE STRUCTURE */
    
    .navbar-default {
        background-image: none;
        color: var(--text);
        background-color: var(--surface);
        border-color: var(--highlighthi);
    }
    
    b.caret {
        border-top-color: var(--subtle);
    }
    
    .dropdown-toggle:hover b.caret {
        border-top-color: var(--rose);
    }
    
    .navbar-default .navbar-nav > .open > a b.caret,
    .navbar-default .navbar-nav > .active > a b.caret {
        border-top-color: var(--text);
    }
    
    .amw-navlogo b.caret {
        border-top-color: var(--foam);
    }
    
    .navbar-header .amw-navlogo {
        position: relative;
        display: block;
        background-color: white;
        
        @media (prefers-color-scheme: dark) {
            background-color: black;
        }
    }
    
    .navbar-header .amw-navlogo img {
        @media (prefers-color-scheme: dark) {
            filter: contrast(1.5) invert(1);
        }
    }
    
    .navbar-header .amw-navlogo:before,
    .navbar-header .amw-navlogo:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
    }
    
    .navbar-header .amw-navlogo:before {
        background-color: var(--surface);
        mix-blend-mode: multiply;
        z-index: 5;
        
        @media (prefers-color-scheme: dark) {
            mix-blend-mode: screen;
            z-index: 3;
        }
    }
    
    .navbar-header .amw-navlogo:after {
        background-color: var(--text);
        mix-blend-mode: screen;
        z-index: 3;
        
        @media (prefers-color-scheme: dark) {
            mix-blend-mode: multiply;
            z-index: 5;
        }
    }
    
    .navbar-default .navbar-nav > li > a {
        color: var(--subtle);
    }
    
    .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .active > a {
        color: var(--text);
        background-image: none;
        background-color: var(--overlay);
        box-shadow: none;
    }
    
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
        color: var(--rose);
    }
    
    .navbar-default .navbar-nav > .open > a .caret,
    .navbar-default .navbar-nav > .open > a:hover .caret,
    .navbar-default .navbar-nav > .open > a:focus .caret {
        border-top-color: var(--rose);
    }
    
    .dropdown-menu {
        background-color: var(--surface);
        border-color: var(--highlighthi);
        font-size: 16px;
    }
    
    .dropdown-menu li.divider {
        background-color: var(--highlighthi);
        margin: 0;
    }
    
    .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
        background-image: none;
        background-color: var(--love);
        color: var(--background);
    }
    
    .dropdown-menu > li > a {
        color: var(--text);
        padding: 6px 20px;
    }
    
    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus {
        background-image: none;
        background-color: var(--highlightmed);
        color: var(--text);
    }
    
    .dropdown-header {
        color: var(--subtle);
        text-transform: uppercase;
        font-size: 14px;
    }
    
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
        color: var(--rose);
    }
    
    .ui-autocomplete {
        background-color: var(--surface);
    }
    
    .ui-menu-item-wrapper {
        padding: 5px 10px;
    }
    
    .breadcrumb {
        background-color: var(--surface);
        color: var(--muted);
    }
    
    .nav-tabs a,
    .nav-pills a,
    .breadcrumb a,
    .pager a {
        color: var(--muted);
    }
    
    .breadcrumb > .active {
        color: var(--subtle);
    }
    
    .breadcrumb > li + li::before {
        color: var(--muted);
    }
    
    .page-header {
        border-color: var(--highlighthi);
    }
    
    p.tableofcontentline a {
        color: var(--subtle);
    }
    
    #downloadformats a {
        color: var(--foam);
    }
    
    .list-group-item {
        background-color: var(--surface);
        color: var(--subtle);
        border-color: var(--highlighthi);
    }
    
    a.list-group-item, button.list-group-item {
        color: var(--subtle);
    }
    
    a.list-group-item:hover,
    button.list-group-item:hover,
    a.list-group-item:focus,
    button.list-group-item:focus {
        background-color: var(--highlightlow);
        color: var(--text);
    }
    
    .pagination > li > a, .pagination > li > span {
        background-color: var(--highlightmed);
        color: var(--text);
        border-color: var(--highlighthi);
    }
    
    .pagination > li > a:hover,
    .pagination > li > span:hover,
    .pagination > li > a:focus,
    .pagination > li > span:focus {
        background-color: var(--foam);
        color: var(--background);
    }
    
    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
        background-color: var(--pine);
        color: var(--background);
    }
    
    .footer {
        background-color: var(--surface);
        color: var(--text);
        padding-bottom: 20px;
    }
    
    .footer a {
        color: var(--subtle);
    }
}