diff --git a/DS.css b/DS.css
new file mode 100644
index 0000000..52d60ab
--- /dev/null
+++ b/DS.css
@@ -0,0 +1,301 @@
+body {
+	background-color: darkslateblue;
+}
+
+.button {
+	border:1px solid rgba(50,50,50,1);
+	width:25px;
+	height:25px;
+	border-radius:13px;
+	display:inline-block;
+    background: rgba(70,70,70,1);
+	padding:0px;
+	margin:px;
+	text-align:center;
+	vertical-align:middle;
+	font-weight: bold;	
+	position:absolute;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.25), 0px 1px 1px rgba(0,0,0,0.25), 1px 0px 1px rgba(0,0,0,0.25);
+}
+
+.button_4, .button_5, .button_6, .button_7 {	
+	width:35px;
+	height:20px;
+	border-radius:8px;
+}
+
+.button_8 {
+	width:30px;
+	height:15px;
+	border-radius:4px;
+}
+
+.button_9 {
+	border:0px;
+	background:transparent;
+}
+
+
+.button::after { 
+	position:relative;
+	color: rgba(250,250,250,1);
+	font-size:13px;
+	font-family: Arial;
+}
+
+.button_0::after {
+	display: block;
+	content:"✕";
+	color: rgba(80,120,200,1);	
+	font-size:22px;
+	top:-4px;
+	left: 0px;
+}
+
+.button_1::after {
+	display: block;
+	content:"○";
+	color: rgba(200,120,80,1);
+	font-size:41px;
+	top:-14px;
+	left: 0px;	
+}
+
+.button_2::after {
+	display: block;
+	content:"□"; /*square*/
+	color: rgba(250,80,80,1);
+	font-size:35px;
+	top:-10px;
+	left: 0px;
+}
+
+.button_3::after {
+	display: block;
+	content:"△";/*triangle*/
+	color: rgba(60,200,100,1);
+	font-size:23px;
+	top:-2px;
+	left: 0px;	
+}
+
+.button_4::after {
+	display: block;
+	position: relative;
+	content:"L1";
+	left:0px;
+	top:0px;
+}
+
+.button_5::after {
+	display: block;
+	position: relative;
+	content:"R1";
+	left:0px;
+	top:0px;
+}
+
+.button_6::after {
+	display: block;
+	position: relative;
+	content:"L2";
+	left:0px;
+	top:0px;
+}
+
+.button_7::after {
+	display: block;
+	content:"R2";
+	left:0px;
+	top:0px;
+}
+
+.button_10::after {
+	display: block;
+	content:"L3";
+	position: relative;
+	top:2px;
+	left:0px;
+}
+
+.button_11::after {
+	display: block;
+	position: relative;
+	content:"R3";
+	top:2px;
+	left:0px;
+}
+
+#button_9_border {
+	display: block;
+	position:relative;
+	top:3px;
+}
+
+.button_12, .button_13, .button_14, .button_15  { 
+	border:0px;
+	background:transparent;
+	height:25px;
+	width:25px;
+ }
+
+.button_12 {
+	left:46px;
+	top:14px;
+}
+.button_13 {
+	left:46px;
+	top:63px;
+}
+
+.button_14 {
+	left:21px;
+	top:39px;
+}
+.button_15 {
+	left:70px;
+	top:39px;
+}
+
+.button_16 {
+	display: none;
+	left:140px;
+	top:10px;
+}
+
+.button_3 {
+	left:226px;
+	top:12px;
+}
+.button_0 {
+	left:226px;
+	top:61px;
+}
+
+.button_2 {
+	left:201px;
+	top:37px;
+}
+.button_1 {
+	left:250px;
+	top:37px;
+}
+
+.button_4 {
+	left:2px; 
+	top: 1px;
+}
+.button_6 {
+	left:80px; 
+	top: 1px;
+}
+
+.button_5 {
+	left:260px; 
+	top: 1px;	
+	
+}
+.button_7 {
+	left:182px; 
+	top: 1px;	
+}
+
+.button_8 {
+	left:111px;
+	top:42px;	
+	transform: none;
+}
+
+.button_9 {
+	left:161px;
+	top:37px;	
+	transform: none;
+	background-color: transparent;
+
+}
+
+.button_10 {
+	position:relative;
+	border:1px solid rgba(250,200,150,1);
+}
+
+.button_11 {
+	position:relative;
+	border:1px solid rgba(250,200,150,1);
+}
+
+
+#buttons {
+	position:absolute;
+	background-image: none;
+}
+
+#style_select {
+	position:absolute;
+	left: 410px;
+}
+
+
+.axisbox {
+   border-radius:20px;	
+   border:1px solid red;
+   width:40px;
+   height:40px;
+   position:absolute;
+   top: 65px;
+   border:1px solid rgba(50,50,50,1);
+   background: rgba(70,70,70,0.5);
+   display:block;
+}
+	
+.axisbox_0 {	
+	left:105px;
+	display:block;
+}
+
+.axisbox_1 {
+	left:155px;
+	display:block;
+}
+
+.axis{
+    margin-left:-5px;
+	margin-top:-5px;
+	border-radius:5px;	
+	border:1px solid black;
+	width:10px;
+	height:10px;
+	display:block;
+	position:relative;
+}
+
+
+
+#controller_SNES {
+	display: none;
+	visibility: hidden;
+	position: absolute;
+	width:400px;
+	height:400px;
+}
+
+#controller_DS {
+	display: none;
+	position: absolute;
+	width:400px;
+	height:400px;
+}
+
+#controller_NES {
+	display: none;
+	position: absolute;
+	width:400px;
+	height:400px;
+}
+
+#controller_XBOX {
+	display: none;
+	position: absolute;
+	width:400px;
+	height:400px;
+}
\ No newline at end of file
diff --git a/NES.css b/NES.css
new file mode 100644
index 0000000..1f76e6f
--- /dev/null
+++ b/NES.css
@@ -0,0 +1,265 @@
+body {
+	background-color: brown;
+}
+
+.button {
+	border:1px solid rgba(50,50,50,1);
+	width:31px;
+	height:31px;
+	border-radius:20px;
+	display:inline-block;
+    background: rgba(70,70,70,1);
+	padding:0px;
+	margin:px;
+	text-align:center;
+	vertical-align:middle;
+	font-weight: bold;	
+	position:absolute;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.25), 0px 1px 1px rgba(0,0,0,0.25), 1px 0px 1px rgba(0,0,0,0.25);
+}
+
+.button_4, .button_5, .button_6, .button_7 {	
+	width:35px;
+	height:20px;
+	border-radius:8px;
+}
+
+.button_8 {
+	width:30px;
+	height:15px;
+	border-radius:4px;
+}
+
+
+
+.button::after { 
+	position:relative;
+	color: rgba(250,250,250,1);
+	font-size:13px;
+	font-family: Arial;
+}
+
+.button_0::after {
+	display: none;
+	content:"A";
+	color: rgba(250,250,250,0.5);	
+	font-size:10px;
+	top:34px;
+	left:16px;
+}
+
+.button_1::after {
+	display: none;
+	content:"○";
+	color: rgba(220,120,80,1);
+	font-size:35px;
+	top:-14px;		
+}
+
+.button_2::after {
+	display: none;
+	content:"B"; /*square*/
+	color: rgba(250,250,250,0.5);
+	font-size:10px;
+	top:34px;
+	left:16px;
+}
+
+.button_3::after {
+	display: none;
+	content:"△";/*triangle*/
+	color: rgba(60,200,100,1);
+	font-size:23px;
+	top:-2px;	
+}
+
+.button_4::after {
+	display: none;
+	content:"L1";
+}
+
+.button_5::after {
+	display: none;
+	content:"R1";
+}
+
+.button_6::after {
+	display: none;
+	content:"L2";
+}
+
+.button_7::after {
+	display: none;
+	content:"R2";
+}
+
+.button_10::after {
+	display: none;
+	content:"L3";
+	top:2px;
+}
+
+.button_11::after {
+	display: none;
+	content:"R3";
+	top:2px;
+}
+
+
+.button_12, .button_13, .button_14, .button_15  { 
+	border:0px;
+	background:transparent;
+	height:25px;
+	width:25px;
+ }
+
+.button_12 {
+	left:57px;
+	top:180px;
+}
+.button_13 {
+	left:48px;
+	top:222px;
+}
+
+.button_14 {
+	left:30px;
+	top:198px;
+}
+.button_15 {
+	left:74px;
+	top:206px;
+}
+
+.button_16 {
+	display: none;
+	left:0px;
+	top:0px;
+}
+
+.button_3 {
+	display: none;
+	left:264px;
+	top:218px;
+}
+.button_0 {
+	display: block;
+	left:316px;
+	top:218px;
+}
+
+.button_2 {
+	display: block;
+	left:264px;
+	top:218px;
+}
+
+.button_1 {
+	display: none;
+	left:226px;
+	top:12px;
+}
+
+.button_4 {
+	display: none;
+	left:2px; 
+	top: 1px;
+}
+.button_6 {
+	display: none;
+	left:80px; 
+	top: 1px;
+}
+
+.button_5 {
+	display: none;
+	left:260px; 
+	top: 1px;	
+	
+}
+.button_7 {
+	display: none;
+	left:182px; 
+	top: 1px;	
+}
+
+.button_8 {
+	width:30px;
+	height:10px;
+	border-radius:4px;
+	left:140px;
+	top:230px;	
+	background-color: rgba(30,30,30,1);
+	transform: none;
+}
+
+.button_9 {
+	width:30px;
+	height:10px;
+	border-radius:4px;
+	left:194px;
+	top:230px;	
+	background-color: rgba(300,30,30,1);
+	transform: none;
+}
+
+.button_10 {
+	display: none;
+	position:relative;
+	border:1px solid rgba(250,200,150,1);
+}
+
+.button_11 {
+	display: none;
+	position:relative;
+	border:1px solid rgba(250,200,150,1);
+}
+
+
+#buttons {
+	position:absolute;
+	width: 400px	;
+	height: 400px	;
+	background-image: none;
+}
+
+#style_select {
+	position:absolute;
+	left: 410px;
+}
+
+.axisbox {
+	display:none;
+ }
+	 
+ .axisbox_0 {	
+	 display:none;	 
+ }
+ 
+ .axisbox_1 {
+	 display:none;
+ }
+ 
+ .axis{
+	 display:none;
+ }
+
+
+#controller_SNES {
+	display: none;
+}
+
+#controller_DS {
+	display: none;
+}
+
+#controller_NES {
+	display: block;
+	position: absolute;
+	width:400px;
+	height:400px;
+}
+
+#controller_XBOX {
+	display: none;
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 2c67ac6..7ac72a2 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,25 @@
 # JS-DualShock3-Monitor
