.flag {
  position:absolute;
  width:50px;
  height:50px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:1;
  animation:2s forwards flyAway
}
[data-animated=no] .flag {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ctext x='0' y='32' font-size='32'%3E%F0%9F%94%92%3C/text%3E%3C/svg%3E")
}
[data-animated=yes] .flag {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ctext x='0' y='32' font-size='32'%3E%F0%9F%94%91%3C/text%3E%3C/svg%3E")
}
.explodeButton {
  margin-top:50px;
  position:relative;
  display:inline-block;
  padding:16px 0;
  text-align:center;
  font:400 16px Poppins,sans-serif;
  cursor:pointer;
  color:#fff;
  background-color:#89b922;
  border:none;
  border-radius:28px;
  transition:background-color 1.2s;
  width:100%
}
@keyframes flyAway {
  0% {
    opacity:1;
    transform:translate(0,0) scale(1) rotate(0)
  }
  100% {
    opacity:0;
    transform:translate(calc(-200px + 400px * var(--random-x)),calc(-200px + 400px * var(--random-y))) scale(.5) rotate(var(--random-rotation))
  }
}