Upgrade webpack config and inline svg-s

frontend/src/styles/main.scss

@@ -1,191 +0,0 @@
-@import './vars.scss';
-@import './button.scss';
-@import './form.scss';
-@import './mixins.scss';
-@import './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: 2px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: $accent;
-      border-radius: $border-radius;
-    }
-
-    &.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;
-    }
-  }
-}