-Pure javascript-driven gamepad monitor (styled for Dualshock 3)
 
-![screenshot](Screenshot_2020-01-19%20Screenshot.png)
+Pure javascript-driven gamepad monitor (styled for Dualshock 3, NES, SNES, XBox 360)
+
+Built to be used in OBS an an overlay.
+That means the controller will be semi-transparent.
+Compatible with any XInput device (xbox controllers, Mayflash Magic adapters in XInput mode, etc)
+
+## How to use
+
+- Add a browser source
+- Set page size to 500x400
+- Tick the "Local File" box
+- Click "Browse" and select the index.html from this repo
+- Tick the "Shutdown source when not visible" box
+- Tick the "Refresh browser when scene becomes active" box
+- Make suse the browser source has `body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }` in the `Custom CSS` field
+
+### To change styles:
+- Right click your browser source
+- Pick the "Ineteract" options
+- Click on dropdown list utill it's open. Note that you won't see any actual items, instead there will be thick border inside the list ![looks like this](dropdown.png)
+- Use up/down arrows to chose the desired style
+
+![screenshot](Screenshot.png)
diff --git a/SNES.css b/SNES.css
new file mode 100644
index 0000000..a87af74
--- /dev/null
+++ b/SNES.css
@@ -0,0 +1,235 @@
+body {
+ 	background-color: darkcyan;
+}
+
+.button {
+	border:1px solid rgba(0,0,0,1);
+	width:26px;
+	height:26px;
+	border-radius:13px;
+	display:inline-block;
+    background: rgba(70,70,70,1);
+	padding:0px;
+	margin:px;
+	text-align:center;
+	vertical-align:middle;
+	font-weight: bold;	
+	position:absolute;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.25), 0px 1px 1px rgba(0,0,0,0.25), 1px 0px 1px rgba(0,0,0,0.25);
+}
+
+.button_4, .button_5, .button_6, .button_7 {	
+	width:55px;
+	height:5px;
+	border-radius: 8px 8px 0px 0px;
+}
+
+
+
+
+.button::after { 
+	position:relative;
+	color: rgba(250,250,250,1);
+	font-size:13px;
+	font-family: Arial;
+}
+
+.button_0::after {
+	display: block;
+	content:"B";
+	color: rgb(188, 200, 80);	
+	font-size:22px;
+	top:0px;
+	left:0px;
+}
+
+.button_1::after {
+	display: block;
+	content:"A";
+	color: rgba(250,80,80,1);
+	font-size:22px;
+	top:0px;
+	left:0px;
+}
+
+.button_2::after {
+	display: block;
+	content:"Y"; /*square*/
+	color: rgba(60,200,100,1);
+	font-size:22px;
+	top:0px;
+	left:0px;
+}
+
+.button_3::after {
+	display: block;
+	content:"X";/*triangle*/
+	color: rgba(80,120,200,1);	
+	font-size:22px;
+	top:0px;
+	left:0px;
+}
+
+.button_4::after {
+	 content:""; 
+}
+
+.button_5::after {
+	 content:""; 
+}
+
+
+#button_9_border {
+	position:relative;
+	top:3px;
+}
+
+.button_12, .button_13, .button_14, .button_15  { 
+	border:0px;
+	background:transparent;
+	height:25px;
+	width:25px;
+ }
+
+.button_12 {
+	left:75px;
+	top:170px;
+}
+.button_13 {
+	left:73px;
+	top:207px;
+}
+
+.button_14 {
+	left:55px;
+	top:188px;
+}
+.button_15 {
+	left:94px;
+	top:190px;
+}
+
+.button_16 {
+	display: none;
+	left:0px;
+	top:0px;
+}
+
+.button_3 {
+	display: block;
+	left:296px;
+	top:156px;
+}
+.button_0 {
+	display: block;
+	left:296px;
+	top:214px;
+}
+
+.button_2 {
+	display: block;
+	left:259px;
+	top:185px;
+}
+.button_1 {
+	display: block;
+	left:332px;
+	top:185px;
+}
+
+.button_4 {
+	left:83px; 
+	top: 113px;
+}
+
+.button_5 {
+	left:266px; 
+	top: 113px;	
+	
+}
+
+.button_6 {
+	display: none;	
+}
+
+.button_7 {
+	display: none;	
+}
+
+.button_8 {
+	width:30px;
+	height:8px;
+	border-radius:4px;
+	left:147px;
+	top:206px;	
+	transform: rotate(-37deg);
+}
+
+.button_9 {
+	width:30px;
+	height:8px;
+	border-radius:4px;
+	left:189px;
+	top:206px;	
+	transform: rotate(-37deg);
+}
+
+
+
+#buttons {
+	position:absolute;
+	width: 400px	;
+	height: 400px	;
+	background-image: none;
+}
+
+#style_select {
+	position:absolute;
+	left: 410px;
+}
+
+.axisbox {
+	display:none;
+}
+	 
+ .axisbox_0 {	
+	 display:none;
+}
+ 
+ .axisbox_1 {
+	 position:absolute;
+ }
+ 
+ .axis{
+	 display:none;
+ }
+
+
+#controller_SNES {
+	display: block;
+	visibility: visible;
+	position: absolute;
+	width:400px;
+	height:400px;
+}
+
+#controller_DS {
+	display: none;
+	position: absolute;
+	width:400px;
+	height:400px;
+}
+
+#controller_NES {
+	display: none;
+	position: absolute;
+	width:400px;
+	height:400px;
+}
+
+#controller_XBOX {
+	display: none;
+	position: absolute;
+	width:400px;
+	height:400px;
+}
\ No newline at end of file
diff --git a/Screenshot.png b/Screenshot.png
new file mode 100644
index 0000000..caf7e2e
Binary files /dev/null and b/Screenshot.png differ
diff --git a/Screenshot_2020-01-19 Screenshot.png b/Screenshot_2020-01-19 Screenshot.png
deleted file mode 100644
index 0bb5365..0000000
Binary files a/Screenshot_2020-01-19 Screenshot.png and /dev/null differ
diff --git a/Xbox.css b/Xbox.css
new file mode 100644
index 0000000..a07fc04
--- /dev/null
+++ b/Xbox.css
@@ -0,0 +1,303 @@
+body {
+	background-color: darkgreen;
+}
+
+.button {
+	width:25px;
+	height:25px;
+
+	display:inline-block;
+    border: none;
+	padding:0px;
+	margin:px;
+	text-align:center;
+	vertical-align:middle;
+	font-weight: bold;	
+	position:absolute;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.25), 0px 1px 1px rgba(0,0,0,0.25), 1px 0px 1px rgba(0,0,0,0.25);
+	font-family: Arial;	
+	
+}
+
+.button_4, .button_5, .button_6, .button_7 {	
+	width:35px;
+	height:20px;
+	border-radius:8px;
+}
+
+.button_8 {
+	width:30px;
+	height:15px;
+	border-radius:4px;
+	display:block;
+}
+
+.button_9 {
+	border:0px;
+	background:transparent;
+	display:block;
+}
+
+
+.button::after { 
+	display: block;
+	position:relative;
+	color: rgba(250,250,250,0.7);
+	font-size:12px;
+}
+
+.button_0::after {
+	left: 305px;
+	top: 217px;
+	position: absolute;
+	content:"A";
+	color: rgba(80,120,200,0.7);	
+	font-size:12px;
+	
+	display: block;
+}
+
+.button_1::after {
+	left: 336px;
+	top: 192px;
+	position: absolute;
+	content:"B";
+	color: rgba(200,120,80,0.7);	
+	
+	display: block;
+}
+
+.button_2::after {
+	left: 277px;
+	top: 194px;
+	position: absolute;
+	content:"X"; /*square*/
+	color: rgba(250,80,80,0.7);
+	display: block;
+}
+
+.button_3::after {
+	left: 308px;
+	top: 168px;
+	position: absolute;
+	content:"Y";/*triangle*/
+	color: rgba(60,200,100,0.7);
+	display:block;
+}
+
+.button_4::after {
+	left: 75px;
+	top: 120px;
+	position: relative;
+	content:"LB";
+	display:block;
+}
+
+.button_5::after {
+	left: 289px;
+	top: 120px;
+	position: relative;
+	content:"RB";
+	display:block;
+}
+
+.button_6::after {
+	left: 81px;
+	top: 92px;
+	position: relative;
+	content:"LT";
+	display:block;
+}
+
+.button_7::after {
+	left: 285px;
+	top: 92px;
+	position: relative;
+	content:"RT";
+	display:block;
+}
+
+.button_10::after {
+	content:"L3";	
+	top:204px;
+	left:76px;
+	display:block;
+}
+
+.button_11::after {
+	content:"R3";
+	top:260px;
+	left:238px;
+	display:block;
+}
+
+#button_9_border {
+	position:relative;
+	top:3px;
+	display:none;
+}
+
+.button_12, .button_13, .button_14, .button_15  { 
+	border:0px;
+	background:transparent;
+	height:25px;
+	width:25px;
+ }
+
+.button_16 {
+	display: block;
+	left:0px;
+	top:0px;
+}
+.button_12 {
+	left:0px;
+	top:0px;
+}
+.button_13 {
+	left:0px;
+	top:0px;
+}
+
+.button_14 {
+	left:0px;
+	top:0px;
+}
+.button_15 {
+	left:0px;
+	top:0px;
+}
+
+.button_3 {
+	left:0px;
+	top:0px;
+}
+.button_0 {
+	left:0px;
+	top:0px;
+}
+
+.button_2 {
+	left:0px;
+	top:0px;
+}
+.button_1 {
+	left:0px;
+	top:0px;
+}
+
+.button_4 {
+	left:0px;
+	top:0px;
+}
+.button_6 {
+	left:0px;
+	top:0px;
+}
+
+.button_5 {
+	left:0px;
+	top:0px;
+	
+}
+.button_7 {
+	left:0px;
+	top:0px;
+}
+
+.button_8 {
+	left:0px;
+	top:0px;
+	border: none;
+	transform: none;
+}
+
+.button_9 {
+	left:0px;
+	top:0px;
+	border: none;
+	transform: none;
+}
+
+.button_10 {
+	position:absolute;
+	top:0px;
+	left:0px;
+	border: none;
+	transform: none;
+}
+
+.button_11 {
+	position:absolute;
+	top:0px;
+	left:0px;	
+	border: none;
+	transform: none;
+}
+
+
+#buttons {
+	position:absolute;
+	width: 400px	;
+	height: 400px	;
+	background-image: none;
+}
+
+#style_select {
+	position:absolute;
+	left: 410px;
+}
+
+.axisbox {   
+   display:none;
+}
+	
+.axisbox_0 {	
+	position:absolute;
+	top:0px;
+	left:0px;
+	border: none;
+	display:block;
+	background: none;
+}
+
+.axisbox_1 {
+	position:absolute;
+	top:0px;
+	left:0px;
+	border: none;
+	display:block;
+	background: none;
+}
+
+.axis{
+	display:none;
+}
+
+
+#controller_SNES {
+	display: none;
+	position: absolute;
+	width:400px;
+	height:400px;
+}
+
+#controller_DS {
+	display: none;
+	position: absolute;
+	width:400px;
+	height:400px;
+}
+
+#controller_NES {
+	display: none;
+	position: absolute;
+	width:400px;
+	height:400px;
+}
+
+#controller_XBOX {
+	display: block;
+	position: absolute;
+	width:400px;
+	height:400px;
+}
diff --git a/dropdown.png b/dropdown.png
new file mode 100644
index 0000000..8845094
Binary files /dev/null and b/dropdown.png differ
diff --git a/gpcon.js b/gpcon.js
index d20ec49..55fc9f8 100644
--- a/gpcon.js
+++ b/gpcon.js
@@ -20,7 +20,49 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
  */
