.welcomeAnim
{
    animation: scaleUp 1.5s ease forwards;
}

@keyframes scaleUp
{
    from{ color: #f9fafb00; transform: scale(0.75); } /* color: transparent */
    to{ color: #f9fafbff; transform: scale(1.0); } /* color: typebase */
}

.weareAnim
{
    transform-origin: bottom;
    transform: rotateX(-90deg);
    animation: rotate 1s linear 0.75s forwards;
}

.rotateAnim
{
    transform-origin: bottom;
    transform: rotateX(-90deg);
    animation: rotate 1s linear forwards;
}

@keyframes rotate
{
    from{ color: #6b7280; transform: rotateX(-90deg); } /* color: typehover */
    to{ color: #f9fafb; transform: rotateX(0deg); } /* color: typebase */
}

.fadeInFromBottomAnim
{
    animation: fadeInFromBottom 0.5s linear forwards;
}

@keyframes fadeInFromBottom
{
    from{ color: #f9fafb00; transform: translateY(3rem); } /* color: transparent */
    to{ color: #f9fafbff; transform: translateY(0rem); } /* color: typebase */
}

.fadeInFromLeftAnim
{
    animation: fadeInFromLeft 0.5s linear forwards;
}

@keyframes fadeInFromLeft
{
    from{ color: #f9fafb00; transform: translateX(-1.5rem) scale(0.95); } /* color: transparent */
    to{ transform: translateX(0rem) scale(1.0); } /* color: to defined color */
}

.fadeInFromRightAnim
{
    animation: fadeInFromRight 0.5s linear forwards;
}

@keyframes fadeInFromRight
{
    from{ color: #f9fafb00; transform: translateX(1.5rem) scale(0.95); } /* color: transparent */
    to{ color: #f9fafbff; transform: translateX(0rem) scale(1.0); } /* color: typebase */
}

.newsletter
{
    background-size: 400%;
    animation: animation 3s ease infinite;
}

@keyframes animation {
    0%,
    100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}