:root {
    /* Material Design Font */
    --md-ref-typeface-plain: "Open Sans", sans-serif;
    --md-ref-typeface-brand: "Open Sans", sans-serif;
    /* Material Design Font Size */
    --md-sys-typescale-title-medium-size: 0.8rem;
    --md-sys-typescale-body-small-line-height: 0.8rem;
    --md-sys-typescale-body-large-size: 0.8rem;
    --md-sys-typescale-label-small-line-height: 0.8rem;
    --md-sys-typescale-label-medium-line-height: 0.8rem;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;

    &:not(md-icon):not(div#md-editor.md-editor) {
        font-family: "Open Sans", sans-serif;
    }

    body {
        margin: 0;
        transition: all 0.3s ease;

        &.dark {
            /* Material Design System color palette */
            --md-sys-color-primary: rgb(170 199 255);
            --md-sys-color-surface-tint: rgb(170 199 255);
            --md-sys-color-on-primary: rgb(10 48 95);
            --md-sys-color-primary-container: rgb(40 71 119);
            --md-sys-color-on-primary-container: rgb(214 227 255);
            --md-sys-color-secondary: rgb(190 198 220);
            --md-sys-color-on-secondary: rgb(40 49 65);
            --md-sys-color-secondary-container: rgb(62 71 89);
            --md-sys-color-on-secondary-container: rgb(218 226 249);
            --md-sys-color-tertiary: rgb(221 188 224);
            --md-sys-color-on-tertiary: rgb(63 40 68);
            --md-sys-color-tertiary-container: rgb(87 62 92);
            --md-sys-color-on-tertiary-container: rgb(250 216 253);
            --md-sys-color-error: rgb(255 180 171);
            --md-sys-color-on-error: rgb(105 0 5);
            --md-sys-color-error-container: rgb(147 0 10);
            --md-sys-color-on-error-container: rgb(255 218 214);
            --md-sys-color-background: rgb(17 19 24);
            --md-sys-color-on-background: rgb(226 226 233);
            --md-sys-color-surface: rgb(17 19 24);
            --md-sys-color-on-surface: rgb(226 226 233);
            --md-sys-color-surface-variant: rgb(68 71 78);
            --md-sys-color-on-surface-variant: rgb(196 198 208);
            --md-sys-color-outline: rgb(142 144 153);
            --md-sys-color-outline-variant: rgb(68 71 78);
            --md-sys-color-shadow: rgb(0 0 0);
            --md-sys-color-scrim: rgb(0 0 0);
            --md-sys-color-inverse-surface: rgb(226 226 233);
            --md-sys-color-inverse-on-surface: rgb(46 48 54);
            --md-sys-color-inverse-primary: rgb(65 95 145);
            --md-sys-color-primary-fixed: rgb(214 227 255);
            --md-sys-color-on-primary-fixed: rgb(0 27 62);
            --md-sys-color-primary-fixed-dim: rgb(170 199 255);
            --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
            --md-sys-color-secondary-fixed: rgb(218 226 249);
            --md-sys-color-on-secondary-fixed: rgb(19 28 43);
            --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
            --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
            --md-sys-color-tertiary-fixed: rgb(250 216 253);
            --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
            --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
            --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
            --md-sys-color-surface-dim: rgb(17 19 24);
            --md-sys-color-surface-bright: rgb(55 57 62);
            --md-sys-color-surface-container-lowest: rgb(12 14 19);
            --md-sys-color-surface-container-low: rgb(25 28 32);
            --md-sys-color-surface-container: rgb(29 32 36);
            --md-sys-color-surface-container-high: rgb(40 42 47);
            --md-sys-color-surface-container-highest: rgb(51 53 58);
            --marked-extended-tabs-selected-background: #3b4551; /*3b4551*/

            /* Header */
            background: #303030;
            color: #ffffff;

            & .header {
                background: #1e1e1e;
            }

            & .tab-link-container {
                background-color: #212121;

                & .scroll-up-button {
                    background-color: #02a7fa;
                }
            }

            /* Markdown Content */

            & .md-body,
            & .md-body {
                color: #d1d5da;
                background-color: transparent;

                & a {
                    color: #58a6ff;
                }

                & blockquote {
                    border-left-color: #444c56;
                    background-color: #2d333b;
                }

                & code {
                    background-color: rgba(255, 255, 255, 0.1);
                }

                & th {
                    color: #d1d5da;
                    background-color: #2d333b;
                }
            }

            /* Footer */
            & .footer {
                color: #fff;
                background: #1e1e1e;
            }
        }

        &.light {
            /* Material Design System color palette */
            --md-sys-color-primary: rgb(65 95 145);
            --md-sys-color-surface-tint: rgb(65 95 145);
            --md-sys-color-on-primary: rgb(255 255 255);
            --md-sys-color-primary-container: rgb(214 227 255);
            --md-sys-color-on-primary-container: rgb(0 27 62);
            --md-sys-color-secondary: rgb(86 95 113);
            --md-sys-color-on-secondary: rgb(255 255 255);
            --md-sys-color-secondary-container: rgb(218 226 249);
            --md-sys-color-on-secondary-container: rgb(19 28 43);
            --md-sys-color-tertiary: rgb(112 85 117);
            --md-sys-color-on-tertiary: rgb(255 255 255);
            --md-sys-color-tertiary-container: rgb(250 216 253);
            --md-sys-color-on-tertiary-container: rgb(40 19 46);
            --md-sys-color-error: rgb(186 26 26);
            --md-sys-color-on-error: rgb(255 255 255);
            --md-sys-color-error-container: rgb(255 218 214);
            --md-sys-color-on-error-container: rgb(65 0 2);
            --md-sys-color-background: rgb(249 249 255);
            --md-sys-color-on-background: rgb(25 28 32);
            --md-sys-color-surface: rgb(249 249 255);
            --md-sys-color-on-surface: rgb(25 28 32);
            --md-sys-color-surface-variant: rgb(224 226 236);
            --md-sys-color-on-surface-variant: rgb(68 71 78);
            --md-sys-color-outline: rgb(116 119 127);
            --md-sys-color-outline-variant: rgb(196 198 208);
            --md-sys-color-shadow: rgb(0 0 0);
            --md-sys-color-scrim: rgb(0 0 0);
            --md-sys-color-inverse-surface: rgb(46 48 54);
            --md-sys-color-inverse-on-surface: rgb(240 240 247);
            --md-sys-color-inverse-primary: rgb(170 199 255);
            --md-sys-color-primary-fixed: rgb(214 227 255);
            --md-sys-color-on-primary-fixed: rgb(0 27 62);
            --md-sys-color-primary-fixed-dim: rgb(170 199 255);
            --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
            --md-sys-color-secondary-fixed: rgb(218 226 249);
            --md-sys-color-on-secondary-fixed: rgb(19 28 43);
            --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
            --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
            --md-sys-color-tertiary-fixed: rgb(250 216 253);
            --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
            --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
            --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
            --md-sys-color-surface-dim: rgb(217 217 224);
            --md-sys-color-surface-bright: rgb(249 249 255);
            --md-sys-color-surface-container-lowest: rgb(255 255 255);
            --md-sys-color-surface-container-low: rgb(243 243 250);
            --md-sys-color-surface-container: rgb(237 237 244);
            --md-sys-color-surface-container-high: rgb(231 232 238);
            --md-sys-color-surface-container-highest: rgb(226 226 233);
            --marked-extended-tabs-selected-background: #fff;

            /* Header */
            background: #ffffff;
            color: #333;

            & .header {
                background: #0064c6;
            }

            & .tab-link-container {
                background-color: #0066cc;

                & .scroll-up-button {
                    background-color: #0066cc;
                }
            }

            /* Markdown Content */

            & .md-body,
            & .md-body {
                color: #24292e;
                background-color: transparent;

                & a {
                    color: #0366d6;
                }

                & blockquote {
                    border-left-color: #dfe2e5;
                    background-color: #f6f8fa;
                }

                & code {
                    background-color: rgba(27, 31, 35, 0.05);
                }

                & th {
                    background-color: #f6f8fa;
                }
            }

            /* Footer */
            & .footer {
                color: #555;
                background: #f9f9f9;
            }
        }
    }
}