GlobeCirca'12 Dark by AlexGoodhart

/* ==UserStyle==
@name           1912 Gothic Dark
@namespace      alex.gothic.1912
@version        1.0.0
@description    Dark mode typographic style with 1912 flair and net.art influence
@author         Alex
==/UserStyle== */

@-moz-document url-prefix("http") {
    html {
        background: black;
        padding: 20px;
        box-shadow: inset 0 0 200px rgb(190, 170, 255);
    } 
     
    body {
        font-family: 'Bodoni Moda', serif;
        margin: 20px;
        background: rgb(36, 0, 0);
        color: #a4a4a4;
        border-style: groove;
    }

    .toolbar {
        background-color: #1d1c1a;
        color: white;
        padding: 10px 20px;
    }

    .search-bar {
        padding: 10px;
        background: #444;
    }

    .search-bar input {
        width: 100%;
        padding: 8px;
        font-size: 1em;
    }

    .container {
        display: flex;
    }

    h1 {
        margin-left: 20px;
        color: black;
        text-shadow: 0 0 12px rgb(255, 14, 98);
        font-size: 50px;
        font-weight: 800;
        text-decoration: 2px dotted underline overline red;
        justify-self: center;
        font-family: 'Ballet', cursive;
        margin-bottom: -10px;
    }

    h2 {
        color: rgb(242, 217, 149);
        font-size: 20px;
        font-family: 'Brodo Thin Grunge', sans-serif;
        letter-spacing: 10px;
        justify-self: center;
    }

    h3 {
        color: rgb(190, 233, 190);
        font-family: 'Brisca Miera', sans-serif;
        margin-left: 50px;
        font-weight: 80;
        text-shadow: 0px 4px 10px black;
        letter-spacing: 3px;
        font-size: 10px;
        margin-top: 20px;
        text-decoration: solid overline;
    }

    p {
        margin-bottom: 20px;
    }

    p:first-of-type::first-letter {
        float: left;
        font-size: 9em;
        line-height: .5;
        margin-left: -10px;
        margin-right: -5px;
        margin-bottom: 100vh;
        text-shadow: -3px 3px 3px black;
        font-family: 'House of the Dragon COLOR', 'Georgia', serif;
        color: #a57005;
    }

    .sidebar {
        width: auto;
        background: linear-gradient(to bottom, rgb(44, 6, 40), black);
        padding-right: 10px;
        border-right: 2px double rgb(136, 113, 113);
    }

    .content {
        flex: 1;
        text-wrap-style: pretty;
        word-wrap: normal;
        font-size: 10px;
        color: rgb(148, 140, 73);
        padding: 20px;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    a {
        color: white;
        background: black;
        padding: 0 5px;
        text-transform: uppercase;
        border-radius: 100px;
        text-decoration: underline;
    }

    a:hover {
        color: black;
        background: white;
    }

    ::-webkit-scrollbar {
        width: 10px;
        background-color: #1a1510;
        transition: 0.75s ease-in-out;
    }

    ::-webkit-scrollbar:hover {
        width: 20px;
        background-color: #954c8a;
        box-shadow: inset 0 0 10px black;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #d45b37;
        border-radius: 10px;
        border: 2px solid #1a1510;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #8a8484;
        box-shadow: inset 0 0 10px rgb(159, 14, 9);
    }

    button {
        background: linear-gradient(to bottom, #3c2f26, #1c1612);
        color: #f2e8dc;
        border: 1px solid #7c6754;
        padding: 8px 16px;
        font-family: "Georgia", serif;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-radius: 4px;
        cursor: pointer;
    }

    button:hover {
        background: #e5dacb;
        color: #1c1612;
        border-color: #9e8b76;
    }

    input[type="text"], textarea {
        background: black;
        color: #d6cfc6;
        border: 1px dotted #513aae;
        padding: 6px 10px;
        font-family: "Garamond", serif;
        font-size: 1em;
        font-style: italic;
        box-shadow: inset 0 0 5px rgb(138, 0, 126);
        border-radius: 4px;
    }

    input[type="text"]:focus, textarea:focus {
        outline: none;
        color: red;
        border-color: #c5a980;
        background: #511f47;
    }
}