@import url('https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,500;1,400;1,600&display=swap');
 
 *{
    
    user-select: none;
     font-family:asap, sans-serif;
     font-weight: bolder;
 }
  *{
    background-color: rgba(43, 42, 42, 0.979);
    color: rgb(255, 255, 255);
}
.top, .bottom{
    box-shadow: 1px 1px 7px 5px rgb(22, 22, 22) ;
}
.top{

   width: 98%;
   height:24vh;
   background-color: salmon;
   position: absolute;
   top: 1%;
   right: 1%;
   left: 1%;
   border-radius: 5px;
   
   
}
.bottom{

    width: 98%;
    height:25vh;
    background-color: rgb(114, 250, 232);
    position: absolute;
    bottom: 1%;
    right: 1%;
    left: 1%;
    border-radius: 5px;
   
    
 }
#showncards{
    width: 58%;
   height:41.5vh;
  background-color: aliceblue;
   position: absolute;
   top: 29%;
   right: 21%;
   left: 21%;
   z-index: 100;
   box-shadow: 0px 0px 10px 0px rgb(129, 128, 128) ;
   border-radius: 5px;
 }
 
 #mywin{
    position:absolute;
    top: 38.5%;
    background-color: rgba(48, 47, 47, 0.979);
    color: rgb(252, 255, 252);
    right: 8%;
    border-width: 5px;
   
    cursor: pointer;
 }
 #mypoint{
    position: absolute;
    left: 35%;
    top:150%;
    color: rgb(58, 247, 34);
    background-color: rgb(49, 49, 49);
 }
 #comwin{
    position:absolute;
        top: 38.5%;
        background-color: rgba(48, 47, 47, 0.979);
        color: rgb(252, 255, 252);
        left:7%;
        border-width: 5px;

        cursor: pointer;
 }
 #compoint{
    position: absolute;
    left: 35%;
    top:150%;
   color: rgb(58, 247, 34);
    background-color: rgb(49, 49, 49);
 }
 .bottomins{
    
    width: 20%;
    height: 20%;
    margin-top:20px;
    margin-left: 20px;
  
 }
 #mycards{
   background-color: rgba(51, 51, 51, 0.993);
    width: 58.5%;
    height: 70%;
    border-radius: 2px;
 } 
 #mybet{
    background-color: rgb(52, 52, 52);
    width: 30%;
    height: 70%;
    padding-top:5px;
    
    border-radius: 1px;
 }
 .topins{
    
    width: 20%;
    height: 20%;
    margin-top:20px;
    margin-left: 20px;
  
 }
 
 #comcards{
    background-color: rgba(51, 51, 51, 0.993);
     width: 58.5%;
     height: 71.5%;
     border-radius: 2px;
  } 
  #combet{
     background-color: rgb(52, 52, 52);
     width: 30%;
     height: 70%;
     padding-top:5px;
     border-radius: 1px;
     
  }
  #mybet,#combet {
    box-shadow: 0px 5px 8px 1px  rgb(27, 27, 27) ;
    position: absolute;
    right:4%;
    top:0%;
  }
  #comcards,#mycards{
    box-shadow: 0px 0px 20px 0px  rgb(39, 39, 39) inset ;
  }
  
 .my5cards,.com5cards{  /*we did not use diplay flex or inline because later we have to change the posotion of the cards so absolute position is required*/
  position:absolute;
  height: 68px;
    width: 47px;
    position:absolute;
    z-index: 10;
     top: 24%;
    box-shadow: 5px 5px 5px 0px rgb(15, 15, 15);
    border-color:none;
    cursor: pointer;
    border-width: 1px;
    border-radius: 2px;
    transition: all 0.5s ;

 }
 /*
 .my5cards{
  transform:translate(195%,-270%); 
  transition:transform 2s;
 }
 
 .com5cards{
  transform:translate(195%,270%); 
  transition:transform 2s;
 }
  */
 



   img{
    height: 68px;
    width: 47px;
    border-radius:3px;
   }
     .com5cards{
    top:23.5%;
    
   
     }
  .bordersetcover
{
  border-color: rgb(99, 241, 17);
  border-style:inset;
  border-width: 0.5px;
  border-radius: 2px;
height: 68px;
width: 47px;
  position:absolute;
  top: 24%;
  box-shadow: 5px 5px 5px 0px rgb(15, 15, 15);
  border-color:none;
  cursor: pointer;
  border-width: 1px;
  transition: all 0.4s ease-in;
  
}

   

   
  #my1card,#my1cardc{    /*all are positioned relative to .top div*/
    left:6%;
  }
  #my2card,#my2cardc{
    left:17%;
    box-shadow: 5px 5px 4px 0px rgb(15, 15, 15);
  }
  #my3card,#my3cardc{
    left:28%;
  }
  #my4card,#my4cardc{
    left:39%;
  }
  #my5card,#my5cardc{
    left:50%;
  }

