diff --git a/css/color.css b/css/color.css
deleted file mode 100644
index 0add6b8..0000000
--- a/css/color.css
+++ /dev/null
@@ -1,15 +0,0 @@
-body{color:#9f9f9f}
-button{color:#303030;background-color:#cfcfcf}
-button:hover{color:#bebebe;background-color:#323234}
-input[type="text"]{color:#404040;background-color:#cfcfcf}
-input[type="text"]:hover{background-color:#a6a6a6}
-polygon{fill:#cfcfcf}
-polygon:hover{fill:#a6a6a6}
-body.dark{color:#bebebe;background-color:#0c0c0d}
-body.dark button{color:#bebebe;background-color:#323234}
-body.dark button:hover{color:#303030;background-color:#cfcfcf}
-body.dark input[type="text"]{color:#bebebe;background-color:#323234}
-body.dark input[type="text"]:hover{background-color:#474749}
-body.dark polygon{fill:#323234}
-body.dark polygon:hover{fill:#474749}
-body,button,input,polygon{-webkit-transition:200ms;transition:200ms}
diff --git a/css/options.css b/css/options.css
index 20cacc5..6500551 100644
--- a/css/options.css
+++ b/css/options.css
@@ -1,18 +1,20 @@
-.group{position:absolute;width:100%}
-.pad{padding:60px}
-.row{padding:10px}
-.label{display:inline-block;width:30px}
-.field{display:inline}
-.label span{display:table-cell;vertical-align:middle}
-#mode{position:absolute;left:0;right:0;margin:auto;z-index:9}
-#quad1 .group{text-align:right;bottom:0}
-#quad2 .group{bottom:0}
-#quad3 .group{text-align:right}
-button{top:calc(50% + 75px);height:60px;width:60px;border-radius:30px;outline:0;font-size:16px}
+.quadrant{display:flex;width:calc(50% - 100px);height:calc(50% - 100px);margin:50px}
+.row{display:flex;align-items:center;padding:10px}
+#quad1.quadrant{flex-direction:column-reverse}
+#quad1 .row{flex-direction:row-reverse}
+#quad2.quadrant{flex-direction:column-reverse}
+#quad2 .row{flex-direction:row}
+#quad3.quadrant{flex-direction:column}
+#quad3 .row{flex-direction:row-reverse}
+#quad4.quadrant{flex-direction:column}
+#quad4 .row{flex-direction:row}
+button{height:60px;width:60px;border-radius:30px;outline:0;font-size:1em}
 button:hover{cursor:pointer}
-input[type="text"]{display:inline-block;height:48px;width:80%;max-width:400px;padding:0;border:0;line-height:48px;text-align:center;font-size:18px}
-.colorwrapper{height:70px;width:70px;display:inline-block;vertical-align:middle;overflow:hidden}
-input[type="color"]{height:100px;width:100px;position:relative;top:-15px;left:-15px}
+button svg{display:inline;vertical-align:middle}
+#mode{position:absolute;top:calc(50% + 75px);left:0;right:0;margin:auto}
+input[type="text"]{height:48px;width:80%;max-width:400px;padding:0;border:0;line-height:48px;text-align:center;font-size:18px}
+input[type="color"]{height:70px;width:70px;outline:none}
 input[type="color"]:hover{cursor:pointer}
-input:focus{outline:0}
-svg.icon{height:1em;width:1em;vertical-align:-.125em}
\ No newline at end of file
+a{outline:none}
+input{outline:none}
+svg.icon{height:1em;width:1em;padding:0 1em}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 70c498f..c2a6dbd 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,5 +1,25 @@
 *{padding:0;margin:0;border:0}
 body,html,.content{width:100%;height:100%}
+a{outline:none}
 .content{display:flex;flex-flow: row wrap}
-#logo{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:10%;height:10%}
-.quadrant{position:relative;width:50%;height:50%;outline:none}
\ No newline at end of file
+#logo{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:10%;max-width:100px;height:10%;max-height:100px}
+.quadrant{position:relative;width:50%;height:50%}
+
+body{color:#9f9f9f}
+button{color:#303030;background-color:#cfcfcf}
+button:hover{color:#bebebe;background-color:#323234}
+input[type="text"]{color:#404040;background-color:#cfcfcf}
+input[type="text"]:hover{background-color:#a6a6a6}
+polygon{fill:#cfcfcf}
+polygon:hover{fill:#a6a6a6}
+.icon{color:#303030}
+
+body.dark{color:#bebebe;background-color:#0c0c0d}
+body.dark button{color:#bebebe;background-color:#323234}
+body.dark button:hover{color:#303030;background-color:#cfcfcf}
+body.dark input[type="text"]{color:#bebebe;background-color:#323234}
+body.dark input[type="text"]:hover{background-color:#474749}
+body.dark polygon{fill:#323234}
+body.dark polygon:hover{fill:#474749}
+body.dark .icon{color:#9f9f9f}
+body,button,input,polygon{-webkit-transition:200ms;transition:200ms}
diff --git a/options.html b/options.html
index 27204b8..74a9d02 100644
--- a/options.html
+++ b/options.html
@@ -12,122 +12,50 @@
   <body>
     <div class="content">
       <div class="quadrant" id="quad1">
-        <div class="group">
-          <div class="pad">
-            <div class="row">
-              <div class="field">
-                <div class="colorwrapper">
-                  <input type="color" value="#cfcfcf" />
-                </div>
-              </div>
-              <div class="label">
-                <label>
-                  <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M269.9 364.6c1.4 6.4 2.1 13 2.1 19.7 0 81.2-54.2 127.7-134.8 127.7C41.5 512 0 435.1 0 347.6c10.4 7.1 46.9 36.5 58.7 36.5 7 0 13-4 15.5-10.6 23.6-62.2 66.5-76.5 112.9-77.4 15.6 33.8 46.1 59.6 82.8 68.5zM460.6 0c-14.4 0-27.9 6.4-38.2 15.7C228.2 190 208 194.1 208 245.4c0 48.8 40.5 90.6 90.2 90.6 59 0 93.2-43.4 200.6-244.8 7-13.7 13.2-28.5 13.2-43.9C512 19.7 487.3 0 460.6 0z"></path></svg>
-                </label>
-              </div>
-            </div>
-            <div class="row">
-              <div class="field">
-                <input type="text" spellcheck="false" tabindex="1" />
-              </div>
-              <div class="label">
-                <label>
-                  <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>
-                </label>
-              </div>
-            </div>
-          </div>
+        <div class="row">
+          <svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+          <input type="text" spellcheck="false" tabindex="1" />
+        </div>
+        <div class="row">
+          <svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg>
+          <input type="color" value="#cfcfcf" />
         </div>
       </div>
       <div class="quadrant" id="quad2">
-        <div class="group">
-          <div class="pad">
-            <div class="row">
-              <div class="label">
-                <label>
-                  <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M269.9 364.6c1.4 6.4 2.1 13 2.1 19.7 0 81.2-54.2 127.7-134.8 127.7C41.5 512 0 435.1 0 347.6c10.4 7.1 46.9 36.5 58.7 36.5 7 0 13-4 15.5-10.6 23.6-62.2 66.5-76.5 112.9-77.4 15.6 33.8 46.1 59.6 82.8 68.5zM460.6 0c-14.4 0-27.9 6.4-38.2 15.7C228.2 190 208 194.1 208 245.4c0 48.8 40.5 90.6 90.2 90.6 59 0 93.2-43.4 200.6-244.8 7-13.7 13.2-28.5 13.2-43.9C512 19.7 487.3 0 460.6 0z"></path></svg>
-                </label>
-              </div>
-              <div class="field">
-                <div class="colorwrapper">
-                  <input type="color" value="#cfcfcf" />
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="label">
-                <label>
-                  <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>
-                </label>
-              </div>
-              <div class="field">
-                <input type="text" spellcheck="false" tabindex="2" />
-              </div>
-            </div>
-          </div>
+        <div class="row">
+          <svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+          <input type="text" spellcheck="false" tabindex="1" />
+        </div>
+        <div class="row">
+          <svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg>
+          <input type="color" value="#cfcfcf" />
         </div>
       </div>
       <div class="quadrant" id="quad3">
-        <div class="group">
-          <div class="pad">
-            <div class="row">
-              <div class="field">
-                <input type="text" spellcheck="false" tabindex="3" />
-              </div>
-              <div class="label">
-                <label>
-                  <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>
-                </label>
-              </div>
-            </div>
-            <div class="row">
-              <div class="field">
-                <div class="colorwrapper">
-                  <input type="color" value="#cfcfcf" />
-                </div>
-              </div>
-              <div class="label">
-                <label>
-                  <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M269.9 364.6c1.4 6.4 2.1 13 2.1 19.7 0 81.2-54.2 127.7-134.8 127.7C41.5 512 0 435.1 0 347.6c10.4 7.1 46.9 36.5 58.7 36.5 7 0 13-4 15.5-10.6 23.6-62.2 66.5-76.5 112.9-77.4 15.6 33.8 46.1 59.6 82.8 68.5zM460.6 0c-14.4 0-27.9 6.4-38.2 15.7C228.2 190 208 194.1 208 245.4c0 48.8 40.5 90.6 90.2 90.6 59 0 93.2-43.4 200.6-244.8 7-13.7 13.2-28.5 13.2-43.9C512 19.7 487.3 0 460.6 0z"></path></svg>
-                </label>
-              </div>
-            </div>
-          </div>
+        <div class="row">
+          <svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+          <input type="text" spellcheck="false" tabindex="1" />
+        </div>
+        <div class="row">
+          <svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg>
+          <input type="color" value="#cfcfcf" />
         </div>
       </div>
       <div class="quadrant"  id="quad4">
-        <div class="group">
-          <div class="pad">
-            <div class="row">
-              <div class="label">
-                <label>
-                  <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>
-                </label>
-              </div>
-              <div class="field">
-                <input type="text" spellcheck="false" tabindex="4" />
-              </div>
-            </div>
-            <div class="row">
-              <div class="label">
-                <label>
-                  <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M269.9 364.6c1.4 6.4 2.1 13 2.1 19.7 0 81.2-54.2 127.7-134.8 127.7C41.5 512 0 435.1 0 347.6c10.4 7.1 46.9 36.5 58.7 36.5 7 0 13-4 15.5-10.6 23.6-62.2 66.5-76.5 112.9-77.4 15.6 33.8 46.1 59.6 82.8 68.5zM460.6 0c-14.4 0-27.9 6.4-38.2 15.7C228.2 190 208 194.1 208 245.4c0 48.8 40.5 90.6 90.2 90.6 59 0 93.2-43.4 200.6-244.8 7-13.7 13.2-28.5 13.2-43.9C512 19.7 487.3 0 460.6 0z"></path></svg>
-                </label>
-              </div>
-              <div class="field">
-                <div class="colorwrapper">
-                  <input type="color" value="#cfcfcf" />
-                </div>
-              </div>
-            </div>
-          </div>
+        <div class="row">
+          <svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+          <input type="text" spellcheck="false" tabindex="1" />
+        </div>
+        <div class="row">
+          <svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg>
+          <input type="color" value="#cfcfcf" />
         </div>
       </div>
       <svg id="logo" height="75px" width="75px" viewBox="0 0 10 10">
         <a href="index.html"><polygon id="logo-svg" points="5,10 10,5 5,0 0,5" /></a>
       </svg>
       <button id="mode">
-        <svg style="height:1em;width:1em;font-size:1.33333em;vertical-align:-.225em;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>
+        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
       </button>
     </div>
     <script src="js/options.js"></script>