@keyframes ragemode{
	0%{
		background-color: black;
	}
	50%{
		background-color: darkred;
	}
	100%{
		background-color: black;
	}
}
@keyframes enlarge {
    0%{
        width: 0px;
        height: 0px;
    }
    100%{
        width: 100%;
        height: 100%;
    }
}
@keyframes shrink {
    0%{
        width: 100%;
        height: 100%;
    }
    100%{
        width: 0px;
        height: 0px;
    }
}
@keyframes slidein-right {
    0% {
        transform: translateX(-500%);
        display: none;
    }
    100% {
        transform: translateX(0);
        display: block;
    }
}
@keyframes slideout-right {
    0% {
        transform: translateX(0);
        display: block;
    }
    100% {
        transform: translateX(-500%);
        display: none;
    }
}
@keyframes slidein-left {
    0% {
        transform: translateX(500%);
        display: none;
    }
    100% {
        transform: translateX(0);
        display: block;
    }
}
@keyframes slideout-left {
    0% {
        transform: translateX(0);
        display: block;
    }
    100% {
        transform: translateX(500%);
        display: none;
    }
}
@keyframes slidein-top {
    0% {
        transform: translateY(-500%);
    }
    100% {
        transform: translateY(0);
        display: block;
    }
}
@keyframes slideout-top {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-500%);
        display: none;
    }
}
@keyframes slideout-bottom {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(200%);
        display: none;
    }
}
@keyframes slidein-bottom {
    0% {
        transform: translateY(200%);
        display: none;
    }
    100% {
        transform: translateY(0%);
        display: block;
    }
}
@keyframes fadein {
    0% {
        display: none;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}
@keyframes fadeout {
    0% {
        display: block;
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}
.slideinright{
    animation: 1s slidein-right ease;
    animation-fill-mode: forwards;
}
.slideoutright{
    animation: 1s slideout-right ease;
    animation-fill-mode: forwards;
}
.slideinleft{
    animation: 1s slidein-left ease;
    animation-fill-mode: forwards;
}
.slideoutleft{
    animation: 1s slideout-left ease;
    animation-fill-mode: forwards;
}
.fadein{
    animation: 1s fadein ease;
    animation-fill-mode: forwards;
}
.fadeout{
    animation: 1s fadeout ease;
    animation-fill-mode: forwards;
}
.slideoutTop{
    animation: 2s slideout-top ease;
    animation-fill-mode: forwards;
}
@keyframes color-change {
    0% { color: darkred; }
    25% { color: deeppink; }
    50% { color: gold; }
    75% { color: darkblue; }
    100% {color: darkred;}
}
@keyframes spin {
    0% { transform: rotate(0deg); opacity: 0.1;}
    100% { transform: rotate(360deg); opacity: 1;}
}
.slideintop{
    animation: slidein-top 1s ease;
    animation-fill-mode: forwards;
}
.slideinbottom{
    animation: slidein-bottom 1s ease;
    animation-fill-mode: forwards;
}