#com1card,#com1cardc{
  left:6%;
}
#com2card,#com2cardc{
  left:17%;
}
#com3card,#com3cardc{
  left:28%;
}
#com4card,#com4cardc{
  left:39%;
}
#com5card,#com5cardc{
  left:50%;

}
#showcom,#showmy{
  background-color: none;
  color: rgb(255, 234, 234);
  border-width:2px;
  border-color: aqua;
  border-style: dashed   ;
  border-radius: 5px;
  position: absolute;
  top:18%;
  left: 2%;
  right: 40%;
  height: 20%;
  width: 30%;
  font-size:1.9vh;
  cursor: pointer;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: bold;
  transition: all 0.2s;
 

}

#covercom,#covermy{
  background-color: none;
  color: rgb(255, 234, 234);
  border-color: aqua;
  border-style: dashed;
  border-width:2px;
  border-radius: 5px;
  position: absolute;
  top:60%;
  left: 2%;
  right: 40%;
  height: 20%;
  width: 30%;
  font-size:1.9vh;
  cursor: pointer;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: bold;
  transition: all 0.2s;


}
#showmy,#covermy{
  border-color: salmon;
}
#showmy:hover,#covermy:hover,#covercom:hover,#showcom:hover{
  border-style:outset;
  font-size: 80%;
}

.howmany{
  position: absolute;
  z-index: 100;
  top: 15%;
  left:9.5%;
  right: 9.5%;
  padding:1%;
  border-radius: 10px;
  text-align: center; 
 
}
.nop{
  display: flex;
  align-items:center;
  justify-content: space-evenly;
  height:100%;
}
.times{
    
    
  padding:1px 5px;
  color: rgb(51, 51, 51);
  border-radius: 50%;
  background-color: rgb(69, 250, 114);
  box-shadow: rgb(24, 23, 23) 2px 1px 1px;
  cursor: pointer;
  transition: 0.1s;
}
.times:hover{
  background-color: rgb(36, 248, 89);
  box-shadow: rgb(185, 181, 181) 0px 0px 4px;
}
.distribution,.distributionO{
  position: absolute;
  user-select: none;
 pointer-events: none;
  border-radius: 2px;
 /* transition: all 1s; - here transition is done when the div of this class appears and we don't want that!*/
  z-index: 1;
  height: 68px;
  
}

.distribution{
  top: -123%;
  left: 62%;
box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.266);
}
.distributionO{
  top: 177%;
  left: 62.5%;
  box-shadow:  0px 0px 5px rgba(0, 0, 0, 0.334);
}
.blur{ 
  width: 100%;
  height: 100%;
  background-color: #aba3a376;
  position: absolute;
  z-index: 99;
  top: 0%;
  left: 0%;
  
}
.pbet{
  position: absolute;
  right: 5%;
  height: 90%;
  width: 60%;
  border-radius: 4px;
  background-color:rgba(47, 47, 47, 0.979); 
  text-align: center;
  box-shadow:  0px 2px 4px rgba(234, 231, 231, 0.334);
  font-size:95%;
  font-family: 'Courier New', Courier, monospace;
}
#place{
  background-color:rgba(47, 47, 47, 0.979); 
  font-size:62%;
  position: absolute;
  top: 38%;
  left:3%;
}
#tchips{
font-size:9px;
width: 20%;
position:absolute;
top: 68%;
left:3%;
background-color:rgba(47, 47, 47, 0.979); 
}