- 
+
+let current_style = localStorage.getItem("gpcon_style") || "DS"
+
+// called upon page loading
+function prep() {
+
+	// gets style select element that controls the stylesheets
+	let style_select = document.getElementById("style_select")
+	style_select.addEventListener("change", style_change)
+	
+	// this changes style by deleting an old <link> element and creating a new one
+	function style_change(event) {		
+		let head = document.getElementsByTagName( "head" )[0]
+		
+		for (let child of head.children) {
+			if (child.tagName == "LINK") {
+				delete child
+			}
+		}
+
+		let link = document.createElement('link')
+		link.href = style_select.value + ".css"
+		link.rel = "stylesheet"
+		head.appendChild(link)
+		current_style = style_select.value
+		localStorage.setItem("gpcon_style",style_select.value) // remember to save selected style
+		console.log(link)
+	}
+
+	// this loads last selected style or deaults to DS one	
+	for (let idx in style_select.options) {
+		if (style_select[idx].value == current_style) {
+			style_select.selectedIndex = idx
+			style_change()
+			break
+		}
+	}
+	
+}
+
+
+
+
 let buttons = []; // remembers if button was added
 let axes = [];    // remembers if axis was added (separate X and Y values)
 let axes_c = [];  // remembers if axis box was added (combines X and Y of one stick)
