@media (prefers-color-scheme: light) {
    body {
        background: white;
        color: #666666;
    }

    a {
        text-decoration-color: #F7F7F7;
        color: #F734A5;
    }
    a:hover {
        text-decoration-color: #D7D7D7;
    }

    h1, h2, h3, h4 {
        color: #111827;
    }

    pre {
        background: #F7F7F7;
    }
    code {
        background: #F7F7F7;
    }

    input {
        border: 1px solid #D7D7D7;
    }

    button {
        color: white;
        background: linear-gradient(90deg, rgba(247,52,165,1) 0%, rgba(249,189,105,1) 100%);
    }
    button:hover {
        border-color: #333;
        background: linear-gradient(90deg, rgba(217,22,135,1) 0%, rgba(219,159,75,1) 100%);
    }

    .message {
        background: #F7F7F7;
    }

    header {
        background: white;
        border-bottom: 1px solid #F7F7F7;
    }

    header div.logo a {
        color: #444;
    }

    nav a {
        color: #111827;
    }
    nav a i {
        color: #a7a7a7;
    }
    nav a:hover, nav a.active {
        color: #F2318D;
    }
    nav a:hover span, nav a.active span {
        border-bottom: 2px solid #D7D7D7;
    }
    nav a:hover i {
        color: #333;
    }

    div.buttons small a {
        color: #a7a7a7;
    }
    div.buttons small a:hover {
        color: #888;
    }

    a.button {
        background: linear-gradient(90deg, rgba(247,52,165,1) 0%, rgba(249,189,105,1) 100%);
        color: white;
    }
    a.button i {
        color: #F7F7F7;
    }
    a.button:hover {
        border-color: #333;
        background: linear-gradient(90deg, rgba(217,22,135,1) 0%, rgba(219,159,75,1) 100%);
    }
    a.button:hover i {
        /*color: #333;*/
    }
    a.button span {
        color: #D9D9D9;
    }

    section#problem {
        background: linear-gradient(0deg, white 0%, #F3F5F6 100%);

        span {
            background: linear-gradient(90deg, rgba(247,52,165,1) 0%, rgba(249,189,105,1) 100%);
            background-clip: text;
        }
    }

    section#features-organize {
        background: white;
    }
    section#features-organize .features-left .feature-dnd {
        background: rgba(227, 74, 160, 0.1);
        border: 1px solid rgba(227, 74, 160, 0.3);
    }
    section#features-organize .features-left .feature-keyboard {
        background: rgba(98, 98, 99, 0.1);
        border: 1px solid rgba(98, 98, 99, 0.3);
    }
    section#features-organize .features-right .feature-groups {
        background: rgba(239, 189, 119, 0.1);
        border: 1px solid rgba(239, 189, 119, 0.3);
    }
    section#features-organize .features-right .feature-threads {
        background: rgba(58, 58, 59, 0.1);
        border: 1px solid rgba(58, 58, 59, 0.3);
    }

    section#examples .arrow-left:hover {
        background: linear-gradient(-170deg, transparent 0%, rgba(0,0,0,0.05) 100%);
    }
    section#examples .arrow-right:hover {
        background: linear-gradient(170deg, transparent 0%, rgba(0,0,0,0.05) 100%);
    }
    section#examples .examples .slider h5 {
        color: #666;
    }

    section#features-unified {
        background: linear-gradient(180deg, #F3F5F6 0%, white 100%);
    }

    section#features-secure {
        background: linear-gradient(180deg, #F3F5F6 0%, white 100%);
    }
    section#features-secure .item {
        background: rgba(98, 98, 99, 0.1);
        border: 1px solid rgba(98, 98, 99, 0.3);
    }

    section#download {
        background: #F3F5F6;
    }

    footer {
        color: #a7a7a7;
    }
    footer a {
        color: #888;
    }
    footer a:hover {
        color: #333;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a1a;
        background: #141516;
        color: #cccccc;
    }

    a {
        text-decoration-color: #333333;
        color: #ff6bb3;
    }
    a:hover {
        text-decoration-color: #555555;
    }

    h1, h2, h3, h4 {
        color: #ffffff;
    }

    pre {
        background: #2a2a2a;
    }
    code {
        background: #2a2a2a;
    }

    input {
        border: 1px solid #444444;
        background: #2a2a2a;
        color: #cccccc;
    }

    button {
        color: white;
        background: linear-gradient(90deg, rgb(171, 7, 102) 0%, rgb(139, 83, 6) 100%);
    }
    button:hover {
        border-color: #666;
        background: linear-gradient(90deg, rgba(171, 7, 102, 0.8) 0%, rgba(139, 83, 6, 0.8) 100%);
    }

    .message {
        background: #2a2a2a;
    }

    header {
        background: #1a1a1a;
        background: #141516;
        border-bottom: 1px solid #101010;
    }

    header div.logo a {
        color: #ffffff;
    }

    nav a {
        color: #ffffff;
    }
    nav a i {
        color: #888888;
    }
    nav a:hover, nav a.active {
        color: #ff6bb3;
    }
    nav a:hover span, nav a.active span {
        border-bottom: 2px solid #555555;
    }
    nav a:hover i {
        color: #cccccc;
    }

    div.buttons small a {
        color: #888888;
    }
    div.buttons small a:hover {
        color: #cccccc;
    }

    a.button {
        background: linear-gradient(90deg, rgb(171, 7, 102) 0%, rgb(139, 83, 6) 100%);
        color: white;
    }
    a.button i {
        color: white;
    }
    a.button:hover {
        border-color: #666;
        background: linear-gradient(90deg, rgba(171, 7, 102, 0.8) 0%, rgba(139, 83, 6, 0.8) 100%);
    }
    a.button:hover i {
        color: #DDD;
    }
    a.button span {
        color: #BBB;
    }

    section#problem {
        background: linear-gradient(0deg, #141516 0%, #1C1E1F 100%);

        span {
            background: linear-gradient(90deg, rgb(171, 7, 102) 0%, rgb(139, 83, 6) 80%);
            background-clip: text;
        }
    }

    section#features-organize {
        background: #141516;
    }
    section#features-organize .features-left .feature-dnd {
        background: rgba(227, 74, 160, 0.2);
        border: 1px solid rgba(227, 74, 160, 0.5);
    }
    section#features-organize .features-left .feature-keyboard {
        background: rgba(98, 98, 99, 0.2);
        border: 1px solid rgba(98, 98, 99, 0.5);
    }
    section#features-organize .features-right .feature-groups {
        background: rgba(239, 189, 119, 0.2);
        border: 1px solid rgba(239, 189, 119, 0.5);
    }
    section#features-organize .features-right .feature-threads {
        background: rgba(58, 58, 59, 0.3);
        border: 1px solid rgba(58, 58, 59, 0.6);
    }

    section#examples .arrow-left:hover {
        background: linear-gradient(-170deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
    }
    section#examples .arrow-right:hover {
        background: linear-gradient(170deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
    }
    section#examples .examples .slider h5 {
        color: #ffffff;
    }

    section#features-unified {
        background: linear-gradient(0deg, #141516 0%, #1C1E1F 100%);
        /*border-top: 1px solid #333333;*/
    }

    section#features-secure {
        background: linear-gradient(0deg, #141516 0%, #1C1E1F 100%);
    }
    section#features-secure .item {
        background: rgba(98, 98, 99, 0.2);
        border: 1px solid rgba(98, 98, 99, 0.5);
    }

    section#download {
        /*border: 1px solid #333333;*/
        background: #1C1E1F;
    }

    footer {
        color: #888888;
    }
    footer a {
        color: #cccccc;
    }
    footer a:hover {
        color: #ffffff;
    }
}