.util-gray-out
{
    backdrop-filter: grayscale(0.75);
    -webkit-backdrop-filter: grayscale(0.75);
}
.util-blur-out
{
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.util-null-vis
{
    transition: opacity 1s;
    opacity: 0;
}
.util-add-vis
{
    transition: opacity 1s;
    opacity: 1;
}
.util-null-disp
{
    display: none;
}
.util-spayed
{
    pointer-events: none;
}
.util-spayed-dimmed 
{
    pointer-events: none;
    opacity: 0.3;
}
.util-spayed-nulled
{
    pointer-events: none;
    opacity: 0;
}
.util-glimmer
{
    animation-name: glimmer;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 0.55s;
    animation-delay: 0.01s;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
@keyframes glimmer{
    from{
        opacity: 0.25
    } to {
        opacity: 0.95;
    }
}
.util-gilded{
    /* background-color: gold; */
    background-color: goldenrod;
}

/* .isBodyText{
    color: inherit;
    transition: color 0.5s ease;
} */

.util-bright-text
{
    color: wheat;
    transition: color 0.5s ease;
}

.util-shrink-title
{
    transition: 
        transform 0.7s ease-in-out,
        opacity 0.5s ease;
    transform: scale(0);
    opacity: 0;
}

/****************/
.util-fore-1 {
    z-index: 1;
}
.util-fore-2 {
    z-index: 2;
}
.util-fore-3 {
    z-index: 3;
}
.util-send-behind-1 {
    z-index: -1;
}
.util-send-behind-2 {
    z-index: -2;
}
.util-send-behind-3 {
    z-index: -3;
}

/*****************/
.util-gameFade
{
    animation: gameFadeTrans 1s ease-in-out 0.01s 1 normal forwards;
}

@keyframes gameFadeTrans
{
    0%
    {
        opacity: 0;
    }
    50%{
        opacity: 0;
        pointer-events: none;
    }
    100%{
        opacity: 1;
        pointer-events: all;
    }
}