.input-group input,
.container button {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background-color: rgba(29, 174, 224, 0.2);
}

.container button {
    background: linear-gradient(135deg, rgba(29, 174, 224, 0.45), rgba(5, 124, 180, 0.45));
}

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

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

header,
footer,
.card .container,
    .tariff-card {
    background-color: rgba(29, 174, 224, 0.1);
}

header,
footer,
.card .container,
    .tariff-card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

body {
    background-color: white;
    color: black;
}

.flash {
    background-color: rgba(99, 193, 224, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

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

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

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

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

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

.gradient-text {
    background: linear-gradient(45deg,
            rgb(136, 57, 239),
            /* Catppuccin mauve */
            rgb(114, 135, 253)
            /* Catppuccin lavender */
        );
}

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