:root {
    --main-color: #a82d49;
    --main-color-dark: #43121d;
    --text-color: #777;
    --light-text-color: rgba(119, 119, 119, 0.3);
    --white-color: #fff;
    --black-color: #000;
    --gradient: linear-gradient(to right, rgba(168, 45, 73, 0.5), rgba(228, 77, 38, 0.5));
    --gray-gradient: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(171, 186, 171, 0.5));
    --dark-gradient: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(39, 39, 39, 0.5));


}

/* animations */
@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 #a82d49, 0 0 0 0 #a82d49;
    }

    80% {
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0), 0 0 0 40px rgba(0, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 20 #a82d49, 0 0 0 40 #a82d49;
    }
}

@keyframes ripplr {
    0% {
        box-shadow: 0 0 0 0 #a82d2d, 0 0 0 0 #a82d2d;
    }

    80% {
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0), 0 0 0 40px rgba(0, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 20 #2d5aa8, 0 0 0 40 #2d4ea8;
    }
}