1 files changed, 74 insertions, 0 deletions
diff --git a/client-web/style/start.sass b/client-web/style/start.sass
new file mode 100644
index 0000000..19d80e6
--- /dev/null
+++ b/client-web/style/start.sass
@@ -0,0 +1,74 @@
+.start-box
+    text-align: center
+    position: absolute
+    max-width: 64em
+
+    .instructions
+        margin-bottom: 0.5em
+        font-size: x-large
+        color: #c5c5c5
+        text-align: left
+
+    input[type="text"]
+        margin: 2em 0 1em 0
+        width: 25em
+        font-weight: 500
+        color: whitesmoke
+        border: 0.15em solid var(--ac)
+        background-color: rgba(0, 0, 0, 0.3)
+        backdrop-filter: blur(5px)
+        border-radius: 0.5em
+        outline: none
+
+    input[type="text"]:focus
+        transition: 0.1s ease-out
+        background-color: rgba(0, 0, 0, 0.5)
+        border-color: lightgray !important
+
+    input[type="button"]
+        margin: 1em 0 1em 0
+        border-radius: 0.5em
+        font-size: x-large
+        width: 12em
+        padding: 0.5em
+        font-weight: 500
+        color: white
+        background-color: var(--ac)
+        backdrop-filter: blur(5px)
+        border: 0
+        cursor: pointer
+        border: 0.15em solid var(--ac)
+
+    .description
+        margin-bottom: 1.5em
+        font-size: x-large
+        font-weight: bold
+        text-align: center
+    
+    #room-id-input
+        padding: 0.5em
+        font-size: x-large
+
+    @media (max-width: 1100px)
+        max-width: 90%
+        input[type="text"]
+            width: 90%
+
+    @media (max-width: 900px) and (max-height: 700px), (max-height: 550px)
+        h1
+            font-size: 3em
+            font-weight: 700
+            text-align: center
+
+        .instructions
+            font-size: large
+
+        .description
+            font-size: large
+
+        #room-id-input
+            padding: 0.5em
+            font-size: large
+
+        input[type="button"]
+            font-size: large