body {
  font-family: -apple-system, sans-serif; }

html, body {
  margin: 0;
  padding: 0; }

body {
  background: #55b104; }

#pete-container {
  position: absolute;
  left: calc(50% - 103px);
  top: calc(50% - 53px); }

#pete {
  background: white;
  border: 3px solid black;
  border-radius: 100%;
  width: 200px;
  height: 100px;
  position: relative;
  transition: .2s ease-in-out all; }

#pete-snout {
  width: 34px;
  height: 34px;
  position: absolute;
  border: 3px solid black;
  background: white;
  right: -6px;
  top: calc(50% - 20px); }

#controls {
  position: absolute;
  width: calc(100% - (140px));
  left: 70px;
  bottom: 214px; }

.d-pad {
  position: absolute;
  width: 218px;
  height: 144px; }

#controls-left {
  left: 0;
  top: 0; }

#controls-right {
  right: 0;
  top: 0; }

.d-pad button {
  position: absolute;
  width: 70px;
  height: 70px;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  text-transform: uppercase;
  border: none;
  border-radius: 5px; }

.move-left {
  left: 0;
  bottom: 0; }

.move-up {
  left: calc(50% - (70px / 2));
  top: 0; }

.move-right {
  right: 0;
  bottom: 0; }

.move-down {
  left: calc(50% - (70px / 2));
  bottom: 0; }