restruct: packages versions upgrade

src/styles/_global.scss

@@ -0,0 +1,133 @@
+@use "sass:color";
+
+body,
+html {
+  margin: 0;
+  background-color: #1e2341;
+  color: white;
+  box-sizing: border-box;
+  font-size: 16px;
+
+  @media screen and (max-width: 700px) {
+    font-size: calc(0.7vw + 0.7rem);
+  }
+}
+
+#app {
+  padding: 0 0.25em;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
+
+a:visited {
+  color: rgb(124, 164, 218);
+}
+
+* {
+  font-family: 'Inter', sans-serif;
+  box-sizing: inherit;
+}
+
+button,
+select,
+input {
+  font-size: inherit;
+}
+
+button {
+  $color: #3c5a89;
+
+  appearance: none;
+  outline: none;
+  border: none;
+
+  background-color: $color;
+  color: white;
+
+  padding: 0.5em 0.5em;
+
+  font-weight: bold;
+  font-size: 0.9em;
+
+  cursor: pointer;
+  transition: all 75ms;
+
+  &:hover:not([data-disabled='true']),
+  &:focus-visible {
+    background-color: color.adjust($color, $lightness: 10%);
+  }
+
+  &[data-disabled='true'] {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    color: #999;
+  }
+
+  &.btn--icon {
+    background-color: transparent;
+    padding: 0;
+  }
+
+  &:focus-visible {
+    outline: 1px solid gold;
+  }
+}
+
+// Text
+.text {
+  &--accent {
+    color: gold;
+  }
+}
+
+// Card modal
+.g-card {
+  position: fixed;
+  z-index: 999;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 90vw;
+  max-width: 550px;
+
+  padding: 0.5em 1em;
+
+  border-radius: 1em;
+
+  background-color: #1d1c33;
+  box-shadow: 0 0 6px 1px #414141;
+}
+
+// Scrollbar
+/* width */
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #333;
+}
+
+/* Corner */
+::-webkit-scrollbar-corner {
+  background: #333;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 1rem;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #aaa;
+}