/*
  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: #060606;
  padding-bottom: 20px;
}
#main{
  background: url(/images/casinoBg.jpg) top center #321;
  background-size: cover;
  background-attachment: fixed;
}

#live article, #slots article, #gameEntry 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, #slots article:hover:before, #slots article:hover:after {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    background: linear-gradient(45deg, #fc00,#fc00,#fc00, #fb08, #fc0, #fe8, #fc0, #fb08, #fc00,#fc00,#fc00);
    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, #slots 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 article img{
  border-radius: 16px 16px 0 0;
}

.rounded-b-xl{
  border-radius: 0 0 0.75rem 0.75rem;
}

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

#jackpot{
  background: url(/images/jackpot_bg.png) center left no-repeat;
  background-size: cover;
}