@keyframes backgroundShow {
    0% {
        width: 0%;
        height: 0%;
        background-size: 0px 0px;
    }
    100% {
        width: 100%;
        height: 100%;
        background-size: 50px 50px;
    }
}

.expandVertical {
    animation: expandVertical 1s ease-in-out;
}


@keyframes expandVertical {
    0%
    {
        scale: 1% 1%;
    }
    50% 
    {
        scale: 100% 1%;
    }
    100% 
    {
        scale: 100% 100%;
    }
}

.expandHorizontal {
    animation: expandHorizontal 1s ease-in-out;
}

@keyframes expandHorizontal
{
    0%
    {
        scale: 1% 1%;
    }
    50% 
    {
        scale: 1% 100%;
    }
    100% 
    {
        scale: 100% 100%;
    }
}

@keyframes buttonHover {
    0% {
        background-color: transparent;
        color: var(--themeBlue);
    }
    100% {
        background-color: var(--themeBlue);
        color: transparent;
    }
}