:root{
    --main-color: #6495ED;
    --light-main-color: #4169E1;
    --text-color: #929285;
    --gradient: linear-gradient(to right, rgba(55, 59, 68,0.7), rgba(66, 134, 244,0.4)); 
    --light-grey-color: #aeaaaabc;
    --black-gradient: linear-gradient(to right, rgba(67, 67, 67, 0.8), rgba(0, 0, 0, 0.7)); 
    --white: #ffffff;
       
}    
    
    
    /* animations */
    @keyframes ripple {
        0% {
            box-shadow: 0 0 0 0 hsl(252, 47%, 45%), 0 0 0 0 hsl(237, 58%, 42%);
        }
    
        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 #2d4aa8, 0 0 0 40 hsl(242, 58%, 42%);
        }
    }
    
    @keyframes pulse{
        0% {
            transform:  scale(1);
        }
        100% {
            transform:  scale(2);
        }
    }
    
    @keyframes bounce{
        0% {
            transform:  translate(0,0);
        }
        25% {
            transform:  translate(0,-5px) rotate(5deg);
        }
        50% {
            transform:  translate(0,-5px);
        }
        75% {
            transform:  translate(0,-5px) rotate(-5deg);
        }
        100% {
            transform:  translate(0,0);
        }
    }
    
    @keyframes spooky{
        0% {
        }
        2% {
            transform:  skew(-6deg, -6deg) rotate(6deg);
        }
        28% {
            transform:  translate(30px, 0) skew(-6deg, -6deg) rotate(6deg);
        }
        29% {
            transform:  rotate(-6deg) skew(6deg, 6deg) translate(30px, 0);
        }
        70% {
            transform:  translate(-20px, 0) rotate(-6deg) skew(6deg, 6deg);
        }
        71% {
            transform:  rotate(6deg) skew(-6deg, -6deg) translate(-20px, 0);
        }
        96% {
            transform:  skew(-6deg, -6deg) rotate(6deg) translate(0,0);
        }
        100% {
        }
    }
    
    @keyframes rotate{
        0% {
            transform:  rotate3d(1,1,1,0deg);
        }
        100% {
            transform:  rotate3d(1,1,1,360deg);
        }
    }