@@ -52,7 +94,7 @@ function onFrame() {                             // gets repeatedly executed
 		let buttdiv = document.getElementById('buttons')  // so, we get our container element (see index.html) and add 'buttons' to it
 		for (j = 0; j < gp.buttons.length; j++) {         // we cycle through all detected buttons and add those to a 'buttons' array
             if (typeof buttons[j] === "undefined") {     // if jth button isn't added yet, we will do just that
-			    if (j>15) {continue;}                    // just be sure to skip weird non-existing buttons on your gamepad (PS3 Dualshock here)
+			    if (j>16) {continue;}                    // just be sure to skip weird non-existing buttons on your gamepad (PS3 Dualshock here)
 				if (j==l_stick || j==r_stick) continue;  // we also need to skip sticks to add those later (if your gamepad doesn't have 'pressable' sticks - comment this line)
 
                 let buttEle = document.createElement('span'); // create a new element (a button)
@@ -67,44 +109,368 @@ function onFrame() {                             // gets repeatedly executed
 				let buttEle = document.getElementById('button_'+j); // we get correnponding element in our HTML document
 				let val = gp.buttons[j].value;                      // val keeps the value browser got from jth button (can be 0, 1 or smth in-between for analogue buttons)
 			    if (gp.buttons[j].pressed) { // if current button is pressed we can alter it's style
-					if (j==9) { // the 'start' button (as well as any other non-round-shaped button) has to have it's innerHTML rewritten
-						buttEle.innerHTML = '<svg id="button_9_border"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="0,0 30,9 1,18 1,0"></polygon></svg>';
+					if (j==8) {
+						if (current_style == "DS") {
+							buttEle.style.background='rgba(255,255,255,0.5)';
+							buttEle.innerHTML = ""
+						} else if (current_style == "SNES") {
+							buttEle.style.background='rgba(255,255,255,0.5)';
+							buttEle.innerHTML = ""
+						} else if (current_style == "NES") {
+							buttEle.style.background='rgba(255,255,255,0.5)';
+							buttEle.innerHTML = ""
+						} else if (current_style == "XBOX") {
+							buttEle.style.background='rgba(255,255,255,0)';
+							buttEle.innerHTML = '<svg id="button_8" select style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 160 194 C 148 194 146 206 160 208 C 170 208 174 196 160 194 Z M 162 198 L 154 202 L 162 206 L 162 198 Z"></path></svg>';
+						}
+					} else if (j==9) { // the 'start' button (as well as any other non-round-shaped button) has to have it's innerHTML rewritten
+						if (current_style == "DS") {
+							buttEle.innerHTML = '<svg id="button_9_border"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="0,0 30,9 1,18 1,0"></polygon></svg>';
+						} else if (current_style == "SNES") {
+							buttEle.style.background='rgba(255,255,255,0.5)';
+							buttEle.innerHTML = ""
+						} else if (current_style == "NES") {
+							buttEle.style.background='rgba(255,255,255,0.5)';
+							buttEle.innerHTML = ""
+						} else if (current_style == "XBOX") {
+							buttEle.style.background='rgba(255,255,255,0)';
+							buttEle.innerHTML = '<svg id="button_9" start style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 240 194 C 228 194 228 208 240 208 C 250 208 256 194 240 194 Z M 238 198 L 238 206 L 246 202 Z"></path></svg>';
+						}
 					} else { // sure, this could've been coded better, but what the heck, it works
 						if (j<=11) { // buttons with id lower that 12 are usually the round-shaped ones; on-stick buttons go here as well					    
 							buttEle.style.background='linear-gradient(to top, rgba(255,255,255,0.5) '+val*100+'%, rgba(170,70,70,0.5) '+val*100+'%)';// gradient really helps to visualize partial presses
-						}					  
-						if (j>=12) {// up
-							buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
+							buttEle.innerHTML = ""
+							if (j==0) {
+								if (current_style == "XBOX") {							
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg id="button_0" cross style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 308 216 C 294 216 294 236 310 234 C 322 234 328 214 308 216 Z "></path></svg>'
+								}
+							}
+							if (j==1) {
+								if (current_style == "XBOX") {							
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg id="button_1" circle style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 338 190 C 324 196 328 212 344 208 C 354 204 358 186 338 190 Z "></path></svg>'
+								}
+							}
+							if (j==2) {
+								if (current_style == "XBOX") {							
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg id="button_2" square style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 280 193 C 262 196 270 212 282 210 C 300 208 292.5 190.9 280 193 Z"></path></svg>'
+								}
+							}
+							if (j==3) {
+								if (current_style == "XBOX") {							
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg id="button_3" triangle style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 308 166 C 296 172 300 192 316 186 C 330 182 326 160 308 166 Z"></path></svg>'
+								}
+							}
+							if (j==4) {//L1
+								if (current_style == "DS") {
+									buttEle.innerHTML = '';
+								} else if (current_style == "XBOX") {
+
+									buttEle.style.background='rgba(255,25,55,0)';
+									//buttEle.innerHTML = '<svg L1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><linearGradient id="GradientBL1" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="rgba(250,250,250,0.5)"/><stop offset="'+val+'" stop-color="rgba(170,70,70,0.5)"/></linearGradient><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="url(#GradientBL1)" d="M 120 138 L 122 124 C 120 122 116 124 114 118 C 92 118 82 118 58 130 L 52 138 L 52 148 C 72 142 86 132 120 138 Z "></path></svg>'
+									buttEle.innerHTML = '<svg id="button_4" L1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 120 138 L 122 124 C 120 122 116 124 114 118 C 92 118 82 118 58 130 L 52 138 L 52 148 C 72 142 86 132 120 138 Z "></path></svg>'
+								}
+							}
+							if (j==6) {//L2
+								if (current_style == "DS") {
+									buttEle.innerHTML = '';
+								} else if (current_style == "XBOX") {
+
+									buttEle.style.background='rgba(255,25,55,0)';
+									//buttEle.innerHTML = '<svg L2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 86 120 C 94 118 102 118 110 118 L 110 92 C 112 90 96 82 88 92 L 86 120 Z"></path></svg>'
+									buttEle.innerHTML = '<svg id="button_6" L2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><linearGradient id="GradientBL2" x1="0" x2="0" y1="0" y2="1"><stop offset="'+val+'" stop-color="rgba(250,250,250,0.25)"/><stop offset="'+val+'" stop-color="rgba(170,70,70,0.25)"/></linearGradient><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="url(#GradientBL2)" d="M 86 118 C 94 118 102 118 110 118 L 110 92 C 112 90 96 82 88 92 L 86 120 Z"></path></svg>'
+								}
+							}
+							if (j==5) {//R1
+								if (current_style == "DS") {
+									buttEle.innerHTML = '';
+								} else if (current_style == "XBOX") {
+
+									buttEle.style.background='rgba(255,25,55,0)';
+									//buttEle.innerHTML = '<svg L1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><linearGradient id="GradientBL1" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="rgba(250,250,250,0.5)"/><stop offset="'+val+'" stop-color="rgba(170,70,70,0.5)"/></linearGradient><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="url(#GradientBL1)" d="M 120 138 L 122 124 C 120 122 116 124 114 118 C 92 118 82 118 58 130 L 52 138 L 52 148 C 72 142 86 132 120 138 Z "></path></svg>'
+									buttEle.innerHTML = '<svg id="button_5" R1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 278 124 C 282 124 282 118 286 118 C 308 116 322 120 342 132 L 346 138 L 346 148 C 326 140 302 130 278 138 L 278 124 Z "></path></svg>'
+								}
+							}
+							if (j==7) {//R2
+								if (current_style == "DS") {
+									buttEle.innerHTML = '';
+								} else if (current_style == "XBOX") {
+
+									buttEle.style.background='rgba(255,25,55,0)';
+									//buttEle.innerHTML = '<svg L2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 86 120 C 94 118 102 118 110 118 L 110 92 C 112 90 96 82 88 92 L 86 120 Z"></path></svg>'
+									buttEle.innerHTML = '<svg id="button_7" R2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><linearGradient id="GradientBR2" x1="0" x2="0" y1="0" y2="1"><stop offset="'+val+'" stop-color="rgba(250,250,250,0.25)"/><stop offset="'+val+'" stop-color="rgba(170,70,70,0.25)"/></linearGradient><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="url(#GradientBR2)" d="M 290 118 C 298 116 308 118 316 120 L 312 92 C 304 82 288 90 290 92 L 290 118 Z"></path></svg>'
+								}
+							}
+							if (j==10) {//L3
+								if (current_style == "DS") {
+									buttEle.innerHTML = '';
+								} else if (current_style == "XBOX") {
+
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg id="button_10" L3  style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 76 194 C 46 212 76 240 98 230 C 126 214 106 184 76 194 Z "></path></svg>'
+								}
+							}
+							if (j==11) {//R3
+								if (current_style == "DS") {
+									buttEle.innerHTML = '';
+								} else if (current_style == "XBOX") {
+
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg id="button_11" R3 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.25)" d="M 236 252 C 210 274 246 290 260 284 C 294 268 262 238 236 252 Z "></path></svg>'
+								}
+							}
 						}
-						if (j==13) {// down
-							buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
-						}
-						if (j==14) {// left
-							buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
-						}
-						if (j==15) {// right
-							buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
+						if (current_style == "DS") {
+							if (j==12) {// up
+								buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
+							}
+							if (j==13) {// down
+								buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
+							}
+							if (j==14) {// left
+								buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
+							}
+							if (j==15) {// right
+								buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(250,250,250,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
+							}
+						} else if (current_style == "SNES") {
+							if (j==12) {// up
+								buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" points="3,16 11,3 19,16"></polygon></svg>';								
+							}
+							if (j==13) {// down
+								buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(180)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" points="3,16 11,3 19,16"></polygon></svg>';								
+							}
+							if (j==14) {// left
+								buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(270)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" points="3,16 11,3 19,16"></polygon></svg>';								
+							}
+							if (j==15) {// right
+								buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(90)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" points="3,16 11,3 19,16"></polygon></svg>';								
+							}
+						} else if (current_style == "NES") {
+							if (j==12) {// up
+								buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';
+							}
+							if (j==13) {// down
+								buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';								
+							}
+							if (j==14) {// left
+								buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';								
+							}
+							if (j==15) {// right
+								buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.5)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';
+							}
+						} else if (current_style == "XBOX") {
+							if (j==12) {// up
+								buttEle.innerHTML = '<svg up style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(250,250,250,0.25)" d="M 136 238 C 140 236 146 236 150 238 C 152 242 152 248 154 250 C 144 256 140 256 132 250 C 134 248 134 240 136 238 Z"></path></svg>';
+							}
+							if (j==13) {// down
+								buttEle.innerHTML = '<svg down style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(250,250,250,0.25)" d="M 152 280 C 148 282 144 282 138 280 C 134 276 136 270 132 268 C 140 264 148 264 156 268 C 154 270 152 276 152 280 Z "></path></svg>';
+							}
+							if (j==14) {// left
+								buttEle.innerHTML = '<svg left style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(250,250,250,0.25)"  d="M 116 254 C 114 258 114 262 118 266 C 122 266 126.6667 265.3333 132 268 C 136 262 136 258 132 250 C 126.6667 252.6667 121.3333 253.3333 116 254 C 116 254 116 254 116 254 Z"></path></svg>';
+							}
+							if (j==15) {// right
+								buttEle.innerHTML = '<svg style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(250,250,250,0.25)" d="M 170 254 C 172 258 172 262 170 266 C 165.3333 266 160.6667 266 156 268 C 152 262 152 256 154 250 C 159.3333 252.6667 164.6667 253.3333 170 254 Z "></path></svg>';
+							}
+							if (j==16) {//home
+								if (current_style == "XBOX") {
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg home style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.15)" d="M 196 182 C 172 186 166 216 202 218 C 226 216 234 182 196 182 Z"></path><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(70,270,70,0.15)" d="M 196 182 C 172 186 166 216 202 218 C 226 216 234 182 196 182 Z M 208 186 C 208 186 202 192 200 194 C 196.6667 190.6667 194 190 190 186 C 196 182 202 184 208 186 Z M 204 196 C 206 193.3333 208 190.6667 210 188 C 220 192 218 204 214 208 C 212 204 207.3333 200 204 196 Z M 200 200 C 204 202 210 206 212 210 C 204 216 194 214 188 210 C 192 206 196 202 200 200 Z M 196 196 C 191.3333 200 188.6667 204 186 208 C 176 200 184 192 188 188 C 190 190 192 190 196 196 Z"></path></svg>'
+								}
+							}
 						}
 					}
 				} else {  // if current button is *not* pressed we should revert it's style
-					if (j==9) {// once again, the 'start' button needs special attention
-						buttEle.innerHTML = '<svg id="button_9_border"><linearGradient id="Gradient0" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient0)" points="0,0 30,9 1,18 1,0"></polygon></svg>';				
-					} else {
-						if (j<=11) { // round-shaped buttons can be processed similarly
+					if (j==8) {
+						if (current_style == "DS") {
 							buttEle.style.background='rgba(70,70,70,0.5)';
 							buttEle.style['background-image'] = "linear-gradient(to bottom, rgba(190,190,190,0.25) 0%, rgba(50,50,50,0.25) 100%), linear-gradient(to right, rgba(190,190,190,0.25) 0%, rgba(50,50,50,0.25) 100%)";							
+						} else if (current_style == "SNES") {
+							buttEle.style.background='rgba(0,0,0,0.0)';
+							buttEle.innerHTML = ""
+						} else if (current_style == "NES") {
+								buttEle.style.background='rgba(30,30,30,1)';
+								buttEle.innerHTML = ""
+						} else if (current_style == "XBOX") {
+								buttEle.style.background='rgba(30,30,30,0)';
+								buttEle.innerHTML = '';
 						}
-						if (j==12) { // and of cource directional buttons: up
-							buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient1)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
+					} else if (j==9) {// once again, the 'start' button needs special attention
+						if (current_style == "DS") {
+							buttEle.style.background='rgba(0,0,0,0.0)';
+							buttEle.innerHTML = '<svg id="button_9_border"><linearGradient id="Gradient0" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient0)" points="0,0 30,9 1,18 1,0"></polygon></svg>';
+						} else if (current_style == "SNES") {
+							buttEle.style.background='rgba(0,0,0,0.0)';
+							buttEle.innerHTML = ""
+						} else if (current_style == "NES") {
+							buttEle.style.background='rgba(30,30,30,1)';
+							buttEle.innerHTML = ""
+						} else if (current_style == "XBOX") {
+							buttEle.style.background='rgba(30,30,30,0)';
+							buttEle.innerHTML = ""
+						}						
+					} else {
+						if (j<=11) { // round-shaped buttons can be processed similarly
+							if (j==0) {
+								if (current_style == "XBOX") {							
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = ''
+								}
+							}
+							if (j==1) {
+								if (current_style == "XBOX") {							
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = ''
+								}
+							}
+							if (j==2) {
+								if (current_style == "XBOX") {							
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = ''
+								}
+							}
+							if (j==3) {
+								if (current_style == "XBOX") {							
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = ''
+								}
+							}
+							if (j==4) {//L1
+								if (current_style == "DS") {
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '';
+								} else if (current_style == "XBOX") {
+		
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg id="button_4" L1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" d="M 120 138 L 122 124 C 120 122 116 124 114 118 C 92 118 82 118 58 130 L 52 138 L 52 148 C 72 142 86 132 120 138 Z "></path></svg>'
+								}
+							}
+							if (j==6) {//L2
+								if (current_style == "DS") {
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '';
+								} else if (current_style == "XBOX") {
+
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg id="button_6" L2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" d="M 86 120 C 94 118 102 118 110 118 L 110 92 C 112 90 96 82 88 92 L 86 120 Z"></path></svg>'
+								}
+							}
+							if (j==5) {//R1
+								if (current_style == "DS") {
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '';
+								} else if (current_style == "XBOX") {
+
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg id="button_5" R1 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" d="M 278 124 C 282 124 282 118 286 118 C 308 116 322 120 342 132 L 346 138 L 346 148 C 326 140 302 130 278 138 L 278 124 Z"></path></svg>'
+								}
+							}
+							if (j==7) {//R2
+								if (current_style == "DS") {
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '';
+								} else if (current_style == "XBOX") {
+
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg id="button_7" R2 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" d="M 290 118 C 298 116 308 118 316 120 L 312 92 C 304 82 288 90 290 92 L 290 118 Z"></path></svg>'
+								}
+							}
+							if (j==10) {//L3
+								if (current_style == "DS") {
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '';
+								} else if (current_style == "XBOX") {
+
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg id="button_10" L3  style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" d="M 76 194 C 46 212 76 240 98 230 C 126 214 106 184 76 194 Z "></path></svg>'
+								}
+							}
+							if (j==11) {//R3
+								if (current_style == "DS") {
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '';
+								} else if (current_style == "XBOX") {
+
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg id="button_11" R3 style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" d="M 236 252 C 210 274 246 290 260 284 C 294 268 262 238 236 252 Z "></path></svg>'
+								}
+							}
+
+							if (current_style == "DS") {
+								buttEle.style.background='rgba(70,70,70,0.5)';
+								buttEle.style['background-image'] = "linear-gradient(to bottom, rgba(190,190,190,0.25) 0%, rgba(50,50,50,0.25) 100%), linear-gradient(to right, rgba(190,190,190,0.25) 0%, rgba(50,50,50,0.25) 100%)";							
+							} else if (current_style == "SNES") {
+								buttEle.style.background='rgba(0,0,0,0.0)';
+								buttEle.innerHTML = ""
+							} else if (current_style == "NES") {
+								buttEle.style.background='rgba(0,0,0,0.0)';
+								buttEle.innerHTML = ""
+							} else if (current_style == "XBOX") {
+								//buttEle.style.background='rgba(0,0,0,0.0)';
+								//buttEle.innerHTML = ""
+							}							
 						}
-						if (j==13) {// down
-							buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><linearGradient id="Gradient2" x1="1" x2="0" y1="1" y2="0"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient2)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
-						}
-						if (j==14) {// left
-							buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><linearGradient id="Gradient3" x1="1" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient3)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
-						}
-						if (j==15) {// right
-							buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><linearGradient id="Gradient4" x1="0" x2="1" y1="1" y2="0"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient4)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
+						if (current_style == "DS") {
+							if (j==12) { // and of course directional buttons: up
+								buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(  0)"><linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient1)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
+							}
+							if (j==13) {// down
+								buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><linearGradient id="Gradient2" x1="1" x2="0" y1="1" y2="0"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient2)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
+							}
+							if (j==14) {// left
+								buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><linearGradient id="Gradient3" x1="1" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient3)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
+							}
+							if (j==15) {// right
+								buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><linearGradient id="Gradient4" x1="0" x2="1" y1="1" y2="0"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient4)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
+							}
+						} else if (current_style == "SNES") {
+							if (j==12) {// up
+								buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" points="3,16 11,3 19,16"></polygon></svg>';
+							}
+							if (j==13) {// down
+								buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" points="3,16 11,3 19,16"></polygon></svg>';								
+							}
+							if (j==14) {// left
+								buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" points="3,16 11,3 19,16"></polygon></svg>';								
+							}
+							if (j==15) {// right
+								buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><polygon fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" points="3,16 11,3 19,16"></polygon></svg>';
+							}
+						} else if (current_style == "NES") {
+							if (j==12) {// up
+								buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';
+							}
+							if (j==13) {// down
+								buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';								
+							}
+							if (j==14) {// left
+								buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';								
+							}
+							if (j==15) {// right
+								buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" d="M 2 14 L 2 8 L 0 8 L 8 0 L 16 8 L 14 8 L 14 14 Z"></path></svg>';
+							}
+						} else if (current_style == "XBOX") {
+							if (j==12) {// up
+								buttEle.innerHTML = '';
+							}
+							if (j==13) {// down
+								buttEle.innerHTML = '';
+							}
+							if (j==14) {// left
+								buttEle.innerHTML = '';
+							}
+							if (j==15) {// right
+								buttEle.innerHTML = '';
+							}
+							if (j==16) {//home
+								if (current_style == "XBOX") {
+									buttEle.style.background='rgba(255,25,55,0)';
+									buttEle.innerHTML = '<svg home style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;"><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0)" d="M 196 182 C 172 186 166 216 202 218 C 226 216 234 182 196 182 Z"></path><path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(0,0,0,0.25)" d="M 196 182 C 172 186 166 216 202 218 C 226 216 234 182 196 182 Z M 208 186 C 208 186 202 192 200 194 C 196.6667 190.6667 194 190 190 186 C 196 182 202 184 208 186 Z M 204 196 C 206 193.3333 208 190.6667 210 188 C 220 192 218 204 214 208 C 212 204 207.3333 200 204 196 Z M 200 200 C 204 202 210 206 212 210 C 204 216 194 214 188 210 C 192 206 196 202 200 200 Z M 196 196 C 191.3333 200 188.6667 204 186 208 C 176 200 184 192 188 188 C 190 190 192 190 196 196 Z"></path></svg>'
+								}
+							}
 						}
 					}
 				}	
@@ -132,11 +498,19 @@ function onFrame() {                             // gets repeatedly executed
 			} else {                                                             // now this is for moving 'sticks' around
 				let b = (j)/2|0;			                                     // just like before we determine what axes pair is this and 
 				let axisEleL = document.getElementById('button_'+(b+l_stick));   // get the correct id of a button to move
-				if (b === ((j)/2)|0 ) {                                          // if axis id is odd, then we are dealing with Y axis
-					axisEleL.style.left = ((gp.axes[j]*1000)/100|0)+6+'px';
-				} else {                                                         // if it's even - with X axis
-					axisEleL.style.top = ((gp.axes[j]*1000)/100|0)+6+'px';
-				};			   
+				if (current_style == 'XBOX') {
+					if (b === ((j)/2)|0 ) {                                          // if axis id is odd, then we are dealing with Y axis
+						axisEleL.style.left = ((gp.axes[j]*1000)/100|0)+'px';
+					} else {                                                         // if it's even - with X axis
+						axisEleL.style.top = ((gp.axes[j]*1000)/100|0)+'px';
+					};		
+				} else {
+					if (b === ((j)/2)|0 ) {                                          // if axis id is odd, then we are dealing with Y axis
+						axisEleL.style.left = ((gp.axes[j]*1000)/100|0)+6+'px';
+					} else {                                                         // if it's even - with X axis
+						axisEleL.style.top = ((gp.axes[j]*1000)/100|0)+6+'px';
+					};		
+				}	   
 			}
 		}	
 	}
