@keyframes Intro_CursorBlink{
    0%{
        opacity: 0%;
        scale: 0.95;
    }
    15%{
        opacity: 100%;
        scale: 1.1;
    }
    30%{
        opacity: 100%;
        scale: 1;
    }
    100%{
        opacity: 0%;
        scale: 0.9;
    }
}
@keyframes Main_ButtonActive{
    40%{
        transform: rotateY(3deg);
    }
    100%{
        transform: translateZ(10px) rotateY(0deg);
    }
}
@keyframes Main_ButtonInactive{
    from{
        transform: translateZ(10px);
    }
    to{
        transform: translateZ(0px)
    }
}
@keyframes Intro_CursorSwipe {
    from{
        left: 0%;
    }
    to{
        left: 100%;
    }
}
@keyframes Intro_TextOpacity {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes Intro_ButtonSqueeze {
    from{
        width: 600px;
    }
    to{
        width: 300px;
    }
}
@keyframes Intro_ContentPopup {
    from{
        height: 0px;
        opacity: 1;
    }
    to{
        opacity: 1;
        top: calc(50% - 75px);
        height: 150px;
    }
}
@keyframes Intro_EmblemElementAppear {
    from{
        transform: var(--transformation);
        opacity: 0;
    }
}
@keyframes Intro_TextAppear {
    from{
        transform: var(--transformation);
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes Intro_SubtitleAppear{
    from{
        bottom: -30px;
    }
    to{
        bottom: 15px;
    }
}
@keyframes Intro_SubtitleSlide{
    to{
        margin-bottom: 25px;
    }
}
@keyframes Intro_Collapse{
    to{
        scale: 0.8;
        opacity: 0;
    }
}
@keyframes Intro_ElementGlow{
    75%{
        box-shadow: 0px 0px 15px rgba(var(--secondary-color), 1);
    }
}
@keyframes Intro_TextElementGlow{
    75%{
        text-shadow: 0px 0px 15px rgba(var(--secondary-color), 1);
    }
}
@keyframes MainPage_Pulsate {
    50%{
        box-shadow: 0px 0px 5px rgb(var(--current-color), 1);
    }
    75%{
        box-shadow: 0px 0px 15px rgb(var(--current-color), 1);
    }
}
@keyframes MainPage_ViewingCardOpened {
    from{
        width: var(--o-width);
        height: var(--o-height);
    }
    to{
        left: calc(50% - calc(var(--t-width) / 2));
        top: calc(50% - var(--t-height-offset));
        height: var(--t-height);
        width: var(--t-width);
    }
}
@keyframes MainPage_ViewingCardOpened_To {
    from{
        left: calc(50% - calc(var(--t-width) / 2));
        top: calc(50% - var(--t-height-offset));
        height: var(--t-height);
        width: var(--t-width);
    }
    to{
        width: var(--o-width);
        height: var(--o-height);
    }
}
@keyframes MainPage_ViewingCardOpenedElement_Front {
    from{
        /*safari is also a pussy. can't probably initalize the rotation direction*/
        transform: rotateY(5deg) var(--default-transform);
    }
    to{
        margin-top: 0px;
        transform: 
            rotateY(180deg)
    }
}
@keyframes MainPage_ViewingCardOpenedElement_Front_To {
    from{
        margin-top: 0px;
        transform: 
            rotateY(180deg)
    }
    to{
        transform: rotateY(5deg) var(--default-transform);
    }
}
@keyframes MainPage_ViewingCardOpenedElement {
    0%{
        transform: rotateY(180deg);
    }
    /*chrome is a little pussy with its pussy as animation renderer*/
    1.69420%{
        opacity: 0.621;
    } 
    1.69421%{
        opacity: 1;
    }
    100%{
        margin-top: 0px;
        transform: 
            rotateY(360deg)
    }
}
@keyframes MainPage_ViewingCardOpenedElement_To {
    0%{
        margin-top: 0px;
        transform: 
            rotateY(360deg)
    }
    /*chrome is a little pussy with its pussy as animation renderer*/
    1.69420%{
        opacity: 621;
    }
    100%{
        transform: rotateY(180deg);
    }
}
@keyframes MainPage_IntroAnimation {
    to{
        transform: none;
    }
}
@keyframes MainPage_CardAppear {
    from{
        transform: 
            translateX(calc(-100% + calc(200% * var(--back))))
            translateZ(-25px) 
            rotateY(calc(90deg - calc(180deg * var(--back))))
            translateX(calc(100% - calc(200% * var(--back))));
        }
    to{
        transform: 
            translateZ(-25px) 
            rotateY(calc(10deg - calc(20deg * var(--back))));
    }
}
@keyframes MainPage_CardDisappear {
    from{
        transform: 
            translateZ(-25px) 
            rotateY(calc(10deg - calc(20deg * var(--back))));
    }
    to{
        transform: 
            translateX(calc(-100% + calc(200% * var(--back))))
            translateZ(-25px) 
            rotateY(calc(90deg - calc(180deg * var(--back))))
            translateX(calc(100% - calc(200% * var(--back))));
    }
}
@keyframes MainPage_LoadingAnimation{
    from{
        background-position-x: -200px;
    }
    to{
        background-position-x: 0px;
    }
}
@keyframes MainPage_VisualizerFake {
    0%{
        height: 0px;
    }
    50%{
        height: 25px;
    }
    100%{
        height: 12px;
    }
}