Pulls in FPS menu so we can make edits

code/UI/MainMenu/MainMenu.razor.scss

@@ -0,0 +1,195 @@
+
+MainMenu
+{
+    background-color: #262934;
+    padding: 128px 128px;
+    opacity: 1;
+    flex-direction: column;
+    font-size: 25px;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    transition: all 0.3s ease-out;
+    color: rgba( white, 0.8 );
+
+    .background
+    {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-image: url( https://files.facepunch.com/tony/1b1311b1/boxes.webm );
+        opacity: 0.2;
+        background-size: cover;
+        filter: blur( 20px );
+        mask: linear-gradient( 45deg, white, white, black );
+        mask-scope: filter;
+        background-repeat: no-repeat;
+    }
+
+    &:intro
+    {
+        opacity: 0;
+        transform: scaleX( 1.1 );
+    }
+
+    &.ingame
+    {
+        background-color: #262934ee;
+        backdrop-filter: blur(10px);
+
+        .background
+        {
+            opacity: 0;
+        }
+    }
+
+    .scroll
+    {
+        flex-direction: column;
+        max-height: 386px;
+        overflow: scroll;
+        gap: 50px;
+    }
+
+    .spacer
+    {
+        height: 1px;
+        background-image: linear-gradient( to right, rgba( white, 0.4 ), rgba( white, 0 ) );
+        width: 512px;
+        margin: 16px 0px;
+    }
+
+    .game-title
+    {
+        font-family: Roboto Condensed;
+        font-weight: 700;
+        font-size: 70px;
+        color: rgba( white, 1 );
+        padding-bottom: 64px;
+    }
+
+    .col
+    {
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .controls
+    {
+        flex-direction: column;
+        gap: 50px;
+        align-items: flex-start;
+        text-transform: uppercase;
+
+        a, .button
+        {
+            font-family: Roboto;
+
+            &:hover
+            {
+                color: rgba( white, 1 );
+                font-weight: 900;
+                sound-in: ui.button.over;
+                cursor: pointer;
+            }
+
+            &:active
+            {
+                sound-in: ui.button.press;
+            }
+        }
+
+        .span
+        {
+            gap: 128px;
+        }
+    }
+
+    .navigator-canvas
+    {
+        flex-direction: column;
+        height: 100%;
+        flex-grow: 1;
+        flex-shrink: 0;
+    }
+
+    .navigator-body
+    {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        flex-direction: column;
+        justify-content: center;
+        transition: opacity 0.15s ease-out;
+
+        &.hidden
+        {
+            opacity: 0;
+        }
+    }
+}
+
+FormGroup
+{
+    flex-direction: column;
+    min-width: 300px;
+    gap:16px;
+}
+
+SlimPackageCard
+{
+    flex-direction: row;
+    gap: 12px;
+    align-items: center;
+
+    > i
+    {
+        &:hover
+        {
+            cursor: pointer;
+            color: white;
+            transform: scale( 1.1 );
+            sound-in: ui.button.over;
+        }
+
+        &:active
+        {
+            sound-in: ui.button.press;
+        }
+    }
+}
+
+i
+{
+    font-family: Material Icons;
+    text-transform: lowercase;
+
+    &.with-click
+    {
+        &:hover
+        {
+            cursor: pointer;
+            color: white;
+            transform: scale( 1.1 );
+            sound-in: ui.button.over;
+        }
+
+        &:active
+        {
+            sound-in: ui.button.press;
+        }
+    }
+}
+
+.avatar
+{
+    width: 64px;
+    height: 64px;
+
+    &:hover
+    {
+        border: 1px solid white;
+    }
+}