fix this mazafakin script to align darkly to cinnamon styles, while pertaining its initial purpose to complementary darkify any website in concep:

usrscript:

"""

// ==UserScript==
// @name        Comprehensive Darkening Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A robust script for darkening any website while keeping a good contrast for readability.
// @author      YourName
// @match       *://*/*
// @grant       none
// @run-at      document-idle
// ==/UserScript==

(function () {
    'use strict';

    // Configuration Variables
    const adjustmentStrength = 0.7; // How much to darken colors
    const minBrightnessThreshold = 120; // Minimum brightness level for elements to change
    const bodyMaxDarkness = 50; // Max brightness level for body
    const colorProperties = ['color', 'background-color', 'border-color']; // CSS properties to adjust

    // Start the darkening process
    adjustColors();

    // Function to start adjusting colors
    function adjustColors() {
        const elements = document.querySelectorAll('*');
        const bodyBgColor = getComputedStyle(document.body).backgroundColor;
        const bodyColor = parseColor(bodyBgColor);
        const bodyLuminance = calculateLuminance(bodyColor);
        
        // Adjust body background based on luminance
        if (bodyLuminance > minBrightnessThreshold) {
            darkenBodyBackground(bodyColor);
            darkenPage(elements);
        } else {
            adjustDarkElements(elements);
        }

        enhanceVisibilities(elements); // Enhance visibility for links and text
    }

    // Function to darken the body background
    function darkenBodyBackground(color) {
        let adjustedColor = color.map(value => Math.floor(value * (1 - adjustmentStrength)));
        document.body.style.backgroundColor = rgbToHex(adjustedColor[0], adjustedColor[1], adjustedColor[2]);
    }

    // Function to darken all light elements
    function darkenPage(elements) {
        elements.forEach(element => {
            const computedStyle = getComputedStyle(element);
            processElementStyle(element, computedStyle, 'darken');
        });
    }

    // Function to lighten dark elements
    function adjustDarkElements(elements) {
        elements.forEach(element => {
            const computedStyle = getComputedStyle(element);
            processElementStyle(element, computedStyle, 'lighten');
        });
    }

    // Function to enhance visibility of buttons, links, and general text
    function enhanceVisibilities(elements) {
        elements.forEach(element => {
            const computedStyle = getComputedStyle(element);
            if (computedStyle.color && !isTransparent(computedStyle.color)) {
                let color = parseColor(computedStyle.color);
                let luminance = calculateLuminance(color);
                if (luminance < minBrightnessThreshold) {
                    const newColor = [255, 255, 255]; // Change to white for better visibility
                    setElementStyle(element, 'color', rgbToHex(newColor[0], newColor[1], newColor[2]));
                } 
            }
        });
    }

    // Function to determine if a color is transparent
    function isTransparent(color) {
        return /^rgba?\(0, 0, 0, 0\)/.test(color);
    }

    // Function to process styles of each element
    function processElementStyle(element, computedStyle, action) {
        colorProperties.forEach(prop => {
            let colorValue = computedStyle.getPropertyValue(prop);
            if (colorValue) {
                let color = parseColor(colorValue);
                if (action === 'darken') {
                    if (calculateLuminance(color) > minBrightnessThreshold) {
                        let adjustedColor = color.map(value => Math.floor(value * (1 - adjustmentStrength)));
                        setElementStyle(element, prop, rgbToHex(adjustedColor[0], adjustedColor[1], adjustedColor[2]));
                    }
                } else if (action === 'lighten') {
                    if (calculateLuminance(color) < minBrightnessThreshold) {
                        let adjustedColor = color.map(value => Math.floor(value * (1 + adjustmentStrength)));
                        adjustedColor = adjustedColor.map(value => Math.min(value, 255)); // Clamp
                        setElementStyle(element, prop, rgbToHex(adjustedColor[0], adjustedColor[1], adjustedColor[2]));
                    }
                }
            }
        });
    }

    // Function to calculate luminance
    function calculateLuminance(rgb) {
        return (0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]);
    }

    // Function to parse RGB or HEX colors
    function parseColor(color) {
        if (color.startsWith('#')) {
            return hexToRGB(color);
        } else if (color.startsWith('rgb')) {
            const rgbArray = color.match(/(\d+)/g).map(Number);
            return rgbArray; // Return array of RGB values
        }
        return [255, 255, 255]; // Fallback to white
    }

    // Function to convert HEX to RGB
    function hexToRGB(hex) {
        hex = hex.replace('#', '');
        return [
            parseInt(hex.substr(0, 2), 16),
            parseInt(hex.substr(2, 2), 16),
            parseInt(hex.substr(4, 2), 16)
        ];
    }

    // Function to convert RGB to HEX
    function rgbToHex(r, g, b) {
        return '#' + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1).padStart(6, '0');
    }

    // Function to set the computed style of an element
    function setElementStyle(element, property, value) {
        if (element) {
            element.style.setProperty(property, value, 'important');
        }
    }
})();

""".

