body{
    display:flex;
    align-items:center;
    
    justify-content:center;
    
}
  
  .clerk_container{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:200px;
    height:320px;
    cursor: pointer;
    border: 1px solid #ffffff25;
  }
  
  #flickercanvas {
    
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    z-index:4;
    opacity: 1;
    overflow:hidden;
    
}


/*@keyframes grow {
  from { transform: translate(50%, 50%) scale(0); }
  to   { transform: translate(50%, 50%) scale(20); }
}*/

.image-t{
  display:flex;
  align-items: center;
  flex-direction: column;
  position: absolute;
  width:100%;
  
  z-index: 10;
  opacity: 1;
  transition: opacity 0.15s ease-out;   
  

}

.image-c{
  display:flex;
  align-items: center;
  flex-direction: column;
  position: absolute;
  width:100%;
  
  z-index: 11;
  opacity: 0;


 
  
  

}


    
  
p{
  color: #ffffff;
  position: relative;
  display: flex;
  margin: 0;
  margin-top: 8px;

}


 
  
.clerk_container::before {
  content: '';
  position: absolute;
  inset: 0;                          /* covers the whole canvas */
  background: radial-gradient(
    57.49% 50% at 50% 50%,
    #000000 10%,
    
    transparent 100%);
  mix-blend-mode: overlay;           
  pointer-events: none;              
  z-index: 10;                       
}

.clerk_container::after {
  content: '';
  position: absolute;
  inset: 0;                          /* covers the whole canvas */
  background: linear-gradient(#00000000 57%,  #000000 100%);
  mix-blend-mode: overlay;           
  pointer-events: none;              
  z-index: 14;                       
}






.clerk_container:hover .image-c{

  opacity: 1;
  transition: 0.5s ease-in ;
 
  
  
 
  transform: translateY(-10px);

}

.clerk_container:hover .image-t{
  opacity: 0;
  transition: 0.2s ease-out;
}