:root {
    --animation-time: 1000ms;
  }
  
  body {
    perspective: 75rem;
    transform-style: preserve-3d;
  }

  #balls {
    display: flex;
    flex-wrap: wrap-reverse;
    margin-top: 50px;
    margin-left: 30px;
    transform-style: preserve-3d;
    perspective: 75rem;
    z-index: 0;
  }
  
  .ball {
    z-index: 0;
    background-color: white;
    border-radius: 50%;
    position: relative;
    width: 75px;
    height: 75px;
  }
  .ball span {
    border-radius: 50%;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
  }
  
  .ball::before {
    position: absolute;
    content: "";
  
    top: 60%;
    left: -10%;
    width: 150%;
    height: 4em;
  
    background: radial-gradient(
      rgba(0, 0, 0, 0.3) 5%,
      rgba(0, 0, 0, 0.2) 30%,
      transparent 60%
    );
  }
  
  .ball span::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.25) 10%,
      rgba(0, 18, 255, 0.5) 100%
    );
  }

  .ball-style-2 .ball span::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.25) 10%,
      rgb(2 2 2 / 50%) 100%
    );
  }
  
  .ball-bg-animation {
    -webkit-animation: bg var(--animation-time) linear forwards;
  
    -moz-animation: bg var(--animation-time) linear forwards;
  
    -ms-animation: bg var(--animation-time) linear forwards;
  
    animation: bg var(--animation-time) linear forwards;
  }

  .ball-style-2 .ball-bg-animation {
    -webkit-animation: bgstyle2 var(--animation-time) linear forwards;
  
    -moz-animation: bgstyle2 var(--animation-time) linear forwards;
  
    -ms-animation: bgstyle2 var(--animation-time) linear forwards;
  
    animation: bgstyle2 var(--animation-time) linear forwards;
  }
  .ball-move-animation {
    -webkit-animation: moveRightToLeft var(--animation-time) linear forwards;
  
    -moz-animation: moveRightToLeft var(--animation-time) linear forwards;
  
    -ms-animation: moveRightToLeft var(--animation-time) linear forwards;
  
    animation: moveRightToLeft var(--animation-time) linear forwards;
  }
  
  .ball-move-animation::before {
    -webkit-animation: shadow var(--animation-time) linear forwards;
  
    -moz-animation: shadow var(--animation-time) linear forwards;
  
    -ms-animation: shadow var(--animation-time) linear forwards;
  
    animation: shadow var(--animation-time) linear forwards;
  }
  
  @keyframes bg {
    0% {
      background-position: 50px 0px;
    }
    10% {
      background-position: 80px -50px;
    }
    20% {
      background-position: 130px -100px;
    }
    30% {
      transform: rotate(0deg);
    }
    100% {
      background-position: 242px -235px;
      transform: rotate(-360deg);
    }
  }

  @keyframes bgstyle2 {
    0% {
      background-position: 50px 0px;
    }
    10% {
      background-position: 80px -50px;
    }
    20% {
      background-position: 130px -100px;
    }
    30% {
      transform: rotate(0deg);
    }
    100% {
      background-position: 207px -277px;
      transform: rotate(-360deg);
    }
  }
  
  @keyframes shadow {
    0% {
      width: 90%;
    }
  
    100% {
      width: 150%;
    }
  }
  
  @keyframes moveRightToLeft {
    0% {
      top: -50px;
      left: 200px;
    }
    10% {
      top: -40px;
      left: 180px;
    }
    20% {
      top: -25px;
      left: 150px;
    }
    30% {
      top: 0px;
      left: 100px;
    }
    100% {
      left: 0%;
    }
  }
  .monitor-divboard-container {
    padding: 2%;
    background-color: #088CD4;
    margin-top: 2em;
    border-radius: 2em;;
  }
  
  .game-info {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  .md-text-info {
    font-size: 2.2em;
  }
  
  .lg-text-info {
    font-size: 2.5em;
  }
  .prize-center {
    margin-left: auto;
    margin-right: auto;
  }
  
  .prize-box {
      /* Border */
      border: 4px solid transparent;
      border-radius: 20px;
      background: 
        linear-gradient(to right, white, white),
        linear-gradient(to right, grey , silver); 
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      margin: 1%;
      white-space:nowrap;
      overflow:hidden;
    }

  .player-prize-info {
    margin: 1%;
  }
  
    .line-and-bingo {
      margin: 1%;
      text-align: center;
      color: gold;
      text-shadow: 2px 2px #000000;
    }