/*
  style.css
*/

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

#transaction{
  border-top: 1px solid;
  border-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(204,136,0,1) 15%, rgba(255,204,0,1) 30%, rgba(255,255,255,1) 45%, rgba(255,204,0,1) 60%, rgba(204,136,0,1) 75%, rgba(0,0,0,0) 100%)1;
  background-color: #031112;
  padding-bottom: 20px;
}
#live{
  background: url(/images/casinoBg.jpg) top center #132;
  background-size: cover;
  background-attachment: fixed;
}

#live article{
  z-index: 0;
  border-radius: 10px;
}

#live article img{
  border-radius: 12px 12px 0 0;
}

.group:hover .group-hover\:ring-emerald-400\/70 {
    --tw-ring-color: #34d39900;
}

#live article:hover:before, #live article:hover:after {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    background: linear-gradient(45deg, #0f00,#0f00,#0f00, #0f08, #00ff00, #cf0, #0f0, #0f08, #0f00,#0f00,#0f00);
    background-size: 800%;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: -1;
    animation: steam 20s linear infinite;
    border-radius: 14px;
}

#live article:hover:after {
    filter: blur(20px);
    overflow: hidden;
}

@keyframes steam {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

#slots{
  background: url(/images/slotBg.jpg) top center #132;
  background-size: contain;
}

#slots article img{
  border-radius: 16px 16px 0 0;
}