body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-image: radial-gradient(rgba(0, 0, 0, 0.815),#000000) ,url("../../public/images/site-Bg.png");
    background-position: center;
    background-size: cover;
}

.board{
    width: 800px;
    background-color: transparent;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

.card {
    perspective: 1000px;
    position: relative;
}

.card.is-switched .card__wrapper {
    animation: rotate 0.5s linear both;
}

.card__wrapper {
    transform-style: preserve-3d;
    animation: rotate-inverse 0.8s linear both;
}
.card__side {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.card__side.card__back-side {
    position: static;
}
.card__character-side {
    transform: rotateY(180deg);
}

.card__character-side{
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 10px;
    margin: 3px;
    padding: 0;
    height: 192px;
    width: 192px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card__character-side img:nth-child(1){
  height: 100%;
  width: 100%;
  position: absolute;
  filter: brightness(70%);
}

.card__character-side img:nth-child(2){
  height: 80%;
  width: 80%;
  position: absolute;
}

.card__back-side{
    background-image: radial-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.726)), url("../../public/images/card-back.jpg") ;
    background-position: center;
    background-size: cover;
    object-fit: contain;
    object-position: center;
    border: 1px solid transparent;
    border-radius: 10px;
    margin: 3px;
    padding: 0;
    width: 192px;
    height: 192px;
    box-sizing: border-box;
}

.blackBg{
  background-image: url("../../public/images/--.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75px ;
  background-color: #000;
}

.disabled{
  pointer-events: none;
}

.winner__overlay{
  user-select: none;
  height: 100vh;
  width: 100vw;
  background-color: #000000e6;
  position: absolute;
  z-index: 10;
  overflow: hidden;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: whitesmoke;
  overflow-y: hidden;
}

.winner__overlay img{
  height: 70%;
}

.hidden{
  display: none;
}

@keyframes rotate {
    0% {
      transform: rotateY(0);
    }
    70% {
      transform: rotateY(200deg);
    }
    100% {
      transform: rotateY(180deg);
    }
  }
  
  @keyframes rotate-inverse {
    0% {
      transform: rotateY(180deg);
    }
    70% {
      transform: rotateY(-20deg);
    }
    100% {
      transform: rotateY(0);
    }
  }

  @media only screen and (max-width:800px){

    .card__character-side{
      box-sizing: border-box;
      border: 1px solid transparent;
      border-radius: 10px;
      margin: 3px;
      padding: 0;
      width: 180px;
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .card__back-side{
      background-image: radial-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.726)), url("../../public/images/card-back.jpg") ;
      background-position: center;
      background-size: cover;
      object-fit: contain;
      object-position: center;
      border: 1px solid transparent;
      border-radius: 10px;
      margin: 3px;
      padding: 0;
      width: 180px;
      height: 180px;
      box-sizing: border-box;
  }

  .card__character-side img:nth-child(2){
      height: 100%;
      width: 100%;
      position: absolute;
  }

}

@media only screen and (max-width:600px){

  .card__character-side{
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 10px;
    margin: 3px;
    padding: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .card__back-side{
    background-image: radial-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.726)), url("../../public/images/card-back.jpg") ;
    background-position: center;
    background-size: cover;
    object-fit: contain;
    object-position: center;
    border: 1px solid transparent;
    border-radius: 10px;
    margin: 3px;
    padding: 0;
    width: 120px;
    height: 120px;
    box-sizing: border-box;
}

.card__character-side img:nth-child(2){
    height: 100%;
    width: 100%;
    position: absolute;
}

}

  @media only screen and (max-width:430px){

  
    .board{
      max-width: 400px;
      max-height: 400px;
      background-color: transparent;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      align-items: center;
      justify-content: center;
  }

    
    .card__character-side{
      box-sizing: border-box;
      border: 1px solid transparent;
      border-radius: 10px;
      margin: 3px;
      padding: 0;
      width: 82px;
      height: 82px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .card__back-side{
      background-image: radial-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.726)), url("../../public/images/card-back.jpg") ;
      background-position: center;
      background-size: cover;
      object-fit: contain;
      object-position: center;
      border: 1px solid transparent;
      border-radius: 10px;
      margin: 3px;
      padding: 0;
      width: 82px;
      height: 82px;
      box-sizing: border-box;
    }

    .card__character-side img:nth-child(2){
      height: 100%;
      width: 100%;
      position: absolute;
    }

  }