@import url('https://fonts.googleapis.com/css?family=Prompt&display=swap');


@keyframes ani_zoom {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.13,1.13);
    }
    100% {
        transform: scale(1,1);
    }
}
.bg-secondary {
  background-color: #353535 !important;
}

.btn-dark {
  color: #fff;
  background-color: #a93737;
  border-color: #343a40;
}
.btn-danger {
  color: #fff;
  background-color: #d40f22;
  box-shadow: 0px 5px 1px 1px rgb(125, 9, 9);
}
.btn-success {
  color: #fff;
  background-color: #2ea048;
  box-shadow: 0px 5px 1px 1px rgb(43, 107, 39);
}


.pg-logo
{
  text-align: center;
}
.logo-img
{
  width:100%;
  max-width: 100%;
}

@media (min-width: 576px)
{
  .logo-img
  {
    width:100%;
    max-width: 45%;
  }
}
@media (min-width: 768px)
{
  .logo-img
  {

    width:100%;
    max-width: 45%;
  }
}
.game-item
{
  border: 1px solid #000;
  background-color: #00000087;
  padding:0.2rem;

}
.game-win-rate
{
  margin-right:-0.5rem;
}

@media (min-width: 576px) {
  .game-win-rate
  {
    margin-right:0rem;
  }
}
@media (min-width: 768px)
{
  .game-win-rate
  {
    margin-right:-1.5rem;
  }
}

.game-name
{
  font-size:0.8rem;
}

.game-item[csslv="4"]
{
  animation: ani_zoom 1s infinite ;
}

.game-item[csslv="4"] .game-img
{
  filter: grayscale(0%);
}
.game-item[csslv="4"] .progress-bar
{
  background-color: #28a745;
}

.game-item[csslv="1"] .game-img
{
  filter: grayscale(0%);
}
.game-item[csslv="1"] .progress-bar
{
  background-color: #28a745;
}
.game-item[csslv="2"] .game-img
{
  filter: grayscale(60%);
}
.game-item[csslv="2"] .progress-bar
{
  background-color: #ffc107;
}
.game-item[csslv="3"] .game-img
{
  filter: grayscale(100%);
}
.game-item[csslv="3"] .progress-bar
{
  background-color: #dc3545;
}


.game-img
{
  width:100%;
}

@media (min-width: 1200px)
{
.container {
    max-width: 1200px;
  }
}

.modal
{
  color:#000;
}

.bg-blackx2
{
  background-color: #0000009e;
  color: #fff;
}
.bg-blackx2:focus
{
  background-color: #000;
  color: #fff;
}

.cat-box
{
  background-color: #0000009e;
  color:#fff;
  border-radius: 2px;
  padding:2rem;
  font-size:1.4rem;
  text-align: center;
  cursor: pointer;
}
.cat-box.active
{
  text-decoration: underline;
  font-weight: bold;
  background-color: #000;
}

.btn-music
{
  color:#ffffff;
  box-shadow:none;
  border-radius: 50%;
  padding:.5rem;
  padding-left:.9rem;
  padding-right:.8rem;
}