Upgrade webpack config and inline svg-s

frontend/src/main.scss

@@ -0,0 +1,192 @@
+@import './styles/vars.scss';
+@import './styles/button.scss';
+@import './styles/form.scss';
+@import './styles/mixins.scss';
+@import './styles/settings.scss';
+
+@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Open+Sans&display=swap');
+
+* {
+  margin: 0;
+  box-sizing: border-box;
+  color: white;
+  font-family: 'Open Sans', sans-serif;
+
+  &::selection {
+    color: white;
+    background-color: $accent;
+  }
+}
+
+html {
+  font-size: 0.85rem;
+  @media (max-width: $breakpoint) {
+    font-size: 0.6rem;
+  }
+}
+
+img {
+  user-select: none;
+}
+
+h1 {
+  &,
+  * {
+    font-family: 'Comfortaa', sans-serif;
+  }
+  font-size: 6rem;
+  text-align: center;
+  padding-bottom: $medium-padding;
+
+  @media (max-height: $height-breakpoint) {
+    display: none;
+  }
+}
+
+h2 {
+  font-size: 4rem;
+}
+
+.red {
+  color: $red;
+  &::selection {
+    color: $accent;
+    background-color: white;
+  }
+}
+
+html,
+body,
+canvas {
+  height: 100%;
+  width: 100%;
+  background: black;
+}
+
+body {
+  overflow: hidden;
+
+  #landing-ui {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #overlay {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+
+    pointer-events: none;
+    user-select: none;
+
+    overflow: hidden;
+
+    h2 {
+      margin: $large-padding 0;
+    }
+
+    .player-tag {
+      font-size: 1.3rem;
+      position: absolute;
+      transform: translateX(-50%) translateY(-50%) rotate(-15deg);
+      transition: left 200ms, top 200ms;
+
+      div {
+        height: 3px;
+        background-color: rebeccapurple;
+      }
+    }
+
+    .ownership {
+      font-size: 1.3rem;
+      position: absolute;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    .planet-progress {
+      position: absolute;
+      top: $small-padding;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 50%;
+      display: flex;
+      $height: 8px;
+      height: $height;
+
+      border-radius: 4px;
+
+      div {
+        height: $height;
+      }
+
+      div:nth-child(1) {
+        background: rebeccapurple;
+      }
+
+      div:nth-child(2) {
+        background: gray;
+      }
+
+      div:nth-child(3) {
+        background: red;
+      }
+    }
+  }
+
+  #server-container {
+    max-height: 30vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track,
+    &::-webkit-scrollbar {
+      background-color: transparent;
+      width: 3px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: $accent;
+      border-radius: $border-radius;
+    }
+
+    transition: box-shadow $animation-time;
+    &.scroll {
+      box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4),
+        inset 0 8px 8px -8px rgba(0, 0, 0, 0.4);
+      &.top {
+        box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4);
+      }
+      &.bottom {
+        box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.4);
+      }
+    }
+  }
+
+  .full-screen-controllers {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    box-sizing: content-box;
+
+    user-select: none;
+    cursor: pointer;
+
+    padding: $medium-padding;
+    @include square($large-icon);
+    @media (max-width: $breakpoint) {
+      @include square($small-icon);
+      padding: $small-padding;
+    }
+
+    &:not(:first-child) {
+      visibility: hidden;
+    }
+  }
+}