character selection work

src/assets/scss/_variables.scss

@@ -0,0 +1,11 @@
+// Colors
+$white: #fff;
+$black: #000;
+$purple: #4741e6;
+$lilac: #7B76FF;
+$light-blue: #00c2ff;
+$red: #ff0000;
+$gray: #7f7f7f;
+$gray-2: #696969;
+$dark-gray: #454545;
+$light-gray: #b1b2b5;

src/assets/scss/login.scss

@@ -0,0 +1,114 @@
+@import '@/assets/scss/main';
+
+#bg-img {
+  height: 100vh;
+  width: 100%;
+  position: absolute;
+  z-index: -1;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.content-wrapper {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+
+  .content-elements {
+    margin: 5rem 0;
+    width: inherit;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    .login-form {
+      width: inherit;
+
+      form {
+        display: grid;
+        gap: 1rem;
+        width: inherit;
+
+        .form-field {
+          display: flex;
+          flex-direction: column;
+          background-color: rgba($white, 0.5);
+          border-radius: 3px;
+          min-width: 25rem;
+          margin: 0 auto;
+
+          label {
+            color: $black;
+            background-color: rgba($white, 0.5);
+            padding: 0.25rem 0.25rem;
+            font-size: 0.875rem;
+            border-top-left-radius: 3px;
+            border-top-right-radius: 3px;
+          }
+          input {
+            background-color: transparent;
+            border: none;
+            padding: 0.3rem 0.25rem;
+            font-size: 0.875rem;
+
+            &:focus-visible {
+              outline: none;
+            }
+          }
+        }
+      }
+    }
+
+    .row-buttons {
+      display: flex;
+      justify-content: center;
+      gap: 0.5rem;
+
+      .button {
+        padding: 0.6rem 0;
+        min-width: 6.25rem;
+        text-align: center;
+        position: relative;
+        font-size: 0.65rem;
+        background-color: rgba($purple, 0.75);
+        border: rgba($white, 0.35) 1px solid;
+        border-radius: 5px;
+
+        span {
+          color: $white;
+          margin: auto;
+        }
+
+        &:hover {
+          background-color: rgba($lilac, 0.75);
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+
+.main-title {
+  margin-top: 7rem;
+  text-align: center;
+  font-size: 3rem;
+  color: $white;
+  text-shadow: -1px -1px 0 $gray, 1px -1px 0 $gray, -1px 1px 0 $gray, 1px 1px 0 $gray;
+}
+
+p, a, li, label {
+  font-family: Arial, sans-serif;
+  color: $white;
+}
+
+button {
+  background-color: transparent;
+  border: none;
+}
+
+a {
+  text-decoration: none;
+}

src/assets/scss/main.scss

@@ -0,0 +1,26 @@
+@import "@/assets/scss/_variables";
+
+// Fonts
+@font-face {
+    font-family: GentiumPlus;
+    src: url('@/assets/fonts/Gentium_plus.ttf');
+}
+
+body {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    background: $black;
+
+    // Disable selection, might wanna comment when debugging
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: GentiumPlus, serif;
+}
+
+::-webkit-scrollbar {
+    display: none;
+}