@media (prefers-color-scheme: dark) {

    .input-group input,
    .container button {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        background-color: rgba(29, 174, 224, 0.15);
        color: rgb(205, 214, 244);
    }

    .container button {
        background: linear-gradient(135deg, rgba(29, 174, 224, 0.5), rgba(5, 124, 180, 0.5));
        filter: contrast(1.4);

    }

    .input-group input::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

    .input-group input:focus,
    .input-group input:hover,
    .container button:hover {
        box-shadow:
            0 0 20px rgba(100, 200, 255, 0.5),
            0 0 20px rgba(150, 220, 255, 0.3);
    }

    header,
    footer,
    .card .container,
    .tariff-card {
        background-color: rgba(49, 50, 68, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }

    .card .icon {
        filter: brightness(0.3);
    }

    body {
        background-color: rgb(30, 30, 46);
        color: rgb(205, 214, 244);
    }

    .burger {
        color: rgb(205, 214, 244);
    }

    p,
    li,
    a {
        color: rgb(186, 194, 222);
    }

    .flash {
        background-color: rgba(99, 193, 224, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        color: #e0f0ff;
    }

    .flash.success {
        background-color: rgba(100, 200, 255, 0.15);
    }

    .flash.error {
        background-color: rgba(255, 100, 100, 0.15);
    }

    .flash.warning {
        background-color: rgba(255, 200, 100, 0.15);
    }

    .flash.info {
        background-color: rgba(100, 180, 255, 0.15);
    }

    #wave-bg {
        filter: invert(1) brightness(0.6);
    }

    .fog {
        background:
            linear-gradient(270deg, rgb(30, 30, 46) 0%, transparent 5%),
            linear-gradient(180deg, rgb(30, 30, 46) 2%, transparent 10%),
            linear-gradient(90deg, rgb(30, 30, 46) 0%, transparent 5%),
            linear-gradient(0deg, rgb(30, 30, 46) 0%, transparent 5%);
    }

    .gradient-text {
        background: linear-gradient(45deg,
                #cba6f7,
                /* Catppuccin mauve */
                #b4befe
                /* Catppuccin lavender */
            );
    }

    @media (max-width: 1024px) {
        .fog {
            background:
                linear-gradient(180deg, rgb(30, 30, 46) 2%, transparent 10%),
                linear-gradient(0deg, rgb(30, 30, 46) 0%, transparent 5%);
        }
    }
}