#up-arrow {
  background-image: url(../assets/rotate.svg);
  width: 50px;
  height: 50px;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: white;
  cursor: pointer;
}

#down-arrow {
  background-image: url(../assets/drop.svg);
  width: 44px;
  height: 45px;
  position: absolute;
  background-repeat: no-repeat;
  cursor: pointer;
  background-color: white;
}

#left-arrow {
  background-image: url(../assets/left-arrow.svg);
  width: 45px;
  height: 45px;
  position: absolute;
  background-repeat: no-repeat;
  cursor: pointer;
  background-color: white;
}

#right-arrow {
  background-image: url(../assets/right-arrow.svg);
  width: 45px;
  height: 45px;
  position: absolute;
  background-repeat: no-repeat;
  cursor: pointer;
  background-color: white;
}

.arrowkeys {
	display: block;
}

@media only screen and (min-width: 500px) {

	#canvas {
    width: 60vw;
    right: 20vw;
    left: 20vw;
	}

	#up-arrow {
	  top: 40vh;
	  left: 5vw;
	}

	#down-arrow {
	  top: 55vh;
	  left: 5.3vw;
	}

	#left-arrow {
	  top: 47vh;
	  left: 80.5vw;
	}

	#right-arrow {
	  top: 47vh;
	  left: 90.5vw;
	}

}

@media only screen and (min-width: 800px) {

  #canvas {
    width: 50vw;
    right: 25vw;
    left: 25vw;
  }

  #up-arrow {
	  top: 40vh;
	  left: 11vw;
  }

  #down-arrow {
	  top: 55vh;
	  left: 11.3vw;
  }

  #left-arrow {
	  top: 47vh;
	  left: 80vw;
  }

  #right-arrow {
	  top: 47vh;
	  left: 90vw;
  }

}

@media only screen and (min-width: 1100px) {

  #canvas {
    width: 40vw;
    right: 30vw;
    left: 30vw;
  }

  #up-arrow {
	  top: 40vh;
	  left: 13vw;
  }

  #down-arrow {
	  top: 55vh;
	  left: 13.3vw;
  }

  #left-arrow {
	  top: 47vh;
	  left: 80vw;
  }

  #right-arrow {
	  top: 47vh;
	  left: 90vw;
  }

}

@media only screen and (max-width: 500px) {

  #canvas {
    width: 100vw;
    height: 70vh;
  }

  #up-arrow {
 	  background-size: 40px;
    background-repeat: no-repeat;
	  top: 82vh;
	  left: 13vw;
  }

  #down-arrow {
 	  background-size: 38px;
    background-repeat: no-repeat;
	  top: 91vh;
	  left: 13.5vw;
  }

  #left-arrow {
 	  background-size: 41px;
    background-repeat: no-repeat;
	  top: 85vh;
	  left: 60vw;
  }

  #right-arrow {
 	  background-size: 41px;
    background-repeat: no-repeat;
	  top: 85vh;
	  left: 75vw;
  }

}