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        COLOROMORLOROFAKAMAFKA
// @match       *://*/*
// @grant       none
// @version     12.0
// @run-at      document-idle
// ==/UserScript==

(function () {
    'use strict';

    // Initial parameters (can be adjusted to achieve desired effects)
    const adjustmentStrength = 0.85; // Defines base level of adjustment
    const minBrightnessThreshold = 30; // Minimum brightness to maintain visibility

    adjustColors();

    function adjustColors() {
        const elements = document.querySelectorAll('*');

        elements.forEach(element => {
            const colorProperties = ['color', 'background-color'];

            colorProperties.forEach(prop => {
                const styleValue = getComputedStyle(element)[prop];
                let currentColor;

                // Parse the hex or RGB color
                if (styleValue.startsWith('#')) {
                    currentColor = hexToRGB(styleValue);
                } else if (styleValue.startsWith('rgb')) {
                    const rgbArray = styleValue.match(/(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
                    currentColor = [parseInt(rgbArray[1]), parseInt(rgbArray[2]), parseInt(rgbArray[3])];
                }

                // Only adjust if we have a valid color
                if (currentColor) {
                    const luminance = calculateLuminance(currentColor);

                    // Proceed if luminance is above the minimum threshold
                    if (luminance > minBrightnessThreshold) {
                        // Get the background color for complementary adjustments
                        const bgColor = getComputedStyle(element).backgroundColor;
                        let bgRgb;

                        if (bgColor.startsWith('#')) {
                            bgRgb = hexToRGB(bgColor);
                        } else if (bgColor.startsWith('rgb')) {
                            const bgArray = bgColor.match(/\d+/g).map(Number);
                            bgRgb = [bgArray[0], bgArray[1], bgArray[2]];
                        }

                        // Calculate the complementary color
                        const compColor = bgRgb.map(value => 255 - value);

                        // Blend the original color towards its complementary color
                        let adjustedColor = currentColor.map((value, index) => {
                            return Math.max(0, Math.min(255, Math.floor(value * (1 - adjustmentStrength) + (compColor[index] * adjustmentStrength))));
                        });

                        // Ensure luminosity stays above the min threshold
                        if (calculateLuminance(adjustedColor) < minBrightnessThreshold) {
                            adjustedColor = currentColor; // Revert if too dark
                        }

                        const hexColor = rgbToHex(adjustedColor[0], adjustedColor[1], adjustedColor[2]);
                        element.style.setProperty(prop, hexColor, 'important');
                    }
                }
            });
        });
    }

    function calculateLuminance(rgb) {
        return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
    }

    function hexToRGB(hex) {
        if (hex.startsWith('#')) {
            hex = hex.slice(1);
            return [
                parseInt(hex.substr(0, 2), 16),
                parseInt(hex.substr(2, 2), 16),
                parseInt(hex.substr(4, 2), 16)
            ];
        }
        return [255, 255, 255]; // Fallback to white
    }

    function rgbToHex(r, g, b) {
        return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
    }

})();

""".



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


"""

<html lang="en-US"><head>
    <meta charset="UTF-8">
    <title>Linux Mint Projects by linuxmint</title>
    <meta name="description" content="Projects maintained by Linux Mint">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#157878">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/assets/css/style.css?v=190363a80eacc5b949eb2f17c126d97d329db95e">
    <link rel="icon" type="image/png" href="https://linuxmint.com/favicon.ico">
</head>
<body style="color: rgb(231, 232, 233) !important;">
<section class="page-header" style="color: rgb(237, 124, 181) !important; background-color: rgb(202, 109, 155) !important;">
    <h1 class="project-name" style="color: rgb(252, 235, 243) !important;">Linux Mint Projects</h1>
    

    <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>
</section>
<section class="main-content" style="color: rgb(251, 251, 251) !important;">
    <a href="/" style="color: rgb(221, 232, 244) !important;">Home</a> /
<a href="/projects.html" style="color: rgb(221, 232, 244) !important;">Projects</a>

<h1 style="color: rgb(219, 239, 229) !important;">Cinnamon Projects</h1>

<p style="color: rgb(254, 254, 254) !important;">Cinnamon is composed a lot of smaller interconnected projects:</p>

<div class="flex flex-row" style="color: rgb(254, 254, 254) !important;">
    <img src="/icons/projects/cinnamon-logo.svg" class="margin-right-1rem img-square-5rem" style="color: rgb(254, 254, 254) !important;">
    <div style="color: rgb(254, 254, 254) !important;">
        <h3 style="color: rgb(219, 239, 229) !important;">Cinnamon</h3>
        <p style="color: rgb(254, 254, 254) !important;">
            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.
            <br style="color: rgb(254, 254, 254) !important;">
            GitHub: <a href="https://github.com/linuxmint/Cinnamon" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/Cinnamon</a>
        </p>
    </div>
</div>

<div class="flex flex-row" style="color: rgb(254, 254, 254) !important;">
    <img src="/icons/projects/cinnamon-logo.svg" class="margin-right-1rem img-square-5rem" style="color: rgb(254, 254, 254) !important;">
    <div style="color: rgb(254, 254, 254) !important;">
        <h3 style="color: rgb(219, 239, 229) !important;">CJS</h3>
        <p style="color: rgb(254, 254, 254) !important;">
            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.
            <br style="color: rgb(254, 254, 254) !important;">
            GitHub: <a href="https://github.com/linuxmint/cjs" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/cjs</a>
        </p>
    </div>
</div>

<div class="flex flex-row" style="color: rgb(254, 254, 254) !important;">
    <img src="/icons/projects/cs-cat-hardware.svg" class="margin-right-1rem img-square-5rem" style="color: rgb(254, 254, 254) !important;">
    <div style="color: rgb(254, 254, 254) !important;">
        <h3 style="color: rgb(219, 239, 229) !important;">Cinnamon Control Center</h3>
        <p style="color: rgb(254, 254, 254) !important;">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.</p>
        <p style="color: rgb(254, 254, 254) !important;">GitHub: <a href="https://github.com/linuxmint/cinnamon-control-center" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/cinnamon-control-center</a>
        </p>
    </div>
</div>

<div class="flex flex-row" style="color: rgb(254, 254, 254) !important;">
    <img src="/icons/projects/cs-desktop.svg" class="margin-right-1rem img-square-5rem" style="color: rgb(254, 254, 254) !important;">
    <div style="color: rgb(254, 254, 254) !important;">
        <h3 style="color: rgb(219, 239, 229) !important;">Cinnamon Desktop</h3>
        <p style="color: rgb(254, 254, 254) !important;">
            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.
            <br style="color: rgb(254, 254, 254) !important;">
            GitHub: <a href="https://github.com/linuxmint/cinnamon-desktop" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/cinnamon-desktop</a>
        </p>
    </div>
</div>

<div class="flex flex-row" style="color: rgb(254, 254, 254) !important;">
    <img src="/icons/projects/mdm.svg" class="margin-right-1rem img-square-5rem" style="color: rgb(254, 254, 254) !important;">
    <div style="color: rgb(254, 254, 254) !important;">
        <h3 style="color: rgb(219, 239, 229) !important;">MDM</h3>
        <p style="color: rgb(254, 254, 254) !important;">
            MDM, forked from GDM, is a display manager, not necessarily tied to Cinnamon. MDM officially stands for MDM
            display manager.
        </p>
        GitHub:
        <ul style="color: rgb(254, 254, 254) !important;">
            <li style="color: rgb(254, 254, 254) !important;"><a href="https://github.com/linuxmint/mdm" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/mdm</a></li>
            <li style="color: rgb(254, 254, 254) !important;"><a href="https://github.com/mint-mdm-themes" target="_blank" style="color: rgb(221, 232, 244) !important;">/mint-mdm-themes</a></li>
            <li style="color: rgb(254, 254, 254) !important;"><a href="https://github.com/mdm-themes" target="_blank" style="color: rgb(221, 232, 244) !important;">/mdm-themes</a></li>
        </ul>
    </div>
</div>

<div class="flex flex-row" style="color: rgb(254, 254, 254) !important;">
    <img src="/icons/projects/menu-editor.svg" class="margin-right-1rem img-square-5rem" style="color: rgb(254, 254, 254) !important;">
    <div style="color: rgb(254, 254, 254) !important;">
        <h3 style="color: rgb(219, 239, 229) !important;">Cinnamon Menus</h3>
        <p style="color: rgb(254, 254, 254) !important;">Cinnamon Menus, fork of GNOME menus, contains the <code style="color: rgb(86, 116, 130) !important; background-color: rgb(46, 44, 41) !important;">libcinnamon-menu</code> library, the layout
            configuration files for the Cinnamon menu, as well as a simple menu editor.</p>
        <p style="color: rgb(254, 254, 254) !important;">The <code style="color: rgb(86, 116, 130) !important; background-color: rgb(46, 44, 41) !important;">libcinnamon-menu</code> library implements the "Desktop Menu Specification" from freedesktop.org:
        </p>
        <ul style="color: rgb(254, 254, 254) !important;">
            <li style="color: rgb(254, 254, 254) !important;"><a href="http://freedesktop.org/wiki/Specifications/menu-spec" target="_blank" style="color: rgb(221, 232, 244) !important;">http://freedesktop.org/wiki/Specifications/menu-spec</a>
            </li>
            <li style="color: rgb(254, 254, 254) !important;"><a href="http://specifications.freedesktop.org/menu-spec/menu-spec-latest.html" target="_blank" style="color: rgb(221, 232, 244) !important;">http://specifications.freedesktop.org/menu-spec/menu-spec-latest.html</a>
            </li>
        </ul>
        <p style="color: rgb(254, 254, 254) !important;">GitHub: <a href="https://github.com/linuxmint/cinnamon-menus" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/cinnamon-menus</a>
        </p>
    </div>
</div>

<div class="flex flex-row" style="color: rgb(254, 254, 254) !important;">
    <img src="/icons/projects/cs-windows.svg" class="margin-right-1rem img-square-5rem" style="color: rgb(254, 254, 254) !important;">
    <div style="color: rgb(254, 254, 254) !important;">
        <h3 style="color: rgb(219, 239, 229) !important;">Muffin</h3>
        <p style="color: rgb(254, 254, 254) !important;">
            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.
            <br style="color: rgb(254, 254, 254) !important;">
            GitHub: <a href="https://github.com/linuxmint/muffin" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/muffin</a>
        </p>
    </div>
</div>

<div class="flex flex-row" style="color: rgb(254, 254, 254) !important;">
    <img src="/icons/projects/nemo.svg" class="margin-right-1rem img-square-5rem" style="color: rgb(254, 254, 254) !important;">
    <div style="color: rgb(254, 254, 254) !important;">
        <h3 style="color: rgb(219, 239, 229) !important;">Nemo</h3>
        <p style="color: rgb(254, 254, 254) !important;">
            Nemo, forked from Nautilus, is the file manager of Cinnamon.
            <br style="color: rgb(254, 254, 254) !important;">
            GitHub: <a href="https://github.com/linuxmint/nemo" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/nemo</a>
            <br style="color: rgb(254, 254, 254) !important;">
            Nemo Extensions GitHub: <a href="https://github.com/linuxmint/nemo-extensions" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/nemo-extensions</a>
        </p>
    </div>
</div>

<div class="flex flex-row" style="color: rgb(254, 254, 254) !important;">
    <img src="/icons/projects/csd-screensaver-proxy.svg" class="margin-right-1rem img-square-5rem" style="color: rgb(254, 254, 254) !important;">
    <div style="color: rgb(254, 254, 254) !important;">
        <h3 style="color: rgb(219, 239, 229) !important;">Cinnamon Screensaver</h3>
        <p style="color: rgb(254, 254, 254) !important;">
            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.
            <br style="color: rgb(254, 254, 254) !important;">
            GitHub: <a href="https://github.com/linuxmint/cinnamon-screensaver" target="_blank" style="color: rgb(221, 232, 244) !important;">/cinnamon-screensaver</a>
        </p>
    </div>
</div>

<div class="flex flex-row" style="color: rgb(254, 254, 254) !important;">
    <img src="/icons/projects/cinnamon-logo.svg" class="margin-right-1rem img-square-5rem" style="color: rgb(254, 254, 254) !important;">
    <div style="color: rgb(254, 254, 254) !important;">
        <h3 style="color: rgb(219, 239, 229) !important;">Cinnamon Session</h3>
        <p style="color: rgb(254, 254, 254) !important;">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).</p>
        <p style="color: rgb(254, 254, 254) !important;">GitHub: <a href="https://github.com/linuxmint/cinnamon-session" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/cinnamon-session</a></p>
    </div>
</div>

<div class="flex flex-row" style="color: rgb(254, 254, 254) !important;">
    <img src="/icons/projects/cs-general.svg" class="margin-right-1rem img-square-5rem" style="color: rgb(254, 254, 254) !important;">
    <div style="color: rgb(254, 254, 254) !important;">
        <h3 style="color: rgb(219, 239, 229) !important;">Cinnamon Settings Daemon</h3>
        <p style="color: rgb(254, 254, 254) !important;">Cinnamon Settings Daemon is a fork of GNOME Settings Daemon.</p>
        <p style="color: rgb(254, 254, 254) !important;">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.</p>
        <p style="color: rgb(254, 254, 254) !important;">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`.</p>
        <p style="color: rgb(254, 254, 254) !important;">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.</p>
        <p style="color: rgb(254, 254, 254) !important;">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.</p>
        <p style="color: rgb(254, 254, 254) !important;">GitHub: <a href="https://github.com/linuxmint/cinnamon-settings-daemon" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/cinnamon-settings-daemon</a>
        </p>
    </div>
</div>

<div class="flex flex-row" style="color: rgb(254, 254, 254) !important;">
    <img src="/icons/projects/cinnamon-logo.svg" class="margin-right-1rem img-square-5rem" style="color: rgb(254, 254, 254) !important;">
    <div style="color: rgb(254, 254, 254) !important;">
        <h3 style="color: rgb(219, 239, 229) !important;">Cinnamon Spices</h3>
        <p style="color: rgb(254, 254, 254) !important;">Modify your Cinnamon desktop environment and extend its features with Cinnamon Spices. Cinnamon supports the following types of spices: Themes, applets, desklets and extensions.</p>
        <p style="color: rgb(254, 254, 254) !important;">
            GitHub: <a href="https://github.com/linuxmint/cinnamon-spices-applets" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/cinnamon-spices-applets</a>
            <br style="color: rgb(254, 254, 254) !important;">
            GitHub: <a href="https://github.com/linuxmint/cinnamon-spices-desklets" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/cinnamon-spices-desklets</a>
            <br style="color: rgb(254, 254, 254) !important;">
            GitHub: <a href="https://github.com/linuxmint/cinnamon-spices-extensions" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/cinnamon-spices-extensions</a>
            <br style="color: rgb(254, 254, 254) !important;">
            GitHub: <a href="https://github.com/linuxmint/cinnamon-spices-themes" target="_blank" style="color: rgb(221, 232, 244) !important;">/linuxmint/cinnamon-spices-themes</a>
        </p>
    </div>
</div>

<div class="flex flex-row" style="color: rgb(254, 254, 254) !important;">
    <img src="/icons/projects/gtranslator.svg" class="margin-right-1rem img-square-5rem" style="color: rgb(254, 254, 254) !important;">
    <div style="color: rgb(254, 254, 254) !important;">
        <h3 style="color: rgb(219, 239, 229) !important;">Cinnamon Translations</h3>
        <p style="color: rgb(254, 254, 254) !important;">
            Cinnamon translations is a package that contains the translations used in Cinnamon
            <br style="color: rgb(254, 254, 254) !important;">
            GitHub: <a href="https://github.com/linuxmint/cinnamon-translations" target="_blank" style="color: rgb(221, 232, 244) !important;">/cinnamon-translations</a>
        </p>
    </div>
</div>



    <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>
</section>



</body></html>

""".


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
  }
}

""".