1 files changed, 144 insertions, 0 deletions
diff --git a/client/assets/styles.css b/client/assets/styles.css
new file mode 100644
index 0000000..983ca51
--- /dev/null
+++ b/client/assets/styles.css
@@ -0,0 +1,144 @@
+@import url('fonts.css');
+
+body {
+    background-color: #282828;
+    color: #ebdbb2;
+    margin: 0;
+    padding: 0;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+#root {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: auto;
+}
+
+.header {
+    display: flex;
+    justify-content: center;
+    padding: 1rem;
+}
+
+.upload__container,
+.file__details {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 600px;
+    min-width: 600px;
+    border-radius: 2rem;
+    gap: 1rem;
+    padding: 1rem;
+    background-color: #ebdbb2;
+    color: #282828;
+    overflow-wrap: anywhere;
+    position: relative;
+}
+
+.file__details__text {
+    font-size: 1.5rem;
+}
+
+.file__details__button__container {
+    display: flex;
+    gap: 1rem;
+}
+
+.upload__button,
+.download__button {
+    font-size: 1.5rem;
+    padding: 1rem;
+    background-color: #282828;
+    border-radius: 16px;
+    border: 1px solid #282828;
+    color: #ebdbb2;
+    cursor: pointer;
+    transition: transform 0.3s ease-in-out;
+}
+
+.upload__button:hover,
+.download__button:hover {
+    transform: scale(1.1);
+}
+
+.upload__button {
+    position: absolute;
+    bottom: 5%;
+}
+
+.upload__input {
+    color: #282828;
+    border: 2px solid #282828;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    min-height: 300px;
+    min-width: 300px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    z-index: 2;
+    cursor: pointer;
+}
+
+.upload__input__overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #282828;
+    border: 2px solid #282828;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    min-height: 300px;
+    min-width: 300px;
+}
+
+.upload__result {
+    opacity: 0;
+    padding: 1rem;
+}
+
+.upload__result__visible {
+    opacity: 1;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+@media (max-width: 768px) {
+
+    .upload__container,
+    .file__details {
+        min-height: 400px;
+        min-width: 300px;
+        max-height: 400px;
+        max-width: 300px;
+    }
+
+    .upload__input,
+    .upload__input__overlay {
+        min-height: 100px;
+        min-width: 250px;
+        max-width: 250px;
+        padding: 0.5rem;
+    }
+
+    .upload__button,
+    .download__button {
+        font-size: 1.2rem;
+    }
+
+    .file__details__text {
+        font-size: 1.2rem;
+    }
+}
+\ No newline at end of file