styles

styles/app.styl

@@ -0,0 +1,42 @@
+@require './backgorund.styl'
+@require './content.styl'
+@require './form.styl'
+@require './inputs.styl'
+@require './menu.styl'
+@require './sets.styl'
+@require './utils.styl'
+
+*
+    font-smooth: auto
+    -webkit-font-smoothing: antialiased
+    -moz-osx-font-smoothing: auto
+
+html
+    margin: 0
+    padding: 0
+    overflow: hidden
+    // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+    // font-family: 'Nunito', sans-serif
+    font-family: 'Space Mono', monospace
+    background-color: #000000
+
+.grecaptcha-badge
+	visibility: hidden
+
+.grc
+    font-size: .75em
+    color: #fffd
+    max-width: 35em
+    padding: .5em
+    border: 2px solid
+    margin-top: .5em
+
+a
+    color: inherit;
+    text-decoration: inherit;
+    margin-top: .5em;
+    display: inline-block;
+    border-bottom: 1px solid white;
+    font-weight: bold;
+
+    underline()

styles/backgorund.styl

@@ -0,0 +1,5 @@
+#bg
+    position: fixed
+    top: 0
+    left: 0
+    z-index: -1

styles/content.styl

@@ -0,0 +1,31 @@
+$mt=5em
+$mb=3em
+
+.container
+    z-index: 0
+    position: relative
+    height: 100vh
+    overflow: auto
+    padding: $mt 0 $mb 0
+    display: flex
+
+    &>*
+        color: white
+        max-width: 45em
+        margin: 0 auto
+        padding: 1em 1.5em
+        width: 100%
+        height: max-content
+        background: hsla(0, 0%, 0%, 0.75)
+        background: linear-gradient(90deg, #0000 0%, #000d 1em, #000d calc(100% - 1em), #0000 100%)
+
+        &.color
+            // background: hsl(202, 68%, 25%)
+            background: hsl(319, 77%, 36%)
+
+        &.center
+            margin auto
+            padding-bottom: $mt - $mb
+            
+            
+        

styles/form.styl

@@ -0,0 +1,3 @@
+form>div.body
+    border: 2px solid
+    padding: .5em

styles/inputs.styl

@@ -0,0 +1,39 @@
+@require './utils.styl'
+
+textarea
+    resize: vertical
+    max-height: 8em
+    min-height: 2em
+
+input, textarea, label.file
+    display: inline-block
+    width: 100%
+    padding: .25em 0 
+    margin: 0
+    margin-bottom: 1em
+    background: none
+    outline: none
+    border: none
+    color: inherit
+    border-bottom: 2px solid
+    cursor: pointer
+    
+    underline()
+
+    &::placeholder
+        color: #bbb
+
+    &[type="submit"], &[type="button"], &.file
+        padding: .5em 1em
+        width: initial
+        border: 2px solid
+        margin-bottom: 0
+        margin-top: .5em
+    
+    &[type="file"]
+        display: none
+
+label
+    &>small 
+        // font-size: 1em
+        font-weight: bold

styles/menu.styl

@@ -0,0 +1,39 @@
+$foregound=#ffffff
+
+menu-item-hover()
+    box-shadow: 0 1em 0 -.75em $foregound
+    box-sizing: content-box
+    transform: translateY(.25em)
+
+nav.main
+    font-family: 'Space Mono', monospace
+    position: fixed
+    top: 0
+    left: 0
+    z-index: 5
+    width: 100vw
+    padding: 1.5em
+    background: rgb(0,0,0)
+    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%)
+
+    .left
+        color: $foregound
+        font-weight: bold
+        font-size: 2em
+        cursor pointer
+
+    .right
+        &>div
+            color: $foregound
+            padding: .5em 0.75em
+            font-weight: bold
+            box-sizing: content-box
+            cursor pointer
+            transition: all ease 100ms
+
+            &:hover
+                menu-item-hover()
+        
+        &:not(:hover)
+            &>.active
+                menu-item-hover()

styles/sets.styl

@@ -0,0 +1,12 @@
+.sets
+    
+    iframe
+        border: 0
+    
+    ul
+        list-style: none
+        padding: 0
+        margin: 0
+
+        li
+            margin-top: 2em

styles/utils.styl

@@ -0,0 +1,5 @@
+underline()
+    transition: all linear 100ms
+    
+    &:hover, &:focus
+        box-shadow: 0 4px 0px 0px