better generator

src/styles/index.scss

@@ -2,4 +2,78 @@
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1rem;
+  margin: 0;
+  padding: 0;
+}
+
+body,
+html {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+}
+
+#root {
+  min-height: 100%;
+  width: 100%;
+}
+
+h1 {
+  font-size: 1.8rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+h4 {
+  font-size: 1.1rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: bold;
+}
+
+button {
+  background-color: #202024;
+  color: #fff;
+  font-weight: bold;
+  border: 2px solid #31f399;
+  border-radius: 5px;
+  padding: 10px 20px;
+  cursor: pointer;
+  transition: all 300ms ease-in-out;
+  &:hover {
+    background-color: #42d486;
+    color: #202024;
+  }
+}
+
+// custom dark themed scrollbar
+::-webkit-scrollbar {
+  width: 5px;
+  height: 15px;
+}
+
+::-webkit-scrollbar-track {
+  background: #363638;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #31f39973;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #48ee95;
 }