.floating-animal-container{
    position: absolute;
    width:100px;
    height: 100px;
    padding: 5px;
}

.floating-animal-svg{
    position: relative;
    /* fill:greenyellow; */
}

.animal-options-container{
    display: flex;
    flex-direction: row;
    gap:15px
}

.animal-container{
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* border:1px solid white; */
}

.animal-option{
    opacity:10%;
    border:2px solid var(--fun-frenzia-color);
    width:70px;
    height: 70px;
    padding: 5px;
}

.appear-gradually{
    animation: appear-gradually 2s ease-in forwards;
}

@keyframes appear-gradually {
    0%{
        opacity: 10%;
    }

    100% {
        opacity: 100%;
    }
}

.animal-flash{
    animation: animal-flash 0.25s ease-in;
}

@keyframes animal-flash {
    0%,100%{
        opacity: 10%;
    }

    50% {
        opacity: 100%;
    }
}

.animal-svg{
    /* border:2px solid rgba(255, 255, 255, 0.297); */
    /* fill:greenyellow; */
}

.animal-rank{
    display: flex;
    align-items: center;
    justify-content: center;
    border:2px solid rgba(255, 255, 255, 0.297);
    padding: 5px;
    width:70px;
    height: 70px;
    font-size: 1.5rem;
}

.animal-rank-hidden{
    opacity:0%;
}