@keyframes flip {
  0% { transform: rotateX(0); }

}
  @keyframes spin-heads {
    from { transform: rotateX(0); }
    to   { transform: rotateX(1080deg); }
  }


  @keyframes spin-tails {
    from { transform: rotateX(0); }
    to   { transform: rotateX(1260deg); }
  }

  .container {
    position: absolute;

  }

    @keyframes spin-heads {
      from { transform: rotateX(0); }
      to   { transform: rotateX(1080deg); }
    }

    @keyframes spin-tails {
      from { transform: rotateX(0); }
      to   { transform: rotateX(1260deg); }
    }

    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #050505;
      background: linear-gradient(180deg, #000000, #b47c13 150%);
    }

    h2 {
      color: #b47c13;
    }
    h3 {
      color: #000000;
    }

    .container {
      position: absolute;
      transform: translate(-50%,-50%);
      top: 50%;
      left: 50%;
      perspective: 600px;
      text-align: center;
    }


    .coin {
      display: inline-block;
      transform-style: preserve-3d;
      height: 150px;
      width: 150px;
      position: relative;
      margin: 0 auto;
      cursor: pointer;
      user-select: none;
      outline: none;
    }
  .controls {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }

  .counters {
    display: flex;
    gap: 12px;
    align-items: baseline;
  }

  .counter {
    padding: 0 6px;
    border-radius: 0;
    font-weight: 600;
    box-shadow: none;
  }
  .counter strong {
    color: #b47c13;
  }

  #resetBtn {
    background: #b47c13;
    color: rgb(0, 0, 0);
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
  }

  /* make h3 inside the button look right and remove default margins */
  #resetBtn h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    font-weight: 600;
  }

  #resetBtn:hover { opacity: 0.95; }

    .spin-heads {
      animation: spin-heads 1s cubic-bezier(.22,.9,.32,1) 1 both;
    }
    .spin-tails {
      animation: spin-tails 1s cubic-bezier(.22,.9,.32,1) 1 both;
    }

    .show-tails {
      transform: rotateX(180deg);
    }

    .heads, .tails {
      position: absolute;
      border: 1px solid rgba(0,0,0,0.2);
      border-radius: 50%;
      height: 100%;
      width:100%;
      text-align:center;
      line-height: 150px;
      backface-visibility: hidden;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .heads {
      background-image: url('../img/munt1.jpg');
    }

    .tails {
      transform: rotateX(180deg);
      background-image: url('../img/munt2.jpg');
    }

    .heads, .tails {
      color: transparent;
    }