/* suits start */
.clubs, .diamond, .heart, .spade {
    position: relative;
    margin-top: 10px;
  }
  
  .clubs::before, .clubs::after {
      content: "";
      position: absolute;
      top: 9px;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background: #000;
  }
  
  .clubs::before {
      left: 10px;
      box-shadow: -5px -7px #000;
  }
  
  .clubs::after {
    left: 0;
  }
  
  .diamond::after {
      content: "";
      position: absolute;
      left: -2px;
      top: 5px;
      width: 13px;
      height: 13px;
      background: red;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
  }
  
  .heart::before, .heart::after {
    content: "";
    position: absolute;
    top: 0;
    width: 10px;
    height: 16px;
    border-radius: 50px 50px 0 0;
    background: red;
  }
  
  .heart::before {
    left: 10px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }
  
  .heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }
  
  .spade::before, .spade::after {
    content: "";
    position: absolute;
    top: -7px;
    width: 10px;
    height: 16px;
    border-radius: 50px 50px 0 0;
    background: #000;
  }
  
  .spade::before {
    left: 17px;
    transform: rotate(-135deg);
    transform-origin: 0 100%;
  }
  
  .spade::after {
    left: -7px;
    transform: rotate(135deg);
    transform-origin: 100% 100%;
  }
  
  .spade-notch {
    border:1px solid #000;
  }
  /* suits end */
  
  /* card start */
  .card{
      position: absolute;
      border: 1px solid;
      width: 90px;
      height: 125px;
      /* margin: auto; */
      /* margin-left: 2.5px; */
      /* margin-right: 2.5px; */
      margin-top: 5px;
      background-color: #fff;
      display: inline-block;
      color: #000;
      left: 0;
      margin-top: 10px;
      margin-left: 11px;
  }
  
  .red{
      color:red;
  }
  
  .number-top{
      position: relative;
      top: -4px;
      left: 6px;
  }
  
  .suit-top{
      position: relative;
      top: -17px;
      left: 1px;
  }
  
  .number-bottom{
      position: relative;
      top: 62px;
      text-align: left;
      right: 5px;
      transform: rotate(-180deg);
  }
  
  .suit-bottom{
      position: relative;
      top: 28px;
      right: 1px;
      transform: rotate(-180deg);
  }
  
  .suit-centre{
      position: absolute;
  }
  
  .two-one, .three-one{
      left: 36px;
      top: -21px;
  }
  
  .two-two, .three-three{
      left: 36px;
      top: 33px;
  }
  
  .three-two{
      left: 36px;
      top: 5px;
  }
  
  .four-one, .five-one, .six-one, .seven-one, .eight-one, .nine-one, .ten-one{
      left: 21px;
      top:-15px;
  }
  
  .four-two, .five-two, .six-two, .seven-two, .eight-two, .nine-two, .ten-two{
      left: 50px;
      top: -15px;
  }
  
  .four-three, .five-three, .six-five, .seven-five, .eight-five, .nine-five, .ten-five{
      left: 21px;
      top: 29px;
  }
  
  .four-four, .five-four, .six-six, .seven-six, .eight-six, .nine-six, .ten-six{
      left: 50px;
      top: 29px;
  }
  
  .five-five{
      left: 36px;
      top: 8px;
  }
  
  .six-three, .seven-three, .eight-three, .nine-three, .ten-three{
      left: 21px;
      top: 8px;
  }
  
  .six-four, .seven-four, .eight-four, .nine-four, .ten-four{
      left: 50px;
      top: 8px;
  }
  
  .seven-seven, .eight-seven, .nine-seven, .ten-seven{
      left: 36px;
      top: 19px;
  }
  
  .eight-eight, .nine-eight, .ten-eight{
      left: 36px;
      top: -5px;
  }
  
  .nine-nine, .ten-ten{
      left: 36px;
      top: 42px;
  }
  
  .ten-nine{
      left: 36px;
      top: -28px;
  }
  
  .face{
      font-size: 60px;
      margin-left: 23px;
  }
  /* card end */