Hugo by ace

/* ==UserStyle==
@name           Hugo
@namespace      aorivoid.net
@version        1.0.0
@description    Based on the userstyles.world style.
@author         Me
==/UserStyle== */
@-moz-document domain("aorivoid.net") {

    /* Copied from an Hugo theme */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

    :root {
        --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        --font-sans: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Droid Sans", sans-serif;
        --font-mono: "Iosevka", "Fira Code", "Fira Mono", "Droid Mono", "Ubuntu Mono", Monaco, monospace;
        --br-1: 16px;
        --br-2: 12px;
        --br-3: 8px;
        --inverse: #ffffff;
        --card-min-width: 300px;
        --form-max-width: 840px;
        --layout-max-width: 80rem;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --bg-1: #1a1a1a;
            --bg-2: #242424;
            --bg-3: #343434;
            --bg-4: #404040;
            --bg-5: #4d4d4d;
            --fg-1: #ddd;
            --fg-2: #bebebe;
            --fg-3: #a0a0a0;
            --fg-4: #919191;
            --fg-5: #636363;
            --ac-1: #679cd0;
            --ac-2: #3673af;
            --ac-3: #285580;
            --ac-4: #193652;
            --ac-5: #102133;
            --st-1: #27fffb;
            --st-2: #00c0bc;
            --st-3: #008d8a;
            --st-4: #005a58;
            --st-5: #002726;
            --dg: #f66;
            --sh-m: 0 4px 12px -2px #0006, 0 6px 4px -4px #0002;
            --bg-f: rgba(64, 64, 64, 0.3);
            --ac-f: rgba(40, 85, 128, 0.3);
            --st-f: rgba(0, 141, 138, 0.3);
        }
    }
    @media (prefers-color-scheme: light) {
        :root {
            --bg-1: #eee;
            --bg-2: #dadada;
            --bg-3: #c5c5c5;
            --bg-4: #b1b1b1;
            --bg-5: #9c9c9c;
            --fg-1: #101010;
            --fg-2: #242424;
            --fg-3: #393939;
            --fg-4: #4d4d4d;
            --fg-5: #626262;
            --ac-1: #0b459b;
            --ac-2: #0e56c1;
            --ac-3: #1067e7;
            --ac-4: #307ef0;
            --ac-5: #a2c5f8;
            --st-1: #031e1a;
            --st-2: #084239;
            --st-3: #0c6759;
            --st-4: #108b79;
            --st-5: #2fe7cb;
            --bg-t: rgba(238, 238, 238, 0.8);
            --dg: red;
            --sh-m: 0 4px 16px -4px #0004, 0 4px 4px -4px #0001;
            --bg-f: rgba(197, 197, 197, 0.3);
            --ac-f: rgba(16, 103, 231, 0.3);
            --st-f: rgba(12, 103, 89, 0.3)
        }
    }

    * {
        box-sizing: border-box;
        margin: 0;
    }

    html {
        scrollbar-color: var(--bg-5) var(--bg-2)
    }


    html body {
        margin: 0;
        color: var(--fg-1);
        background: var(--bg-1);
        line-height: 1.5;
        font-family: var(--font-sans), var(--font-emoji);
        font-size: 1rem;
    }
    #nav a,
    #nav a:hover,
    #nav a:focus,
    #nav a:visited {
        color: var(--fg-1);
    }
    a,
    .entry_content li a {
        color: var(--ac-1);
        text-decoration: none;
    }
    .entry_content a {
        color: var(--ac-1) !important;
    }
    a:hover,
    .entry_content li a:hover {
        text-decoration: underline;
    }
    html h1 {
        font-size: 2.5em;
    }
    html a {
        color: var(--ac-1);
        text-decoration: none
    }

    html hr {
        border: none;
        border-top: 1px solid var(--bg-3)
    }

    html h1 {
        font-size: 2.5em
    }

    html mark {
        display: inline-flex;
        color: var(--inverse);
        background-color: var(--ac-4)
    }

    html blockquote,
    .entry_content figure blockquote {
        padding-left: 0.5rem;
        margin-bottom: 0.5rem;
        border-left: 0.25rem solid var(--bg-4);
    }
    h2,
    h3 {
        margin: 1em 0 0.5em
    }

    p {
        margin-bottom: 0.5em;
    }
    textarea {
        padding: 0.5rem;
        font-size: 0.875rem;
        min-width: 100%;
        max-width: 100%;
        min-height: 300px;
        font-family: var(--font-mono);
        color: var(--fg-1);
        border: 1px solid var(--bg-4);
        background-color: var(--bg-3);
        border-radius: var(--br-3);
        scrollbar-color: var(--bg-5) var(--bg-3);
        resize: vertical;
    }
    select {
        color: var(--fg-1);
        border: 1px solid var(--bg-5);
        background-color: var(--bg-3)
    }

    pre {
        overflow: hidden;
        border: 1px solid var(--bg-4);
        background-color: var(--bg-2);
        border-radius: var(--br-3);
        min-height: 2rem;
        margin-bottom: 1em;
        line-height: 2em;
        padding: 3px;
    }
    form:not(.Form),
    .form-wrapper:not(.Form) {
        margin: 1rem auto;
        padding: 1rem;
        max-width: var(--form-max-width);
        border: 1px solid var(--bg-4);
        background-color: var(--bg-2);
        border-radius: var(--br-3)
    }

    form:not(.Form).ml\:0,
    .form-wrapper:not(.Form).ml\:0 {
        margin-left: 0 !important
    }

    form:not(.Form) label,
    .form-wrapper:not(.Form) label {
        display: flex;
        align-items: center
    }

    form:not(.Form) label a,
    .form-wrapper:not(.Form) label a {
        display: flex;
        margin-left: 0.25rem
    }

    form:not(.Form) input:not([type='checkbox']),
    form:not(.Form) textarea,
    form:not(.Form) select,
    .form-wrapper:not(.Form) input:not([type='checkbox']),
    .form-wrapper:not(.Form) textarea,
    .form-wrapper:not(.Form) select {
        width: 100%;
        display: flex;
        margin: 0.5rem 0 1.5rem
    }

    input:not([type='checkbox']):invalid:not(:focus):placeholder-shown,
    textarea:invalid:not(:focus):placeholder-shown,
    select:invalid:not(:focus):placeholder-shown {
        box-shadow: none
    }

    form:not(.Form) select,
    .form-wrapper:not(.Form) select {
        width: auto
    }

    form:not(.Form) > button,
    .form-wrapper:not(.Form) > button {
        line-height: initial
    }

    form:not(.Form).search,
    .form-wrapper:not(.Form).search {
        margin: -2px 0;
        padding: 0;
        min-width: 12rem;
        max-width: 12rem;
        position: relative;
        border: none;
        border-radius: 0;
        background-color: transparent
    }

    form:not(.Form).search svg,
    .form-wrapper:not(.Form).search svg {
        stroke: var(--fg-3)
    }

    form:not(.Form).search input,
    form:not(.Form).search button,
    .form-wrapper:not(.Form).search input,
    .form-wrapper:not(.Form).search button {
        margin: 0;
        padding: 0.25rem 0.5rem;
        background-color: var(--bg-3)
    }

    form:not(.Form).search button,
    .form-wrapper:not(.Form).search button {
        min-height: unset;
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        border: none;
        cursor: pointer
    }

    form:not(.Form).search button:focus,
    .form-wrapper:not(.Form).search button:focus {
        top: 0px;
        right: 0px;
        bottom: 0px;
        border: 1px solid var(--ac-3)
    }

    form:not(.Form) .long-text,
    .form-wrapper:not(.Form) .long-text {
        word-break: break-all
    }
    #post {
        width: 100%;
    }
    #post input[type="text"],
    #post input[type="url"],
    #post textarea {
        padding: 0.5rem 0.75rem;
        min-height: 42px;
        font: inherit;
        line-height: inherit;
        color: var(--fg-1);
        background-color: var(--bg-3);
        border: 1px solid var(--bg-4);
        border-radius: var(--br-3);
        max-width: 100%;
    }
    #post td {
        display: flex;
        border-left: none !important;
        padding: 0;
    }
    #post input[type="submit"] {
        width: 100px;
        border-radius: var(--br-3);
        transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        text-decoration: none;
        border: 1px solid var(--bg-3);
        outline: none;
        cursor: pointer;
        color: var(--fg-1);
        border-color: var(--ac-3);
        background-color: var(--ac-4);
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
    .message {
        border-radius: var(--br-3);
        border: 1px solid var(--bg-3);
        background-color: var(--bg-2);
        margin: 0 0 1rem 0rem;
        line-height: 1.5;
        padding: .6rem 1rem .4rem 1rem;
    }

    /* CSS */
    #nav,
    #content {
        display: block;
        position: initial;
    }
    body {
        margin: 0;
    }

    /* Navbar */
    #nav {
        height: 65px;
        width: auto;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 1.25rem;
        border-bottom: 1px solid var(--bg-4);
        background-color: var(--bg-2);
        display: flex;
        justify-content: space-between;
    }
    #nav h1.title {
        margin: 0;
        padding: 0;
        font-size: 0px;
        font-weight: normal;
        border: 0;
    }
    #nav h1.title::after {
        content: "aorivoid's website";
        font-size: initial;
    }
    #nav img[src="/images/nav.jpg"] {
        display: none;
    }
    #nav ul li {
        float: right;
        /* Invert section list */
        display: inline;
        margin-left: 17px;
        text-transform: capitalize;
    }

    /* Content */
    #content {
        background: none;
        width: 100%;
        max-width: 1300px;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        min-height: 87vh;
        padding-bottom: 50px;
    }
    #content:after {
        display: none;
    }
    p {
        line-height: 1.9em;
    }
    .entry_content figure blockquote {
        font...