#tchipsvalue{
  background-color:rgba(47, 47, 47, 0.979); 
  position: relative;
  width:50%;
  padding: 0px;
  top: 47%;
  right:-49%;
  height: 30%;
  
}

#tcnovalue{
  position: absolute;
  right: 5%;
  width:38%;
  top:20%;
  height:45%;
  border-radius: 3px;
  border-style:ridge;
  color: rgb(255, 254, 254);
  border-color: rgb(71, 160, 237);
  font-size:12s;/*what's this s - size unit?*/
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}
#chipimg{
  position: absolute;
  right:50%;
  top:6%;
  padding: 0px;
  height: 90%;
  width:32px ;
  background-color:rgba(47, 47, 47, 0.979); 

}
@media screen and (min-width:500px)  {
  #showmy,#covermy,#covercom,#showcom,#place,#tchips{
    font-size: 11px;
  }
  #tcnovalue{
    width:45%;
  }
  #chipimg{
    right:55%

  }

 
}
@media screen and (max-width:500px)  {
#chipimg{
  top:14%;
  height: 70%;
  width:25px ;
  }
  .my5cards,.com5cards{
    top: 30%;
    height: 55px;
   width: 36px;}
  .my5cards>img ,.com5cards>img{
    height: 55px;
   width: 36px;
  }
  .emperor,.slave{
     height: 55px;
   width: 36px;
  }

}








.tick{
  position: absolute;
  background-color: rgba(159, 63, 249, 0.869);
  right:0%;
  display:none;
  transition: all 0.5s;
}
.my5cards:hover> .tick{
 display: block; 
 height: 13px;
  width: 13px;
}
.tick:hover{
  background-color: rgba(159, 63, 249, 0.869);
}

div>.tothemiddlemy{
  position:absolute;
  top:-62%;
  z-index: 1;
  height: 69px;
  padding: 0px;
  box-shadow: 3px 3px 2px 0px rgb(24, 24, 24);
  border-radius: 1px;
  left:22.3%;
  transition: all 0.4s ease-in;
}
.tothemiddlecom{
  position:absolute;
  top:121%;
  z-index: 1;
  padding: 0px;
  height: 69px;
  right:22.3%;
  box-shadow: 3px 3px 2px 0px rgb(24, 24, 24);
  border-radius: 1px;
  transition: all 0.4s  ease-in;
}
.tothemiddlecom,.tothemiddlemy >img{
  border-radius: 0px;
}
.flashytabletransitioncom{
  position:absolute;
  top:161%;
  z-index: 1;
  padding: 0px;
  height: 69px;
  right:42.3%;
  box-shadow: 3px 3px 2px 0px rgb(24, 24, 24);
  border-radius: 1px;
  transition: 1s all cubic-bezier(0, 3.03, 1, -0.16);
  transform:rotate(-30deg);
}
.flashytabletransitionmy{
  position:absolute;
  top:-113%;
  z-index: 1;
  height: 69px;
  padding: 0px;
  box-shadow: 3px 3px 2px 0px rgb(24, 24, 24);
  border-radius: 1px;
  left:45.8%;
  transition: all 1s cubic-bezier(0, 3.03, 1, -0.16);
  transform:rotate(10deg);
}
.gameoverme,.gameovercom{
  width: 100%;
  height: 100%;
  color: rgb(23, 240, 200);
  font-size: 30px;
  text-shadow: 0px 0px 20px rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
 
}
.gameovercom{
  color:salmon ;
}