initial commit

public/style.css

@@ -0,0 +1,81 @@
+code {
+    background: #d0d0d5;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-container {
+    max-width: 95%;
+}
+
+textarea {
+    width: 100%;
+}
+
+#user-stories {
+    font-size: 1.2em;
+}
+
+#output-container,
+#solution-container,
+#text-input,
+#locale-select,
+input[type="button"] {
+    font-size: 1.1em;
+}
+
+#output-container {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+}
+
+#solution-container {
+    font-weight: bold;
+}
+
+#solution-container {
+    margin-left: 20px;
+}
+
+#translated-sentence {
+    margin-top: 10px;
+    font-weight: normal;
+}
+
+#error-msg {
+    font-weight: normal;
+    color: red;
+}
+
+.highlight {
+    color: green;
+}
+
+#text-input {
+    padding: 10px;
+}
+
+@media (min-width: 800px) {
+    .container {
+        flex-direction: row;
+    }
+
+    .form-container {
+        align-self: flex-end;
+    }
+
+    #output-container {
+        flex-direction: row;
+        margin-top: 0;
+        margin-left: 20px;
+    }
+
+    #solution-container {
+        width: 75%;
+        margin-top: 0;
+    }
+}