*:before, *:after {
  background: black;
  position: absolute;
  content: ' ';
  
}

.cabinet, header, .controls, .controls-bottom {
  border: 3px solid red;
  background: black;
  position: relative;
}

.cabinet {
  display: block;
  width: 450px;
  height: 900px;
  margin: auto;
  border-top: none;
}

header {
  height: 90px;
  width: 105%;
  left: -3%;
  top: -1px;
  display: block;
  font-family: 'Bungee Outline';
  color: #dd0048;
  text-align: center;
  font-size: 200%;
  text-shadow: 0 0 55px #dd0048;
  transform: perspective(1000px) rotateX(-15deg);
}

main {
  background: #111111;
  padding: 5px;
  transform: perspective(1000px) rotateX(5deg);
}

header:before, header:after {
  height: 92px;    
  width: 10px;
  top: -2.9%;
  content: ' ';
  border: 2px solid red;
}

header:before { left: -3%; }
header:after { right: -3%; }

main:before, main:after {
  top: -5px;
  height: 126%;
  width: 10px;
  content: ' ';
  border: 2px solid red;
  border-top: 0;
  border-bottom: 0;
}

main:before { left: -3%; }
main:after { right: -3%; }

footer {
  transform: perspective(1000px) rotateX(35deg);
  z-index: 1;
}

.controls-container {
  position: relative;
  height: 100px;
  top: -2.4%;
}

.controls {
  height: 100px;
  width: 102.5%;
  background: #111111;
  top: -3%;
  left: -2%;
  transform: perspective(1000px) rotatex(45deg);
}

.joystick {
  position: relative;
  background: black;
  border: 1px solid white;
  border-bottom: none;
  height: 40px;
  width: 5px;
  top: -92%;
  left: 41%;
  transition: transform .2s, left .2s, right .2s;
}

.left {
  transform: rotate(-25deg);
  left: 39%
}

.right {
  transform: rotate(25deg);
  left: 43%
}

.joystick:before {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 1px solid white;
  top: -40%;
  left: -220%;
  z-index: 3;
}

.joystick-base {
  position: absolute;
  top: 43%;
  right: 55%;
  background: black;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 1px solid darkred;
}


.button {
  position: absolute;
  top: 40%;
  right: 35%;
  background: red;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 5px solid darkred;
}

.controls:before, .controls:after {
  top: -1%;
  height: 106%;
  width: 10px;
  border: 2px solid red;
  border-top: 0;
  border-bottom: 0;
}

.controls:before { left: -3%; }
.controls:after { right: -3%; }

.controls-bottom {
  height: 15px;
  width: 112%;
  left: -6.5%;
  top: -60%
}