$fire-color: darkred
$fire-hover-color: orangered

body,
html
  height: 100%
  width: 100%
  overflow: hidden
  cursor: default

  &::selection
    cursor: default

.cannon-ball
  position: absolute
  border-radius: 50%
  background-color: black
  width: 100px
  height: 100px
  z-index: 1

.cannon
  background-color: darkslategray
  border-right: 10px orange solid
  border-radius: 50% 0 0 50%
  cursor: default
  display: none
  position: absolute
  width: 300px
  height: 200px
  margin-top: 200px
  margin-bottom: 100px
  z-index: 2

#coords
  background-color: lightblue
  font-size: 12px
  color: black

#fire
  background-color: $fire-color
  color: white
  font-size: 24px
  border-radius: 100%
  width: 100px
  height: 100px
  cursor: pointer
  transition: all 200ms ease-in-out
  &:hover,
  &:active
    background-color: $fire-hover-color
    transform: scale(1.1)
    font-size: 28px
  &:active
    color: white
    background-color: $fire-color
    transform: translateY(5px)


$fire-color: darkred
$fire-hover-color: orangered

body,
html
  height: 100%
  width: 100%
  overflow: hidden
  cursor: default

  &::selection
    cursor: default

.cannon-ball
  position: absolute
  border-radius: 50%
  background-color: black
  width: 100px
  height: 100px
  z-index: 1

.cannon
  background-image: url('../img/cannon.png')
  padding-left: 170px
  width: 512px
  height: 512px
  -webkit-transform-origin: 50% 90%
  z-index: 2

#coords
  background-color: lightblue
  font-size: 12px
  color: black

#fire
  background-color: $fire-color
  color: white
  font-size: 24px
  border-radius: 100%
  width: 100px
  height: 100px
  cursor: pointer
  transition: all 200ms ease-in-out
  &:hover,
  &:active
    background-color: $fire-hover-color
    transform: scale(1.1)
    font-size: 28px
  &:active
    color: white
    background-color: $fire-color
    transform: translateY(5px)


Use cannon.png for div image
Use cannon.png for div image
