/*CSS for cell : linarsAnimation*/

#coin {
    position: absolute;
    font-size: 35px;
    color: white;
    cursor: pointer;
    transition: transform 0.5s;
}
.linars-div
{
    position: absolute;
    border-radius: 50%;
    background-color: transparent;
    opacity: 0.9;
}
.coin-anim-div
{
    position:absolute;
    color: #feb300;
    font-size:14px;
    text-align:center;
}

#coin.animated 
{
    box-shadow: none;
    animation: vaporize 1.5s;
    animation-fill-mode: forwards
}

.value 
{
  position: absolute;
  color: white;
  font-size: 25px;
  opacity: 0;
  cursor: pointer;
}

 #coin.animated + .value {
   bottom: 10px;
   animation: rise-up-in-smoke 2s;
 }

 @keyframes rise-up-in-smoke {
    from {
        opacity: 0;
        bottom: 0; /* Start at the bottom of the viewport */
    }
    10% {
        opacity: 1;
        font-size: 33px;
        bottom: 10vh; /* Move up 10% of the viewport height */
    }
    to {
        opacity: 0;
        bottom: 100vh; /* Move up to the top of the viewport (100%) */
        font-size: 25px;
    }
}

@keyframes vaporize 
{
    from 
    {
        bottom:5px;
        opacity: 1;
        transform: scale(1);
    }
    10% 
    {
        transform: rotate3d(0, 1, 0, 45deg);
    }
    20% 
    {
        transform: rotate3d(0, 1, 0, 90deg);
    }
    30% 
    {
        transform: rotate3d(0, 1, 0, 135deg);
    }
    40% 
    {
        transform: rotate3d(0, 1, 0, 180deg);
    }
    50% 
    {
        transform: rotate3d(0, 1, 0, 225deg);
    }
    60% 
    {
        transform: rotate3d(0, 1, 0, 270deg);
    }
    70% 
    {
        transform: rotate3d(0, 1, 0, 315deg);
    }
    80% 
    {
        transform: rotate3d(0, 1, 0, 360deg);
    }
    to 
    {
        bottom: 100vh;
        transform: scale(0);
        opacity: 0;
    }
}/*CSS for cell : linarsAnimation*/