.range {
    display: block;
    width: 100%;
    position: absolute;
  }
  
  .gun {
    font-size: 80px;
    margin-left: 70%;
    position: relative;
    display: block;
    line-height: 1;
    cursor: pointer
  }
  
  .gun::before {
    opacity: 0;
    content: '💥';
    font-size: 30px;
    display: inline-block;
    position: absolute;
    left: -10%;
    top: 22px;
  }
  
  .gun:active::before {
    opacity: 1;
  }
  
  #trigger1,
  #trigger2 {
    display: none;
  }
  
  .shot {
    position: absolute;
    opacity: 0;
    left: 70%;
    top: 12px;
    font-size: 40px;
  }
  
  .trigger:checked+.range .gun+.shot {
    opacity: 1;
    transform: translateX(-10000%);
    transition: opacity .1s, transform .7s;
  }
  
  .trigger:checked+.range .gun {
    display: none;
  }