diff --git a/index.html b/index.html
index 124bbae..56fc274 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,135 @@
 <html>
 <head>
 	<meta charset="UTF-8">
-	<link rel="stylesheet" href="main.css">
-	<script type="text/javascript" src="gpcon.js"></script>
 </head>
-<body>
+<body onload="prep()">
+	<div id="controller_SNES">
+		<svg style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;">
+			<path stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.15)" 
+				d="M 310 127 C 408 127 408 273 310 273 C 212 271 212 127 310 127 Z M 322 185 C 338 167 318 143 298 155 L 262 183 C 242 201 264 227 284 215 Z M 358 213 C 374 199 358 173 336 183 L 298 213 C 280 231 302 255 320 243 Z"></path>
+		</svg>
+		<svg style="position: absolute; width: 200px; height: 200px; top: 102px; left: 0px;">
+			<circle stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.0)" cx="87" cy="98" r="45">
+			</circle>
+		</svg>
+		<svg style="position: absolute; width: 200px; height: 200px; top: 102px; left: 0px;">
+			<circle stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.0)" cx="87" cy="98" r="5">
+			</circle>
+		</svg>
+		<svg style="position: absolute;" height="25" width="25" transform="rotate(90)">
+			<linearGradient id="Gradient5" x1="0" x2="1" y1="1" y2="0">
+				<stop offset="0%" stop-color="rgba(150,150,150,0.5)"/>
+				<stop offset="100%" stop-color="rgba(50,50,50,1)"/>
+			</linearGradient>
+		</svg>
+		<svg style="position: absolute; top:165px; left:50px;" height="400" width="400">
+			<path fill-rule="evenodd" stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.15)" d="M 26,5 47,5 47,26 68,26 68,47 47,47 47,68 26,68 26,47 5,47 5,26 26,26 26,5 z">
+			</path>
+		</svg>
+
+		<svg style="position: absolute;" height="400" width="400">
+			<path stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.0)" d="m 115,120 200,0 c 84,-5 120,145 0,160 -44,0 -44,-20 -84,-20 h -64 c -44,0 -44,20 -84,20 -84,0 -120,-145 0,-160 z"> 
+			</path>
+		</svg>
+	</div>
+	<div id="controller_NES">
+		<svg style="position: absolute; width: 400px; height: 400px; top: 258px; left: 344px;">
+			<path style="transform:scale(1)" stroke-width=1 stroke="rgba(250,250,250,0.0)" fill="rgba(250,250,250,0.6)" 
+				d="M 1 1.4 C 1 0.6 2 0.6 2 0.6 L 7 0.6 C 7 0.6 8 0.6 8 1.4 L 8 7.6 L 7 7.6 L 7 4.6 L 2 4.6 L 2 7.6 L 1 7.6 L 1 1.4 
+				   M 2 1.8 L 2 3.6 L 7 3.6 L 7 1.8 C 7 1.6 6.8 1.6 6.8 1.6 L 2.2 1.6 C 2.2 1.6 2 1.6 2 1.8 Z">
+			</path>
+		</svg>
+		<svg style="position: absolute; width: 400px; height: 400px;  top: 258px; left: 284px;">
+			<path style="transform:scale(1)" stroke-width=1 stroke="rgba(250,250,250,0)" fill="rgba(250,250,250,0.6)" 
+				d ="M 9.2 0.6 L 9.2 7.6 L 15.4 7.6 C 15.4 7.6 16.2 7.6 16.2 6.8 L 16.2 4.4 C 16.2 4.4 16.2 4 15.6 4 C 15.6 4 16 4 16 3.6 L 16 1.4 C 16 0.6 15.2 0.6 15.2 0.6 Z 
+				   M 10.2 1.6 L 14.8 1.6 C 14.8 1.6 15 1.6 15 1.8 L 15 3.4 C 15 3.6 14.8 3.6 14.8 3.6 L 10.2 3.6 Z 
+				   M 10.2 4.6 L 15 4.6 C 15 4.6 15.2 4.6 15.2 4.8 L 15.2 6.4 C 15.2 6.4 15.2 6.6 15 6.6 L 10.2 6.6 Z">
+			</path>
+		</svg>
+		<svg style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;">
+			<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(250,250,250,0.1)" 
+				d="M 172 118 L 392 118 C 398 118 398 118 398 124 L 398 276 C 398 282 398 282 392 282 L 6 282 C 0 282 0 282 0 276 L 0 122 C 0 118 0 118 4 118 Z">
+
+			</path>
+			<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(0,0,0,0.15)" 
+				d="M 10 144 L 390 144 L 390 272 L 10 272 Z M 132 216 C 128 216 126 218 126 222 L 126 248 C 126 252 128 254 132 254 L 234 254 C 238 254 240 252 240 248 L 240 222 C 240 218 238 216 234 216 L 132 216 Z M 56 176 C 54 176 52 178 52 180 L 52 202 L 30 202 C 28 202 26 204 26 206 L 26 224 C 26 226 28 228 30 228 L 52 228 L 52 248 C 52 250 54 252 56 252 L 74 252 C 76 252 78 250 78 248 L 78 228 L 100 228 C 102 228 104 226 104 224 L 104 206 C 104 204 102 202 100 202 L 78 202 L 78 180 C 78 178 76 176 74 176 L 56 176 Z M 280 216 C 256 216 256 252 280 252 C 304 252 304 216 280 216 L 280 216 Z M 332 216 C 308 216 308 252 332 252 C 356 252 356 216 332 216 Z">
+			</path>
+			<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.15)" 
+				d="M 10 144 L 390 144 L 390 272 L 10 272 Z M 126 144 L 126 154 C 126 158 128 160 132 160 L 234 160 C 238 160 240 158 240 154 L 240 144 Z M 126 172 L 126 180 C 126 184 128 186 132 186 L 236 186 C 238 186 240 184 240 182 L 240 172 C 240 168 238 166 234 166 L 132 166 C 128 166 126 168 126 172 Z M 132 192 C 128 192 126 194 126 198 L 126 206 C 126 210 128 212 132 212 L 234 212 C 238 212 240 210 240 206 L 240 198 C 240 194 238 192 234 192 L 132 192 Z M 132 216 C 128 216 126 218 126 222 L 126 248 C 126 252 128 254 132 254 L 234 254 C 238 254 240 252 240 248 L 240 222 C 240 218 238 216 234 216 L 132 216 Z M 132 260 C 128 260 126 262 126 266 L 126 272 L 240 272 L 240 266 C 240 262 238 260 234 260 L 132 260 Z M 262 212 C 260 212 258 214 258 216 L 258 252 C 258 254 260 256 262 256 L 298 256 C 300 256 302 256 302 252 L 302 216 C 302 214 300 212 298 212 L 262 212 Z M 314 212 C 312 212 310 214 310 216 L 310 252 C 310 254 312 256 314 256 L 350 256 C 352 256 354 254 354 252 L 354 216 C 354 214 352 212 350 212 L 314 212 Z M 56 176 C 54 176 52 178 52 180 L 52 202 L 30 202 C 28 202 26 204 26 206 L 26 224 C 26 226 28 228 30 228 L 52 228 L 52 248 C 52 250 54 252 56 252 L 74 252 C 76 252 78 250 78 248 L 78 228 L 100 228 C 102 228 104 226 104 224 L 104 206 C 104 204 102 202 100 202 L 78 202 L 78 180 C 78 178 76 176 74 176 L 56 176 Z">
+			</path>
+
+			<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(0,0,0,0.55)" 
+				d="M 56 178 L 74 178 C 74 178 76 178 76 180 L 76 204 L 100 204 C 102 204 102 206 102 206 L 102 224 C 102 224 102 226 100 226 L 76 226 L 76 248 C 76 250 74 250 74 250 L 56 250 C 56 250 54 250 54 248 L 54 226 L 30 226 C 28 226 28 224 28 224 L 28 206 C 28 206 28 204 30 204 L 54 204 L 54 180 C 54 178 56 178 56 178 Z">
+			</path>
+			<!--path style="transform:scale(20)" stroke-width=0.1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.15)" d="M 3.9 8.2 L 22.9 8.2 L 22.9 14.6 L 3.9 14.6 Z M 10 11.8 C 9.8 11.8 9.7 11.9 9.7 12.1 L 9.7 13.4 C 9.7 13.6 9.8 13.7 10 13.7 L 15.1 13.7 C 15.3 13.7 15.4 13.6 15.4 13.4 L 15.4 12.1 C 15.4 11.9 15.3 11.8 15.1 11.8 L 10 11.8 Z M 6.2 9.8 C 6.1 9.8 6 9.9 6 10 L 6 11.1 L 4.9 11.1 C 4.8 11.1 4.7 11.2 4.7 11.3 L 4.7 12.2 C 4.7 12.3 4.8 12.4 4.9 12.4 L 6 12.4 L 6 13.4 C 6 13.5 6.1 13.6 6.2 13.6 L 7.1 13.6 C 7.2 13.6 7.3 13.5 7.3 13.4 L 7.3 12.4 L 8.4 12.4 C 8.5 12.4 8.6 12.3 8.6 12.2 L 8.6 11.3 C 8.6 11.2 8.5 11.1 8.4 11.1 L 7.3 11.1 L 7.3 10 C 7.3 9.9 7.2 9.8 7.1 9.8 L 6.2 9.8 Z">
+			</path-->
+
+
+		</svg>
+	</div>
+	<div id="controller_XBOX">
+		<svg hull style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;">
+			<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.15)" 
+				d="M 200 128 L 246 128 L 270 116 L 278 108 L 302 104 L 314 108 L 336 128 L 348 142 L 358 164 L 374 212 C 388 272 374 312 334 312 C 306 308 288.666 292.666 266 284 C 262 290 232 288 228 278 L 172 278 C 170 280 152 292 132 284 C 108.666 293.334 80 312 62 312 C 12 312 14 248 24 212 L 40 164 L 50 142 L 62 128 L 84 108 L 96 104 L 122 110 L 128 116 L 152 128 Z">
+			</path>
+		</svg>
+		<svg hull with holes style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;">
+			<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(0,0,0,0.15)" 
+				d="M 200 128 L 246 128 L 270 116 L 278 108 L 302 104 L 314 108 L 336 128 L 348 142 L 358 164 L 374 212 C 388 272 374 312 334 312 C 306 308 288.666 292.666 266 284 C 262 290 232 288 228 278 L 172 278 C 170 280 152 292 132 284 C 108.666 293.334 80 312 62 312 C 12 312 14 248 24 212 L 40 164 L 50 142 L 62 128 L 84 108 L 96 104 L 122 110 L 128 116 L 152 128 Z M 52 182 C 36 210 84 254 122 216 C 148 184 80 144 52 182 Z M 218 232 C 190 266 250 294 284 264 C 314 230 244 206 218 232 Z M 38 170 L 58 156 C 132 126 126 172 170 172 L 234 172 C 266 170 278 128 348 156 L 360 170 L 358 164 L 346 148 C 326 140 316 136 294 136 C 268 136 260 158 234 160 L 170 160 C 148 162 126 136 104 136 C 76 138 74 140 52 148 L 40 164 L 38 170 Z M 280 192 C 262 196 270 212 282 210 C 300 208 292 190 280 192 Z M 308 216 C 294 216 294 236 310 234 C 322 234 328 214 308 216 Z M 338 190 C 324 196 328 212 344 208 C 354 204 358 186 338 190 Z M 308 166 C 296 172 300 192 316 186 C 330 182 326 160 308 166 Z M 160 194 C 148 194 146 206 160 208 C 170 208 174 196 160 194 Z M 240 194 C 228 194 228 208 240 208 C 250 208 256 194 240 194 Z">
+			</path>
+		</svg>
+		<svg button bg style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;">
+			<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,0)" fill="rgba(0,0,0,0.25)" 
+				d="M 70 190 C 46 214 86 246 112 214 C 126 188 88 174 70 190 Z 
+				M 234 242 C 210 264 250 290 272 268 C 290 244 252 226 234 242 Z 
+				M 278 188 C 258 194 270 212 282 210 C 300 208 296 186 278 188 Z 
+				M 308 212 C 286 214 294 236 310 234 C 322 234 332 212 308 212 Z 
+				M 336 186 C 318 198 328 212 344 208 C 358 204 358 178 336 186 Z 
+				M 306 162 C 288 172 300 192 316 186 C 338 176 320 156 306 162 Z 				
+				M 140 230 C 96 240 106 280 146 282 C 190 276 184 226 140 230 Z
+				M 134 240 C 124 240 118 250 118 252 C 118 250 124 240 134 240 Z 
+				M 120 266 C 124 274 128 276 136 278 C 128 276 124 274 120 266 Z
+				M 154 278 C 160 276 166 274 168 266 C 166 274 160 276 154 278 Z
+				M 168 252 C 164 244 158 240 152 240 C 158 240 164 244 168 252 Z">
+			</path>
+			<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" 
+				d="M 134 240 C 124 240 118 250 118 252 C 118 250 124 240 134 240 Z
+				   M 120 266 C 124 274 128 276 136 278 C 128 276 124 274 120 266 Z
+				   M 154 278 C 160 276 166 274 168 266 C 166 274 160 276 154 278 Z 
+				   M 168 252 C 164 244 158 240 152 240 C 158 240 164 244 168 252 Z
+				   
+				   M 160 194 C 148 194 146 206 160 208 C 170 208 174 196 160 194 Z 
+				   M 240 194 C 228 194 228 208 240 208 C 250 208 256 194 240 194 Z   ">
+			</path>
+		</svg>
+
+		<svg up style="position: absolute; width: 400px; height: 400px; top: 0px; left: 0px;">
+			<path style="transform:scale(1)" stroke-width=1 stroke="rgba(0,0,0,1)" fill="rgba(0,0,0,0.25)" 
+				d="M 136 238 C 140 236 146 236 150 238 C 152 242 152 248 154 250 C 159 253 164 253 170 254 C 172 258 171.9 262 170 266 C 165 266 161 266 156 268 C 154 270 152 276 152 280 C 148 282 144 282 138 280 C 134 276 136 270 132 268 C 127 265 122 266 118 266 C 114 262 114 258 116 254 C 121 253 127 253 132 250 C 134 248 134 240 136 238 Z">
+			</path>
+		</svg>
+
+		
+		
+
+		
+		
+
+
+		
+		
+
+	</div>
 <div id="buttons"></div>
+<script type="text/javascript" src="gpcon.js"></script>
+<div id="style_select_wrapper">
+	<select id="style_select">
+		<option id="DS_option"  value="DS">DS</option>
+		<option id="NES_option"  value="NES">NES</option>
+		<option id="SNES_option" value="SNES">SNES</option>
+		<option id="XBOX_option" value="XBOX">XBox</option>
+	</select>
+</div>
+
 </body>
 </html>