? by shreyagupta

/* ==UserStyle==
@name           ?
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me

==/UserStyle== */
@-moz-document domain("hackerrank.com") {
@keyframes darken {
    0% {
        background-color: rgba(0, 0, 0, 0);
    }
    100% {
        background-color: rgba(0, 0, 0, 0.8); /* Darker but not completely opaque */
    }
}

/* Shaking Effect */
@keyframes shake {
    0% {
        transform: translate(0px, 0px);
    }
    25% {
        transform: translate(5px, -5px); /* Further reduced shaking intensity */
    }
    50% {
        transform: translate(-5px, 5px); /* Further reduced shaking intensity */
    }
    75% {
        transform: translate(5px, 5px); /* Further reduced shaking intensity */
    }
    100% {
        transform: translate(0px, 0px);
    }
}

/* Flicker Effect */
@keyframes flicker {
    0%,
    100% {
        opacity: 0.9; /* Higher opacity */
    }
    50% {
        opacity: 0.7; /* Reduced flicker intensity */
    }
    70% {
        opacity: 0.8; /* Adjusted flicker intensity */
    }
}

/* Glitch Effect */
@keyframes glitch {
    0% {
        filter: none;
    }
    20% {
        filter: blur(0.5px) contrast(150%) hue-rotate(15deg); /* Reduced blur */
    }
    40% {
        filter: none;
    }
    60% {
        filter: blur(1px) contrast(100%) hue-rotate(5deg); /* Reduced effects */
    }
    80% {
        filter: none;
    }
    100% {
        filter: blur(0.5px) contrast(120%) hue-rotate(10deg); /* Reduced effects */
    }
}

/* Apply Effects One by One */
body,
.main-content {
    animation: 
        darken 8s ease-in-out infinite, /* Slowed darken effect */
        shake 2s ease-in-out infinite, /* Further slowed down shaking effect */
        glitch 6s ease-in-out 8s infinite, /* Glitch starts after shake */
        flicker 5s ease-in-out 12s infinite; /* Flicker effect */
}

/* Flicker effect */
.flicker {
    animation: flicker 5s ease-in-out 28s infinite;
}


}