3 files changed, 158 insertions, 6 deletions
diff --git a/frontend/src/theme/GlobalStyle.js b/frontend/src/theme/GlobalStyle.js
index 9fe80a5..94e4b57 100644
--- a/frontend/src/theme/GlobalStyle.js
+++ b/frontend/src/theme/GlobalStyle.js
@@ -2,10 +2,10 @@ import { createGlobalStyle } from 'styled-components'
 
 export default createGlobalStyle`
   body {
-    margin: 0;
-    padding: 0;
-    background: ${(p) => p.theme.colors.background};
-    font-family: 'JetBrains Mono', monospace;
-    color: ${(p) => p.theme.colors.text};
+      margin: 0;
+      padding: 0;
+      background: ${(p) => p.theme.colors.background};
+      font-family: 'JetBrains Mono', monospace;
+      color: ${(p) => p.theme.colors.text};
   }
 `
 \ No newline at end of file
diff --git a/frontend/src/theme/ThemeProvider.js b/frontend/src/theme/ThemeProvider.js
index d9edcb0..942bc40 100644
--- a/frontend/src/theme/ThemeProvider.js
+++ b/frontend/src/theme/ThemeProvider.js
@@ -10,4 +10,6 @@ const theme = {
   },
 }
 
-export default ({ children }) => <ThemeProvider theme={theme}>{children}</ThemeProvider>
-\ No newline at end of file
+const Provider = ({ children }) => <ThemeProvider theme={theme}>{children}</ThemeProvider>
+
+export default Provider
+\ No newline at end of file
diff --git a/frontend/src/theme/style.css b/frontend/src/theme/style.css
new file mode 100644
index 0000000..10b955b
--- /dev/null
+++ b/frontend/src/theme/style.css
@@ -0,0 +1,150 @@
+@media all and (max-width: 1000px) {
+    .lt-content-column {
+        padding: 0 calc(5vw + 1em) 0 5vw !important;
+    }
+}
+
+form {
+    width: 100%;
+}
+
+textarea, input[type=text], input[type=password], .Dropdown-root {
+    width: 100%;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.8em;
+    padding: calc(0.8em - 1px);
+    border-radius: 3px;
+    border: 1px solid #565656;
+    outline: none;
+    margin: 1.7em 0;
+}
+
+/* fix weird symbol height in render mode */
+.large-op {
+    transform: translateY(-0.55em);
+}
+
+.small-op {
+    transform: translateY(-0.1em);
+}
+
+code, pre {
+    background: #00000000;
+    font-family: 'JetBrains Mono', monospace;
+    padding: initial;
+    border-radius: 3px;
+    outline: none;
+}
+
+.Dropdown-root {
+    cursor: pointer;
+}
+
+.Dropdown-root:hover, .Dropdown-root.is-open {
+    opacity: 1;
+}
+
+.Dropdown-root + label {
+    top: 0.5em;
+    opacity: 0;
+}
+
+.Dropdown-root.is-open + label, .Dropdown-root:hover + label {
+    opacity: 1;
+    top: -0.1em;
+}
+
+.Dropdown-placeholder {
+    width: 5.5em;
+}
+
+.Dropdown-menu {
+    border-top: 1px solid #111111;
+    margin-top: 0.5em;
+    bottom: auto;
+}
+
+.Dropdown-option {
+    margin-top: 0.5em;
+    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
+}
+
+.Dropdown-option:hover {
+    font-weight: 700;
+    opacity: 0.4;
+}
+
+textarea, input[type=text], input[type=password], .Dropdown-root {
+    opacity: 0.5;
+    transition: opacity 0.5s cubic-bezier(.25,.8,.25,1);
+}
+
+textarea:focus, input[type=text]:focus, input[type=password]:focus {
+    opacity: 1;
+}
+
+input[type=password] {
+    font-weight: 700;
+}
+
+textarea {
+    height: max(40vh, 100%);
+    resize: vertical;
+    min-height: 40vh;
+}
+
+a {
+    color: #111111;
+}
+
+input[type=submit], button[type=submit] {
+    font-family: 'JetBrains Mono', serif;
+    font-weight: 700;
+    color: #faf9f5;
+    background-color: #111111;
+    padding: 0.8em 2em;
+    margin: 2em 0;
+    outline: 0;
+}
+
+button[type=button] {
+    font-family: 'JetBrains Mono', serif;
+    font-weight: 700;
+    width: 8em;
+    padding: calc(0.8em - 1px) 1.5em;
+    border-radius: 3px;
+    color: #111111;
+    background-color: #faf9f5;
+    border: 1px solid #565656;
+    outline: none;
+    margin: 2em 2em;
+}
+
+
+/* fixing markdown renderer */
+.md h3 {
+    font-weight: bold;
+}
+
+.md hr {
+    border-top: 1px solid #000;
+    border-style: solid;
+}
+
+.md code {
+    background: #00000008;
+    font-size: 0.8em;
+}
+
+.md pre {
+    padding: 0.7em;
+    background: #00000008;
+}
+
+.md pre > code {
+    background: none;
+}
+
+.md table {
+    width: 100%;
+}
+\ No newline at end of file