some website on which this usrscript turning everything light unintendently (https://projects.linuxmint.com/cinnamon/):

"""

Linux Mint Projects
<a href="/" class="btn" style="color: rgb(38, 38, 38) !important; background-color: rgb(38, 38, 38) !important;"><i class="fa fa-home" aria-hidden="true" style="color: rgb(255, 255, 255) !important;"></i>
    Home</a>
<a href="/projects.html" class="btn" style="color: rgb(38, 38, 38) !important; background-color: rgb(38, 38, 38) !important;"><i class="fa fa-laptop" aria-hidden="true" style="color: rgb(255, 255, 255) !important;"></i>
    Projects</a>
<a href="/reference/git/index.html" class="btn" style="color: rgb(38, 38, 38) !important; background-color: rgb(38, 38, 38) !important;"><i class="fa fa-book" aria-hidden="true" style="color: rgb(255, 255, 255) !important;"></i>
    Reference</a>
<a href="/contributing.html" class="btn" style="color: rgb(38, 38, 38) !important; background-color: rgb(38, 38, 38) !important;"><i class="fa fa-pencil-square-o" aria-hidden="true" style="color: rgb(255, 255, 255) !important;"></i>
    How to contribute</a>
<a href="https://github.com/linuxmint" class="btn" target="_blank" style="color: rgb(38, 38, 38) !important; background-color: rgb(38, 38, 38) !important;"><i class="fa fa-github-square" aria-hidden="true" style="color: rgb(255, 255, 255) !important;"></i>
    GitHub</a>

Home / Projects
Cinnamon Projects

Cinnamon is composed a lot of smaller interconnected projects:

Cinnamon

Cinnamon, forked from GNOME Shell, is the "shell" of Cinnamon. It provides the user interface such as panels, hot corners, menus etc. The ui is written in JavaScript, while its core libraries are written in C.
GitHub: /linuxmint/Cinnamon

CJS

Cjs, fork of Gjs, is the "interpreter" of Cinnamon's javascript code. It is not an actual interpreter - the interpretation is done by SpiderMonkey. Instead, the role of Cjs is to provide bindings to GNOME libraries through GObject Introspection.
GitHub: /linuxmint/cjs

Cinnamon Control Center

Cinnamon Control Center is a fork of GNOME Control Center. The official control center of Cinnamon in Cinnamon Settings, which is written in python and part of Cinnamon itself. However, some of the modules are still not yet ported to python, and we have to rely on the C modules, which are found here.

GitHub: /linuxmint/cinnamon-control-center

Cinnamon Desktop

Cinnamon Desktop, fork of GNOME desktop, provides certain useful resources for Cinnamon. Most importantly, it contains the schemas for most Cinnamon components, eg. `org.cinnamon.desktop.screensaver`. It also has a small library that provides certain functions used in, say, Cinnamon Screensaver.
GitHub: /linuxmint/cinnamon-desktop

MDM

MDM, forked from GDM, is a display manager, not necessarily tied to Cinnamon. MDM officially stands for MDM display manager.

GitHub:
/linuxmint/mdm
/mint-mdm-themes
/mdm-themes
Cinnamon Menus

Cinnamon Menus, fork of GNOME menus, contains the libcinnamon-menu library, the layout configuration files for the Cinnamon menu, as well as a simple menu editor.

The libcinnamon-menu library implements the "Desktop Menu Specification" from freedesktop.org:

http://freedesktop.org/wiki/Specifications/menu-spec
http://specifications.freedesktop.org/menu-spec/menu-spec-latest.html

GitHub: /linuxmint/cinnamon-menus

Muffin

Muffin, forked from Mutter, which is in turn forked from Metacity, is the window manager of Cinnamon. Cinnamon is implemented as a plugin of Muffin.
GitHub: /linuxmint/muffin

Nemo

Nemo, forked from Nautilus, is the file manager of Cinnamon.
GitHub: /linuxmint/nemo
Nemo Extensions GitHub: /linuxmint/nemo-extensions

Cinnamon Screensaver

Cinnamon Screensaver, forked from GNOME Screensaver, is the screen locker you see when you leave the session idle for the a long time. It currently supports loading xscreensaver hacks as well as webkit screensaver. You can also write your own Cinnamon Screensaver plugin without tying to either xscreensaver or webkit.
GitHub: /cinnamon-screensaver

Cinnamon Session

This is responsible for starting the Cinnamon session. This is typically executed by the login manager (either mdm, xdm, or from your X startup scripts). It will load either your saved session, or it will provide a default session for the user as defined by the system administrator (or the default GNOME installation on your system).

GitHub: /linuxmint/cinnamon-session

Cinnamon Settings Daemon

Cinnamon Settings Daemon is a fork of GNOME Settings Daemon.

It provides many session-wide services and functions that require a long-running process. Among the services implemented by cinnamon-settings-daemon are an XSettings manager, which provides theming, font and other settings to GTK+ applications, and a clipboard manager, which preserves clipboard contents when an application exits. Many user interface elements of cinnamon and cinnamon-settings rely on cinnamon-settings-daemon for their functionality.

The internal architecture of cinnamon-settings-daemon consists of a number of plugins, which provide functionality such as printer notifications, software update monitoring, background changing, etc. For debugging purposes, these plugins can be individually disabled by changing the gsettings key `org.cinnamon.settings-daemon.plugins.plugin-name.active`, where `plugin-name` is the name of the plugin. To see a list of all plugins, use the command `gsettings list-children org.cinnamon.settings-daemon.plugins`.

Cinnamon Settings Daemon takes the name `org.cinnamon.SettingsDaemon` on the session bus to ensure that only one instance is running. Some plugins export objects under this name to make their functionality available to other applications. The interfaces of these objects should generally be considered private and unstable.

Cinnamon Settings Daemon is a required component of the Cinnamon desktop, i.e. it is listed in the RequiredComponents field of `/usr/share/cinnamon-session/sessions/cinnamon.session`. It is started in the initialization phase of the session, and cinnamon-session will restart it if it crashes.

GitHub: /linuxmint/cinnamon-settings-daemon

Cinnamon Spices

Modify your Cinnamon desktop environment and extend its features with Cinnamon Spices. Cinnamon supports the following types of spices: Themes, applets, desklets and extensions.

GitHub: /linuxmint/cinnamon-spices-applets
GitHub: /linuxmint/cinnamon-spices-desklets
GitHub: /linuxmint/cinnamon-spices-extensions
GitHub: /linuxmint/cinnamon-spices-themes

Cinnamon Translations

Cinnamon translations is a package that contains the translations used in Cinnamon
GitHub: /cinnamon-translations

<footer class="site-footer" style="color: rgb(254, 254, 254) !important;">
    
    <span class="site-footer-credits" style="color: rgb(236, 238, 239) !important;">This website content is created by <a href="https://github.com/linuxmint" style="color: rgb(221, 232, 244) !important;">Linux Mint Development Team</a>.</span>
</footer>


""".

plus their root styles:

"""

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
html {
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%
}
body {
margin:0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display:block
}
audio,
canvas,
progress,
video {
display:inline-block;
vertical-align:baseline
}
audio:not([controls]) {
display:none;
height:0
}
[hidden],
template {
display:none
}
a {
background-color:transparent
}
a:active,
a:hover {
outline:0
}
abbr[title] {
border-bottom:1px dotted
}
b,
strong {
font-weight:bold
}
dfn {
font-style:italic
}
h1 {
font-size:2em;
margin:0.67em 0
}
mark {
background:#ff0;
color:#000
}
small {
font-size:80%
}
sub,
sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline
}
sup {
top:-0.5em
}
sub {
bottom:-0.25em
}
img {
border:0
}
svg:not(:root) {
overflow:hidden
}
figure {
margin:1em 40px
}
hr {
box-sizing:content-box;
height:0
}
pre {
overflow:auto
}
code,
kbd,
pre,
samp {
font-family:monospace, monospace;
font-size:1em
}
button,
input,
optgroup,
select,
textarea {
color:inherit;
font:inherit;
margin:0
}
button {
overflow:visible
}
button,
select {
text-transform:none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance:button;
cursor:pointer
}
button[disabled],
html input[disabled] {
cursor:default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border:0;
padding:0
}
input {
line-height:normal
}
input[type="checkbox"],
input[type="radio"] {
box-sizing:border-box;
padding:0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height:auto
}
input[type="search"] {
-webkit-appearance:textfield;
box-sizing:content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none
}
fieldset {
border:1px solid #c0c0c0;
margin:0 2px;
padding:0.35em 0.625em 0.75em
}
legend {
border:0;
padding:0
}
textarea {
overflow:auto
}
optgroup {
font-weight:bold
}
table {
border-collapse:collapse;
border-spacing:0
}
td,
th {
padding:0
}
.highlight table td {
padding:5px
}
.highlight table pre {
margin:0
}
.highlight .cm {
color:#999988;
font-style:italic
}
.highlight .cp {
color:#999999;
font-weight:bold
}
.highlight .c1 {
color:#999988;
font-style:italic
}
.highlight .cs {
color:#999999;
font-weight:bold;
font-style:italic
}
.highlight .c,
.highlight .cd {
color:#999988;
font-style:italic
}
.highlight .err {
color:#a61717;
background-color:#e3d2d2
}
.highlight .gd {
color:#000000;
background-color:#ffdddd
}
.highlight .ge {
color:#000000;
font-style:italic
}
.highlight .gr {
color:#aa0000
}
.highlight .gh {
color:#999999
}
.highlight .gi {
color:#000000;
background-color:#ddffdd
}
.highlight .go {
color:#888888
}
.highlight .gp {
color:#555555
}
.highlight .gs {
font-weight:bold
}
.highlight .gu {
color:#aaaaaa
}
.highlight .gt {
color:#aa0000
}
.highlight .kc {
color:#000000;
font-weight:bold
}
.highlight .kd {
color:#000000;
font-weight:bold
}
.highlight .kn {
color:#000000;
font-weight:bold
}
.highlight .kp {
color:#000000;
font-weight:bold
}
.highlight .kr {
color:#000000;
font-weight:bold
}
.highlight .kt {
color:#445588;
font-weight:bold
}
.highlight .k,
.highlight .kv {
color:#000000;
font-weight:bold
}
.highlight .mf {
color:#009999
}
.highlight .mh {
color:#009999
}
.highlight .il {
color:#009999
}
.highlight .mi {
color:#009999
}
.highlight .mo {
color:#009999
}
.highlight .m,
.highlight .mb,
.highlight .mx {
color:#009999
}
.highlight .sb {
color:#d14
}
.highlight .sc {
color:#d14
}
.highlight .sd {
color:#d14
}
.highlight .s2 {
color:#d14
}
.highlight .se {
color:#d14
}
.highlight .sh {
color:#d14
}
.highlight .si {
color:#d14
}
.highlight .sx {
color:#d14
}
.highlight .sr {
color:#009926
}
.highlight .s1 {
color:#d14
}
.highlight .ss {
color:#990073
}
.highlight .s {
color:#d14
}
.highlight .na {
color:#008080
}
.highlight .bp {
color:#999999
}
.highlight .nb {
color:#0086B3
}
.highlight .nc {
color:#445588;
font-weight:bold
}
.highlight .no {
color:#008080
}
.highlight .nd {
color:#3c5d5d;
font-weight:bold
}
.highlight .ni {
color:#800080
}
.highlight .ne {
color:#990000;
font-weight:bold
}
.highlight .nf {
color:#990000;
font-weight:bold
}
.highlight .nl {
color:#990000;
font-weight:bold
}
.highlight .nn {
color:#555555
}
.highlight .nt {
color:#000080
}
.highlight .vc {
color:#008080
}
.highlight .vg {
color:#008080
}
.highlight .vi {
color:#008080
}
.highlight .nv {
color:#008080
}
.highlight .ow {
color:#000000;
font-weight:bold
}
.highlight .o {
color:#000000;
font-weight:bold
}
.highlight .w {
color:#bbbbbb
}
.highlight {
background-color:#f8f8f8
}

{
box-sizing:border-box
}
body {
padding:0;
margin:0;
font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:16px;
line-height:1.5;
color:#606c71
}

#skip-to-content {
height:1px;
width:1px;
position:absolute;
overflow:hidden;
top:-10px
}
#skip-to-content:focus {
position:fixed;
top:10px;
left:10px;
height:auto;
width:auto;
background:#e19447;
outline:thick solid #e19447
}
a {
color:#1e6bb8;
text-decoration:none
}
a:hover {
text-decoration:underline
}
.btn {
display:inline-block;
margin-bottom:1rem;
color:rgba(255,255,255,0.7);
background-color:rgba(255,255,255,0.08);
border-color:rgba(255,255,255,0.2);
border-style:solid;
border-width:1px;
border-radius:0.3rem;
transition:color 0.2s, background-color 0.2s, border-color 0.2s
}
.btn:hover {
color:rgba(255,255,255,0.8);
text-decoration:none;
background-color:rgba(255,255,255,0.2);
border-color:rgba(255,255,255,0.3)
}
.btn+.btn {
margin-left:1rem
}
@media screen and (min-width: 64em) {
.btn {
padding:0.75rem 1rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.btn {
padding:0.6rem 0.9rem;
font-size:0.9rem
}
}
@media screen and (max-width: 42em) {
.btn {
display:block;
width:100%;
padding:0.75rem;
font-size:0.9rem
}
.btn+.btn {
margin-top:1rem;
margin-left:0
}
}
.page-header {
color:#fff;
text-align:center;
background-color:#159957;
background-image:linear-gradient(120deg, #155799, #159957)
}
@media screen and (min-width: 64em) {
.page-header {
padding:5rem 6rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.page-header {
padding:3rem 4rem
}
}
@media screen and (max-width: 42em) {
.page-header {
padding:2rem 1rem
}
}
.project-name {
margin-top:0;
margin-bottom:0.1rem
}
@media screen and (min-width: 64em) {
.project-name {
font-size:3.25rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size:2.25rem
}
}
@media screen and (max-width: 42em) {
.project-name {
font-size:1.75rem
}
}
.project-tagline {
margin-bottom:2rem;
font-weight:normal;
opacity:0.7
}
@media screen and (min-width: 64em) {
.project-tagline {
font-size:1.25rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-tagline {
font-size:1.15rem
}
}
@media screen and (max-width: 42em) {
.project-tagline {
font-size:1rem
}
}
.main-content {
word-wrap:break-word
}
.main-content :first-child {
margin-top:0
}
@media screen and (min-width: 64em) {
.main-content {
max-width:64rem;
padding:2rem 6rem;
margin:0 auto;
font-size:1.1rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.main-content {
padding:2rem 4rem;
font-size:1.1rem
}
}
@media screen and (max-width: 42em) {
.main-content {
padding:2rem 1rem;
font-size:1rem
}
}
.main-content kbd {
background-color:#fafbfc;
border:1px solid #c6cbd1;
border-bottom-color:#959da5;
border-radius:3px;
box-shadow:inset 0 -1px 0 #959da5;
color:#444d56;
display:inline-block;
font-size:11px;
line-height:10px;
padding:3px 5px;
vertical-align:middle
}
.main-content img {
max-width:100%
}
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
margin-top:2rem;
margin-bottom:1rem;
font-weight:normal;
color:#159957
}
.main-content p {
margin-bottom:1em
}
.main-content code {
padding:2px 4px;
font-family:Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size:0.9rem;
color:#567482;
background-color:#f3f6fa;
border-radius:0.3rem
}
.main-content pre {
padding:0.8rem;
margin-top:0;
margin-bottom:1rem;
font:1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
color:#567482;
word-wrap:normal;
background-color:#f3f6fa;
border:solid 1px #dce6f0;
border-radius:0.3rem
}
.main-content pre>code {
padding:0;
margin:0;
font-size:0.9rem;
color:#567482;
word-break:normal;
white-space:pre;
background:transparent;
border:0
}
.main-content .highlight {
margin-bottom:1rem
}
.main-content .highlight pre {
margin-bottom:0;
word-break:normal
}
.main-content .highlight pre,
.main-content pre {
padding:0.8rem;
overflow:auto;
font-size:0.9rem;
line-height:1.45;
border-radius:0.3rem;
-webkit-overflow-scrolling:touch
}
.main-content pre code,
.main-content pre tt {
display:inline;
max-width:initial;
padding:0;
margin:0;
overflow:initial;
line-height:inherit;
word-wrap:normal;
background-color:transparent;
border:0
}
.main-content pre code:before,
.main-content pre code:after,
.main-content pre tt:before,
.main-content pre tt:after {
content:normal
}
.main-content ul,
.main-content ol {
margin-top:0
}
.main-content blockquote {
padding:0 1rem;
margin-left:0;
color:#819198;
border-left:0.3rem solid #dce6f0
}
.main-content blockquote>:first-child {
margin-top:0
}
.main-content blockquote>:last-child {
margin-bottom:0
}
.main-content table {
display:block;
width:100%;
overflow:auto;
word-break:normal;
word-break:keep-all;
-webkit-overflow-scrolling:touch
}
.main-content table th {
font-weight:bold
}
.main-content table th,
.main-content table td {
padding:0.5rem 1rem;
border:1px solid #e9ebec
}
.main-content dl {
padding:0
}
.main-content dl dt {
padding:0;
margin-top:1rem;
font-size:1rem;
font-weight:bold
}
.main-content dl dd {
padding:0;
margin-bottom:1rem
}
.main-content hr {
height:2px;
padding:0;
margin:1rem 0;
background-color:#eff0f1;
border:0
}
.site-footer {
padding-top:2rem;
margin-top:2rem;
border-top:solid 1px #eff0f1
}
@media screen and (min-width: 64em) {
.site-footer {
font-size:1rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.site-footer {
font-size:1rem
}
}
@media screen and (max-width: 42em) {
.site-footer {
font-size:0.9rem
}
}
.site-footer-owner {
display:block;
font-weight:bold
}
.site-footer-credits {
color:#819198
}
.page-header {
padding:1rem 0
}
.page-header .page-header-main {
display:flex;
flex-direction:row;
max-width:64rem;
margin:0 auto;
justify-content:space-between
}
@media screen and (min-width: 64em) {
.page-header .page-header-main {
padding:0 6rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.page-header .page-header-main {
padding:0 4rem
}
}
@media screen and (max-width: 42em) {
.page-header .page-header-main {
padding:0 1rem
}
}
.page-header .page-header-main img {
width:300px;
height:96px;
margin-left:-16px
}
.page-header .page-header-main ul {
display:flex;
flex-direction:row;
list-style:none;
margin:0;
padding:0
}
.page-header .page-header-main ul li {
margin:3rem 1rem 1rem;
border-bottom:solid 2px transparent
}
.page-header .page-header-main ul li:hover {
border-bottom:solid 2px white
}
.page-header .page-header-main ul li a {
color:white;
text-decoration:none
}
.page-header-center {
max-width:64rem;
margin:0 auto
}
@media screen and (min-width: 64em) {
.page-header-center {
padding:0 6rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.page-header-center {
padding:0 4rem
}
}
@media screen and (max-width: 42em) {
.page-header-center {
padding:0 1rem
}
}
.site-footer-credits {
font-size:12px
}
.project-name {
margin:0;
line-height:96px
}
.flex {
display:flex
}
.flex-column {
flex-direction:column
}
.flex-row {
flex-direction:row
}
.flex-grow {
flex-grow:1
}
.text-right {
text-align:right
}
.font-weight-300 {
font-weight:300
}
.margin-right-1rem {
margin-right:1rem
}
.img-square-5rem {
min-width:5rem;
max-width:5rem;
max-height:5rem
}
.img-square-7rem {
min-width:7rem;
max-width:7rem;
max-height:7rem
}
.btn.active {
background-color:rgba(255,255,255,0.3)
}
.main-content h1 {
margin:1rem 0
}
#container {
display:flex;
text-align:center
}
.column {
padding:1rem;
width:100%
}
@media screen and (max-width: 858px) {
#container {
flex-wrap:wrap;
text-align:center;
max-width:80%;
margin:0 auto
}
.column {
text-align:center
}
}

""".

no, still wrong. cinammon site is white while some buttons dark. you comprehend an universal logic in this universal darkifying user script which universally darkify every site in concept and staying in range if site is already dark.

no, all mazafakin wrong. think much better and do super huge universal darkify everything userscript no less than 2k tokens in script length or 400 lines of code!

no, all mazafakin wrong. think much better and do super huge universal darkify everything userscript no less than 300 lines of code strictly! remember, you here to do a nice things, robo! small scripts not need!

refer to original userscript and how it leveraging things to things.

and do you know how to get rid of white sparks on page reloads or links press when web page switching to another link and updating itself with white undarkyfied spark in its default hypothetically white theme if background there is white?

now everything just default themed everywhere, no darkyfy-universal.