#container {
  width: 650px;
  height: 275px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#left {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  background-color: #00c3e3;
  width: 100px;
  height: 100%;
  border-radius: 50px 0 0 50px;
}

#right {
  position: absolute;
  left: 100%;
  top: 50%;
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
  background-color: #ff4554;
  width: 100px;
  height: 100%;
  border-radius: 0 50px 50px 0;
}

#body {
	position: absolute;
  left: 100px;
  background-color: black;
  width: 450px;
  height: 100%;
}

#screen {
  background-color: #222222;
  width: 415px;
  height: 240px;
  position: relative;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/bd3df805-5258-4107-bc1b-476046a47a49/dalszjr-0d88ae89-a40c-4aaa-9cb2-e3af88f75dec.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2JkM2RmODA1LTUyNTgtNDEwNy1iYzFiLTQ3NjA0NmE0N2E0OVwvZGFsc3pqci0wZDg4YWU4OS1hNDBjLTRhYWEtOWNiMi1lM2FmODhmNzVkZWMuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.7RnfCjkXajewRuoLJAWxSO56O0Qle62n6klQZ8tETpM);
  background-repeat: no-repeat;
 	background-size: cover;
  background-position: center;
}

.topset {
	position: absolute;
  left: 50%;
  top: 25%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.bottomset {
	position: absolute;
  left: 50%;
  top: 60%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.joystick {
  background-color: black;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.joystick {
  cursor: move;
  background-color: black;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.joystick:active {
  background-color: black;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -40%);
  transform: translate(-50%, -40%);
}

.button-group {
  width: 75px;
  height: 75px;
}

.button {
  cursor: pointer;
  background-color: black;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.button:active {
  background-color: #414548;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.top {
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.left {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.bottom {
  position: absolute;
  left: 50%;
  top: 100%;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
}

.right {
  position: absolute;
  left: 100%;
  top: 50%;
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}