diff --git a/styles/pad.css b/styles/pad.css
deleted file mode 100644
index e817f0b..0000000
--- a/styles/pad.css
+++ /dev/null
@@ -1,169 +0,0 @@
-.pad {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-rows: 0fr;
-  grid-template-columns: 0fr 0fr 0fr 0fr 0fr;
-  grid-template-rows: 0fr 0fr 0fr 0fr 0fr 0fr;
-  gap: var(--gap);
-  grid-template-areas:
-    "history brackets percent divide mode"
-    "seven eight nine multiply mode"
-    "four five six minus back"
-    "one two three plus back"
-    "negative zero dot equal equal"
-    "C C C equal equal";
-  justify-items: center;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  user-select: none;
-}
-.button {
-  color: #979797;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 0px;
-  width: var(--button-size);
-  height: var(--button-size);
-  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.2);
-  border-radius: 15px;
-  cursor: pointer;
-  overflow: hidden;
-}
-.button img {
-  width: var(--icon-size);
-  height: var(--icon-size);
-  transition: all 0.3s ease-in-out;
-}
-.button:hover img {
-  transform: scale(1.2);
-}
-.disabled-button {
-  background: rgba(0, 0, 0, 0.178);
-  filter: brightness(55%);
-  pointer-events: none;
-  cursor: not-allowed;
-}
-.disabled-button:hover img {
-  transform: none;
-}
-#history {
-  grid-area: history;
-}
-#history img {
-  width: calc(var(--icon-size) * 1.5);
-  height: calc(var(--icon-size) * 1.5);
-}
-#brackets {
-  grid-area: brackets;
-}
-#brackets img {
-  width: calc(var(--icon-size) * 1.2);
-  height: calc(var(--icon-size) * 1.2);
-}
-#percent {
-  grid-area: percent;
-}
-#percent img {
-  width: calc(var(--icon-size) * 1.1);
-  height: calc(var(--icon-size) * 1.1);
-}
-#divide {
-  grid-area: divide;
-}
-#mode {
-  grid-area: mode;
-  height: calc((var(--button-size) * 2) + var(--gap));
-}
-#mode img {
-  height: calc(var(--icon-size) * 4);
-  width: calc(var(--icon-size) * 4);
-}
-#seven {
-  grid-area: seven;
-}
-#eight {
-  grid-area: eight;
-}
-#nine {
-  grid-area: nine;
-}
-#multiply {
-  grid-area: multiply;
-}
-#four {
-  grid-area: four;
-}
-#five {
-  grid-area: five;
-}
-#six {
-  grid-area: six;
-}
-#minus {
-  grid-area: minus;
-}
-#backspace {
-  grid-area: back;
-  height: calc((var(--button-size) * 2) + var(--gap));
-}
-#backspace img {
-  height: calc(var(--icon-size) * 2);
-  width: calc(var(--icon-size) * 2);
-}
-#one {
-  grid-area: one;
-}
-#two {
-  grid-area: two;
-}
-#three {
-  grid-area: three;
-}
-#plus {
-  grid-area: plus;
-}
-#negative {
-  grid-area: negative;
-}
-#negative img {
-  width: calc(var(--icon-size) * 1.5);
-  height: calc(var(--icon-size) * 1.5);
-}
-#zero {
-  grid-area: zero;
-}
-#dot {
-  grid-area: dot;
-}
-#dot img {
-  width: calc(var(--icon-size) * 0.5);
-  height: calc(var(--icon-size) * 0.5);
-}
-#equal {
-  background: var(--dark);
-  grid-area: equal;
-  height: calc((var(--button-size) * 2) + var(--gap));
-  width: -moz-calc((var(--button-size) * 2) + var(--gap));
-  width: -webkit-calc((var(--button-size) * 2) + var(--gap));
-  width: calc((var(--button-size) * 2) + var(--gap));
-}
-#equal img {
-  width: calc(var(--icon-size) * 3);
-  height: calc(var(--icon-size) * 3);
-}
-.dark #equal {
-  background: var(--light);
-}
-#clear {
-  grid-area: C;
-  width: -moz-calc((var(--button-size) * 3) + (var(--gap) * 2));
-  width: -webkit-calc((var(--button-size) * 3) + (var(--gap) * 2));
-  width: calc((var(--button-size) * 3) + (var(--gap) * 2));
-}
-#clear img {
-  width: calc(var(--icon-size) * 1.5);
-  height: calc(var(--icon-size) * 1.5);
-}
diff --git a/styles/settings.css b/styles/settings.css
deleted file mode 100644
index 971298d..0000000
--- a/styles/settings.css
+++ /dev/null
@@ -1,57 +0,0 @@
-#settings {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  overflow: hidden;
-  width: calc((var(--button-size) / 1.5));
-  height: calc(var(--button-size) / 1.5);
-}
-#settings .setting-color {
-  display: none;
-}
-.settings-active {
-  width: calc((var(--button-size) / 1.5) * 7) !important;
-}
-.settings-active .setting-color {
-  display: inline-block !important;
-}
-#settings span {
-  display: none;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  content: " ";
-  filter: brightness(95%);
-  width: 100%;
-  height: 100%;
-  transition: all 0.2s ease-in-out;
-}
-#settings span:hover {
-  width: 110%;
-}
-#settings span:nth-child(1) {
-  /* color: rgb(206, 149, 74); */
-}
-#settings span:nth-child(2) {
-  background: #5885fa;
-}
-#settings span:nth-child(3) {
-  background: #58fa5e;
-}
-#settings span:nth-child(4) {
-  background: #facd58;
-}
-#settings span:nth-child(5) {
-  background: #fa6e58;
-}
-#settings span:nth-child(6) {
-  background: #ff445a;
-}
-#settings span:nth-child(7) {
-  background: #fa58b6;
-}
diff --git a/styles/style.css b/styles/style.css
deleted file mode 100644
index 53513dc..0000000
--- a/styles/style.css
+++ /dev/null
@@ -1,52 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap");
-@import "./settings.css";
-@import "./pad.css";
-:root {
-  /* values */
-  --gap: 25px;
-  --button-size: 75px;
-  --icon-size: 25px;
-}
-* {
-  padding: 0px;
-  margin: 0px;
-  color: var(--primary3);
-  box-sizing: border-box;
-  font-family: "Merriweather Sans", sans-serif;
-  transition: all 0.2s ease-in-out;
-}
-img {
-  background: transparent !important;
-}
-.app {
-  /* colors */
-  --light: #fa6e58;
-  --dark: #4c2924;
-  background: var(--light);
-  color: var(--dark);
-}
-.dark {
-  background: var(--dark);
-  color: var(--light);
-}
-.calc {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-}
-#screen {
-  width: 100%;
-  height: 175px;
-  gap: 5px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-}
-.upper {
-  font-size: 35px;
-}