diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 00000000..da5be704
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,28 @@
+const globals = {
+  _testGlobals: 'readonly'
+}
+;`togglenavbar,
+searchUser,
+searchMaps,
+searchUsers,
+createState`.split(',').forEach(name => {
+    globals[name] = true
+  })
+module.exports = {
+  extends: [
+    'plugin:jquery/deprecated',
+    'plugin:vue/recommended',
+    'standard-with-typescript'
+  ],
+  parserOptions: {
+    project: './tsconfig.json'
+  },
+  plugins: [
+    'jquery'
+  ],
+  rules: {
+    // disable the rule for all files
+    '@typescript-eslint/explicit-function-return-type': 'off'
+  },
+  globals
+}
diff --git a/.gitignore b/.gitignore
index 09ffb221..d5d45e2b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -139,7 +139,19 @@ cython_debug/
 
 # Project specific
 config.py
-.vscode/
 .data/*
 !.data/backgrounds/.gitkeep
 !.data/banners/.gitkeep
+
+node_modules/
+package-lock.json
+yarn.lock
+
+.vscode/launch.json
+
+# js utils config
+config.js
+# compiled locales
+.locales
+
+.DS_Store
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 00000000..a79b1348
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,9 @@
+{
+    "recommendations": [
+        "samuelcolvin.jinjahtml",
+        "lokalise.i18n-ally",
+        "ms-python.vscode-pylance",
+        "ms-python.python",
+        "emeraldwalk.RunOnSave"
+    ]
+}
\ No newline at end of file
diff --git a/.vscode/i18n-ally-custom-framework.yml b/.vscode/i18n-ally-custom-framework.yml
new file mode 100644
index 00000000..8fe16edf
--- /dev/null
+++ b/.vscode/i18n-ally-custom-framework.yml
@@ -0,0 +1,29 @@
+# .vscode/i18n-ally-custom-framework.yml
+
+# An array of strings which contain Language Ids defined by VS Code
+# You can check avaliable language ids here: https://code.visualstudio.com/docs/languages/overview#_language-id
+languageIds:
+  - html
+  - jinja-html
+  - python
+
+# An array of RegExes to find the key usage. **The key should be captured in the first match group**.
+# You should unescape RegEx strings in order to fit in the YAML file
+# To help with this, you can use https://www.freeformatter.com/json-escape.html
+usageMatchRegex:
+  # The following example shows how to detect `t("your.i18n.keys")`
+  # the `{key}` will be placed by a proper keypath matching regex,
+  # you can ignore it and use your own matching rules as well
+  - "[^\\w\\d]t\\('({key})'"
+  - "[^\\w\\d]t\\(\"({key})\""
+  - "[^\\w\\d]t\\(`({key})`"
+
+# An array of strings containing refactor templates.
+# The "$1" will be replaced by the keypath specified.
+# Optional: uncomment the following two lines to use
+
+refactorTemplates:
+  - t("$1")
+
+# If set to true, only enables this custom framework (will disable all built-in frameworks)
+monopoly: true
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..477cff42
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,64 @@
+{
+  "i18n-ally.namespace": true,
+  "i18n-ally.pathMatcher": "{namespaces}/{locale}.{ext}",
+  "i18n-ally.localesPaths": ["locales/default", "locales/ppy.sb"],
+  "i18n-ally.extract.keygenStyle": "kebab-case",
+  "i18n-ally.translate.engines": ["google"],
+  "i18n-ally.extract.keyMaxLength": 50,
+  "i18n-ally.extract.parsers.html": {
+    "attributes": [
+      "text",
+      "title",
+      "alt",
+      "placeholder",
+      "label",
+      "aria-label",
+      "content",
+      "empty-text",
+      "prev-text",
+      "next-text",
+      "confirmText",
+      "range-separator",
+      "start-placeholder",
+      "end-placeholder"
+    ],
+    "ignoredTags": ["script", "style"],
+    "vBind": true,
+    "inlineText": true
+  },
+  "i18n-ally.extract.autoDetect": true,
+  // Make sure that particular refactoring templates would be picked up be the bulk extraction depending on the context
+  "i18n-ally.refactor.templates": [
+    {
+      // affect scope (optional)
+      // see https://github.com/lokalise/i18n-ally/blob/master/src/core/types.ts#L156-L156
+      "source": "html-inline",
+      "templates": ["t('{key}'{args})", "t(\"{key}\"{args})"],
+      // accept globs, resolved to project root (optional)
+      "include": ["templates/**/*.html"]
+    },
+    {
+      "templates": ["t('{key}'{args})", "t(\"{key}\"{args})"],
+      "include": ["blueprints/**/*.py", "objects/**/*.py", "constants/**/*.py"]
+    }
+    // ...
+  ],
+  "i18n-ally.keystyle": "nested",
+  "emeraldwalk.runonsave": {
+    "commands": [
+      {
+        "match": ".(yml|yaml)$",
+        "cmd": "yarn i18n:build"
+      },
+      {
+        "match": ".html$",
+        "cmd": "yarn i18n:format:templates"
+      }
+    ]
+  },
+  "files.associations": {
+    "*.html": "jinja-html"
+  },
+  "python.formatting.provider": "black",
+  "githubPullRequests.ignoredPullRequestBranches": ["main"]
+}
diff --git a/README.md b/README.md
index 3fbbb292..832c93bb 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,14 @@
 Table of Contents
 ==================
+
 - [Table of Contents](#table-of-contents)
   - [What is guweb?](#what-is-guweb)
   - [Requirements](#requirements)
   - [Setup](#setup)
+  - [Prepare Locales](#prepare-locales)
+    - [requirements](#requirements-1)
+    - [prepare](#prepare)
+    - [how to](#how-to)
   - [Directory Structure](#directory-structure)
   - [The team](#the-team)
   - [The End](#the-end)
@@ -11,7 +16,7 @@ Table of Contents
 What is guweb?
 ------
 
-guweb is the front-facing appearance of the osu! server protocol, [gulag](https://github.com/cmyui/gulag)!
+guweb is the front-facing appearance of the osu! server protocol, [bancho.py](https://github.com/cmyui/bancho.py)!
 Using native async/await syntax written on top of [Quart](https://github.com/pgjones/quart) and
 [cmyui's multipurpose library](https://github.com/cmyui/cmyui_pkg), guweb achieves flexability, cleanliness,
 and efficiency not seen in other frontend implementations - all while maintaining the simplicity of Python.
@@ -22,6 +27,7 @@ Requirements
 - Some know-how with Linux (tested on Ubuntu 18.04), Python, and general-programming knowledge.
 - MySQL
 - NGINX
+- NodeJS
 
 Setup
 ------
@@ -41,8 +47,13 @@ wget https://bootstrap.pypa.io/get-pip.py
 python3.9 get-pip.py && rm get-pip.py
 
 # Install MySQL and NGINX.
+
 sudo apt install mysql-server nginx
 
+
+# Install Nodejs and npm or yarn
+# see https://nodejs.org/en/download/ .
+
 # Clone guweb from GitHub.
 git clone https://github.com/varkaria/guweb.git
 cd guweb
@@ -53,20 +64,51 @@ git submodule init && git submodule update
 # Install requirements from pip.
 python3.9 -m pip install -r ext/requirements.txt
 
+
 # Add and configure guweb's NGINX config to your nginx/sites-enabled.
 sudo ln -r -s ext/nginx.conf /etc/nginx/sites-enabled/guweb.conf
 sudo nano ext/nginx.conf
 sudo nginx -s reload
 
+
 # Configure guweb.
 cp ext/config.sample.py config.py
 nano config.py
 
+# Configure locales
+cp config.sample.js config.js
+# edit the copied file to meet yor needs
+
+
+# build locales
+npm run i18n:build 
+# or use yarn
+yarn i18n:c
+
 # Run guweb (on port 8000).
 python3.9 main.py # Run directly to access debug features for development!
 hypercorn main.py # Please run guweb with hypercorn when in production! It will improve performance drastically by disabling all of the debug features a developer would need!
 ```
 
+Prepare Locales
+------
+
+### requirements
+
+- VSCode (recommend)
+- VSCode plugin: i18n-ally (recommend)
+- Node
+  
+### prepare
+
+`npm install -D`
+
+### how to
+
+- open any html files with i18n-ally plugin enabled.
+- translate keys
+- run `npm run i18n:build` to generate files for python-i18n
+
 Directory Structure
 ------
 
@@ -76,16 +118,18 @@ Directory Structure
     ├── ext          # External files from guweb's primary operation.
     ├── objects      # Code for representing privileges, global objects, and more.
     ├── static       # Code or content that is not modified or processed by guweb itself.
+    ├── locales      # translations
     ├── templates    # HTML that contains content that is rendered after the page has loaded.
         ├── admin    # Templated content for the admin panel (/admin).
         ├── settings # Templated content for settings (/settings).
         └ ...         # Templated content for all of guweb (/).
 
-
 The team
 ------
+
 - [Yoru](https://github.com/Yo-ru) | Backend, Grammar Checking [Deprecated]
 - [Varkaria](https://github.com/Varkaria) | Frontend, Backend?
+- [ppysb-Team](https://github.com/ppy-sb) | i18n, Maintainer
 
 The End
 ------
diff --git a/blueprints/admin.py b/blueprints/admin.py
index a7585450..e2bab054 100644
--- a/blueprints/admin.py
+++ b/blueprints/admin.py
@@ -2,47 +2,250 @@
 
 __all__ = ()
 
-import datetime
-
-import timeago
+import bcrypt
+import hashlib
+from functools import wraps
+import hashlib
 from quart import Blueprint
 from quart import render_template
 from quart import session
-
+from quart import request
+from quart import redirect
 from objects import glob
+from constants.privileges import Privileges
 from objects.utils import flash
+from objects import varka
+from objects.glob import t
+from osrparse import Replay
+import datetime
+import timeago
 
-admin = Blueprint('admin', __name__)
 
-@admin.route('/')
-@admin.route('/home')
-@admin.route('/dashboard')
-async def home():
-    """Render the homepage of guweb's admin panel."""
-    if not 'authenticated' in session:
-        return await flash('error', 'Please login first.', 'login')
+admin = Blueprint("admin", __name__)
+
+
+def dict_cmp(a: dict, b: dict):
+    cmp = a.items() - b.items()
+    return dict(cmp)
+
+
+async def get(table_name: str, id: str):
+    data = await varka.get_data(table_name, id)
+    return data
+
 
-    if not session['user_data']['is_staff']:
-        return await flash('error', f'You have insufficient privileges.', 'home')
+def priv_check(priv: Privileges):
+    def decorate(func):
+        @wraps(func)
+        async def wrapper(*args, **kwargs):
+            if not "authenticated" in session:
+                return await flash("error", t("admin.please-login-in-first"), "login")
+            if not session["user_data"]["priv"] & priv:
+                return await flash(
+                    "error", t("admin.you-have-sufficient-privileges"), "home"
+                )
+            return await func(*args, **kwargs)
 
+        return wrapper
+
+    return decorate
+
+
+@admin.route("/")
+@admin.route("/home")
+@admin.route("/dashboard")
+@priv_check(priv=Privileges.Staff)
+async def home():
     # fetch data from database
     dash_data = await glob.db.fetch(
-        'SELECT COUNT(id) count, '
-        '(SELECT name FROM users ORDER BY id DESC LIMIT 1) lastest_user, '
-        '(SELECT COUNT(id) FROM users WHERE NOT priv & 1) banned '
-        'FROM users'
+        "SELECT COUNT(id) count, "
+        "(SELECT name FROM users ORDER BY id DESC LIMIT 1) lastest_user, "
+        "(SELECT COUNT(id) FROM users WHERE NOT priv & 1) banned "
+        "FROM users"
     )
 
-    recent_users = await glob.db.fetchall('SELECT * FROM users ORDER BY id DESC LIMIT 5')
+    recent_users = await glob.db.fetchall(
+        "SELECT * FROM users ORDER BY id DESC LIMIT 5"
+    )
     recent_scores = await glob.db.fetchall(
-        'SELECT scores.*, maps.artist, maps.title, '
-        'maps.set_id, maps.creator, maps.version '
-        'FROM scores JOIN maps ON scores.map_md5 = maps.md5 '
-        'ORDER BY scores.id DESC LIMIT 5'
+        "SELECT scores.*, maps.artist, maps.title, "
+        "maps.set_id, maps.creator, maps.version "
+        "FROM scores JOIN maps ON scores.map_md5 = maps.md5 "
+        "ORDER BY scores.id DESC LIMIT 5"
+    )
+
+    return await render_template(
+        "admin/home.html",
+        dashdata=dash_data,
+        recentusers=recent_users,
+        recentscores=recent_scores,
+        datetime=datetime,
+        timeago=timeago,
     )
 
+
+@admin.route("/restrictions", methods=["GET", "POST"])
+@priv_check(priv=Privileges.Staff)
+async def restrictions():
     return await render_template(
-        'admin/home.html', dashdata=dash_data,
-        recentusers=recent_users, recentscores=recent_scores,
-        datetime=datetime, timeago=timeago
+        "/admin/restrictions.html", query_data=await varka.get_res_users()
     )
+
+
+@admin.route("/users", methods=["GET"])
+@priv_check(priv=Privileges.Staff)
+async def users():
+    query_data = await varka.get_users()
+    return await render_template("/admin/users/index.html", query_data=query_data)
+
+
+@admin.route("/users/search/<q>", methods=["GET"])
+@priv_check(priv=Privileges.Staff)
+async def users_search(q: str):
+    query_data = await varka.get_users(search=q)
+    return await render_template(
+        "/admin/users/index.html", query_data=query_data, search_value=q
+    )
+
+
+@admin.route("/user/<id>/edit")
+@priv_check(priv=Privileges.Staff)
+async def users_edit(id: int):
+    query = await varka.get_user(id)
+    return await render_template("admin/users/edit.html", search_data=query)
+
+
+@admin.route("/user/<id>/update", methods=["POST"])  # POST
+@priv_check(priv=Privileges.Staff)
+async def users_update(id: int):
+    try:
+        form = await request.form
+        datadef: dict = await get("users", id)
+        data = dict(
+            name=form["edit-username"],
+            safe_name=form["edit-username"].lower().replace(" ", "_"),
+            email=form["edit-email"],
+            country=form["edit-country"],
+        )
+        if form["legality"] == "restricted":
+            data["priv"] = 2
+        elif datadef["priv"] == 2 and form["legality"] == "unrestricted":
+            data["priv"] = 3
+        if form["password"] != "":
+            pw_md5 = hashlib.md5(form["password"].encode()).hexdigest().encode()
+            pw_bcrypt = bcrypt.hashpw(pw_md5, bcrypt.gensalt())
+            await glob.db.execute(
+                "UPDATE users " "SET pw_bcrypt = %s " "WHERE id = %s", [pw_bcrypt, id]
+            )
+        await varka.update("users", ("id", id), **dict_cmp(data, datadef))
+        return redirect(f"/admin/users/search/{id}")
+    except:
+        return redirect("/admin/users")
+
+
+@admin.route("/beatmaps")
+@priv_check(priv=Privileges.Nominator | Privileges.Dangerous)
+async def beatmaps():
+    query = await glob.db.fetch(
+        "SELECT (SELECT COUNT(id) as `r` FROM maps WHERE `status`= 2) AS `r`, "
+        "(SELECT COUNT(id) as `l` FROM maps WHERE `status`= 5) AS `l`, "
+        "(SELECT COUNT(id) as `p` FROM maps WHERE `status`= 0) AS `p`, "
+        "(SELECT COUNT(id) as `t` FROM maps) `t`"
+    )
+    counts = {
+        "ranked": query["r"],
+        "loved": query["l"],
+        "pending": query["p"],
+        "total": query["t"],
+    }
+    # This thing needs to be moved to API
+    beatmaps = await glob.db.fetchall(
+        "SELECT set_id, id AS `map_id`, status, "
+        "artist, title, version AS `diff_name`, "
+        "total_length AS length, creator, mode, "
+        "cs, od, ar, hp, bpm, ROUND(diff, 2) AS `stars` "
+        "FROM maps ORDER BY id DESC "
+        "LIMIT 50"
+    )
+    return await render_template(
+        "admin/beatmaps.html", counts=counts, bmap_query=beatmaps
+    )
+
+
+@admin.route("/beatmaps/search/<q>")
+@priv_check(priv=Privileges.Nominator | Privileges.Dangerous)
+async def beatmaps_search(q: str):
+    query = await glob.db.fetch(
+        "SELECT (SELECT COUNT(id) as `r` FROM maps WHERE `status`= 2) AS `r`, "
+        "(SELECT COUNT(id) as `l` FROM maps WHERE `status`= 5) AS `l`, "
+        "(SELECT COUNT(id) as `p` FROM maps WHERE `status`= 0) AS `p`, "
+        "(SELECT COUNT(id) as `t` FROM maps) `t`"
+    )
+    counts = {
+        "ranked": query["r"],
+        "loved": query["l"],
+        "pending": query["p"],
+        "total": query["t"],
+    }
+    numq = int(q) if q.isdigit() else 0
+    beatmaps = await glob.db.fetchall(
+        "SELECT set_id, id AS `map_id`, status, "
+        "artist, title, version AS `diff_name`, "
+        "total_length AS length, creator, mode, "
+        "cs, od, ar, hp, bpm, ROUND(diff, 2) AS `stars` "
+        "FROM maps WHERE id=%s OR set_id=%s OR title like %s ORDER BY id DESC "
+        "LIMIT 50 OFFSET 0",
+        [numq, numq, q + "%"],
+    )
+    return await render_template(
+        "admin/beatmaps.html", counts=counts, bmap_query=beatmaps, search_word=q
+    )
+
+
+@admin.route("/beatmaps/edit/<id>")
+@priv_check(priv=Privileges.Nominator | Privileges.Dangerous)
+async def beatmaps_edit(id: int):
+    status = request.args.get("status", type=int)
+    is_set = request.args.get("set", type=int) == 1
+    if is_set:
+        await glob.db.execute(
+            "UPDATE maps SET frozen=1, status=%s WHERE set_id=%s",
+            [str(status), str(id)],
+        )
+    else:
+        await glob.db.execute(
+            "UPDATE maps SET frozen=1, status=%s WHERE id=%s", [str(status), str(id)]
+        )
+    return redirect("/admin/beatmaps/search/" + id)
+
+
+@admin.route("/replays/parse", methods=["POST"])
+async def replays_parse():
+    file = (await request.files)["replay_file"]
+    if file is None:
+        return {"status": 300, "msg": "Replay is not exists in multipart."}
+    try:
+        replay = Replay.from_file(file)
+        timestamp = replay.timestamp.timestamp()
+    except:
+        return {"status": 400, "msg": "Failed to parse the replay file."}
+    return {
+        "status": 200,
+        "replay": {
+            "map_md5": replay.beatmap_hash,
+            "score": replay.score,
+            "max_combo": replay.max_combo,
+            "mods": replay.mods.value,
+            "n300": replay.count_300,
+            "n100": replay.count_100,
+            "n50": replay.count_50,
+            "nmiss": replay.count_miss,
+            "ngeki": replay.count_geki,
+            "nkatu": replay.count_katu,
+            "mode": replay.mode.value,
+            "playtime": int(timestamp),
+            "replay_id": replay.replay_id,
+            "perfect": replay.perfect,
+            "username": replay.username,
+        },
+    }
diff --git a/blueprints/frontend.py b/blueprints/frontend.py
index f4603eec..6e9e5306 100644
--- a/blueprints/frontend.py
+++ b/blueprints/frontend.py
@@ -6,7 +6,7 @@
 import hashlib
 import os
 import time
-
+import uuid
 from cmyui.logging import Ansi
 from cmyui.logging import log
 from functools import wraps
@@ -18,92 +18,119 @@
 from quart import request
 from quart import session
 from quart import send_file
-
 from constants import regexes
 from objects import glob
 from objects import utils
-from objects.privileges import Privileges
+from constants.privileges import Privileges
 from objects.utils import flash
 from objects.utils import flash_with_customizations
+from objects.glob import t
+from objects.varka import search_user
+
+VALID_MODES = frozenset({"std", "taiko", "catch", "mania"})
+VALID_MODS = frozenset({"vn", "rx", "ap"})
 
-VALID_MODES = frozenset({'std', 'taiko', 'catch', 'mania'})
-VALID_MODS = frozenset({'vn', 'rx', 'ap'})
+frontend = Blueprint("frontend", __name__)
 
-frontend = Blueprint('frontend', __name__)
 
 def login_required(func):
     @wraps(func)
     async def wrapper(*args, **kwargs):
         if not session:
-            return await flash('error', 'You must be logged in to access that page.', 'login')
+            return await flash(
+                "error", t("global.you-must-be-logged-in-to-access-this-page"), "login"
+            )
         return await func(*args, **kwargs)
+
     return wrapper
 
-@frontend.route('/home')
-@frontend.route('/')
+
+@frontend.route("/home")
+@frontend.route("/")
 async def home():
-    return await render_template('home.html')
+    return await render_template("home.html")
 
-@frontend.route('/home/account/edit')
+
+@frontend.route("/home/account/edit")
 async def home_account_edit():
-    return redirect('/settings/profile')
+    return redirect("/settings/profile")
+
 
-@frontend.route('/settings')
-@frontend.route('/settings/profile')
+@frontend.route("/settings")
+@frontend.route("/settings/profile")
 @login_required
 async def settings_profile():
-    return await render_template('settings/profile.html')
+    return await render_template("settings/profile.html")
+
 
-@frontend.route('/settings/profile', methods=['POST'])
+@frontend.route("/settings/profile", methods=["POST"])
 @login_required
 async def settings_profile_post():
     form = await request.form
 
-    new_name = form.get('username', type=str)
-    new_email = form.get('email', type=str)
+    new_name = form.get("username", type=str)
+    new_email = form.get("email", type=str)
 
     if new_name is None or new_email is None:
-        return await flash('error', 'Invalid parameters.', 'home')
+        return await flash("error", t("global.invalid-parameters"), "home")
 
-    old_name = session['user_data']['name']
-    old_email = session['user_data']['email']
+    old_name = session["user_data"]["name"]
+    old_email = session["user_data"]["email"]
 
     # no data has changed; deny post
-    if (
-        new_name == old_name and
-        new_email == old_email
-    ):
-        return await flash('error', 'No changes have been made.', 'settings/profile')
+    if new_name == old_name and new_email == old_email:
+        return await flash(
+            "error", t("settings.profile.no-changes-have-been-made"), "settings/profile"
+        )
 
     if new_name != old_name:
-        if not session['user_data']['is_donator']:
-            return await flash('error', 'Username changes are currently a supporter perk.', 'settings/profile')
-
         # Usernames must:
         # - be within 2-15 characters in length
         # - not contain both ' ' and '_', one is fine
         # - not be in the config's `disallowed_names` list
         # - not already be taken by another player
+        if (
+            not session["user_data"]["priv"] & Privileges.Supporter
+            and glob.config.name_change_only_for_supporter
+        ):
+            return await flash(
+                "error", t("username-changes-supporter-only"), "settings/profile"
+            )
+
         if not regexes.username.match(new_name):
-            return await flash('error', 'Your new username syntax is invalid.', 'settings/profile')
+            return await flash(
+                "error",
+                t("settings.profile.new-username-is-invalid"),
+                "settings/profile",
+            )
 
-        if '_' in new_name and ' ' in new_name:
-            return await flash('error', 'Your new username may contain "_" or " ", but not both.', 'settings/profile')
+        if "_" in new_name and " " in new_name:
+            return await flash(
+                "error",
+                t("settings.profile.new-username-cannot-contains-both-dash-and-space"),
+                "settings/profile",
+            )
 
         if new_name in glob.config.disallowed_names:
-            return await flash('error', "Your new username isn't allowed; pick another.", 'settings/profile')
+            return await flash(
+                "error",
+                t("settings.profile.new-username-disallowed"),
+                "settings/profile",
+            )
 
-        if await glob.db.fetch('SELECT 1 FROM users WHERE name = %s', [new_name]):
-            return await flash('error', 'Your new username already taken by another user.', 'settings/profile')
+        if await glob.db.fetch("SELECT 1 FROM users WHERE name = %s", [new_name]):
+            return await flash(
+                "error",
+                t("settings.profile.new-username-already-taken-by-others"),
+                "settings/profile",
+            )
 
         safe_name = utils.get_safe_name(new_name)
 
         # username change successful
         await glob.db.execute(
-            'UPDATE users '
-            'SET name = %s, safe_name = %s '
-            'WHERE id = %s',
-            [new_name, safe_name, session['user_data']['id']]
+            "UPDATE users " "SET name = %s, safe_name = %s " "WHERE id = %s",
+            [new_name, safe_name, session["user_data"]["id"]],
         )
 
     if new_email != old_email:
@@ -111,30 +138,34 @@ async def settings_profile_post():
         # - match the regex `^[^@\s]{1,200}@[^@\s\.]{1,30}\.[^@\.\s]{1,24}$`
         # - not already be taken by another player
         if not regexes.email.match(new_email):
-            return await flash('error', 'Your new email syntax is invalid.', 'settings/profile')
+            return await flash(
+                "error", t("settings.profile.new-email-is-invalid"), "settings/profile"
+            )
 
-        if await glob.db.fetch('SELECT 1 FROM users WHERE email = %s', [new_email]):
-            return await flash('error', 'Your new email already taken by another user.', 'settings/profile')
+        if await glob.db.fetch("SELECT 1 FROM users WHERE email = %s", [new_email]):
+            return await flash("error", "", "settings/profile")
 
         # email change successful
         await glob.db.execute(
-            'UPDATE users '
-            'SET email = %s '
-            'WHERE id = %s',
-            [new_email, session['user_data']['id']]
+            "UPDATE users " "SET email = %s " "WHERE id = %s",
+            [new_email, session["user_data"]["id"]],
         )
 
     # logout
-    session.pop('authenticated', None)
-    session.pop('user_data', None)
-    return await flash('success', 'Your username/email have been changed! Please login again.', 'login')
+    session.pop("authenticated", None)
+    session.pop("user_data", None)
+    return await flash(
+        "success", t("settings.profile.succeed-please-login-again"), "login"
+    )
+
 
-@frontend.route('/settings/avatar')
+@frontend.route("/settings/avatar")
 @login_required
 async def settings_avatar():
-    return await render_template('settings/avatar.html')
+    return await render_template("settings/avatar.html")
 
-@frontend.route('/settings/avatar', methods=['POST'])
+
+@frontend.route("/settings/avatar", methods=["POST"])
 @login_required
 async def settings_avatar_post():
     # constants
@@ -142,25 +173,32 @@ async def settings_avatar_post():
     AVATARS_PATH = f'{glob.config.path_to_gulag}.data/avatars'
     ALLOWED_EXTENSIONS = ['.jpeg', '.jpg', '.png']
 
-    avatar = (await request.files).get('avatar')
+    avatar = (await request.files).get("avatar")
 
     # no file uploaded; deny post
     if avatar is None or not avatar.filename:
-        return await flash('error', 'No image was selected!', 'settings/avatar')
+        return await flash(
+            "error", t("settings.no-image-was-selected"), "settings/avatar"
+        )
 
     filename, file_extension = os.path.splitext(avatar.filename.lower())
 
     # bad file extension; deny post
     if not file_extension in ALLOWED_EXTENSIONS:
-        return await flash('error', 'The image you select must be either a .JPG, .JPEG, or .PNG file!', 'settings/avatar')
-    
-    # check file size of avatar
+        return await flash(
+            "error",
+            t("settings.bad-image-extension", something=t("settings.avatar").lower()),
+            "settings/avatar",
+        )
+        
     if avatar.content_length > MAX_IMAGE_SIZE:
         return await flash('error', 'The image you selected is too large!', 'settings/avatar')
 
     # remove old avatars
     for fx in ALLOWED_EXTENSIONS:
-        if os.path.isfile(f'{AVATARS_PATH}/{session["user_data"]["id"]}{fx}'): # Checking file e
+        if os.path.isfile(
+            f'{AVATARS_PATH}/{session["user_data"]["id"]}{fx}'
+        ):  # Checking file e
             os.remove(f'{AVATARS_PATH}/{session["user_data"]["id"]}{fx}')
 
     # avatar cropping to 1:1
@@ -168,117 +206,241 @@ async def settings_avatar_post():
 
     # avatar change success
     pilavatar = utils.crop_image(pilavatar)
-    pilavatar.save(os.path.join(AVATARS_PATH, f'{session["user_data"]["id"]}{file_extension.lower()}'))
-    return await flash('success', 'Your avatar has been successfully changed!', 'settings/avatar')
 
-@frontend.route('/settings/custom')
+    try:
+        pilavatar.save(
+            os.path.join(
+                AVATARS_PATH, f'{session["user_data"]["id"]}{file_extension.lower()}'
+            )
+        )
+    except OSError:
+        pilavatar = pilavatar.convert("RGBA")
+        pilavatar.save(os.path.join(AVATARS_PATH, f'{session["user_data"]["id"]}.png'))
+    return await flash(
+        "success",
+        t("settings.change-succeed", something=t("settings.avatar").lower()),
+        "settings/avatar",
+    )
+
+
+@frontend.route("/settings/custom")
 @login_required
 async def settings_custom():
-    profile_customizations = utils.has_profile_customizations(session['user_data']['id'])
-    return await render_template('settings/custom.html', customizations=profile_customizations)
+    profile_customizations = utils.has_profile_customizations(
+        session["user_data"]["id"]
+    )
+    return await render_template(
+        "settings/custom.html", customizations=profile_customizations
+    )
+
 
-@frontend.route('/settings/custom', methods=['POST'])
+@frontend.route("/settings/custom", methods=["POST"])
 @login_required
 async def settings_custom_post():
     files = await request.files
-    banner = files.get('banner')
-    background = files.get('background')
-    ALLOWED_EXTENSIONS = ['.jpeg', '.jpg', '.png', '.gif']
+    banner = files.get("banner")
+    background = files.get("background")
+    ALLOWED_EXTENSIONS = [".jpeg", ".jpg", ".png", ".gif"]
 
     # no file uploaded; deny post
     if banner is None and background is None:
-        return await flash_with_customizations('error', 'No image was selected!', 'settings/custom')
+        return await flash_with_customizations(
+            "error", t("settings.no-image-was-selected"), "settings/custom"
+        )
 
     if banner is not None and banner.filename:
         _, file_extension = os.path.splitext(banner.filename.lower())
         if not file_extension in ALLOWED_EXTENSIONS:
-            return await flash_with_customizations('error', f'The banner you select must be either a .JPG, .JPEG, .PNG or .GIF file!', 'settings/custom')
+            return await flash_with_customizations(
+                "error",
+                t(
+                    "settings.bad-image-extension",
+                    something=t("settings.banner").lower(),
+                ),
+                "settings/custom",
+            )
 
-        banner_file_no_ext = os.path.join(f'.data/banners', f'{session["user_data"]["id"]}')
+        banner_file_no_ext = os.path.join(
+            f".data/banners", f'{session["user_data"]["id"]}'
+        )
 
         # remove old picture
         for ext in ALLOWED_EXTENSIONS:
-            banner_file_with_ext = f'{banner_file_no_ext}{ext}'
+            banner_file_with_ext = f"{banner_file_no_ext}{ext}"
             if os.path.isfile(banner_file_with_ext):
                 os.remove(banner_file_with_ext)
 
-        await banner.save(f'{banner_file_no_ext}{file_extension}')
+        await banner.save(f"{banner_file_no_ext}{file_extension}")
 
     if background is not None and background.filename:
         _, file_extension = os.path.splitext(background.filename.lower())
         if not file_extension in ALLOWED_EXTENSIONS:
-            return await flash_with_customizations('error', f'The background you select must be either a .JPG, .JPEG, .PNG or .GIF file!', 'settings/custom')
+            return await flash_with_customizations(
+                "error",
+                t(
+                    "settings.bad-image-extension",
+                    something=t("settings.background").lower(),
+                ),
+                "settings/custom",
+            )
 
-        background_file_no_ext = os.path.join(f'.data/backgrounds', f'{session["user_data"]["id"]}')
+        background_file_no_ext = os.path.join(
+            f".data/backgrounds", f'{session["user_data"]["id"]}'
+        )
 
         # remove old picture
         for ext in ALLOWED_EXTENSIONS:
-            background_file_with_ext = f'{background_file_no_ext}{ext}'
+            background_file_with_ext = f"{background_file_no_ext}{ext}"
             if os.path.isfile(background_file_with_ext):
                 os.remove(background_file_with_ext)
 
-        await background.save(f'{background_file_no_ext}{file_extension}')
+        await background.save(f"{background_file_no_ext}{file_extension}")
+
+    return await flash_with_customizations(
+        "success",
+        t("settings.change-succeed", something=t("settings.customization").lower()),
+        "settings/custom",
+    )
+
 
-    return await flash_with_customizations('success', 'Your customisation has been successfully changed!', 'settings/custom')
+@frontend.route("/settings/aboutme")
+@login_required
+async def settings_aboutme():
+    content = (
+        await glob.db.fetch(
+            "SELECT userpage_content FROM users WHERE id = %s",
+            [session["user_data"]["id"]],
+        )
+    )["userpage_content"]
+    content = content if content is not None else ""
+    return await render_template("settings/aboutme.html", userpage_content=content)
 
 
-@frontend.route('/settings/password')
+@frontend.route("/settings/aboutme", methods=["POST"])
+@login_required
+async def settings_aboutme_post():
+    form = await request.form
+    userpage_content = form.get("userpage_content", type=str)
+    safe_content = userpage_content.lower()
+    if "<iframe" in safe_content or "<script" in safe_content:
+        return await render_template(
+            "settings/aboutme.html",
+            flash="Not allowed method",
+            status="error",
+            userpage_content=userpage_content,
+        )
+    if len(userpage_content) > 2048:
+        return await render_template(
+            "settings/aboutme.html",
+            flash="Too long text",
+            status="error",
+            userpage_content=userpage_content,
+        )
+    await glob.db.execute(
+        "UPDATE users " "SET userpage_content = %s " "WHERE id = %s",
+        [userpage_content, session["user_data"]["id"]],
+    )
+    session["user_data"]["userpage_content"] = userpage_content
+    return await render_template(
+        "settings/aboutme.html", userpage_content=userpage_content
+    )
+
+
+@frontend.route("/settings/password")
 @login_required
 async def settings_password():
-    return await render_template('settings/password.html')
+    return await render_template("settings/password.html")
 
-@frontend.route('/settings/password', methods=["POST"])
+
+@frontend.route("/forgot")
+async def reset_password():
+    return await render_template("forgot.html")
+
+
+@frontend.route("/settings/password", methods=["POST"])
 @login_required
 async def settings_password_post():
     form = await request.form
-    old_password = form.get('old_password')
-    new_password = form.get('new_password')
-    repeat_password = form.get('repeat_password')
+    old_password = form.get("old_password")
+    new_password = form.get("new_password")
+    repeat_password = form.get("repeat_password")
 
     # new password and repeat password don't match; deny post
     if new_password != repeat_password:
-        return await flash('error', "Your new password doesn't match your repeated password!", 'settings/password')
+        return await flash(
+            "error",
+            t("settings.password.new-passoword-mismatch-repeated-password"),
+            "settings/password",
+        )
 
     # new password and old password match; deny post
     if old_password == new_password:
-        return await flash('error', 'Your new password cannot be the same as your old password!', 'settings/password')
+        return await flash(
+            "error",
+            t("settings.password.new-passoword-cannot-be-same-as-old-password"),
+            "settings/password",
+        )
 
     # Passwords must:
     # - be within 8-32 characters in length
     # - have more than 3 unique characters
     # - not be in the config's `disallowed_passwords` list
     if not 8 < len(new_password) <= 32:
-        return await flash('error', 'Your new password must be 8-32 characters in length.', 'settings/password')
+        return await flash(
+            "error",
+            t("settings.password.must-between-8-32-characters-in-length"),
+            "settings/password",
+        )
 
     if len(set(new_password)) <= 3:
-        return await flash('error', 'Your new password must have more than 3 unique characters.', 'settings/password')
+        return await flash(
+            "error",
+            t("settings.password.must-have-more-than-3-unique-characters"),
+            "settings/password",
+        )
 
     if new_password.lower() in glob.config.disallowed_passwords:
-        return await flash('error', 'Your new password was deemed too simple.', 'settings/password')
+        return await flash(
+            "error", t("settings.password.too-simple"), "settings/password"
+        )
 
     # cache and other password related information
-    bcrypt_cache = glob.cache['bcrypt']
-    pw_bcrypt = (await glob.db.fetch(
-        'SELECT pw_bcrypt '
-        'FROM users '
-        'WHERE id = %s',
-        [session['user_data']['id']])
-    )['pw_bcrypt'].encode()
+    bcrypt_cache = glob.cache["bcrypt"]
+    pw_bcrypt = (
+        await glob.db.fetch(
+            "SELECT pw_bcrypt " "FROM users " "WHERE id = %s",
+            [session["user_data"]["id"]],
+        )
+    )["pw_bcrypt"].encode()
 
     pw_md5 = hashlib.md5(old_password.encode()).hexdigest().encode()
 
     # check old password against db
     # intentionally slow, will cache to speed up
     if pw_bcrypt in bcrypt_cache:
-        if pw_md5 != bcrypt_cache[pw_bcrypt]: # ~0.1ms
+        if pw_md5 != bcrypt_cache[pw_bcrypt]:  # ~0.1ms
             if glob.config.debug:
-                log(f"{session['user_data']['name']}'s change pw failed - pw incorrect.", Ansi.LYELLOW)
-            return await flash('error', 'Your old password is incorrect.', 'settings/password')
-    else: # ~200ms
+                log(
+                    f"{session['user_data']['name']}'s change pw failed - pw incorrect.",
+                    Ansi.LYELLOW,
+                )
+            return await flash(
+                "error",
+                t("settings.password.old-password-incorrect"),
+                "settings/password",
+            )
+    else:  # ~200ms
         if not bcrypt.checkpw(pw_md5, pw_bcrypt):
             if glob.config.debug:
-                log(f"{session['user_data']['name']}'s change pw failed - pw incorrect.", Ansi.LYELLOW)
-            return await flash('error', 'Your old password is incorrect.', 'settings/password')
+                log(
+                    f"{session['user_data']['name']}'s change pw failed - pw incorrect.",
+                    Ansi.LYELLOW,
+                )
+            return await flash(
+                "error",
+                t("settings.password.old-password-incorrect"),
+                "settings/password",
+            )
 
     # remove old password from cache
     if pw_bcrypt in bcrypt_cache:
@@ -291,181 +453,193 @@ async def settings_password_post():
     # update password in cache and db
     bcrypt_cache[pw_bcrypt] = pw_md5
     await glob.db.execute(
-        'UPDATE users '
-        'SET pw_bcrypt = %s '
-        'WHERE safe_name = %s',
-        [pw_bcrypt, utils.get_safe_name(session['user_data']['name'])]
+        "UPDATE users " "SET pw_bcrypt = %s " "WHERE safe_name = %s",
+        [pw_bcrypt, utils.get_safe_name(session["user_data"]["name"])],
     )
 
     # logout
-    session.pop('authenticated', None)
-    session.pop('user_data', None)
-    return await flash('success', 'Your password has been changed! Please log in again.', 'login')
+    session.pop("authenticated", None)
+    session.pop("user_data", None)
+    return await flash(
+        "success", t("settings.change-succeed", something=t("global.password")), "login"
+    )
 
 
-@frontend.route('/u/<id>')
+@frontend.route("/u/<id>")
 async def profile_select(id):
 
-    mode = request.args.get('mode', 'std', type=str) # 1. key 2. default value
-    mods = request.args.get('mods', 'vn', type=str)
+    mode = request.args.get("mode", "std", type=str)  # 1. key 2. default value
+    mods = request.args.get("mods", "vn", type=str)
     user_data = await glob.db.fetch(
-        'SELECT name, safe_name, id, priv, country '
-        'FROM users '
-        'WHERE safe_name = %s OR id = %s LIMIT 1',
-        [utils.get_safe_name(id), id]
+        "SELECT name, safe_name, id, priv, country, userpage_content "
+        "FROM users "
+        "WHERE safe_name = %s OR id = %s LIMIT 1",
+        [utils.get_safe_name(id), id],
     )
 
-    # no user
-    if not user_data:
-        return (await render_template('404.html'), 404)
+    # no user and no bot page
+    if not user_data or user_data["id"] == 1:
+        return (await render_template("404.html"), 404)
 
     # make sure mode & mods are valid args
     if mode is not None and mode not in VALID_MODES:
-        return (await render_template('404.html'), 404)
+        return (await render_template("404.html"), 404)
 
     if mods is not None and mods not in VALID_MODS:
-        return (await render_template('404.html'), 404)
+        return (await render_template("404.html"), 404)
 
-    is_staff = 'authenticated' in session and session['user_data']['is_staff']
-    if not user_data or not (user_data['priv'] & Privileges.Normal or is_staff):
-        return (await render_template('404.html'), 404)
+    is_staff = "authenticated" in session and session["user_data"]["is_staff"]
+    if not user_data or not (user_data["priv"] & Privileges.Unrestricted or is_staff):
+        return (await render_template("404.html"), 404)
 
-    user_data['customisation'] = utils.has_profile_customizations(user_data['id'])
-    return await render_template('profile.html', user=user_data, mode=mode, mods=mods)
+    user_data["customisation"] = utils.has_profile_customizations(user_data["id"])
+    return await render_template("profile.html", user=user_data, mode=mode, mods=mods)
 
 
-@frontend.route('/leaderboard')
-@frontend.route('/lb')
-@frontend.route('/leaderboard/<mode>/<sort>/<mods>')
-@frontend.route('/lb/<mode>/<sort>/<mods>')
-async def leaderboard(mode='std', sort='pp', mods='vn'):
-    return await render_template('leaderboard.html', mode=mode, sort=sort, mods=mods)
+@frontend.route("/leaderboard")
+@frontend.route("/lb")
+@frontend.route("/leaderboard/<mode>/<sort>/<mods>")
+@frontend.route("/lb/<mode>/<sort>/<mods>")
+async def leaderboard(mode="std", sort="pp", mods="vn"):
+    return await render_template("leaderboard.html", mode=mode, sort=sort, mods=mods)
 
-@frontend.route('/login')
+
+@frontend.route("/login")
 async def login():
-    if 'authenticated' in session:
-        return await flash('error', "You're already logged in!", 'home')
+    if "authenticated" in session:
+        return await flash("error", t("global.you-are-already-logged-in"), "home")
+
+    return await render_template("login.html")
 
-    return await render_template('login.html')
 
-@frontend.route('/login', methods=['POST'])
+@frontend.route("/login", methods=["POST"])
 async def login_post():
-    if 'authenticated' in session:
-        return await flash('error', "You're already logged in!", 'home')
+    if "authenticated" in session:
+        return await flash("error", t("global.you-are-already-logged-in"), "home")
 
     if glob.config.debug:
         login_time = time.time_ns()
 
     form = await request.form
-    username = form.get('username', type=str)
-    passwd_txt = form.get('password', type=str)
+    username = form.get("username", type=str)
+    passwd_txt = form.get("password", type=str)
 
     if username is None or passwd_txt is None:
-        return await flash('error', 'Invalid parameters.', 'home')
+        return await flash("error", t("global.invalid-parameters"), "home")
 
     # check if account exists
     user_info = await glob.db.fetch(
-        'SELECT id, name, email, priv, '
-        'pw_bcrypt, silence_end '
-        'FROM users '
-        'WHERE safe_name = %s',
-        [utils.get_safe_name(username)]
+        "SELECT id, name, email, priv, "
+        "pw_bcrypt, silence_end, api_key, userpage_content "
+        "FROM users "
+        "WHERE safe_name = %s",
+        [utils.get_safe_name(username)],
     )
 
     # user doesn't exist; deny post
     # NOTE: Bot isn't a user.
-    if not user_info or user_info['id'] == 1:
+    if not user_info or user_info["id"] == 1:
         if glob.config.debug:
             log(f"{username}'s login failed - account doesn't exist.", Ansi.LYELLOW)
-        return await flash('error', 'Account does not exist.', 'login')
+        return await flash("error", t("login.account-does-not-exist"), "login")
 
     # cache and other related password information
-    bcrypt_cache = glob.cache['bcrypt']
-    pw_bcrypt = user_info['pw_bcrypt'].encode()
+    bcrypt_cache = glob.cache["bcrypt"]
+    pw_bcrypt = user_info["pw_bcrypt"].encode()
     pw_md5 = hashlib.md5(passwd_txt.encode()).hexdigest().encode()
 
     # check credentials (password) against db
     # intentionally slow, will cache to speed up
     if pw_bcrypt in bcrypt_cache:
-        if pw_md5 != bcrypt_cache[pw_bcrypt]: # ~0.1ms
+        if pw_md5 != bcrypt_cache[pw_bcrypt]:  # ~0.1ms
             if glob.config.debug:
                 log(f"{username}'s login failed - pw incorrect.", Ansi.LYELLOW)
-            return await flash('error', 'Password is incorrect.', 'login')
-    else: # ~200ms
+            return await flash("error", t("login.password-incorrect"), "login")
+    else:  # ~200ms
         if not bcrypt.checkpw(pw_md5, pw_bcrypt):
             if glob.config.debug:
                 log(f"{username}'s login failed - pw incorrect.", Ansi.LYELLOW)
-            return await flash('error', 'Password is incorrect.', 'login')
+            return await flash("error", t("login.password-incorrect"), "login")
 
         # login successful; cache password for next login
         bcrypt_cache[pw_bcrypt] = pw_md5
 
     # user not verified; render verify
-    if not user_info['priv'] & Privileges.Verified:
+    if not user_info["priv"] & Privileges.Verified:
         if glob.config.debug:
             log(f"{username}'s login failed - not verified.", Ansi.LYELLOW)
-        return await render_template('verify.html')
+        return await render_template("verify.html")
 
     # user banned; deny post
-    if not user_info['priv'] & Privileges.Normal:
+    if not user_info["priv"] & Privileges.Unrestricted:
         if glob.config.debug:
             log(f"{username}'s login failed - banned.", Ansi.RED)
-        return await flash('error', 'Your account is restricted. You are not allowed to log in.', 'login')
+        return await flash("error", t("login.restricted-not-allowed-to-login"), "login")
+
+    api_key = user_info["api_key"]
+
+    if api_key is None and glob.config.create_api_key_if_not_exist:
+        api_key = str(uuid.uuid4())
+        await glob.db.execute(
+            "UPDATE users SET api_key = %s WHERE id = %s", [api_key, user_info["id"]]
+        )
 
     # login successful; store session data
     if glob.config.debug:
         log(f"{username}'s login succeeded.", Ansi.LGREEN)
 
-    session['authenticated'] = True
-    session['user_data'] = {
-        'id': user_info['id'],
-        'name': user_info['name'],
-        'email': user_info['email'],
-        'priv': user_info['priv'],
-        'silence_end': user_info['silence_end'],
-        'is_staff': user_info['priv'] & Privileges.Staff != 0,
-        'is_donator': user_info['priv'] & Privileges.Donator != 0
+    session["authenticated"] = True
+    session["user_data"] = {
+        "id": user_info["id"],
+        "name": user_info["name"],
+        "email": user_info["email"],
+        "priv": user_info["priv"],
+        "api_key": api_key,
+        "silence_end": user_info["silence_end"],
+        "userpage_content": user_info["userpage_content"],
+        "is_staff": user_info["priv"] & Privileges.Staff != 0,
+        "is_bn": user_info["priv"] & Privileges.Nominator != 0,
+        "is_donator": user_info["priv"] & Privileges.Donator != 0,
     }
 
     if glob.config.debug:
         login_time = (time.time_ns() - login_time) / 1e6
-        log(f'Login took {login_time:.2f}ms!', Ansi.LYELLOW)
+        log(f"Login took {login_time:.2f}ms!", Ansi.LYELLOW)
 
-    return await flash('success', f'Hey, welcome back {username}!', 'home')
+    return await flash("success", t("login.welcome-back", username=username), "home")
 
-@frontend.route('/register')
+
+@frontend.route("/register")
 async def register():
-    if 'authenticated' in session:
-        return await flash('error', "You're already logged in.", 'home')
+    if "authenticated" in session:
+        return await flash("error", t("global.you-are-already-logged-in"), "home")
 
     if not glob.config.registration:
-        return await flash('error', 'Registrations are currently disabled.', 'home')
+        return await flash("error", t("register.currently-disabled"), "home")
+
+    return await render_template("register.html")
 
-    return await render_template('register.html')
 
-@frontend.route('/register', methods=['POST'])
+@frontend.route("/register", methods=["POST"])
 async def register_post():
-    if 'authenticated' in session:
-        return await flash('error', "You're already logged in.", 'home')
+    if "authenticated" in session:
+        return await flash("error", t("global.you-are-already-logged-in"), "home")
 
     if not glob.config.registration:
-        return await flash('error', 'Registrations are currently disabled.', 'home')
+        return await flash("error", t("register.currently-disabled"), "home")
 
     form = await request.form
-    username = form.get('username', type=str)
-    email = form.get('email', type=str)
-    passwd_txt = form.get('password', type=str)
+    username = form.get("username", type=str)
+    email = form.get("email", type=str)
+    passwd_txt = form.get("password", type=str)
 
     if username is None or email is None or passwd_txt is None:
-        return await flash('error', 'Invalid parameters.', 'home')
+        return await flash("error", t("global.invalid-parameters"), "home")
 
-    if glob.config.hCaptcha_sitekey != 'changeme':
-        captcha_data = form.get('h-captcha-response', type=str)
-        if (
-            captcha_data is None or
-            not await utils.validate_captcha(captcha_data)
-        ):
-            return await flash('error', 'Captcha failed.', 'register')
+    if glob.config.hCaptcha_sitekey != "changeme":
+        captcha_data = form.get("h-captcha-response", type=str)
+        if captcha_data is None or not await utils.validate_captcha(captcha_data):
+            return await flash("error", t("register.captcha-failed"), "register")
 
     # Usernames must:
     # - be within 2-15 characters in length
@@ -474,150 +648,191 @@ async def register_post():
     # - not already be taken by another player
     # check if username exists
     if not regexes.username.match(username):
-        return await flash('error', 'Invalid username syntax.', 'register')
+        return await flash(
+            "error", t("register.username-syntax-is-invalid"), "register"
+        )
 
-    if '_' in username and ' ' in username:
-        return await flash('error', 'Username may contain "_" or " ", but not both.', 'register')
+    if "_" in username and " " in username:
+        return await flash(
+            "error",
+            t("register.username-cannot-contains-both-dash-and-space"),
+            "register",
+        )
 
     if username in glob.config.disallowed_names:
-        return await flash('error', 'Disallowed username; pick another.', 'register')
+        return await flash("error", t("register.username-disallowed"), "register")
 
-    if await glob.db.fetch('SELECT 1 FROM users WHERE name = %s', username):
-        return await flash('error', 'Username already taken by another user.', 'register')
+    if await glob.db.fetch("SELECT 1 FROM users WHERE name = %s", username):
+        return await flash(
+            "error", t("register.username-already-taken-by-others"), "register"
+        )
 
     # Emails must:
     # - match the regex `^[^@\s]{1,200}@[^@\s\.]{1,30}\.[^@\.\s]{1,24}$`
     # - not already be taken by another player
     if not regexes.email.match(email):
-        return await flash('error', 'Invalid email syntax.', 'register')
+        return await flash("error", t("register.email-is-invalid"), "register")
 
-    if await glob.db.fetch('SELECT 1 FROM users WHERE email = %s', email):
-        return await flash('error', 'Email already taken by another user.', 'register')
+    if await glob.db.fetch("SELECT 1 FROM users WHERE email = %s", email):
+        return await flash("error", t("register.email-already-taken"), "register")
 
     # Passwords must:
     # - be within 8-32 characters in length
     # - have more than 3 unique characters
     # - not be in the config's `disallowed_passwords` list
     if not 8 <= len(passwd_txt) <= 32:
-        return await flash('error', 'Password must be 8-32 characters in length.', 'register')
+        return await flash(
+            "error",
+            t("register.password.must-between-8-32-characters-in-length"),
+            "register",
+        )
 
     if len(set(passwd_txt)) <= 3:
-        return await flash('error', 'Password must have more than 3 unique characters.', 'register')
+        return await flash(
+            "error",
+            t("register.password.must-have-more-than-3-unique-characters"),
+            "register",
+        )
 
     if passwd_txt.lower() in glob.config.disallowed_passwords:
-        return await flash('error', 'That password was deemed too simple.', 'register')
+        return await flash("error", t("register.password.too-simple"), "register")
 
     # TODO: add correct locking
     # (start of lock)
     pw_md5 = hashlib.md5(passwd_txt.encode()).hexdigest().encode()
     pw_bcrypt = bcrypt.hashpw(pw_md5, bcrypt.gensalt())
-    glob.cache['bcrypt'][pw_bcrypt] = pw_md5 # cache pw
+    glob.cache["bcrypt"][pw_bcrypt] = pw_md5  # cache pw
 
     safe_name = utils.get_safe_name(username)
 
     # fetch the users' country
     if (
-        request.headers and
-        (ip := request.headers.get('X-Real-IP', type=str)) is not None
+        request.headers
+        and (ip := request.headers.get("X-Real-IP", type=str)) is not None
     ):
         country = await utils.fetch_geoloc(ip)
     else:
-        country = 'xx'
+        country = "xx"
 
     async with glob.db.pool.acquire() as conn:
         async with conn.cursor() as db_cursor:
             # add to `users` table.
             await db_cursor.execute(
-                'INSERT INTO users '
-                '(name, safe_name, email, pw_bcrypt, country, creation_time, latest_activity) '
-                'VALUES (%s, %s, %s, %s, %s, UNIX_TIMESTAMP(), UNIX_TIMESTAMP())',
-                [username, safe_name, email, pw_bcrypt, country]
+                "INSERT INTO users "
+                "(name, safe_name, email, pw_bcrypt, country, creation_time, latest_activity) "
+                "VALUES (%s, %s, %s, %s, %s, UNIX_TIMESTAMP(), UNIX_TIMESTAMP())",
+                [username, safe_name, email, pw_bcrypt, country],
             )
             user_id = db_cursor.lastrowid
 
             # add to `stats` table.
             await db_cursor.executemany(
-                'INSERT INTO stats '
-                '(id, mode) VALUES (%s, %s)',
-                [(user_id, mode) for mode in (
-                    0,  # vn!std
-                    1,  # vn!taiko
-                    2,  # vn!catch
-                    3,  # vn!mania
-                    4,  # rx!std
-                    5,  # rx!taiko
-                    6,  # rx!catch
-                    8,  # ap!std
-                )]
+                "INSERT INTO stats " "(id, mode) VALUES (%s, %s)",
+                [
+                    (user_id, mode)
+                    for mode in (
+                        0,  # vn!std
+                        1,  # vn!taiko
+                        2,  # vn!catch
+                        3,  # vn!mania
+                        4,  # rx!std
+                        5,  # rx!taiko
+                        6,  # rx!catch
+                        8,  # ap!std
+                    )
+                ],
             )
 
     # (end of lock)
 
     if glob.config.debug:
-        log(f'{username} has registered - awaiting verification.', Ansi.LGREEN)
+        log(f"{username} has registered - awaiting verification.", Ansi.LGREEN)
 
     # user has successfully registered
-    return await render_template('verify.html')
+    return await render_template("verify.html")
 
-@frontend.route('/logout')
+
+@frontend.route("/logout")
 async def logout():
-    if 'authenticated' not in session:
-        return await flash('error', "You can't logout if you aren't logged in!", 'login')
+    if "authenticated" not in session:
+        return await flash("error", t("logout.cannot-logout-if-not-logged-in"), "login")
 
     if glob.config.debug:
         log(f'{session["user_data"]["name"]} logged out.', Ansi.LGREEN)
 
     # clear session data
-    session.pop('authenticated', None)
-    session.pop('user_data', None)
+    session.pop("authenticated", None)
+    session.pop("user_data", None)
 
     # render login
-    return await flash('success', 'Successfully logged out!', 'login')
+    return await flash("success", t("logout.succeed"), "login")
+
+
+@frontend.route("/search")
+async def user_search():
+    q = request.args.get("q", type=str)
+    return await search_user(q)
+
 
 # social media redirections
 
-@frontend.route('/github')
-@frontend.route('/gh')
+
+@frontend.route("/github")
+@frontend.route("/gh")
 async def github_redirect():
     return redirect(glob.config.github)
 
-@frontend.route('/discord')
+
+@frontend.route("/discord")
 async def discord_redirect():
     return redirect(glob.config.discord_server)
 
-@frontend.route('/youtube')
-@frontend.route('/yt')
+
+@frontend.route("/youtube")
+@frontend.route("/yt")
 async def youtube_redirect():
     return redirect(glob.config.youtube)
 
-@frontend.route('/twitter')
+
+@frontend.route("/twitter")
 async def twitter_redirect():
     return redirect(glob.config.twitter)
 
-@frontend.route('/instagram')
-@frontend.route('/ig')
+
+@frontend.route("/instagram")
+@frontend.route("/ig")
 async def instagram_redirect():
     return redirect(glob.config.instagram)
 
+
 # profile customisation
-BANNERS_PATH = Path.cwd() / '.data/banners'
-BACKGROUND_PATH = Path.cwd() / '.data/backgrounds'
-@frontend.route('/banners/<user_id>')
+BANNERS_PATH = Path.cwd() / ".data/banners"
+BACKGROUND_PATH = Path.cwd() / ".data/backgrounds"
+
+
+@frontend.route("/banners/<user_id>")
 async def get_profile_banner(user_id: int):
     # Check if avatar exists
-    for ext in ('jpg', 'jpeg', 'png', 'gif'):
-        path = BANNERS_PATH / f'{user_id}.{ext}'
+    for ext in ("jpg", "jpeg", "png", "gif"):
+        path = BANNERS_PATH / f"{user_id}.{ext}"
         if path.exists():
             return await send_file(path)
 
     return b'{"status":404}'
 
 
-@frontend.route('/backgrounds/<user_id>')
+@frontend.route("/language/<lang>/<path:path>")
+@frontend.route("/language/<lang>/", defaults={"path": "home"})
+async def set_language(lang: str, path: str):
+    session["lang"] = lang
+    return redirect("/" + path)
+
+
+@frontend.route("/backgrounds/<user_id>")
 async def get_profile_background(user_id: int):
     # Check if avatar exists
-    for ext in ('jpg', 'jpeg', 'png', 'gif'):
-        path = BACKGROUND_PATH / f'{user_id}.{ext}'
+    for ext in ("jpg", "jpeg", "png", "gif"):
+        path = BACKGROUND_PATH / f"{user_id}.{ext}"
         if path.exists():
             return await send_file(path)
 
diff --git a/config.sample.js b/config.sample.js
new file mode 100644
index 00000000..4f3327f7
--- /dev/null
+++ b/config.sample.js
@@ -0,0 +1,6 @@
+export const useLocales = [
+  'locales/default', // default locales
+  ['locales/ppy.sb', {
+    only: 'home'
+  }]
+]
diff --git a/config.sample.py b/config.sample.py
new file mode 100644
index 00000000..db262b24
--- /dev/null
+++ b/config.sample.py
@@ -0,0 +1,92 @@
+# -*- coding: utf-8 -*-
+import os
+
+# env
+_is_dev = os.environ.get("IS_DEV") == "true"
+_h_captcha_sitekey = os.environ.get("GUWEB_H_CAPTCHA_SITEKEY")
+_h_captcha_secret = os.environ.get("GUWEB_H_CAPTCHA_SECRET")
+
+_db_host = os.environ.get("GUWEB_DB_HOST")
+_db_user = os.environ.get("GUWEB_DB_USER")
+_db_password = os.environ.get("GUWEB_DB_PASSWORD")
+_db_database = os.environ.get("GUWEB_DB_DATABASE")
+
+_app_name = os.environ.get("GUWEB_APP_NAME")
+_secret_key = os.environ.get("GUWEB_SECRET_KEY")
+_domain = os.environ.get("GUWEB_DOMAIN")
+_path_to_bancho_py = os.environ.get("GUWEB_PATH_TO_BANCHO_PY")
+_discord_invite_id = os.environ.get("DISCORD_INVITE_ID")
+_default_locale = os.environ.get("GUWEB_default_locale")
+
+_registration_allowed = os.environ.get("GUWEB_REGISTRATION_ALLOWED")
+_create_api_key_if_not_exist = os.environ.get("GUWEB_CREATE_API_KEY_IF_NOT_EXIST")
+_name_change_only_for_supporter = os.environ.get("GUWEB_NAME_CHANGE_ONLY_FOR_SUPPORTER")
+# end env
+
+# app name
+app_name = _app_name if _app_name is not None else "guweb"
+
+# secret key
+secret_key = _secret_key if _secret_key is not None else "changeme"
+
+# hCaptcha settings:
+hCaptcha_sitekey = _h_captcha_sitekey if _h_captcha_sitekey is not None else "changeme"
+hCaptcha_secret = _h_captcha_secret if _h_captcha_secret is not None else "changeme"
+
+# domain (used for api, avatar, etc)
+# *.dev.ppy.sb are resolved as 127.0.0.1, you can keep it as it is when developing.
+domain = _domain if _domain is not None else "dev.ppy.sb"
+
+# mysql credentials
+mysql = {
+    "db": _db_database if _db_database is not None else "banchopy",
+    "host": _db_host if _db_host is not None else "mysql",
+    "user": _db_user if _db_user is not None else "root",
+    "password": _db_password if _db_password is not None else "",
+}
+
+# path to bancho.py root (must have leading and following slash),
+# you don't need to change this assume you put /guweb and /bancho.py in the same folder.
+path_to_gulag = (
+    _path_to_bancho_py
+    if _path_to_bancho_py is not None
+    else os.path.join(os.getcwd(), "../bancho.py") + "/"
+)
+
+# enable debug (disable when in production to improve performance)
+debug = _is_dev
+
+# disallowed names (hardcoded banned usernames)
+disallowed_names = {"cookiezi", "rrtyui", "hvick225", "qsc20010"}
+
+# disallowed passwords (hardcoded banned passwords)
+disallowed_passwords = {"password", "minilamp"}
+
+# enable registration
+registration = _registration_allowed if _registration_allowed is not None else True
+
+# create api_key if not exist (admin panel update maps requires the api key)
+create_api_key_if_not_exist = (
+    _create_api_key_if_not_exist if _create_api_key_if_not_exist is not None else False
+)
+
+# only supporters can change their username through user edit page
+name_change_only_for_supporter = (
+    _name_change_only_for_supporter
+    if _name_change_only_for_supporter is not None
+    else True
+)
+
+default_locale = _default_locale if _default_locale is not None else "en_GB"
+
+# social links (used throughout guweb)
+github = "https://github.com/Varkaria/guweb"
+discord_invite_id = _discord_invite_id
+discord_server = (
+    "https://discord.com/invite/" + discord_invite_id
+    if discord_invite_id is not None
+    else None
+)
+youtube = "https://youtube.com/"
+twitter = "https://twitter.com/"
+instagram = "https://instagram.com/"
diff --git a/constants/beatmaps.py b/constants/beatmaps.py
new file mode 100644
index 00000000..90dd9e0b
--- /dev/null
+++ b/constants/beatmaps.py
@@ -0,0 +1,11 @@
+from enum import IntEnum
+
+
+class RankedStatus(IntEnum):
+    NotSubmitted = -1
+    Pending = 0
+    UpdateAvailable = 1
+    Ranked = 2
+    Approved = 3
+    Qualified = 4
+    Loved = 5
diff --git a/objects/privileges.py b/constants/privileges.py
similarity index 50%
rename from objects/privileges.py
rename to constants/privileges.py
index 4c69b024..ba44c5bd 100644
--- a/objects/privileges.py
+++ b/constants/privileges.py
@@ -3,32 +3,34 @@
 from enum import IntFlag
 from enum import unique
 
-__all__ = ('Privileges',)
+__all__ = ("Privileges",)
+
 
 @unique
 class Privileges(IntFlag):
     """Server side user privileges."""
 
     # privileges intended for all normal players.
-    Normal      = 1 << 0 # is an unbanned player.
-    Verified    = 1 << 1 # has logged in to the server in-game.
+
+    Unrestricted = 1 << 0  # is an unbanned player.
+    Verified = 1 << 1  # has logged in to the server in-game.
 
     # has bypass to low-ceiling anticheat measures (trusted).
     Whitelisted = 1 << 2
 
     # donation tiers, receives some extra benefits.
-    Supporter   = 1 << 4
-    Premium     = 1 << 5
+    Supporter = 1 << 4
+    Premium = 1 << 5
 
     # notable users, receives some extra benefits.
-    Alumni      = 1 << 7
+    Alumni = 1 << 7
 
     # staff permissions, able to manage server state.
-    Tournament  = 1 << 10 # able to manage match state without host.
-    Nominator   = 1 << 11 # able to manage maps ranked status.
-    Mod         = 1 << 12 # able to manage users (level 1).
-    Admin       = 1 << 13 # able to manage users (level 2).
-    Dangerous   = 1 << 14 # able to manage full server state.
+    Tournament = 1 << 10  # able to manage match state without host.
+    Nominator = 1 << 11  # able to manage maps ranked status.
+    Mod = 1 << 12  # able to manage users (level 1).
+    Admin = 1 << 13  # able to manage users (level 2).
+    Dangerous = 1 << 14  # able to manage full server state.
 
     Donator = Supporter | Premium
     Staff = Mod | Admin | Dangerous
diff --git a/constants/regexes.py b/constants/regexes.py
index f4a7da49..ef5dbc00 100644
--- a/constants/regexes.py
+++ b/constants/regexes.py
@@ -2,5 +2,5 @@
 
 import re
 
-username = re.compile(r'^[\w \[\]-]{2,15}$')
-email = re.compile(r'^[^@\s]{1,200}@[^@\s\.]{1,30}\.[^@\.\s]{1,24}$')
+username = re.compile(r"^[\w \[\]-]{2,15}$")
+email = re.compile(r"^[^@\s]{1,200}@[^@\s\.]{1,30}\.[^@\.\s]{1,24}$")
diff --git a/ext/config.sample.py b/ext/config.sample.py
index a155869f..94daea8a 100644
--- a/ext/config.sample.py
+++ b/ext/config.sample.py
@@ -1,52 +1,47 @@
 # -*- coding: utf-8 -*-
 
 # app name
-app_name = 'guweb'
+app_name = "guweb"
 
 # secret key
-secret_key = 'changeme'
+secret_key = "changeme"
 
-#hCaptcha settings:
-hCaptcha_sitekey = 'changeme'
-hCaptcha_secret = 'changeme'
+# hCaptcha settings:
+hCaptcha_sitekey = "changeme"
+hCaptcha_secret = "changeme"
 
 # domain (used for api, avatar, etc)
-domain = 'gulag.ca'
+domain = "gulag.ca"
 
 # max image size for avatars, in megabytes
 max_image_size = 2
 
 # mysql credentials
 mysql = {
-    'db': 'gulag',
-    'host': 'localhost',
-    'user': 'cmyui',
-    'password': 'changeme',
+    "db": "gulag",
+    "host": "localhost",
+    "user": "cmyui",
+    "password": "changeme",
 }
 
-# path to gulag root (must have leading and following slash)
-path_to_gulag = '/path/to/gulag/'
+# path to bancho.py root (must have leading and following slash)
+path_to_gulag = "/path/to/gulag/"
 
 # enable debug (disable when in production to improve performance)
 debug = False
 
 # disallowed names (hardcoded banned usernames)
-disallowed_names = {
-    'cookiezi', 'rrtyui',
-    'hvick225', 'qsc20010'
-}
+disallowed_names = {"cookiezi", "rrtyui", "hvick225", "qsc20010"}
 
 # disallowed passwords (hardcoded banned passwords)
-disallowed_passwords = {
-    'password', 'minilamp'
-}
+disallowed_passwords = {"password", "minilamp"}
 
 # enable registration
 registration = True
 
 # social links (used throughout guweb)
-github = 'https://github.com/varkaria/guweb'
-discord_server = 'https://discord.com/invite/Y5uPvcNpD9'
-youtube = 'https://youtube.com/'
-twitter = 'https://twitter.com/'
-instagram = 'https://instagram.com/'
+github = "https://github.com/varkaria/guweb"
+discord_server = "https://discord.com/invite/Y5uPvcNpD9"
+youtube = "https://youtube.com/"
+twitter = "https://twitter.com/"
+instagram = "https://instagram.com/"
diff --git a/ext/requirements.txt b/ext/requirements.txt
index 0d392c8a..e1658513 100644
--- a/ext/requirements.txt
+++ b/ext/requirements.txt
@@ -8,3 +8,8 @@ orjson
 timeago
 markdown2
 Pillow
+
+python-i18n[YAML]
+requires
+uuid
+osrparse
\ No newline at end of file
diff --git a/locales/default/404/en-GB.yml b/locales/default/404/en-GB.yml
new file mode 100644
index 00000000..3740fb1e
--- /dev/null
+++ b/locales/default/404/en-GB.yml
@@ -0,0 +1,5 @@
+'404': '404'
+page-not-found: Page not found
+where-am-i: Where am I?
+check-url: Check that the URL you entered is correct.
+make-sure-visit: Make sure that the place you are visiting isn't under maintenance!
diff --git a/locales/default/404/en-US.yml b/locales/default/404/en-US.yml
new file mode 100644
index 00000000..3740fb1e
--- /dev/null
+++ b/locales/default/404/en-US.yml
@@ -0,0 +1,5 @@
+'404': '404'
+page-not-found: Page not found
+where-am-i: Where am I?
+check-url: Check that the URL you entered is correct.
+make-sure-visit: Make sure that the place you are visiting isn't under maintenance!
diff --git a/locales/default/404/zh-CN.yml b/locales/default/404/zh-CN.yml
new file mode 100644
index 00000000..4c197ec1
--- /dev/null
+++ b/locales/default/404/zh-CN.yml
@@ -0,0 +1,5 @@
+'404': '404'
+page-not-found: 找不到页面
+where-am-i: 我是谁 我在哪 我在干什么?
+check-url: 请检查下你输入的链接是否正确。
+make-sure-visit: 或者确保你想访问的地方没有在维护中!
diff --git a/locales/default/admin/base/en-GB.yml b/locales/default/admin/base/en-GB.yml
new file mode 100644
index 00000000..5799109e
--- /dev/null
+++ b/locales/default/admin/base/en-GB.yml
@@ -0,0 +1,12 @@
+dashboard: Dashboard
+admin: Admin
+admin-panel: '%{appName} Admin Panel'
+welcome-to-admin-panel: Welcome to %{appName} admin panel!
+github: GitHub
+discord: Discord
+youtube: YouTube
+twitter: Twitter
+instagram: Instagram
+users: Users
+restrictions: Restrictions
+beatmaps: Beatmaps
diff --git a/locales/default/admin/base/en-US.yml b/locales/default/admin/base/en-US.yml
new file mode 100644
index 00000000..bd0fed16
--- /dev/null
+++ b/locales/default/admin/base/en-US.yml
@@ -0,0 +1,12 @@
+admin: Admin
+dashboard: Dashboard
+welcome-to-admin-panel: Welcome to %{appName} admin panel!
+discord: Discord
+admin-panel: '%{appName} Admin Panel'
+instagram: Instagram
+github: GitHub
+twitter: Twitter
+youtube: YouTube
+users: Users
+restrictions: Restrictions
+beatmaps: Beatmaps
diff --git a/locales/default/admin/base/zh-CN.yml b/locales/default/admin/base/zh-CN.yml
new file mode 100644
index 00000000..757df833
--- /dev/null
+++ b/locales/default/admin/base/zh-CN.yml
@@ -0,0 +1,12 @@
+admin: 管理员
+dashboard: 控制面板
+welcome-to-admin-panel: 欢迎来到 %{appName} 管理面板!
+discord: Discord
+admin-panel: '%{appName} 管理员面板'
+instagram: Instagram
+github: GitHub
+twitter: 推特
+youtube: YouTube
+users: 用户管理
+restrictions: 封禁管理
+beatmaps: 谱面管理
diff --git a/locales/default/admin/beatmaps/en-GB.yml b/locales/default/admin/beatmaps/en-GB.yml
new file mode 100644
index 00000000..beb9cc21
--- /dev/null
+++ b/locales/default/admin/beatmaps/en-GB.yml
@@ -0,0 +1,29 @@
+welcome-to-beatmaps-panel: Welcome to beatmaps panel
+total-beatmaps: Total beatmaps
+thats-a-lot-of-maps: That's a lot of maps
+ranked: Ranked
+these-maps-can-gain-many-pp: These maps can gain many pp
+loved: Loved
+we-loved-them-so-much: We loved them so much
+pending: Pending
+they-are-also-good-maps: They are also good maps
+search: Search
+beatmap: Beatmap
+cs-keys: CS / Keys
+ar: AR
+hp: HP
+od: OD
+bpm: BPM
+stars: Stars
+status: Status
+edit-status: Edit status
+ranked-diff: Ranked Diff
+loved-diff: Loved Diff
+approved-diff: Approved Diff
+pending-diff: Pending Diff
+ranked-set: Ranked Set
+loved-set: Loved Set
+approved-set: Approved Set
+pending-set: Pending Set
+update-maps: Force update
+search-by-bid-sid-or-title: Search by bid, sid or title
diff --git a/locales/default/admin/beatmaps/en-US.yml b/locales/default/admin/beatmaps/en-US.yml
new file mode 100644
index 00000000..beb9cc21
--- /dev/null
+++ b/locales/default/admin/beatmaps/en-US.yml
@@ -0,0 +1,29 @@
+welcome-to-beatmaps-panel: Welcome to beatmaps panel
+total-beatmaps: Total beatmaps
+thats-a-lot-of-maps: That's a lot of maps
+ranked: Ranked
+these-maps-can-gain-many-pp: These maps can gain many pp
+loved: Loved
+we-loved-them-so-much: We loved them so much
+pending: Pending
+they-are-also-good-maps: They are also good maps
+search: Search
+beatmap: Beatmap
+cs-keys: CS / Keys
+ar: AR
+hp: HP
+od: OD
+bpm: BPM
+stars: Stars
+status: Status
+edit-status: Edit status
+ranked-diff: Ranked Diff
+loved-diff: Loved Diff
+approved-diff: Approved Diff
+pending-diff: Pending Diff
+ranked-set: Ranked Set
+loved-set: Loved Set
+approved-set: Approved Set
+pending-set: Pending Set
+update-maps: Force update
+search-by-bid-sid-or-title: Search by bid, sid or title
diff --git a/locales/default/admin/beatmaps/zh-CN.yml b/locales/default/admin/beatmaps/zh-CN.yml
new file mode 100644
index 00000000..496c174a
--- /dev/null
+++ b/locales/default/admin/beatmaps/zh-CN.yml
@@ -0,0 +1,29 @@
+welcome-to-beatmaps-panel: 欢迎来到谱面管理面板
+total-beatmaps: 谱面总数量
+thats-a-lot-of-maps: 那可真是不少图呀!
+ranked: Ranked
+these-maps-can-gain-many-pp: 这些图能刷到许多pp
+loved: Loved
+we-loved-them-so-much: 我们都"爱"它
+pending: Pending
+they-are-also-good-maps: 它们仍然是张好图
+search: 搜索
+beatmap: 谱面
+cs-keys: CS / Keys
+ar: AR
+hp: HP
+od: OD
+bpm: BPM
+stars: Stars
+status: 状态
+edit-status: 修改状态
+ranked-diff: 将该难度设置为 Ranked 状态
+loved-diff: 将该难度设置为 Loved 状态
+approved-diff: 将该难度设置为 Approved 状态
+pending-diff: 将该难度设置为 Pending 状态
+ranked-set: 将整个谱面设置为 Ranked 状态
+loved-set: 将整个谱面设置为 Loved 状态
+approved-set: 将整个谱面设置为 Approved 状态
+pending-set: 将整个谱面设置为 Pending 状态
+update-maps: 强制更新谱面
+search-by-bid-sid-or-title: 根据 bid, sid 或者是 谱面名字 进行搜索
diff --git a/locales/default/admin/en-GB.yml b/locales/default/admin/en-GB.yml
new file mode 100644
index 00000000..865fac79
--- /dev/null
+++ b/locales/default/admin/en-GB.yml
@@ -0,0 +1,2 @@
+please-login-in-first: Please login first.
+you-have-sufficient-privileges: You have insufficient privileges
diff --git a/locales/default/admin/en-US.yml b/locales/default/admin/en-US.yml
new file mode 100644
index 00000000..865fac79
--- /dev/null
+++ b/locales/default/admin/en-US.yml
@@ -0,0 +1,2 @@
+please-login-in-first: Please login first.
+you-have-sufficient-privileges: You have insufficient privileges
diff --git a/locales/default/admin/home/en-GB.yml b/locales/default/admin/home/en-GB.yml
new file mode 100644
index 00000000..ca838172
--- /dev/null
+++ b/locales/default/admin/home/en-GB.yml
@@ -0,0 +1,10 @@
+total-users: total users
+that-s-a-lot-of-people: that's a lot of people!
+total-online: total online
+rising-in-popularity-aren-t-we: rising in popularity are we?
+latest-and-greatest-welcome: latest and greatest! welcome!
+latest-user: latest user
+total-banned: total banned
+naughty-sad-face: naughty naughty :(
+recent-users: Recent Users
+recent-score: Recent Score
diff --git a/locales/default/admin/home/en-US.yml b/locales/default/admin/home/en-US.yml
new file mode 100644
index 00000000..e6edf886
--- /dev/null
+++ b/locales/default/admin/home/en-US.yml
@@ -0,0 +1,10 @@
+that-s-a-lot-of-people: that's a lot of people!
+total-users: total users
+total-online: total online
+latest-and-greatest-welcome: latest and greatest! welcome!
+latest-user: latest user
+naughty-sad-face: naughty naughty :(
+recent-score: Recent Score
+recent-users: Recent Users
+rising-in-popularity-aren-t-we: rising in popularity are we?
+total-banned: total banned
diff --git a/locales/default/admin/home/zh-CN.yml b/locales/default/admin/home/zh-CN.yml
new file mode 100644
index 00000000..4d50149a
--- /dev/null
+++ b/locales/default/admin/home/zh-CN.yml
@@ -0,0 +1,10 @@
+that-s-a-lot-of-people: 好多人！
+total-users: 总用户
+total-online: 总在线
+latest-and-greatest-welcome: 最新最热！欢迎！
+latest-user: 最新用户
+naughty-sad-face: 坏坏 :(
+recent-score: 最近成绩
+recent-users: 最新用户
+rising-in-popularity-aren-t-we: 要火了咱们？
+total-banned: 总被ban
diff --git a/locales/default/admin/restrictions/en-GB.yml b/locales/default/admin/restrictions/en-GB.yml
new file mode 100644
index 00000000..d937cc80
--- /dev/null
+++ b/locales/default/admin/restrictions/en-GB.yml
@@ -0,0 +1,4 @@
+welcome-to-restrictions-panel: Welcome to restrictions panel
+details: Details
+date: Date
+action: Action
diff --git a/locales/default/admin/restrictions/en-US.yml b/locales/default/admin/restrictions/en-US.yml
new file mode 100644
index 00000000..d937cc80
--- /dev/null
+++ b/locales/default/admin/restrictions/en-US.yml
@@ -0,0 +1,4 @@
+welcome-to-restrictions-panel: Welcome to restrictions panel
+details: Details
+date: Date
+action: Action
diff --git a/locales/default/admin/restrictions/zh-CN.yml b/locales/default/admin/restrictions/zh-CN.yml
new file mode 100644
index 00000000..221c6e7b
--- /dev/null
+++ b/locales/default/admin/restrictions/zh-CN.yml
@@ -0,0 +1,4 @@
+welcome-to-restrictions-panel: 欢迎来到封禁管理面板
+details: 详情
+date: 日期
+action: 操作
diff --git a/locales/default/admin/users/en-GB.yml b/locales/default/admin/users/en-GB.yml
new file mode 100644
index 00000000..c0d8f8e3
--- /dev/null
+++ b/locales/default/admin/users/en-GB.yml
@@ -0,0 +1,21 @@
+welcome-to-users-panel: Welcome to users panel
+search: Search
+id: ID
+flag-or-username: Flag | Username
+privilege: Privilege
+last-login: Last Login
+joined-at: Joined at
+client-channel: Client channel
+email: Email
+ip: IP
+edit: Edit
+edit-info-of: Edit Info of %{name}
+username: Username
+country: Country
+legality: Legality
+unrestricted: Unrestricted
+restricted: Restricted
+update: Update
+search-by-username-or-email: Search by username or email
+password: Password
+new-password: New Password
diff --git a/locales/default/admin/users/en-US.yml b/locales/default/admin/users/en-US.yml
new file mode 100644
index 00000000..c0d8f8e3
--- /dev/null
+++ b/locales/default/admin/users/en-US.yml
@@ -0,0 +1,21 @@
+welcome-to-users-panel: Welcome to users panel
+search: Search
+id: ID
+flag-or-username: Flag | Username
+privilege: Privilege
+last-login: Last Login
+joined-at: Joined at
+client-channel: Client channel
+email: Email
+ip: IP
+edit: Edit
+edit-info-of: Edit Info of %{name}
+username: Username
+country: Country
+legality: Legality
+unrestricted: Unrestricted
+restricted: Restricted
+update: Update
+search-by-username-or-email: Search by username or email
+password: Password
+new-password: New Password
diff --git a/locales/default/admin/users/zh-CN.yml b/locales/default/admin/users/zh-CN.yml
new file mode 100644
index 00000000..ce63a3a8
--- /dev/null
+++ b/locales/default/admin/users/zh-CN.yml
@@ -0,0 +1,21 @@
+welcome-to-users-panel: 欢迎来到用户管理面板
+search: 搜索
+id: ID
+flag-or-username: 地区 | 用户名
+privilege: 权限组
+last-login: 最近登录
+joined-at: 加入于
+client-channel: 客户端频道
+email: 邮箱
+ip: IP
+edit: 修改
+edit-info-of: "修改 %{name} 的信息:"
+username: 用户名
+country: 地区
+legality: 封禁状态
+unrestricted: 未封禁
+restricted: 封禁
+update: 更新
+search-by-username-or-email: 根据 用户名 或 邮箱 进行搜索
+password: 密码
+new-password: 请输入新密码
diff --git a/locales/default/admin/zh-CN.yml b/locales/default/admin/zh-CN.yml
new file mode 100644
index 00000000..2a963d52
--- /dev/null
+++ b/locales/default/admin/zh-CN.yml
@@ -0,0 +1,2 @@
+please-login-in-first: 请先登录。
+you-have-sufficient-privileges: 您的权限不足
diff --git a/locales/default/global/en-GB.yml b/locales/default/global/en-GB.yml
new file mode 100644
index 00000000..6c6c7aae
--- /dev/null
+++ b/locales/default/global/en-GB.yml
@@ -0,0 +1,59 @@
+sign-up: Sign up
+log-in: Log in
+offline: Offline
+online: Online
+leaderboard: Leaderboard
+login: Login
+profile__literal: Profile
+register: Register
+password: Password
+bannertype-error: Warning
+bannertype-success: Notice
+bannertext-error: uh oh! Be careful!
+bannertext-success: Hey! Listen!
+verify: Verify
+pp: pp
+accuracy: Accuracy
+score: Score
+acc: Acc
+playcount: Play Count
+playtime: Play Time
+max-combo: Max Combo
+mode:
+  vanilla: Vanilla
+  relax: Relax
+  autopilot: Autopilot
+  taiko: osu!taiko
+  osu: osu!
+  catch: osu!catch
+  mania: osu!mania
+  VN: VN
+  RX: RX
+  AP: AP
+ranked-score: Ranked score
+total-score: Total Score
+rank:
+  ss: SS
+  ssh: SS
+  s: S
+  sh: S
+  a: A
+invalid-parameters: Invalid parameters.
+you-are-already-logged-in: You're already logged in!
+you-must-be-logged-in-to-access-this-page: You must be logged in to access this page.
+grade: Grade
+grades-N: "N"
+grades-F: F
+grades-D: D
+grades-C: C
+grades-B: B
+grades-A: A
+grades-S: S
+grades-SH: SH
+grades-X: SS
+grades-XH: SSH
+server: Server
+bancho: Bancho
+ppy-sb: ppy.sb
+akatsuki: Akatsuki
+server-offline: offline
diff --git a/locales/default/global/en-US.yml b/locales/default/global/en-US.yml
new file mode 100644
index 00000000..6c6c7aae
--- /dev/null
+++ b/locales/default/global/en-US.yml
@@ -0,0 +1,59 @@
+sign-up: Sign up
+log-in: Log in
+offline: Offline
+online: Online
+leaderboard: Leaderboard
+login: Login
+profile__literal: Profile
+register: Register
+password: Password
+bannertype-error: Warning
+bannertype-success: Notice
+bannertext-error: uh oh! Be careful!
+bannertext-success: Hey! Listen!
+verify: Verify
+pp: pp
+accuracy: Accuracy
+score: Score
+acc: Acc
+playcount: Play Count
+playtime: Play Time
+max-combo: Max Combo
+mode:
+  vanilla: Vanilla
+  relax: Relax
+  autopilot: Autopilot
+  taiko: osu!taiko
+  osu: osu!
+  catch: osu!catch
+  mania: osu!mania
+  VN: VN
+  RX: RX
+  AP: AP
+ranked-score: Ranked score
+total-score: Total Score
+rank:
+  ss: SS
+  ssh: SS
+  s: S
+  sh: S
+  a: A
+invalid-parameters: Invalid parameters.
+you-are-already-logged-in: You're already logged in!
+you-must-be-logged-in-to-access-this-page: You must be logged in to access this page.
+grade: Grade
+grades-N: "N"
+grades-F: F
+grades-D: D
+grades-C: C
+grades-B: B
+grades-A: A
+grades-S: S
+grades-SH: SH
+grades-X: SS
+grades-XH: SSH
+server: Server
+bancho: Bancho
+ppy-sb: ppy.sb
+akatsuki: Akatsuki
+server-offline: offline
diff --git a/locales/default/global/zh-CN.yml b/locales/default/global/zh-CN.yml
new file mode 100644
index 00000000..d21d598c
--- /dev/null
+++ b/locales/default/global/zh-CN.yml
@@ -0,0 +1,59 @@
+sign-up: 注册
+log-in: 登录
+offline: 离线
+online: 在线
+leaderboard: 排行榜
+login: 登录
+profile__literal: 用户信息
+register: 注册
+bannertype-success: 操作成功
+bannertype-error: 出错了
+bannertext-error: 下次注意点
+bannertext-success: 暂时没什么问题
+verify: 验证
+acc: Acc
+accuracy: 准确度
+max-combo: 最大连击
+mode:
+  AP: AP
+  RX: RX
+  VN: VN
+  autopilot: Autopilot
+  catch: osu!接水果
+  mania: osu!面条
+  osu: osu!
+  relax: Relax
+  taiko: osu!太鼓
+  vanilla: Vanilla
+playcount: 游玩次数
+playtime: 游玩时间
+pp: pp
+rank:
+  a: A
+  s: S
+  sh: S
+  ss: SS
+  ssh: SS
+score: 分数
+total-score: 总分
+ranked-score: 记分总分
+password: 密码
+invalid-parameters: 请输入用户名密码以及邮箱
+you-are-already-logged-in: 你已经登录啦!
+you-must-be-logged-in-to-access-this-page: 你必须登录了才能访问该页面
+grade: 评分
+grades-N: "N"
+grades-F: F
+grades-D: D
+grades-C: C
+grades-B: B
+grades-A: A
+grades-S: S
+grades-SH: SH
+grades-X: SS
+grades-XH: SSH
+server: 服务器
+bancho: Bancho
+ppy-sb: ppy.sb
+akatsuki: Akatsuki
+server-offline: 离线
diff --git a/locales/default/home/en-GB.yml b/locales/default/home/en-GB.yml
new file mode 100644
index 00000000..6a1a60db
--- /dev/null
+++ b/locales/default/home/en-GB.yml
@@ -0,0 +1,16 @@
+subtitle-big: |-
+  We are an osu! private server built from the ground up with many unique features not seen elsewhere - for more information, check out bancho.py and guweb on GitHub - we're fully open source!
+some-of-our-coolest-features: Some of our coolest features
+features-title-1: PP for Relax and Autopilot
+features-content-1: |-
+  Our server has unique pp formula for relax and autopilot.Good at waving your cursor or just smashing your keyboard? Join %{appName} and get a fair reward foryour skills!
+features-title-2: Free osu!direct
+features-content-2: |-
+  You won't have to pay for osu!supporter to have a convenient gameplay experience in the client - osu!direct is available for everyone! Keep in mind supporting us still grants a huge set of cool perks but absense of it doesn't affect your game sessions!
+features-title-3: Flexible library
+features-content-3: |-
+  We're written on top of cmyui's multipurpose library allowing for a fully asynchronous environment, both improving performance and the user's experience in the long term!
+what-are-you-waiting-for: What are you waiting for?
+subtitle: |-
+  Join %{appName}! It's risk-free! You won't get your account banned on official servers if you play here with us! And don't worry, as you can always switch between the official servers and us at any time!
+sign-up-for-free: Sign up for free
diff --git a/locales/default/home/en-US.yml b/locales/default/home/en-US.yml
new file mode 100644
index 00000000..6a1a60db
--- /dev/null
+++ b/locales/default/home/en-US.yml
@@ -0,0 +1,16 @@
+subtitle-big: |-
+  We are an osu! private server built from the ground up with many unique features not seen elsewhere - for more information, check out bancho.py and guweb on GitHub - we're fully open source!
+some-of-our-coolest-features: Some of our coolest features
+features-title-1: PP for Relax and Autopilot
+features-content-1: |-
+  Our server has unique pp formula for relax and autopilot.Good at waving your cursor or just smashing your keyboard? Join %{appName} and get a fair reward foryour skills!
+features-title-2: Free osu!direct
+features-content-2: |-
+  You won't have to pay for osu!supporter to have a convenient gameplay experience in the client - osu!direct is available for everyone! Keep in mind supporting us still grants a huge set of cool perks but absense of it doesn't affect your game sessions!
+features-title-3: Flexible library
+features-content-3: |-
+  We're written on top of cmyui's multipurpose library allowing for a fully asynchronous environment, both improving performance and the user's experience in the long term!
+what-are-you-waiting-for: What are you waiting for?
+subtitle: |-
+  Join %{appName}! It's risk-free! You won't get your account banned on official servers if you play here with us! And don't worry, as you can always switch between the official servers and us at any time!
+sign-up-for-free: Sign up for free
diff --git a/locales/default/home/zh-CN.yml b/locales/default/home/zh-CN.yml
new file mode 100644
index 00000000..58a51f29
--- /dev/null
+++ b/locales/default/home/zh-CN.yml
@@ -0,0 +1,16 @@
+subtitle-big: |-
+  欢迎来到 %{appName}, 一个面向全模式的osu!私服. 我们有最先进的RX, AP算法, 同时为全模式提供PP计算支持. 我们拥有全图排行榜, 以及无限次数的改名机会.
+some-of-our-coolest-features: 我们觉得最酷的一些功能
+features-title-1: 对Relax 和 Autopilot mod的PP计算
+features-content-1: |-
+  我们的服务器针对RX和AP有专门的PP计算算法。有超高的AIM移动能力但是左手无力？又或者左手超强的手速speed却不会移动AIM? 在 %{appName} 当中都可以完美发挥你的强项。
+features-title-2: 免费的 osu!direct 服务
+features-content-2: |-
+  你不用特意成为 osu!supporter 以此来提高你在客户端下图方面的体验。osu!direct 对所有人开放(并且使用的是国内的sayo镜像站)! 虽然如此, 如果你愿意支持我们, 你仍然可以获得一些超酷的特权。只不过这些特权并不会影响到你的game sessions!
+features-title-3: Flexible library
+features-content-3: |-
+  我们基于 cmyui 的多目的性库实现完全异步的环境, 同时长期提升性能和用户体验!
+what-are-you-waiting-for: 你 还 在 等 什 么?
+subtitle: |-
+  赶紧加入到 %{appName} 当中吧! 没有风险! 并且游玩我们的服务器不会导致你的官服账号被封禁。而且不用担心, 你可以随时在官方服务器与我们的服务器之间随意切换。
+sign-up-for-free: 免 费 注 册！
diff --git a/locales/default/leaderboard/en-GB.yml b/locales/default/leaderboard/en-GB.yml
new file mode 100644
index 00000000..c925c4ef
--- /dev/null
+++ b/locales/default/leaderboard/en-GB.yml
@@ -0,0 +1,2 @@
+leaderboard: Leaderboard
+there-are-no-players-to-display: there are no players to display!
diff --git a/locales/default/leaderboard/en-US.yml b/locales/default/leaderboard/en-US.yml
new file mode 100644
index 00000000..c925c4ef
--- /dev/null
+++ b/locales/default/leaderboard/en-US.yml
@@ -0,0 +1,2 @@
+leaderboard: Leaderboard
+there-are-no-players-to-display: there are no players to display!
diff --git a/locales/default/leaderboard/zh-CN.yml b/locales/default/leaderboard/zh-CN.yml
new file mode 100644
index 00000000..f7cc6fc1
--- /dev/null
+++ b/locales/default/leaderboard/zh-CN.yml
@@ -0,0 +1,2 @@
+leaderboard: 排行榜
+there-are-no-players-to-display: 这里没有符合条件的玩家可供显示!
diff --git a/locales/default/login/en-GB.yml b/locales/default/login/en-GB.yml
new file mode 100644
index 00000000..0643ce7c
--- /dev/null
+++ b/locales/default/login/en-GB.yml
@@ -0,0 +1,9 @@
+dont-have-an-account: Don't have an account?
+register: Register
+forgot-login: Forgot login?
+username: Username
+email: Email
+password-incorrect: Password is incorrect.
+restricted-not-allowed-to-login: Your account is restricted. You are not allowed to log in.
+welcome-back: Hey, welcome back %{username}!
+account-does-not-exist: Account does not exist.
diff --git a/locales/default/login/en-US.yml b/locales/default/login/en-US.yml
new file mode 100644
index 00000000..1329564a
--- /dev/null
+++ b/locales/default/login/en-US.yml
@@ -0,0 +1,9 @@
+dont-have-an-account: Don't have an account?
+register: Register
+forgot-login: Forgot login?
+username: Username
+email: Email
+password-incorrect: Password is incorrect.
+restricted-not-allowed-to-login: Your account is restricted. You are not allowed to log in.
+account-does-not-exist: Account does not exist.
+welcome-back: Hey, welcome back %{username}!
diff --git a/locales/default/login/zh-CN.yml b/locales/default/login/zh-CN.yml
new file mode 100644
index 00000000..5055668b
--- /dev/null
+++ b/locales/default/login/zh-CN.yml
@@ -0,0 +1,9 @@
+dont-have-an-account: 还未拥有一个账号？
+register: 注册
+forgot-login: 忘记账号?
+username: 你的用户名
+email: 电子邮箱
+password-incorrect: 密码错误
+restricted-not-allowed-to-login: 你的账号被封禁了, 因此我们不允许你登录
+account-does-not-exist: 该账号并不存在
+welcome-back: 欢迎回来 %{username}!
diff --git a/locales/default/logout/en-GB.yml b/locales/default/logout/en-GB.yml
new file mode 100644
index 00000000..af3ce378
--- /dev/null
+++ b/locales/default/logout/en-GB.yml
@@ -0,0 +1,2 @@
+cannot-logout-if-not-logged-in: You can't logout if you aren't logged in!
+succeed: Successfully logged out!
diff --git a/locales/default/logout/en-US.yml b/locales/default/logout/en-US.yml
new file mode 100644
index 00000000..af3ce378
--- /dev/null
+++ b/locales/default/logout/en-US.yml
@@ -0,0 +1,2 @@
+cannot-logout-if-not-logged-in: You can't logout if you aren't logged in!
+succeed: Successfully logged out!
diff --git a/locales/default/logout/zh-CN.yml b/locales/default/logout/zh-CN.yml
new file mode 100644
index 00000000..d50ea8ea
--- /dev/null
+++ b/locales/default/logout/zh-CN.yml
@@ -0,0 +1,2 @@
+cannot-logout-if-not-logged-in: 你得先登录了才能够进行登出
+succeed: 成功登出!
diff --git a/locales/default/navbar/en-GB.yml b/locales/default/navbar/en-GB.yml
new file mode 100644
index 00000000..8b8a2b23
--- /dev/null
+++ b/locales/default/navbar/en-GB.yml
@@ -0,0 +1,9 @@
+home: Home
+leaderboards: Leaderboards
+information: Information
+admin: Admin
+profile: Profile
+settings: Settings
+logout: Logout
+todo: Todo..
+looking-for-someone: Looking for someone?
diff --git a/locales/default/navbar/en-US.yml b/locales/default/navbar/en-US.yml
new file mode 100644
index 00000000..8b8a2b23
--- /dev/null
+++ b/locales/default/navbar/en-US.yml
@@ -0,0 +1,9 @@
+home: Home
+leaderboards: Leaderboards
+information: Information
+admin: Admin
+profile: Profile
+settings: Settings
+logout: Logout
+todo: Todo..
+looking-for-someone: Looking for someone?
diff --git a/locales/default/navbar/zh-CN.yml b/locales/default/navbar/zh-CN.yml
new file mode 100644
index 00000000..576f5e9a
--- /dev/null
+++ b/locales/default/navbar/zh-CN.yml
@@ -0,0 +1,9 @@
+home: 主页
+leaderboards: 排行榜
+information: 文档
+admin: 管理员
+profile: 玩家资料
+settings: 设置
+logout: 登出
+todo: 敬请期待
+looking-for-someone: 想要寻找某个用户?
diff --git a/locales/default/osr-reader/en-GB.yml b/locales/default/osr-reader/en-GB.yml
new file mode 100644
index 00000000..d8ad831c
--- /dev/null
+++ b/locales/default/osr-reader/en-GB.yml
@@ -0,0 +1,2 @@
+replay-id: Replay ID
+username: Username
diff --git a/locales/default/profile/en-GB.yml b/locales/default/profile/en-GB.yml
new file mode 100644
index 00000000..84089a11
--- /dev/null
+++ b/locales/default/profile/en-GB.yml
@@ -0,0 +1,14 @@
+best-scores: Best Scores
+no-scores-available: No scores available
+try-playing-something: Try playing something
+show-more: Show more
+most-played-beatmaps: Most Played Beatmaps
+no-beatmaps-available: No beatmaps available
+statistics: Statistics
+recent-scores: Recent Scores
+by: by
+global-rank: Global Rank
+country-rank: Country Rank
+name-aka: name aka
+about-me-title: About me
+rank-title: Rank
diff --git a/locales/default/profile/en-US.yml b/locales/default/profile/en-US.yml
new file mode 100644
index 00000000..70d998b1
--- /dev/null
+++ b/locales/default/profile/en-US.yml
@@ -0,0 +1,14 @@
+best-scores: Best Scores
+no-scores-available: No scores available
+try-playing-something: Try playing something
+show-more: Show more
+most-played-beatmaps: Most Played Beatmaps
+no-beatmaps-available: No beatmaps available
+statistics: Statistics
+recent-scores: Recent Scores
+by: by
+country-rank: Country Rank
+global-rank: Global Rank
+name-aka: name aka
+about-me-title: About me
+rank-title: Rank
diff --git a/locales/default/profile/zh-CN.yml b/locales/default/profile/zh-CN.yml
new file mode 100644
index 00000000..bbf9ed23
--- /dev/null
+++ b/locales/default/profile/zh-CN.yml
@@ -0,0 +1,14 @@
+best-scores: 最好成绩
+no-scores-available: 暂无有效成绩
+try-playing-something: 尝试去游玩一会吧！
+show-more: 展示更多
+most-played-beatmaps: 游玩最多的谱面
+no-beatmaps-available: 暂无有效谱面
+statistics: 数据统计
+recent-scores: 最近的成绩
+by: 作者
+country-rank: 国内排名
+global-rank: 全球排名
+name-aka: 别名
+about-me-title: 个人介绍
+rank-title: 排名情况
diff --git a/locales/default/register/en-GB.yml b/locales/default/register/en-GB.yml
new file mode 100644
index 00000000..88aa703a
--- /dev/null
+++ b/locales/default/register/en-GB.yml
@@ -0,0 +1,18 @@
+registration: Registration
+register: register
+email: Email
+already-have-an-account: Already have an account?
+username: Username
+# server literals
+currently-disabled: Registrations are currently disabled.
+captcha-failed: Captcha failed.
+username-syntax-is-invalid: Invalid username syntax.
+username-cannot-contains-both-dash-and-space: Username may contain "_" or " ", but not both.
+username-disallowed: Disallowed username; pick another.
+username-already-taken-by-others: Username already taken by another user.
+email-is-invalid: Invalid email syntax.
+email-already-taken: Email already taken by another user.
+password:
+  must-between-8-32-characters-in-length: Password must be 8-32 characters in length.
+  must-have-more-than-3-unique-characters: Password must have more than 3 unique characters.
+  too-simple: That password was deemed too simple.
diff --git a/locales/default/register/en-US.yml b/locales/default/register/en-US.yml
new file mode 100644
index 00000000..5287eb74
--- /dev/null
+++ b/locales/default/register/en-US.yml
@@ -0,0 +1,17 @@
+registration: Registration
+register: register
+email: Email
+already-have-an-account: Already have an account?
+username: Username
+captcha-failed: Captcha failed.
+currently-disabled: Registrations are currently disabled.
+email-already-taken: Email already taken by another user.
+email-is-invalid: Invalid email syntax.
+password:
+  must-have-more-than-3-unique-characters: Password must have more than 3 unique characters.
+  too-simple: That password was deemed too simple.
+  must-between-8-32-characters-in-length: Password must be 8-32 characters in length.
+username-cannot-contains-both-dash-and-space: Username may contain "_" or " ", but not both.
+username-already-taken-by-others: Username already taken by another user.
+username-disallowed: Disallowed username; pick another.
+username-syntax-is-invalid: Invalid username syntax.
diff --git a/locales/default/register/zh-CN.yml b/locales/default/register/zh-CN.yml
new file mode 100644
index 00000000..12f68c9f
--- /dev/null
+++ b/locales/default/register/zh-CN.yml
@@ -0,0 +1,17 @@
+registration: 注册
+register: 注册账号
+email: 电子邮箱
+already-have-an-account: 已经拥有账号了?
+username: 你的用户名
+captcha-failed: 验证码有问题。
+currently-disabled: 注册功能目前正在禁用中
+email-already-taken: 该电子邮箱已经被其他用户注册过了
+email-is-invalid: 无效的邮箱格式
+password:
+  must-have-more-than-3-unique-characters: 密码必须包含三个以上的特殊字符
+  too-simple: 这个密码看上去太简单了
+  must-between-8-32-characters-in-length: 密码的长度只能是8到32个字符之内
+username-cannot-contains-both-dash-and-space: 用户名不能同时存在"_"和" "(空格)符号
+username-already-taken-by-others: 该用户名已经被其他用户使用了
+username-disallowed: 该用户名不允许被使用, 请选择别的
+username-syntax-is-invalid: 无效的用户名格式
diff --git a/locales/default/settings/en-GB.yml b/locales/default/settings/en-GB.yml
new file mode 100644
index 00000000..a11b6998
--- /dev/null
+++ b/locales/default/settings/en-GB.yml
@@ -0,0 +1,27 @@
+avatar: Avatar
+avatar-description: >-
+  We recommend an image of at least 512x512 (or 1:1 ratio).You can upload a PNG,
+  JPG under 5MB
+choose-file: Choose file
+save: Save
+preview: Preview
+customization: Customisation
+banner: Banner
+banner-description: Recommend with 1440x262 pixels with GIF, PNG, JPG, JPEG
+profile-background: Profile Background
+profile-background-description: Recommend with 16:9 ratio with PNG, JPG, JPEG
+password-change: Password Change
+old-password: Old Password
+new-password: New Password
+repeat-password: Repeat Password
+profile__literal: Profile
+user-information: User Infomation
+username: Username
+settings: Settings
+bad-image-extension: The %{something} you select must be either a .JPG, .JPEG, or .PNG file!
+change-succeed: Your %{something} has been successfully changed!
+no-image-was-selected: No image was selected!
+about-me: About Me
+about-me-title: About Me
+avatar-title: Upload avatar
+api-key: API Key
diff --git a/locales/default/settings/en-US.yml b/locales/default/settings/en-US.yml
new file mode 100644
index 00000000..c834dcb0
--- /dev/null
+++ b/locales/default/settings/en-US.yml
@@ -0,0 +1,28 @@
+avatar: Avatar
+avatar-description: >-
+  We recommend an image of at least 512x512 (or 1:1 ratio).You can upload a PNG,
+  JPG under 5MB
+choose-file: Choose file
+save: Save
+preview: Preview
+banner: Banner
+banner-description: Recommend with 1440x262 pixels with GIF, PNG, JPG, JPEG
+profile-background: Profile Background
+profile-background-description: Recommend with 16:9 ratio with PNG, JPG, JPEG
+password__literal: Password
+password-change: Password Change
+old-password: Old Password
+new-password: New Password
+repeat-password: Repeat Password
+profile__literal: Profile
+user-information: User Infomation
+username: Username
+settings: Settings
+bad-image-extension: The %{something} you select must be either a .JPG, .JPEG, or .PNG file!
+change-succeed: Your %{something} has been successfully changed!
+no-image-was-selected: No image was selected!
+customization: Customization
+about-me: About Me
+about-me-title: About Me
+avatar-title: Upload avatar
+api-key: API Key
diff --git a/locales/default/settings/password/en-GB.yml b/locales/default/settings/password/en-GB.yml
new file mode 100644
index 00000000..d11a8254
--- /dev/null
+++ b/locales/default/settings/password/en-GB.yml
@@ -0,0 +1,6 @@
+new-passoword-mismatch-repeated-password: Your new password doesn't match your repeated password!
+new-passoword-cannot-be-same-as-old-password: Your new password cannot be the same as your old password!
+must-between-8-32-characters-in-length: Your new password must be 8-32 characters in length.
+must-have-more-than-3-unique-characters: Your new password must have more than 3 unique characters.
+too-simple: Your new password was deemed too simple.
+old-password-incorrect: Your old password is incorrect.
diff --git a/locales/default/settings/password/en-US.yml b/locales/default/settings/password/en-US.yml
new file mode 100644
index 00000000..d11a8254
--- /dev/null
+++ b/locales/default/settings/password/en-US.yml
@@ -0,0 +1,6 @@
+new-passoword-mismatch-repeated-password: Your new password doesn't match your repeated password!
+new-passoword-cannot-be-same-as-old-password: Your new password cannot be the same as your old password!
+must-between-8-32-characters-in-length: Your new password must be 8-32 characters in length.
+must-have-more-than-3-unique-characters: Your new password must have more than 3 unique characters.
+too-simple: Your new password was deemed too simple.
+old-password-incorrect: Your old password is incorrect.
diff --git a/locales/default/settings/password/zh-CN.yml b/locales/default/settings/password/zh-CN.yml
new file mode 100644
index 00000000..edb2b678
--- /dev/null
+++ b/locales/default/settings/password/zh-CN.yml
@@ -0,0 +1,6 @@
+new-passoword-mismatch-repeated-password: 你的新密码与确认密码不符
+new-passoword-cannot-be-same-as-old-password: 你的新密码不能是旧密码
+must-between-8-32-characters-in-length: 你的新密码只能在8到32个字符之间
+must-have-more-than-3-unique-characters: 你的新密码必须包含三个以上的特殊字符
+too-simple: 你的新密码看上去太简单了
+old-password-incorrect: 你的旧密码有误
diff --git a/locales/default/settings/profile/en-GB.yml b/locales/default/settings/profile/en-GB.yml
new file mode 100644
index 00000000..c8fc0d11
--- /dev/null
+++ b/locales/default/settings/profile/en-GB.yml
@@ -0,0 +1,8 @@
+no-changes-have-been-made: No changes have been made.
+username-changes-supporter-only: Username changes are currently a supporter perk.
+new-username-is-invalid: Your new username syntax is invalid.
+new-username-cannot-contains-both-dash-and-space: Your new username may contain "_" or " ", but not both.
+new-username-disallowed: Your new username isn't allowed; pick another.
+new-username-already-taken-by-others: Your new username already taken by another user.
+new-email-is-invalid: Your new email syntax is invalid.
+succeed-please-login-again: Your username/email have been changed! Please login again.
\ No newline at end of file
diff --git a/locales/default/settings/profile/en-US.yml b/locales/default/settings/profile/en-US.yml
new file mode 100644
index 00000000..111f48b6
--- /dev/null
+++ b/locales/default/settings/profile/en-US.yml
@@ -0,0 +1,8 @@
+no-changes-have-been-made: No changes have been made.
+username-changes-supporter-only: Username changes are currently a supporter perk.
+new-username-is-invalid: Your new username syntax is invalid.
+new-username-cannot-contains-both-dash-and-space: Your new username may contain "_" or " ", but not both.
+new-username-disallowed: Your new username isn't allowed; pick another.
+new-username-already-taken-by-others: Your new username already taken by another user.
+new-email-is-invalid: Your new email syntax is invalid.
+succeed-please-login-again: Your username/email have been changed! Please login again.
diff --git a/locales/default/settings/profile/zh-CN.yml b/locales/default/settings/profile/zh-CN.yml
new file mode 100644
index 00000000..08aba488
--- /dev/null
+++ b/locales/default/settings/profile/zh-CN.yml
@@ -0,0 +1,8 @@
+no-changes-have-been-made: 没有任何改变
+username-changes-supporter-only: 用户名更改功能目前是支持者的福利
+new-username-is-invalid: 你的新用户名格式有误
+new-username-cannot-contains-both-dash-and-space: 你的新用户名不能同时存在"_"(下划线)和" "(空格)字符
+new-username-disallowed: 你的新用户名不允许被使用, 再想一个新名字吧
+new-username-already-taken-by-others: 你的新用户名已经被其它用户使用
+new-email-is-invalid: 你的新邮箱格式有误
+succeed-please-login-again: 你的用户名或者邮箱地址被修改了!请重新登录
diff --git a/locales/default/settings/zh-CN.yml b/locales/default/settings/zh-CN.yml
new file mode 100644
index 00000000..68396146
--- /dev/null
+++ b/locales/default/settings/zh-CN.yml
@@ -0,0 +1,26 @@
+avatar: 头像
+avatar-description: 我们建议至少上传分辨率为 512x512 (或者长宽比为 1:1)的PNG或JPG图片. 并且图片大小低于5MB
+choose-file: 选择一张图片
+save: 保存
+preview: 预览
+customization: 个性化
+banner: 背景横幅
+banner-description: 建议上传分辨率为 1440x262 的 GIF, PNG, JPG, JPEG 等四种格式的图片
+profile-background: 资料背景
+profile-background-description: 建议上传长宽比为 16:9  的 PNG, JPG, JPEG 格式的图片
+password__literal: 密码
+password-change: 更改密码
+old-password: 旧密码
+new-password: 新密码
+repeat-password: 确认新密码
+profile__literal: 玩家资料
+user-information: 用户信息
+username: 你的用户名
+settings: 设置
+bad-image-extension: 你选择的%{something}必须是 .jpg .jpeg .png 这三种文件之一
+change-succeed: 你的 %{something}已经修改成功!
+no-image-was-selected: 请选择一张图片
+about-me: 个人介绍
+about-me-title: 编辑个人介绍
+avatar-title: 上传头像
+api-key: API 秘钥
diff --git a/locales/default/verify/en-GB.yml b/locales/default/verify/en-GB.yml
new file mode 100644
index 00000000..c452b20a
--- /dev/null
+++ b/locales/default/verify/en-GB.yml
@@ -0,0 +1,18 @@
+verification: Verification
+how-to-verify-your-account: How to verify your account
+what-do-you-mean-this-must-be-easy-right: What do you mean? This must be easy right?
+follow-these-three-simple-steps: Follow these three simple steps to get started playing %{appName} !
+osu-shortcut: Osu shortcut
+find-your-shortcut: Find your shortcut to osu on desktop and copy it!
+edit-it: Edit it
+right-click-properties: Right click -> Properties
+find-target-element-box: Find "Target element" Box
+add-domain: Add -devserver %{domain} at the end of it
+login-to-your-account: Login to your account
+login-to-your-app-name-account: Login to your %{appName} account and you should be done!
+oh-crap-i-am-stuck: Oh crap! I'm stuck please help me!
+need-help-join-discord-server: |-
+  Need help? We've got you covered - join the Discord so our community can help you out!
+click-here-to-join-our-discord: Click here to join our Discord!
+waiting-for-verification: Waiting for verification!
+follow-the-simple-instructions: Follow the simple instructions above and once you're done reload this page!
diff --git a/locales/default/verify/en-US.yml b/locales/default/verify/en-US.yml
new file mode 100644
index 00000000..c452b20a
--- /dev/null
+++ b/locales/default/verify/en-US.yml
@@ -0,0 +1,18 @@
+verification: Verification
+how-to-verify-your-account: How to verify your account
+what-do-you-mean-this-must-be-easy-right: What do you mean? This must be easy right?
+follow-these-three-simple-steps: Follow these three simple steps to get started playing %{appName} !
+osu-shortcut: Osu shortcut
+find-your-shortcut: Find your shortcut to osu on desktop and copy it!
+edit-it: Edit it
+right-click-properties: Right click -> Properties
+find-target-element-box: Find "Target element" Box
+add-domain: Add -devserver %{domain} at the end of it
+login-to-your-account: Login to your account
+login-to-your-app-name-account: Login to your %{appName} account and you should be done!
+oh-crap-i-am-stuck: Oh crap! I'm stuck please help me!
+need-help-join-discord-server: |-
+  Need help? We've got you covered - join the Discord so our community can help you out!
+click-here-to-join-our-discord: Click here to join our Discord!
+waiting-for-verification: Waiting for verification!
+follow-the-simple-instructions: Follow the simple instructions above and once you're done reload this page!
diff --git a/locales/default/verify/zh-CN.yml b/locales/default/verify/zh-CN.yml
new file mode 100644
index 00000000..666ef43e
--- /dev/null
+++ b/locales/default/verify/zh-CN.yml
@@ -0,0 +1,18 @@
+verification: 认证账号
+how-to-verify-your-account: 如何来认证你的账号
+what-do-you-mean-this-must-be-easy-right: 别想太复杂, 肯定很简单拉~。
+follow-these-three-simple-steps: 跟随以下三个简单的步骤即可游玩 %{appName} 了!
+osu-shortcut: Osu! 快捷方式
+find-your-shortcut: 在桌面上寻找你的osu!快捷方式并复制一份 (如果没有,可以去osu!目录里创建一份)
+edit-it: 修改属性
+right-click-properties: 右键快捷方式, 在菜单中找到 "属性" 选项, (一般在最下边)
+find-target-element-box: 找到 "目标" 这一行
+add-domain: 在文本的末尾添加 -devserver %{domain}
+login-to-your-account: 登入你的账号
+login-to-your-app-name-account: 登录你的 %{appName} 账号, 然后就应该万事大吉了!
+oh-crap-i-am-stuck: 妈的，我卡在这个步骤了, 赶紧过来帮我一下
+need-help-join-discord-server: >-
+  看上去你需要点帮助,没问题!加入我们的Discord服务器即可为你解决你的疑难杂症
+click-here-to-join-our-discord: 点击此处加入到我们的Discord服务器!
+waiting-for-verification: 正在等待验证结果~
+follow-the-simple-instructions: 只需按照上面的简单说明进行操作，完成后重新加载此页面！
diff --git a/locales/ppy.sb/home/en-GB.yml b/locales/ppy.sb/home/en-GB.yml
new file mode 100644
index 00000000..650b7c6c
--- /dev/null
+++ b/locales/ppy.sb/home/en-GB.yml
@@ -0,0 +1,2 @@
+subtitle-big: |-
+  Welcome to %{appName}, an all mode osu! private server. We have all-round pp system including advanced Relax and AutoPilot formula. Ranking system is also opened to all maps. And we provide unlimited chances to change your name. Our chatbot is always there providing you 24h profile and score presentation.-- For more information, join our QQ Group 792778662.Many services of %{appName} are still under construction, any issues can be reported to us
\ No newline at end of file
diff --git a/locales/ppy.sb/home/en-US.yml b/locales/ppy.sb/home/en-US.yml
new file mode 100644
index 00000000..650b7c6c
--- /dev/null
+++ b/locales/ppy.sb/home/en-US.yml
@@ -0,0 +1,2 @@
+subtitle-big: |-
+  Welcome to %{appName}, an all mode osu! private server. We have all-round pp system including advanced Relax and AutoPilot formula. Ranking system is also opened to all maps. And we provide unlimited chances to change your name. Our chatbot is always there providing you 24h profile and score presentation.-- For more information, join our QQ Group 792778662.Many services of %{appName} are still under construction, any issues can be reported to us
\ No newline at end of file
diff --git a/locales/ppy.sb/home/zh-CN.yml b/locales/ppy.sb/home/zh-CN.yml
new file mode 100644
index 00000000..9fe92e31
--- /dev/null
+++ b/locales/ppy.sb/home/zh-CN.yml
@@ -0,0 +1,2 @@
+subtitle-big: |-
+  欢迎来到 %{appName}, 一个面向全模式的osu!私服. 我们有最先进的RX, AP算法, 同时为全模式提供PP计算支持. 我们拥有全图排行榜, 以及无限次数的改名机会. 群内的兽耳机器人24小时为您提供成绩查询等服务. 详情请加QQ群: 792778662. %{appName} 新版本目前仍在测试阶段, 如出现问题或有改进建议, 欢迎与我们联系与沟通.
\ No newline at end of file
diff --git a/locales/ppy.sb/verify/en-GB.yml b/locales/ppy.sb/verify/en-GB.yml
new file mode 100644
index 00000000..b95437ec
--- /dev/null
+++ b/locales/ppy.sb/verify/en-GB.yml
@@ -0,0 +1,2 @@
+need-help-join-discord-server: Need help? We've got you covered - join the QQ Group so our community can help you out!
+click-here-to-join-our-discord: Click here to join our QQ Group or search 792778662!!
\ No newline at end of file
diff --git a/locales/ppy.sb/verify/en-US.yml b/locales/ppy.sb/verify/en-US.yml
new file mode 100644
index 00000000..b95437ec
--- /dev/null
+++ b/locales/ppy.sb/verify/en-US.yml
@@ -0,0 +1,2 @@
+need-help-join-discord-server: Need help? We've got you covered - join the QQ Group so our community can help you out!
+click-here-to-join-our-discord: Click here to join our QQ Group or search 792778662!!
\ No newline at end of file
diff --git a/locales/ppy.sb/verify/zh-CN.yml b/locales/ppy.sb/verify/zh-CN.yml
new file mode 100644
index 00000000..b343c20c
--- /dev/null
+++ b/locales/ppy.sb/verify/zh-CN.yml
@@ -0,0 +1,2 @@
+need-help-join-discord-server: 看上去你需要点帮助,没问题!加入我们的QQ群即可为你解决你的疑难杂症
+click-here-to-join-our-discord: 点击此处加入到我们的QQ群!
\ No newline at end of file
diff --git a/main.py b/main.py
index 53197dde..93c45da9 100755
--- a/main.py
+++ b/main.py
@@ -4,71 +4,60 @@
 __all__ = ()
 
 import os
-
 import aiohttp
+import i18n
 import orjson
-from quart import Quart
 from quart import render_template
-
 from cmyui.logging import Ansi
 from cmyui.logging import log
 from cmyui.mysql import AsyncSQLPool
-from cmyui.version import Version
-
 from objects import glob
-
-app = Quart(__name__)
-
-version = Version(1, 3, 0)
+from objects.glob import app
 
 # used to secure session data.
 # we recommend using a long randomly generated ascii string.
 app.secret_key = glob.config.secret_key
 
+
 @app.before_serving
 async def mysql_conn() -> None:
     glob.db = AsyncSQLPool()
-    await glob.db.connect(glob.config.mysql) # type: ignore
-    log('Connected to MySQL!', Ansi.LGREEN)
+    await glob.db.connect(glob.config.mysql)  # type: ignore
+    log("Connected to MySQL!", Ansi.LGREEN)
+
+
+@app.before_serving
+async def load_lang():
+    i18n.load_path.append(os.getcwd() + "/.locales")
+
 
 @app.before_serving
 async def http_conn() -> None:
     glob.http = aiohttp.ClientSession(json_serialize=lambda x: orjson.dumps(x).decode())
-    log('Got our Client Session!', Ansi.LGREEN)
+    log("Got our Client Session!", Ansi.LGREEN)
+
 
 @app.after_serving
 async def shutdown() -> None:
     await glob.db.close()
     await glob.http.close()
 
-# globals which can be used in template code
-@app.template_global()
-def appVersion() -> str:
-    return repr(version)
-
-@app.template_global()
-def appName() -> str:
-    return glob.config.app_name
-
-@app.template_global()
-def captchaKey() -> str:
-    return glob.config.hCaptcha_sitekey
-
-@app.template_global()
-def domain() -> str:
-    return glob.config.domain
 
 from blueprints.frontend import frontend
+
 app.register_blueprint(frontend)
 
 from blueprints.admin import admin
-app.register_blueprint(admin, url_prefix='/admin')
+
+app.register_blueprint(admin, url_prefix="/admin")
+
 
 @app.errorhandler(404)
 async def page_not_found(e):
     # NOTE: we set the 404 status explicitly
-    return (await render_template('404.html'), 404)
+    return (await render_template("404.html"), 404)
+
 
-if __name__ == '__main__':
+if __name__ == "__main__":
     os.chdir(os.path.dirname(os.path.realpath(__file__)))
-    app.run(port=8000, debug=glob.config.debug) # blocking call
+    app.run(host="0.0.0.0", port=8000, debug=glob.config.debug)  # blocking call
diff --git a/objects/glob.py b/objects/glob.py
index e384e02c..67815991 100644
--- a/objects/glob.py
+++ b/objects/glob.py
@@ -1,20 +1,129 @@
 # -*- coding: utf-8 -*-
 
-__all__ = ('db', 'http', 'version', 'cache')
+__all__ = ("db", "http", "version", "cache")
 
-from typing import TYPE_CHECKING
+import os
+import time
+from quart import Quart, session
+import i18n
+import markdown2
+import html
+import json
+from aiohttp import ClientSession
+from cmyui.mysql import AsyncSQLPool
+from cmyui.version import Version
+import config
+from constants.beatmaps import RankedStatus
+from constants.privileges import Privileges
 
-import config  # imported for indirect use
 
-if TYPE_CHECKING:
-    from aiohttp import ClientSession
-    from cmyui.mysql import AsyncSQLPool
-    from cmyui.version import Version
+db: "AsyncSQLPool"
+http: "ClientSession"
+version: "Version"
+app = Quart(
+    __name__,
+    template_folder=f"{os.getcwd()}/templates",
+    static_folder=f"{os.getcwd()}/static",
+)
+version = Version(1, 5, 0)
 
-db: 'AsyncSQLPool'
-http: 'ClientSession'
-version: 'Version'
+cache = {"bcrypt": {}, "search_data": {}}
 
-cache = {
-    'bcrypt': {}
-}
+
+@app.template_global()
+def t(key, **kwargs) -> str:
+    kwargs["locale"] = session.get("lang", config.default_locale)
+    try:
+        return i18n.t(key, **kwargs)
+    except:
+        try:
+            return i18n.t(key + "._string", **kwargs)
+        except:
+            return key
+
+
+@app.template_global()
+def appName() -> str:
+    return config.app_name
+
+
+@app.template_global()
+def appVersion() -> str:
+    return repr(version)
+
+
+# Verified Unrestricted -> Normal
+# Dangerous Admin Mod -> Stuff
+# Supporter Premium -> Donator
+# Not Verified -> Disclaimed
+# Not Unrestricted -> Restricted
+@app.template_global()
+def format_priv(target_priv: int) -> set:
+    priv_list = [
+        priv.name
+        for priv in Privileges
+        if target_priv & priv and bin(priv).count("1") == 1
+    ][::-1]
+    if "Unrestricted" not in priv_list:
+        return ["Restricted"]
+    if "Verified" not in priv_list:
+        return ["Disclaimed"]
+    if set(["Verified", "Unrestricted"]).issubset(priv_list):
+        priv_list.remove("Verified")
+        priv_list.remove("Unrestricted")
+        priv_list.append("Normal")
+    if set(["Dangerous", "Admin", "Mod"]).issubset(priv_list):
+        priv_list.remove("Dangerous")
+        priv_list.remove("Admin")
+        priv_list.remove("Mod")
+        priv_list.append("Stuff")
+    if set(["Supporter", "Premium"]).issubset(priv_list):
+        priv_list.remove("Supporter")
+        priv_list.remove("Premium")
+        priv_list.append("Donator")
+    if "Normal" in priv_list and len(priv_list) != 1:
+        priv_list.remove("Normal")
+    # return ', '.join(priv_list)
+    return priv_list
+
+
+@app.template_global()
+def captchaKey() -> str:
+    return config.hCaptcha_sitekey
+
+
+@app.template_global()
+def handle_timestamp(timestamp):
+    return time.strftime("%Y-%m-%d %H:%M", time.localtime(int(timestamp)))
+
+
+@app.template_global()
+def domain() -> str:
+    return config.domain
+
+
+@app.template_global()
+def render_markdown(md: str) -> str:
+    return markdown2.markdown(
+        html.unescape(md),
+        extras={
+            "tables": None,
+            "break-on-newline": None,
+            "fenced-code-blocks": None,
+            "spoiler": None,
+            "strike": None,
+            "html-classes": {
+                "table": "table"
+            }
+        },
+    )
+
+
+@app.template_global()
+def decode_map_status(status: int) -> str:
+    return RankedStatus(status).name
+
+
+@app.template_filter("JSON")
+def JSON(anyting) -> str:
+    return app.jinja_env.filters["safe"](json.dumps(anyting))
diff --git a/objects/utils.py b/objects/utils.py
index 16cc1cfc..062e316a 100644
--- a/objects/utils.py
+++ b/objects/utils.py
@@ -15,151 +15,154 @@
 if TYPE_CHECKING:
     from PIL.Image import Image
 
+
 async def flash(status: str, msg: str, template: str) -> str:
     """Flashes a success/error message on a specified template."""
-    return await render_template(f'{template}.html', flash=msg, status=status)
+    return await render_template(f"{template}.html", flash=msg, status=status)
+
 
 async def flash_with_customizations(status: str, msg: str, template: str) -> str:
     """Flashes a success/error message on a specified template. (for customisation settings)"""
-    profile_customizations = utils.has_profile_customizations(session['user_data']['id'])
+    profile_customizations = utils.has_profile_customizations(
+        session["user_data"]["id"]
+    )
     return await render_template(
-        template_name_or_list=f'{template}.html',
+        template_name_or_list=f"{template}.html",
         flash=msg,
         status=status,
-        customizations=profile_customizations
+        customizations=profile_customizations,
     )
 
+
 def get_safe_name(name: str) -> str:
     """Returns the safe version of a username."""
     # Safe name should meet few criterias.
     # - Whole name should be lower letters.
     # - Space must be replaced with _
-    return name.lower().replace(' ', '_')
+    return name.lower().replace(" ", "_")
+
 
 def convert_mode_int(mode: str) -> Optional[int]:
     """Converts mode (str) to mode (int)."""
     if mode not in _str_mode_dict:
-        print('invalid mode passed into utils.convert_mode_int?')
+        print("invalid mode passed into utils.convert_mode_int?")
         return
     return _str_mode_dict[mode]
 
-_str_mode_dict = {
-    'std': 0,
-    'taiko': 1,
-    'catch': 2,
-    'mania': 3
-}
+
+_str_mode_dict = {"std": 0, "taiko": 1, "catch": 2, "mania": 3}
+
 
 def convert_mode_str(mode: int) -> Optional[str]:
     """Converts mode (int) to mode (str)."""
     if mode not in _mode_str_dict:
-        print('invalid mode passed into utils.convert_mode_str?')
+        print("invalid mode passed into utils.convert_mode_str?")
         return
     return _mode_str_dict[mode]
 
-_mode_str_dict = {
-    0: 'std',
-    1: 'taiko',
-    2: 'catch',
-    3: 'mania'
-}
+
+_mode_str_dict = {0: "std", 1: "taiko", 2: "catch", 3: "mania"}
+
 
 async def fetch_geoloc(ip: str) -> str:
     """Fetches the country code corresponding to an IP."""
-    url = f'http://ip-api.com/line/{ip}'
+    url = f"http://ip-api.com/line/{ip}"
 
     async with glob.http.get(url) as resp:
         if not resp or resp.status != 200:
             if glob.config.debug:
-                log('Failed to get geoloc data: request failed.', Ansi.LRED)
-            return 'xx'
-        status, *lines = (await resp.text()).split('\n')
-        if status != 'success':
+                log("Failed to get geoloc data: request failed.", Ansi.LRED)
+            return "xx"
+        status, *lines = (await resp.text()).split("\n")
+        if status != "success":
             if glob.config.debug:
-                log(f'Failed to get geoloc data: {lines[0]}.', Ansi.LRED)
-            return 'xx'
+                log(f"Failed to get geoloc data: {lines[0]}.", Ansi.LRED)
+            return "xx"
         return lines[1].lower()
 
+
 async def validate_captcha(data: str) -> bool:
     """Verify `data` with hcaptcha's API."""
-    url = f'https://hcaptcha.com/siteverify'
+    url = f"https://hcaptcha.com/siteverify"
 
-    request_data = {
-        'secret': glob.config.hCaptcha_secret,
-        'response': data
-    }
+    request_data = {"secret": glob.config.hCaptcha_secret, "response": data}
 
     async with glob.http.post(url, data=request_data) as resp:
         if not resp or resp.status != 200:
             if glob.config.debug:
-                log('Failed to verify captcha: request failed.', Ansi.LRED)
+                log("Failed to verify captcha: request failed.", Ansi.LRED)
             return False
 
         res = await resp.json()
 
-        return res['success']
+        return res["success"]
+
 
 def get_required_score_for_level(level: int) -> float:
-	if level <= 100:
-		if level >= 2:
-			return 5000 / 3 * (4 * (level ** 3) - 3 * (level ** 2) - level) + 1.25 * (1.8 ** (level - 60))
-		else:
-			return 1.0  # Should be 0, but we get division by 0 below so set to 1
-	else:
-		return 26931190829 + 1e11 * (level - 100)
+    if level <= 100:
+        if level >= 2:
+            return 5000 / 3 * (4 * (level**3) - 3 * (level**2) - level) + 1.25 * (
+                1.8 ** (level - 60)
+            )
+        else:
+            return 1.0  # Should be 0, but we get division by 0 below so set to 1
+    else:
+        return 26931190829 + 1e11 * (level - 100)
+
 
 def get_level(totalScore: int) -> int:
-	level = 1
-	while True:
-		# Avoid endless loops
-		if level > 120:
-			return level
-
-		# Calculate required score
-		reqScore = get_required_score_for_level(level)
-
-		# Check if this is our level
-		if totalScore <= reqScore:
-			# Our level, return it and break
-			return level - 1
-		else:
-			# Not our level, calculate score for next level
-			level += 1
-
-BANNERS_PATH = Path.cwd() / '.data/banners'
-BACKGROUND_PATH = Path.cwd() / '.data/backgrounds'
+    level = 1
+    while True:
+        # Avoid endless loops
+        if level > 120:
+            return level
+
+        # Calculate required score
+        reqScore = get_required_score_for_level(level)
+
+        # Check if this is our level
+        if totalScore <= reqScore:
+            # Our level, return it and break
+            return level - 1
+        else:
+            # Not our level, calculate score for next level
+            level += 1
+
+
+BANNERS_PATH = Path.cwd() / ".data/banners"
+BACKGROUND_PATH = Path.cwd() / ".data/backgrounds"
+
+
 def has_profile_customizations(user_id: int = 0) -> dict[str, bool]:
     # check for custom banner image file
-    for ext in ('jpg', 'jpeg', 'png', 'gif'):
-        path = BANNERS_PATH / f'{user_id}.{ext}'
+    for ext in ("jpg", "jpeg", "png", "gif"):
+        path = BANNERS_PATH / f"{user_id}.{ext}"
         if has_custom_banner := path.exists():
             break
     else:
         has_custom_banner = False
 
     # check for custom background image file
-    for ext in ('jpg', 'jpeg', 'png', 'gif'):
-        path = BACKGROUND_PATH / f'{user_id}.{ext}'
+    for ext in ("jpg", "jpeg", "png", "gif"):
+        path = BACKGROUND_PATH / f"{user_id}.{ext}"
         if has_custom_background := path.exists():
             break
     else:
         has_custom_background = False
 
-    return {
-        'banner' : has_custom_banner,
-        'background': has_custom_background
-    }
+    return {"banner": has_custom_banner, "background": has_custom_background}
+
 
-def crop_image(image: 'Image') -> 'Image':
+def crop_image(image: "Image") -> "Image":
     width, height = image.size
     if width == height:
         return image
 
-    offset = int(abs(height-width) / 2)
+    offset = int(abs(height - width) / 2)
 
     if width > height:
-        image = image.crop([offset, 0, width-offset, height])
+        image = image.crop([offset, 0, width - offset, height])
     else:
-        image = image.crop([0, offset, width, height-offset])
+        image = image.crop([0, offset, width, height - offset])
 
     return image
diff --git a/objects/varka.py b/objects/varka.py
new file mode 100644
index 00000000..8a3a95d0
--- /dev/null
+++ b/objects/varka.py
@@ -0,0 +1,134 @@
+from quart import jsonify
+from objects import glob
+
+
+async def get_users(limit: int = 100, search: str = None):
+    """Returns the all of a users."""
+    query = """
+        select 
+            u.*,
+            l.ip,
+            l.osu_ver,
+            l.osu_stream,
+            l.datetime as last_login
+        from users u
+        left join (
+            select * from ingame_logins i1
+            inner join (
+                select max(id) as max_id
+                from ingame_logins
+                group by userid
+            ) as i2
+            ON i1.id = i2.max_id
+        ) as l
+        on u.id = l.userid
+    """.replace(
+        "  ", " "
+    ).splitlines()
+    args = []
+
+    if search:
+        query.append("WHERE u.`name` LIKE %s")
+        args.append(f"{search}%")
+        query.append("OR u.`email` LIKE %s")
+        args.append(f"{search}%")
+        query.append("OR CONVERT(u.`id`, char) LIKE %s")
+        args.append(f"{search}%%")
+
+    query.append(f"ORDER BY l.`datetime` DESC LIMIT %s")
+    args.append(limit)
+
+    query = " ".join(query)
+    res = await glob.db.fetchall(query, args)
+    return res
+
+
+async def get_user(id: int):
+    """Returns the all of a users."""
+    query = f"SELECT * FROM users WHERE id={id}"
+    res = await glob.db.fetch(query)
+    return res
+
+
+async def get_user_username(username: str):
+    query = f'SELECT id from users WHERE name="{username}"'
+    res = await glob.db.fetch(query)
+    return res
+
+
+async def get_user_email(email: str):
+    query = f'SELECT id from users WHERE email="{email}"'
+    res = await glob.db.fetch(query)
+    return res
+
+
+async def get_res_users():
+    query = "select ru.id, ru.country, ru.name,`logs`.msg, `logs`.time  from (SELECT * FROM `users` where NOT users.priv & 1) ru left join `logs` on ru.id=`logs`.to"
+    res = await glob.db.fetchall(query)
+    return res
+
+
+async def get_scores(limit: int = 25):
+    """Returns the all of a scores."""
+    query = (
+        "SELECT scores_vn.*, maps.artist, maps.title, "
+        "maps.set_id, maps.creator, maps.version "
+        "FROM scores_vn "
+        "JOIN maps ON scores_vn.map_md5 = maps.md5 "
+        f"ORDER BY scores_vn.id DESC LIMIT {limit}"
+    )
+    res = await glob.db.fetchall(query)
+    return res
+
+
+async def get_data(table_name: str, id: str):
+    if table_name in ("users"):
+        if id.isdigit():
+            return await glob.db.fetch(
+                "select * from `%s` where id = %s limit 1" % (table_name, id)
+            )
+        else:
+            return 404
+    else:
+        return 404
+
+
+async def update(table, id, **kargs):
+    params = []
+    for k, v in kargs.items():
+        if v is not None:
+            params.append(f"{k}='{v}'")
+        else:
+            params.append(f"{k}=NULL")
+    await glob.db.execute(
+        "UPDATE `%s` SET %s WHERE %s = '%s'" % (table, ", ".join(params), *id)
+    )
+    return "ok"
+
+
+async def insert(table, **kargs):
+    params = []
+    for k, v in kargs.items():
+        if v is not None:
+            params.append(f"{k}='{v}'")
+        else:
+            params.append(f"{k}=NULL")
+    return glob.db.execute("INSERT INTO `%s` SET %s" % (table, ", ".join(params)))
+
+
+async def search_user(keyword: str):
+    if not keyword:
+        return b"{}"
+    result = await glob.db.fetchall(
+        "SELECT id, name "
+        "FROM `users` "
+        "WHERE priv >= 3 "
+        "AND ("
+        "   `name` LIKE %s "
+        "   OR CONVERT(`id`, char) LIKE %s "
+        ") LIMIT 5",
+        [keyword + "%%", keyword + "%%"],
+    )
+    if len(result) == 0:
+        return b"{}"
+    return jsonify(result)
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..8ab92065
--- /dev/null
+++ b/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "guweb",
+  "version": "1.0.0",
+  "description": "Table of Contents ================== - [Table of Contents](#table-of-contents)   - [What is guweb?](#what-is-guweb)   - [Requirements](#requirements)   - [Setup](#setup)   - [Directory Structure](#directory-structure)   - [The team](#the-team)   - [The End](#the-end)",
+  "main": "",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "i18n:build": "node -r ts-node/register utils/i18n/commands/build",
+    "i18n:compile": "node -r ts-node/register utils/i18n/commands/build echo 'use i18n:build from now on.'",
+    "i18n:format:templates": "node -r ts-node/register utils/i18n/commands/format-html"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Varkaria/guweb.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Varkaria/guweb/issues"
+  },
+  "homepage": "https://github.com/Varkaria/guweb#readme",
+  "devDependencies": {
+    "@types/clui": "^0.3.1",
+    "@types/glob": "^7.2.0",
+    "@types/jquery": "^3.5.14",
+    "@types/js-yaml": "^4.0.5",
+    "@types/node": "^18.6.2",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "clui": "^0.3.6",
+    "eslint": "^8.0.1",
+    "eslint-config-standard-with-typescript": "^22.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jquery": "^1.5.1",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-vue": "^9.4.0",
+    "glob": "^8.0.3",
+    "js-yaml": "^4.1.0",
+    "nodemon": "^2.0.16",
+    "typescript": "^4.7.4",
+    "yaml": "^2.1.1"
+  },
+  "dependencies": {
+    "@types/lodash": "^4.14.182",
+    "lodash": "^4.17.21",
+    "ts-node": "^10.9.1"
+  }
+}
diff --git a/static/css/bulma.css b/static/css/bulma.css
new file mode 100644
index 00000000..1dbe6c6e
--- /dev/null
+++ b/static/css/bulma.css
@@ -0,0 +1,11829 @@
+@font-face {
+    font-family: Rubik;
+    src: url(https://fastly.jsdelivr.net/gh/HakuraSukinoe/bulma-hsl/Rubik.woff2) format("woff2 supports variations"), url(https://fastly.jsdelivr.net/gh/HakuraSukinoe/bulma-hsl/Rubik.woff2) format("woff2-variations");
+    font-weight: 100 1000;
+    font-stretch: 25% 151%
+}
+
+html {
+    --main: 215;
+    --blue: #007bff;
+    --indigo: #6610f2;
+    --purple: #6f42c1;
+    --pink: #e83e8c;
+    --red: #dc3545;
+    --orange: #fd7e14;
+    --yellow: #ffc107;
+    --green: #28a745;
+    --teal: #20c997;
+    --cyan: #17a2b8;
+    --white: #fff;
+    --gray: #6c757d;
+    --gray-dark: #343a40;
+    --primary: #007bff;
+    --secondary: #6c757d;
+    --success: #28a745;
+    --info: #17a2b8;
+    --warning: #ffc107;
+    --danger: #dc3545;
+    --light: #f8f9fa;
+    --dark: #343a40
+}
+
+@-webkit-keyframes spinAround {
+    0% {
+        transform: rotate(0)
+    }
+
+    to {
+        transform: rotate(359deg)
+    }
+}
+
+@keyframes spinAround {
+    0% {
+        transform: rotate(0)
+    }
+
+    to {
+        transform: rotate(359deg)
+    }
+}
+
+.breadcrumb,
+.button,
+.delete,
+.file,
+.is-unselectable,
+.modal-close,
+.pagination-ellipsis,
+.pagination-link,
+.pagination-next,
+.pagination-previous,
+.tabs {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none
+}
+
+.navbar-link:not(.is-arrowless)::after,
+.select:not(.is-multiple):not(.is-loading)::after {
+    border: 3px solid transparent;
+    border-radius: 2px;
+    border-right: 0;
+    border-top: 0;
+    content: " ";
+    display: block;
+    height: .625em;
+    margin-top: -.4375em;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: rotate(-45deg);
+    transform-origin: center;
+    width: .625em
+}
+
+.block:not(:last-child),
+.box:not(:last-child),
+.breadcrumb:not(:last-child),
+.content:not(:last-child),
+.highlight:not(:last-child),
+.level:not(:last-child),
+.list:not(:last-child),
+.message:not(:last-child),
+.notification:not(:last-child),
+.pagination:not(:last-child),
+.progress:not(:last-child),
+.subtitle:not(:last-child),
+.table-container:not(:last-child),
+.table:not(:last-child),
+.tabs:not(:last-child),
+.title:not(:last-child) {
+    margin-bottom: 1.5rem
+}
+
+.delete,
+.modal-close {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    background-color: rgba(10, 10, 10, .2);
+    border: 0;
+    border-radius: 290486px;
+    cursor: pointer;
+    pointer-events: auto;
+    display: inline-block;
+    flex-grow: 0;
+    flex-shrink: 0;
+    font-size: 0;
+    height: 20px;
+    max-height: 20px;
+    max-width: 20px;
+    min-height: 20px;
+    min-width: 20px;
+    outline: 0;
+    position: relative;
+    vertical-align: top;
+    width: 20px
+}
+
+.delete::after,
+.delete::before,
+.modal-close::after,
+.modal-close::before {
+    background-color: #fff;
+    content: "";
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%) rotate(45deg);
+    transform-origin: center center
+}
+
+.delete::before,
+.modal-close::before {
+    height: 2px;
+    width: 50%
+}
+
+.delete::after,
+.modal-close::after {
+    height: 50%;
+    width: 2px
+}
+
+.delete:focus,
+.delete:hover,
+.modal-close:focus,
+.modal-close:hover {
+    background-color: rgba(10, 10, 10, .3)
+}
+
+.delete:active,
+.modal-close:active {
+    background-color: rgba(10, 10, 10, .4)
+}
+
+.is-small.delete,
+.is-small.modal-close {
+    height: 16px;
+    max-height: 16px;
+    max-width: 16px;
+    min-height: 16px;
+    min-width: 16px;
+    width: 16px
+}
+
+.is-medium.delete,
+.is-medium.modal-close {
+    height: 24px;
+    max-height: 24px;
+    max-width: 24px;
+    min-height: 24px;
+    min-width: 24px;
+    width: 24px
+}
+
+.is-large.delete,
+.is-large.modal-close {
+    height: 32px;
+    max-height: 32px;
+    max-width: 32px;
+    min-height: 32px;
+    min-width: 32px;
+    width: 32px
+}
+
+.button.is-loading::after,
+.control.is-loading::after,
+.loader,
+.select.is-loading::after {
+    -webkit-animation: spinAround .5s infinite linear;
+    animation: spinAround .5s infinite linear;
+    border: 2px solid #dbdee0;
+    border-radius: 290486px;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: 1em;
+    position: relative;
+    width: 1em
+}
+
+.hero-video,
+.image.is-16by9 .has-ratio,
+.image.is-16by9 img,
+.image.is-1by1 .has-ratio,
+.image.is-1by1 img,
+.image.is-1by2 .has-ratio,
+.image.is-1by2 img,
+.image.is-1by3 .has-ratio,
+.image.is-1by3 img,
+.image.is-2by1 .has-ratio,
+.image.is-2by1 img,
+.image.is-2by3 .has-ratio,
+.image.is-2by3 img,
+.image.is-3by1 .has-ratio,
+.image.is-3by1 img,
+.image.is-3by2 .has-ratio,
+.image.is-3by2 img,
+.image.is-3by4 .has-ratio,
+.image.is-3by4 img,
+.image.is-3by5 .has-ratio,
+.image.is-3by5 img,
+.image.is-4by3 .has-ratio,
+.image.is-4by3 img,
+.image.is-4by5 .has-ratio,
+.image.is-4by5 img,
+.image.is-5by3 .has-ratio,
+.image.is-5by3 img,
+.image.is-5by4 .has-ratio,
+.image.is-5by4 img,
+.image.is-9by16 .has-ratio,
+.image.is-9by16 img,
+.image.is-square .has-ratio,
+.image.is-square img,
+.is-overlay,
+.modal,
+.modal-background {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0
+}
+
+.button,
+.file-cta,
+.file-name,
+.input,
+.pagination-ellipsis,
+.pagination-link,
+.pagination-next,
+.pagination-previous,
+.select select,
+.textarea {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    align-items: center;
+    border: 1px solid transparent;
+    border-radius: .4em;
+    box-shadow: none;
+    display: inline-flex;
+    font-size: 15px;
+    height: 2.5em;
+    justify-content: flex-start;
+    line-height: 1.5;
+    padding: calc(.5em - 1px) calc(.75em - 1px);
+    position: relative;
+    vertical-align: top
+}
+
+.button:active,
+.button:focus,
+.file-cta:active,
+.file-cta:focus,
+.file-name:active,
+.file-name:focus,
+.input:active,
+.input:focus,
+.is-active.button,
+.is-active.file-cta,
+.is-active.file-name,
+.is-active.input,
+.is-active.pagination-ellipsis,
+.is-active.pagination-link,
+.is-active.pagination-next,
+.is-active.pagination-previous,
+.is-active.textarea,
+.is-focused.button,
+.is-focused.file-cta,
+.is-focused.file-name,
+.is-focused.input,
+.is-focused.pagination-ellipsis,
+.is-focused.pagination-link,
+.is-focused.pagination-next,
+.is-focused.pagination-previous,
+.is-focused.textarea,
+.pagination-ellipsis:active,
+.pagination-ellipsis:focus,
+.pagination-link:active,
+.pagination-link:focus,
+.pagination-next:active,
+.pagination-next:focus,
+.pagination-previous:active,
+.pagination-previous:focus,
+.select select.is-active,
+.select select.is-focused,
+.select select:active,
+.select select:focus,
+.textarea:active,
+.textarea:focus {
+    outline: 0
+}
+
+.button[disabled],
+.file-cta[disabled],
+.file-name[disabled],
+.input[disabled],
+.pagination-ellipsis[disabled],
+.pagination-link[disabled],
+.pagination-next[disabled],
+.pagination-previous[disabled],
+.select fieldset[disabled] select,
+.select select[disabled],
+.textarea[disabled],
+fieldset[disabled] .button,
+fieldset[disabled] .file-cta,
+fieldset[disabled] .file-name,
+fieldset[disabled] .input,
+fieldset[disabled] .pagination-ellipsis,
+fieldset[disabled] .pagination-link,
+fieldset[disabled] .pagination-next,
+fieldset[disabled] .pagination-previous,
+fieldset[disabled] .select select,
+fieldset[disabled] .textarea {
+    cursor: not-allowed
+}
+
+@-webkit-keyframes moveIndeterminate {
+    0% {
+        background-position: 200% 0
+    }
+
+    to {
+        background-position: -200% 0
+    }
+}
+
+@keyframes moveIndeterminate {
+    0% {
+        background-position: 200% 0
+    }
+
+    to {
+        background-position: -200% 0
+    }
+}
+
+blockquote,
+body,
+dd,
+dl,
+dt,
+fieldset,
+figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+html,
+iframe,
+legend,
+li,
+ol,
+p,
+pre,
+ul {
+    margin: 0;
+    padding: 0
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: 100%;
+    font-weight: 400
+}
+
+ul {
+    list-style: none
+}
+
+button,
+input,
+select,
+textarea {
+    margin: 0
+}
+
+html {
+    box-sizing: border-box;
+    background-color: hsl(var(--main), 10%, 10%);
+    font-size: 15px;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    min-width: 300px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    text-rendering: optimizeLegibility;
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    text-size-adjust: 100%
+}
+
+*,
+::after,
+::before {
+    box-sizing: inherit
+}
+
+img,
+video {
+    height: auto;
+    max-width: 100%
+}
+
+fieldset,
+iframe {
+    border: 0
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0
+}
+
+td,
+textarea,
+th {
+    padding: 0
+}
+
+.content table th:not([align]),
+table td:not([align]),
+table th:not([align]),
+td:not([align]),
+th:not([align]) {
+    text-align: left
+}
+
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+section {
+    display: block
+}
+
+body,
+button,
+input,
+select,
+textarea {
+    font-family: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
+}
+
+code,
+pre {
+    -moz-osx-font-smoothing: auto;
+    -webkit-font-smoothing: auto;
+    font-family: Inconsolata, Consolas, Monaco, monospace
+}
+
+body,
+code {
+    font-weight: 400
+}
+
+body {
+    font-size: 1em;
+    line-height: 1.5;
+    color: #fff
+}
+
+a {
+    color: hsl(var(--main), 65%, 70%);
+    cursor: pointer;
+    text-decoration: none;
+    transition: all .2s ease
+}
+
+a strong,
+pre code {
+    color: currentColor
+}
+
+a:hover {
+    color: hsl(var(--main), 90%, 90%)
+}
+
+code {
+    color: #e74c3c;
+    padding: .25em .5em
+}
+
+code,
+hr,
+pre {
+    background-color: hsl(var(--main), 10%, 15%)
+}
+
+hr {
+    border: 0;
+    display: block;
+    margin: 1.5rem 0;
+    height: 2px
+}
+
+input[type=checkbox],
+input[type=radio] {
+    vertical-align: baseline
+}
+
+code,
+pre,
+small {
+    font-size: .875em
+}
+
+span {
+    font-style: inherit;
+    font-weight: inherit
+}
+
+strong {
+    font-weight: 700
+}
+
+pre {
+    -webkit-overflow-scrolling: touch;
+    color: #fff;
+    overflow-x: auto;
+    padding: 1.25rem 1.5rem;
+    white-space: pre;
+    word-wrap: normal
+}
+
+pre code {
+    background-color: transparent;
+    font-size: 1em;
+    padding: 0
+}
+
+table td,
+table th {
+    vertical-align: top
+}
+
+strong,
+table th {
+    color: #f2f2f2
+}
+
+.is-clearfix::after {
+    clear: both;
+    content: " ";
+    display: table
+}
+
+.is-pulled-left {
+    float: left !important
+}
+
+.is-pulled-right {
+    float: right !important
+}
+
+.is-clipped {
+    overflow: hidden !important
+}
+
+.is-size-1 {
+    font-size: 3rem !important
+}
+
+.is-size-2 {
+    font-size: 2.5rem !important
+}
+
+.is-size-3 {
+    font-size: 2rem !important
+}
+
+.is-size-4 {
+    font-size: 1.5rem !important
+}
+
+.is-size-5 {
+    font-size: 1.25rem !important
+}
+
+.is-size-6 {
+    font-size: 15px !important
+}
+
+.is-size-7 {
+    font-size: .85em !important
+}
+
+@media screen and (max-width: 768px) {
+    .is-size-1-mobile {
+        font-size: 3rem !important
+    }
+
+    .is-size-2-mobile {
+        font-size: 2.5rem !important
+    }
+
+    .is-size-3-mobile {
+        font-size: 2rem !important
+    }
+
+    .is-size-4-mobile {
+        font-size: 1.5rem !important
+    }
+
+    .is-size-5-mobile {
+        font-size: 1.25rem !important
+    }
+
+    .is-size-6-mobile {
+        font-size: 15px !important
+    }
+
+    .is-size-7-mobile {
+        font-size: .85em !important
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .is-size-1-tablet {
+        font-size: 3rem !important
+    }
+
+    .is-size-2-tablet {
+        font-size: 2.5rem !important
+    }
+
+    .is-size-3-tablet {
+        font-size: 2rem !important
+    }
+
+    .is-size-4-tablet {
+        font-size: 1.5rem !important
+    }
+
+    .is-size-5-tablet {
+        font-size: 1.25rem !important
+    }
+
+    .is-size-6-tablet {
+        font-size: 15px !important
+    }
+
+    .is-size-7-tablet {
+        font-size: .85em !important
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .is-size-1-touch {
+        font-size: 3rem !important
+    }
+
+    .is-size-2-touch {
+        font-size: 2.5rem !important
+    }
+
+    .is-size-3-touch {
+        font-size: 2rem !important
+    }
+
+    .is-size-4-touch {
+        font-size: 1.5rem !important
+    }
+
+    .is-size-5-touch {
+        font-size: 1.25rem !important
+    }
+
+    .is-size-6-touch {
+        font-size: 15px !important
+    }
+
+    .is-size-7-touch {
+        font-size: .85em !important
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .is-size-1-desktop {
+        font-size: 3rem !important
+    }
+
+    .is-size-2-desktop {
+        font-size: 2.5rem !important
+    }
+
+    .is-size-3-desktop {
+        font-size: 2rem !important
+    }
+
+    .is-size-4-desktop {
+        font-size: 1.5rem !important
+    }
+
+    .is-size-5-desktop {
+        font-size: 1.25rem !important
+    }
+
+    .is-size-6-desktop {
+        font-size: 15px !important
+    }
+
+    .is-size-7-desktop {
+        font-size: .85em !important
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .is-size-1-widescreen {
+        font-size: 3rem !important
+    }
+
+    .is-size-2-widescreen {
+        font-size: 2.5rem !important
+    }
+
+    .is-size-3-widescreen {
+        font-size: 2rem !important
+    }
+
+    .is-size-4-widescreen {
+        font-size: 1.5rem !important
+    }
+
+    .is-size-5-widescreen {
+        font-size: 1.25rem !important
+    }
+
+    .is-size-6-widescreen {
+        font-size: 15px !important
+    }
+
+    .is-size-7-widescreen {
+        font-size: .85em !important
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .is-size-1-fullhd {
+        font-size: 3rem !important
+    }
+
+    .is-size-2-fullhd {
+        font-size: 2.5rem !important
+    }
+
+    .is-size-3-fullhd {
+        font-size: 2rem !important
+    }
+
+    .is-size-4-fullhd {
+        font-size: 1.5rem !important
+    }
+
+    .is-size-5-fullhd {
+        font-size: 1.25rem !important
+    }
+
+    .is-size-6-fullhd {
+        font-size: 15px !important
+    }
+
+    .is-size-7-fullhd {
+        font-size: .85em !important
+    }
+}
+
+.has-text-centered {
+    text-align: center !important
+}
+
+.has-text-justified {
+    text-align: justify !important
+}
+
+.has-text-left {
+    text-align: left !important
+}
+
+.has-text-right {
+    text-align: right !important
+}
+
+@media screen and (max-width: 768px) {
+    .has-text-centered-mobile {
+        text-align: center !important
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .has-text-centered-tablet {
+        text-align: center !important
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .has-text-centered-tablet-only {
+        text-align: center !important
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .has-text-centered-touch {
+        text-align: center !important
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .has-text-centered-desktop {
+        text-align: center !important
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .has-text-centered-desktop-only {
+        text-align: center !important
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .has-text-centered-widescreen {
+        text-align: center !important
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .has-text-centered-widescreen-only {
+        text-align: center !important
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .has-text-centered-fullhd {
+        text-align: center !important
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .has-text-justified-mobile {
+        text-align: justify !important
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .has-text-justified-tablet {
+        text-align: justify !important
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .has-text-justified-tablet-only {
+        text-align: justify !important
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .has-text-justified-touch {
+        text-align: justify !important
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .has-text-justified-desktop {
+        text-align: justify !important
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .has-text-justified-desktop-only {
+        text-align: justify !important
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .has-text-justified-widescreen {
+        text-align: justify !important
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .has-text-justified-widescreen-only {
+        text-align: justify !important
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .has-text-justified-fullhd {
+        text-align: justify !important
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .has-text-left-mobile {
+        text-align: left !important
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .has-text-left-tablet {
+        text-align: left !important
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .has-text-left-tablet-only {
+        text-align: left !important
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .has-text-left-touch {
+        text-align: left !important
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .has-text-left-desktop {
+        text-align: left !important
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .has-text-left-desktop-only {
+        text-align: left !important
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .has-text-left-widescreen {
+        text-align: left !important
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .has-text-left-widescreen-only {
+        text-align: left !important
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .has-text-left-fullhd {
+        text-align: left !important
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .has-text-right-mobile {
+        text-align: right !important
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .has-text-right-tablet {
+        text-align: right !important
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .has-text-right-tablet-only {
+        text-align: right !important
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .has-text-right-touch {
+        text-align: right !important
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .has-text-right-desktop {
+        text-align: right !important
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .has-text-right-desktop-only {
+        text-align: right !important
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .has-text-right-widescreen {
+        text-align: right !important
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .has-text-right-widescreen-only {
+        text-align: right !important
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .has-text-right-fullhd {
+        text-align: right !important
+    }
+}
+
+.is-capitalized {
+    text-transform: capitalize !important
+}
+
+.is-lowercase {
+    text-transform: lowercase !important
+}
+
+.is-uppercase {
+    text-transform: uppercase !important
+}
+
+.is-italic {
+    font-style: italic !important
+}
+
+.has-text-white {
+    color: #fff !important
+}
+
+a.has-text-white:focus,
+a.has-text-white:hover {
+    color: #e6e6e6 !important
+}
+
+.has-background-white {
+    background-color: #fff !important
+}
+
+.has-text-black {
+    color: #0a0a0a !important
+}
+
+a.has-text-black:focus,
+a.has-text-black:hover {
+    color: #000 !important
+}
+
+.has-background-black {
+    background-color: #0a0a0a !important
+}
+
+.has-text-light {
+    color: #ecf0f1 !important
+}
+
+a.has-text-light:focus,
+a.has-text-light:hover {
+    color: #cfd9db !important
+}
+
+.has-background-light {
+    background-color: #ecf0f1 !important
+}
+
+.has-text-dark {
+    color: hsl(var(--main), 10%, 15%) !important
+}
+
+a.has-text-dark:focus,
+a.has-text-dark:hover {
+    color: #111414 !important
+}
+
+.has-background-dark {
+    background-color: hsl(var(--main), 10%, 15%) !important
+}
+
+.has-text-primary {
+    color: hsl(var(--main), 45%, 45%) !important
+}
+
+a.has-text-primary:focus,
+a.has-text-primary:hover {
+    color: hsl(var(--main), 45%, 35%) !important
+}
+
+.has-background-primary {
+    background-color: hsl(var(--main), 45%, 45%) !important
+}
+
+.has-text-link {
+    color: hsl(var(--main), 45%, 45%) !important
+}
+
+a.has-text-link:focus,
+a.has-text-link:hover {
+    color: #148f77 !important
+}
+
+.has-background-link {
+    background-color: hsl(var(--main), 45%, 45%) !important
+}
+
+.has-text-info {
+    color: #3298dc !important
+}
+
+a.has-text-info:focus,
+a.has-text-info:hover {
+    color: #207dbc !important
+}
+
+.has-background-info {
+    background-color: #3298dc !important
+}
+
+.has-text-success {
+    color: #2ecc71 !important
+}
+
+a.has-text-success:focus,
+a.has-text-success:hover {
+    color: #25a25a !important
+}
+
+.has-background-success {
+    background-color: #2ecc71 !important
+}
+
+.has-text-warning {
+    color: #f1b70e !important
+}
+
+a.has-text-warning:focus,
+a.has-text-warning:hover {
+    color: #c1920b !important
+}
+
+.has-background-warning {
+    background-color: #f1b70e !important
+}
+
+.has-text-danger {
+    color: #e74c3c !important
+}
+
+a.has-text-danger:focus,
+a.has-text-danger:hover {
+    color: #d62c1a !important
+}
+
+.has-background-danger {
+    background-color: #e74c3c !important
+}
+
+.has-text-black-bis {
+    color: #121212 !important
+}
+
+.has-background-black-bis {
+    background-color: #121212 !important
+}
+
+.has-text-black-ter {
+    color: #242424 !important
+}
+
+.has-background-black-ter {
+    background-color: #242424 !important
+}
+
+.has-text-grey-darker {
+    color: hsl(var(--main), 10%, 15%) !important
+}
+
+.has-background-grey-darker {
+    background-color: hsl(var(--main), 10%, 15%) !important
+}
+
+.has-text-grey-dark {
+    color: hsl(var(--main), 10%, 15%) !important
+}
+
+.has-background-grey-dark {
+    background-color: hsl(var(--main), 10%, 15%) !important
+}
+
+.has-text-grey {
+    color: #5e6d6f !important
+}
+
+.has-background-grey {
+    background-color: #5e6d6f !important
+}
+
+.has-text-grey-light {
+    color: #8c9b9d !important
+}
+
+.has-background-grey-light {
+    background-color: #8c9b9d !important
+}
+
+.has-text-grey-lighter {
+    color: #dbdee0 !important
+}
+
+.has-background-grey-lighter {
+    background-color: #dbdee0 !important
+}
+
+.has-text-white-ter {
+    color: #ecf0f1 !important
+}
+
+.has-background-white-ter {
+    background-color: #ecf0f1 !important
+}
+
+.has-text-white-bis {
+    color: #fafafa !important
+}
+
+.has-background-white-bis {
+    background-color: #fafafa !important
+}
+
+.has-text-weight-light {
+    font-weight: 300 !important
+}
+
+.has-text-weight-normal {
+    font-weight: 400 !important
+}
+
+.has-text-weight-medium {
+    font-weight: 500 !important
+}
+
+.has-text-weight-semibold {
+    font-weight: 600 !important
+}
+
+.has-text-weight-bold {
+    font-weight: 700 !important
+}
+
+.is-family-primary,
+.is-family-sans-serif,
+.is-family-secondary {
+    font-family: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif !important
+}
+
+.is-family-code,
+.is-family-monospace {
+    font-family: Inconsolata, Consolas, Monaco, monospace !important
+}
+
+.is-block {
+    display: block !important
+}
+
+@media screen and (max-width: 768px) {
+    .is-block-mobile {
+        display: block !important
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .is-block-tablet {
+        display: block !important
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .is-block-tablet-only {
+        display: block !important
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .is-block-touch {
+        display: block !important
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .is-block-desktop {
+        display: block !important
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .is-block-desktop-only {
+        display: block !important
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .is-block-widescreen {
+        display: block !important
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .is-block-widescreen-only {
+        display: block !important
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .is-block-fullhd {
+        display: block !important
+    }
+}
+
+.is-flex {
+    display: flex !important
+}
+
+@media screen and (max-width: 768px) {
+    .is-flex-mobile {
+        display: flex !important
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .is-flex-tablet {
+        display: flex !important
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .is-flex-tablet-only {
+        display: flex !important
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .is-flex-touch {
+        display: flex !important
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .is-flex-desktop {
+        display: flex !important
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .is-flex-desktop-only {
+        display: flex !important
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .is-flex-widescreen {
+        display: flex !important
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .is-flex-widescreen-only {
+        display: flex !important
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .is-flex-fullhd {
+        display: flex !important
+    }
+}
+
+.is-inline {
+    display: inline !important
+}
+
+@media screen and (max-width: 768px) {
+    .is-inline-mobile {
+        display: inline !important
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .is-inline-tablet {
+        display: inline !important
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .is-inline-tablet-only {
+        display: inline !important
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .is-inline-touch {
+        display: inline !important
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .is-inline-desktop {
+        display: inline !important
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .is-inline-desktop-only {
+        display: inline !important
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .is-inline-widescreen {
+        display: inline !important
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .is-inline-widescreen-only {
+        display: inline !important
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .is-inline-fullhd {
+        display: inline !important
+    }
+}
+
+.is-inline-block {
+    display: inline-block !important
+}
+
+@media screen and (max-width: 768px) {
+    .is-inline-block-mobile {
+        display: inline-block !important
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .is-inline-block-tablet {
+        display: inline-block !important
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .is-inline-block-tablet-only {
+        display: inline-block !important
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .is-inline-block-touch {
+        display: inline-block !important
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .is-inline-block-desktop {
+        display: inline-block !important
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .is-inline-block-desktop-only {
+        display: inline-block !important
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .is-inline-block-widescreen {
+        display: inline-block !important
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .is-inline-block-widescreen-only {
+        display: inline-block !important
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .is-inline-block-fullhd {
+        display: inline-block !important
+    }
+}
+
+.is-inline-flex {
+    display: inline-flex !important
+}
+
+@media screen and (max-width: 768px) {
+    .is-inline-flex-mobile {
+        display: inline-flex !important
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .is-inline-flex-tablet {
+        display: inline-flex !important
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .is-inline-flex-tablet-only {
+        display: inline-flex !important
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .is-inline-flex-touch {
+        display: inline-flex !important
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .is-inline-flex-desktop {
+        display: inline-flex !important
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .is-inline-flex-desktop-only {
+        display: inline-flex !important
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .is-inline-flex-widescreen {
+        display: inline-flex !important
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .is-inline-flex-widescreen-only {
+        display: inline-flex !important
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .is-inline-flex-fullhd {
+        display: inline-flex !important
+    }
+}
+
+.is-hidden {
+    display: none !important
+}
+
+.is-sr-only {
+    border: 0 !important;
+    clip: rect(0, 0, 0, 0) !important;
+    height: .01em !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    white-space: nowrap !important;
+    width: .01em !important
+}
+
+@media screen and (max-width: 768px) {
+    .is-hidden-mobile {
+        display: none !important
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .is-hidden-tablet {
+        display: none !important
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .is-hidden-tablet-only {
+        display: none !important
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .is-hidden-touch {
+        display: none !important
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .is-hidden-desktop {
+        display: none !important
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .is-hidden-desktop-only {
+        display: none !important
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .is-hidden-widescreen {
+        display: none !important
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .is-hidden-widescreen-only {
+        display: none !important
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .is-hidden-fullhd {
+        display: none !important
+    }
+}
+
+.is-invisible {
+    visibility: hidden !important
+}
+
+@media screen and (max-width: 768px) {
+    .is-invisible-mobile {
+        visibility: hidden !important
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .is-invisible-tablet {
+        visibility: hidden !important
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .is-invisible-tablet-only {
+        visibility: hidden !important
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .is-invisible-touch {
+        visibility: hidden !important
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .is-invisible-desktop {
+        visibility: hidden !important
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .is-invisible-desktop-only {
+        visibility: hidden !important
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .is-invisible-widescreen {
+        visibility: hidden !important
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .is-invisible-widescreen-only {
+        visibility: hidden !important
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .is-invisible-fullhd {
+        visibility: hidden !important
+    }
+}
+
+.is-marginless {
+    margin: 0 !important
+}
+
+.is-paddingless {
+    padding: 0 !important
+}
+
+.is-radiusless {
+    border-radius: 0 !important
+}
+
+.is-shadowless {
+    box-shadow: none !important
+}
+
+.is-relative {
+    position: relative !important
+}
+
+.box {
+    background-color: hsl(var(--main), 10%, 15%);
+    border-radius: 0.5em;
+    box-shadow: none;
+    color: #fff;
+    display: block;
+    padding: 1.25rem
+}
+
+a.box:focus,
+a.box:hover {
+    box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px hsl(var(--main), 45%, 45%)
+}
+
+a.box:active {
+    box-shadow: inset 0 1px 2px rgba(10, 10, 10, .2), 0 0 0 1px hsl(var(--main), 45%, 45%)
+}
+
+.button {
+    background-color: hsl(var(--main), 10%, 15%);
+    border-color: #4c5759;
+    cursor: pointer;
+    justify-content: center;
+    padding-bottom: calc(.5em - 1px);
+    padding-left: 1em;
+    padding-right: 1em;
+    padding-top: calc(.5em - 1px);
+    text-align: center;
+    white-space: nowrap
+}
+
+.button strong {
+    color: inherit
+}
+
+.button .icon,
+.button .icon.is-large,
+.button .icon.is-medium,
+.button .icon.is-small {
+    height: 1.5em;
+    width: 1.5em
+}
+
+.button .icon:first-child:not(:last-child) {
+    margin-left: calc(-.5em - 1px);
+    margin-right: .25em
+}
+
+.button .icon:last-child:not(:first-child) {
+    margin-left: .25em;
+    margin-right: calc(-.5em - 1px)
+}
+
+.button .icon:first-child:last-child {
+    margin-left: calc(-.5em - 1px);
+    margin-right: calc(-.5em - 1px)
+}
+
+.button.is-hovered,
+.button:hover {
+    border-color: #8c9b9d;
+    color: #f2f2f2
+}
+
+.button.is-focused,
+.button:focus {
+    border-color: #8c9b9d;
+    color: hsl(var(--main), 75%, 80%)
+}
+
+.button.is-focused:not(:active),
+.button:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(26, 188, 156, .25)
+}
+
+.button.is-active,
+.button:active {
+    border-color: hsl(var(--main), 10%, 15%);
+    color: #f2f2f2
+}
+
+.button.is-text {
+    background-color: transparent;
+    border-color: transparent;
+    color: #fff;
+    text-decoration: underline
+}
+
+.button.is-text.is-focused,
+.button.is-text.is-hovered,
+.button.is-text:focus,
+.button.is-text:hover {
+    background-color: hsl(var(--main), 10%, 15%);
+    color: #f2f2f2
+}
+
+.button.is-text.is-active,
+.button.is-text:active {
+    background-color: #1d2122;
+    color: #f2f2f2
+}
+
+.button.is-text[disabled],
+fieldset[disabled] .button.is-text {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none
+}
+
+.button.is-white {
+    background-color: #fff
+}
+
+.button.is-white,
+.button.is-white.is-hovered,
+.button.is-white:hover {
+    border-color: transparent;
+    color: #0a0a0a
+}
+
+.button.is-white.is-focused,
+.button.is-white:focus {
+    color: #0a0a0a
+}
+
+.button.is-white.is-focused:not(:active),
+.button.is-white:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(255, 255, 255, .25)
+}
+
+.button.is-white.is-active,
+.button.is-white:active {
+    background-color: #f2f2f2;
+    border-color: transparent;
+    color: #0a0a0a
+}
+
+.button.is-white[disabled],
+fieldset[disabled] .button.is-white {
+    background-color: #fff;
+    border-color: transparent;
+    box-shadow: none
+}
+
+.button.is-white.is-loading::after {
+    border-color: transparent transparent #0a0a0a #0a0a0a !important
+}
+
+.button.is-white.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    color: #fff
+}
+
+.button.is-white.is-outlined.is-focused,
+.button.is-white.is-outlined.is-hovered,
+.button.is-white.is-outlined:focus,
+.button.is-white.is-outlined:hover {
+    background-color: #fff;
+    border-color: #fff;
+    color: #0a0a0a
+}
+
+.button.is-white.is-outlined.is-loading::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-white.is-outlined.is-loading.is-focused::after,
+.button.is-white.is-outlined.is-loading.is-hovered::after,
+.button.is-white.is-outlined.is-loading:focus::after,
+.button.is-white.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #0a0a0a #0a0a0a !important
+}
+
+.button.is-white.is-outlined[disabled],
+fieldset[disabled] .button.is-white.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    box-shadow: none;
+    color: #fff
+}
+
+.button.is-black {
+    background-color: #0a0a0a
+}
+
+.button.is-black,
+.button.is-black.is-hovered,
+.button.is-black:hover {
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-black.is-focused,
+.button.is-black:focus {
+    color: #fff
+}
+
+.button.is-black.is-focused:not(:active),
+.button.is-black:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(10, 10, 10, .25)
+}
+
+.button.is-black.is-active,
+.button.is-black:active {
+    background-color: #000;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-black[disabled],
+fieldset[disabled] .button.is-black {
+    background-color: #0a0a0a;
+    border-color: transparent;
+    box-shadow: none
+}
+
+.button.is-black.is-loading::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-black.is-outlined {
+    background-color: transparent;
+    border-color: #0a0a0a;
+    color: #0a0a0a
+}
+
+.button.is-black.is-outlined.is-focused,
+.button.is-black.is-outlined.is-hovered,
+.button.is-black.is-outlined:focus,
+.button.is-black.is-outlined:hover {
+    background-color: #0a0a0a;
+    border-color: #0a0a0a;
+    color: #fff
+}
+
+.button.is-black.is-outlined.is-loading::after {
+    border-color: transparent transparent #0a0a0a #0a0a0a !important
+}
+
+.button.is-black.is-outlined.is-loading.is-focused::after,
+.button.is-black.is-outlined.is-loading.is-hovered::after,
+.button.is-black.is-outlined.is-loading:focus::after,
+.button.is-black.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-black.is-outlined[disabled],
+fieldset[disabled] .button.is-black.is-outlined {
+    background-color: transparent;
+    border-color: #0a0a0a;
+    box-shadow: none;
+    color: #0a0a0a
+}
+
+.button.is-light {
+    background-color: #ecf0f1
+}
+
+.button.is-light,
+.button.is-light.is-hovered,
+.button.is-light:hover {
+    border-color: transparent;
+    color: rgba(0, 0, 0, .7)
+}
+
+.button.is-light.is-focused,
+.button.is-light:focus {
+    color: rgba(0, 0, 0, .7)
+}
+
+.button.is-light.is-focused:not(:active),
+.button.is-light:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(236, 240, 241, .25)
+}
+
+.button.is-light.is-active,
+.button.is-light:active {
+    background-color: #dde4e6;
+    border-color: transparent;
+    color: rgba(0, 0, 0, .7)
+}
+
+.button.is-light[disabled],
+fieldset[disabled] .button.is-light {
+    background-color: #ecf0f1;
+    border-color: transparent;
+    box-shadow: none
+}
+
+.button.is-light.is-loading::after {
+    border-color: transparent transparent rgba(0, 0, 0, .7) rgba(0, 0, 0, .7) !important
+}
+
+.button.is-light.is-outlined {
+    background-color: transparent;
+    border-color: #ecf0f1;
+    color: #ecf0f1
+}
+
+.button.is-light.is-outlined.is-focused,
+.button.is-light.is-outlined.is-hovered,
+.button.is-light.is-outlined:focus,
+.button.is-light.is-outlined:hover {
+    background-color: #ecf0f1;
+    border-color: #ecf0f1;
+    color: rgba(0, 0, 0, .7)
+}
+
+.button.is-light.is-outlined.is-loading::after {
+    border-color: transparent transparent #ecf0f1 #ecf0f1 !important
+}
+
+.button.is-light.is-outlined.is-loading.is-focused::after,
+.button.is-light.is-outlined.is-loading.is-hovered::after,
+.button.is-light.is-outlined.is-loading:focus::after,
+.button.is-light.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent rgba(0, 0, 0, .7) rgba(0, 0, 0, .7) !important
+}
+
+.button.is-light.is-outlined[disabled],
+fieldset[disabled] .button.is-light.is-outlined {
+    background-color: transparent;
+    border-color: #ecf0f1;
+    box-shadow: none;
+    color: #ecf0f1
+}
+
+.button.is-dark {
+    background-color: hsl(var(--main), 10%, 15%)
+}
+
+.button.is-dark,
+.button.is-dark.is-hovered,
+.button.is-dark:hover {
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-dark.is-focused,
+.button.is-dark:focus {
+    color: #fff
+}
+
+.button.is-dark.is-focused:not(:active),
+.button.is-dark:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(40, 47, 47, .25)
+}
+
+.button.is-dark.is-active,
+.button.is-dark:active {
+    background-color: #1d2122;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-dark[disabled],
+fieldset[disabled] .button.is-dark {
+    background-color: hsl(var(--main), 10%, 15%);
+    border-color: transparent;
+    box-shadow: none
+}
+
+.button.is-dark.is-loading::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-dark.is-outlined {
+    background-color: transparent;
+    border-color: hsl(var(--main), 10%, 15%);
+    color: hsl(var(--main), 10%, 15%)
+}
+
+.button.is-dark.is-outlined.is-focused,
+.button.is-dark.is-outlined.is-hovered,
+.button.is-dark.is-outlined:focus,
+.button.is-dark.is-outlined:hover {
+    background-color: hsl(var(--main), 10%, 15%);
+    border-color: hsl(var(--main), 10%, 15%);
+    color: #fff
+}
+
+.button.is-dark.is-outlined.is-loading::after {
+    border-color: transparent transparent hsl(var(--main), 10%, 15%) hsl(var(--main), 10%, 15%) !important
+}
+
+.button.is-dark.is-outlined.is-loading.is-focused::after,
+.button.is-dark.is-outlined.is-loading.is-hovered::after,
+.button.is-dark.is-outlined.is-loading:focus::after,
+.button.is-dark.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-dark.is-outlined[disabled],
+fieldset[disabled] .button.is-dark.is-outlined {
+    background-color: transparent;
+    border-color: hsl(var(--main), 10%, 15%);
+    box-shadow: none;
+    color: hsl(var(--main), 10%, 15%)
+}
+
+.button.is-primary {
+    background-color: hsl(var(--main), 45%, 45%)
+}
+
+.button.is-primary,
+.button.is-primary.is-hovered,
+.button.is-primary:hover {
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-primary.is-focused,
+.button.is-primary:focus {
+    color: #fff
+}
+
+.button.is-primary.is-focused:not(:active),
+.button.is-primary:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(55, 90, 127, .25)
+}
+
+.button.is-primary.is-active,
+.button.is-primary:active {
+    background-color: hsl(var(--main), 45%, 45%);
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-primary[disabled],
+fieldset[disabled] .button.is-primary {
+    background-color: hsl(var(--main), 45%, 45%);
+    border-color: transparent;
+    box-shadow: none
+}
+
+.button.is-primary.is-loading::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-primary.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    color: #fff
+}
+
+.button.is-primary.is-outlined.is-focused,
+.button.is-primary.is-outlined.is-hovered,
+.button.is-primary.is-outlined:focus,
+.button.is-primary.is-outlined:hover {
+    background-color: hsl(var(--main), 45%, 45%);
+    border-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.button.is-primary.is-outlined.is-loading::after {
+    border-color: transparent transparent hsl(var(--main), 45%, 45%) hsl(var(--main), 45%, 45%) !important
+}
+
+.button.is-primary.is-outlined.is-loading.is-focused::after,
+.button.is-primary.is-outlined.is-loading.is-hovered::after,
+.button.is-primary.is-outlined.is-loading:focus::after,
+.button.is-primary.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-primary.is-outlined[disabled],
+fieldset[disabled] .button.is-primary.is-outlined {
+    background-color: transparent;
+    border-color: hsl(var(--main), 45%, 45%);
+    box-shadow: none;
+    color: hsl(var(--main), 45%, 45%)
+}
+
+.button.is-primary.is-light {
+    background-color: #f1f5f9;
+    color: hsl(var(--main), 65%, 35%)
+}
+
+.button.is-primary.is-light.is-hovered,
+.button.is-primary.is-light:hover {
+    background-color: #e8eef5;
+    border-color: transparent;
+    color: hsl(var(--main), 65%, 35%)
+}
+
+.button.is-primary.is-light.is-active,
+.button.is-primary.is-light:active {
+    background-color: #dfe8f1;
+    border-color: transparent;
+    color: #4d7eb2
+}
+
+.button.is-link {
+    background-color: hsl(var(--main), 45%, 45%)
+}
+
+.button.is-link,
+.button.is-link.is-hovered,
+.button.is-link:hover {
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-link.is-focused,
+.button.is-link:focus {
+    color: #fff
+}
+
+.button.is-link.is-focused:not(:active),
+.button.is-link:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(26, 188, 156, .25)
+}
+
+.button.is-link.is-active,
+.button.is-link:active {
+    background-color: hsl(var(--main), 75%, 80%);
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-link[disabled],
+fieldset[disabled] .button.is-link {
+    background-color: hsl(var(--main), 45%, 45%);
+    border-color: transparent;
+    box-shadow: none
+}
+
+.button.is-link.is-loading::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-link.is-outlined {
+    background-color: transparent;
+    border-color: hsl(var(--main), 45%, 45%);
+    color: hsl(var(--main), 45%, 45%)
+}
+
+.button.is-link.is-outlined.is-focused,
+.button.is-link.is-outlined.is-hovered,
+.button.is-link.is-outlined:focus,
+.button.is-link.is-outlined:hover {
+    background-color: hsl(var(--main), 45%, 45%);
+    border-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.button.is-link.is-outlined.is-loading::after {
+    border-color: transparent transparent hsl(var(--main), 45%, 45%) hsl(var(--main), 45%, 45%) !important
+}
+
+.button.is-link.is-outlined.is-loading.is-focused::after,
+.button.is-link.is-outlined.is-loading.is-hovered::after,
+.button.is-link.is-outlined.is-loading:focus::after,
+.button.is-link.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-link.is-outlined[disabled],
+fieldset[disabled] .button.is-link.is-outlined {
+    background-color: transparent;
+    border-color: hsl(var(--main), 45%, 45%);
+    box-shadow: none;
+    color: hsl(var(--main), 45%, 45%)
+}
+
+.button.is-link.is-light {
+    background-color: #edfdf9;
+    color: #15987e
+}
+
+.button.is-link.is-light.is-hovered,
+.button.is-link.is-light:hover {
+    background-color: #e2fbf6;
+    border-color: transparent;
+    color: #15987e
+}
+
+.button.is-link.is-light.is-active,
+.button.is-link.is-light:active {
+    background-color: #d7f9f3;
+    border-color: transparent;
+    color: #15987e
+}
+
+.button.is-info {
+    background-color: #3298dc
+}
+
+.button.is-info,
+.button.is-info.is-hovered,
+.button.is-info:hover {
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-info.is-focused,
+.button.is-info:focus {
+    color: #fff
+}
+
+.button.is-info.is-focused:not(:active),
+.button.is-info:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(50, 152, 220, .25)
+}
+
+.button.is-info.is-active,
+.button.is-info:active {
+    background-color: #238cd1;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-info[disabled],
+fieldset[disabled] .button.is-info {
+    background-color: #3298dc;
+    border-color: transparent;
+    box-shadow: none
+}
+
+.button.is-info.is-loading::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-info.is-outlined {
+    background-color: transparent;
+    border-color: #3298dc;
+    color: #3298dc
+}
+
+.button.is-info.is-outlined.is-focused,
+.button.is-info.is-outlined.is-hovered,
+.button.is-info.is-outlined:focus,
+.button.is-info.is-outlined:hover {
+    background-color: #3298dc;
+    border-color: #3298dc;
+    color: #fff
+}
+
+.button.is-info.is-outlined.is-loading::after {
+    border-color: transparent transparent #3298dc #3298dc !important
+}
+
+.button.is-info.is-outlined.is-loading.is-focused::after,
+.button.is-info.is-outlined.is-loading.is-hovered::after,
+.button.is-info.is-outlined.is-loading:focus::after,
+.button.is-info.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-info.is-outlined[disabled],
+fieldset[disabled] .button.is-info.is-outlined {
+    background-color: transparent;
+    border-color: #3298dc;
+    box-shadow: none;
+    color: #3298dc
+}
+
+.button.is-info.is-light {
+    background-color: #eef6fc;
+    color: #1d72aa
+}
+
+.button.is-info.is-light.is-hovered,
+.button.is-info.is-light:hover {
+    background-color: #e3f1fa;
+    border-color: transparent;
+    color: #1d72aa
+}
+
+.button.is-info.is-light.is-active,
+.button.is-info.is-light:active {
+    background-color: #d8ebf8;
+    border-color: transparent;
+    color: #1d72aa
+}
+
+.button.is-success {
+    background-color: #2ecc71
+}
+
+.button.is-success,
+.button.is-success.is-hovered,
+.button.is-success:hover {
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-success.is-focused,
+.button.is-success:focus {
+    color: #fff
+}
+
+.button.is-success.is-focused:not(:active),
+.button.is-success:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(46, 204, 113, .25)
+}
+
+.button.is-success.is-active,
+.button.is-success:active {
+    background-color: #29b765;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-success[disabled],
+fieldset[disabled] .button.is-success {
+    background-color: #2ecc71;
+    border-color: transparent;
+    box-shadow: none
+}
+
+.button.is-success.is-loading::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-success.is-outlined {
+    background-color: transparent;
+    border-color: #2ecc71;
+    color: #2ecc71
+}
+
+.button.is-success.is-outlined.is-focused,
+.button.is-success.is-outlined.is-hovered,
+.button.is-success.is-outlined:focus,
+.button.is-success.is-outlined:hover {
+    background-color: #2ecc71;
+    border-color: #2ecc71;
+    color: #fff
+}
+
+.button.is-success.is-outlined.is-loading::after {
+    border-color: transparent transparent #2ecc71 #2ecc71 !important
+}
+
+.button.is-success.is-outlined.is-loading.is-focused::after,
+.button.is-success.is-outlined.is-loading.is-hovered::after,
+.button.is-success.is-outlined.is-loading:focus::after,
+.button.is-success.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-success.is-outlined[disabled],
+fieldset[disabled] .button.is-success.is-outlined {
+    background-color: transparent;
+    border-color: #2ecc71;
+    box-shadow: none;
+    color: #2ecc71
+}
+
+.button.is-success.is-light {
+    background-color: #eefbf4;
+    color: #1d8147
+}
+
+.button.is-success.is-light.is-hovered,
+.button.is-success.is-light:hover {
+    background-color: #e4f9ed;
+    border-color: transparent;
+    color: #1d8147
+}
+
+.button.is-success.is-light.is-active,
+.button.is-success.is-light:active {
+    background-color: #daf7e6;
+    border-color: transparent;
+    color: #1d8147
+}
+
+.button.is-warning {
+    background-color: #f1b70e
+}
+
+.button.is-warning,
+.button.is-warning.is-hovered,
+.button.is-warning:hover {
+    border-color: transparent;
+    color: rgba(0, 0, 0, .7)
+}
+
+.button.is-warning.is-focused,
+.button.is-warning:focus {
+    color: rgba(0, 0, 0, .7)
+}
+
+.button.is-warning.is-focused:not(:active),
+.button.is-warning:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(241, 183, 14, .25)
+}
+
+.button.is-warning.is-active,
+.button.is-warning:active {
+    background-color: #d9a50d;
+    border-color: transparent;
+    color: rgba(0, 0, 0, .7)
+}
+
+.button.is-warning[disabled],
+fieldset[disabled] .button.is-warning {
+    background-color: #f1b70e;
+    border-color: transparent;
+    box-shadow: none
+}
+
+.button.is-warning.is-loading::after {
+    border-color: transparent transparent rgba(0, 0, 0, .7) rgba(0, 0, 0, .7) !important
+}
+
+.button.is-warning.is-outlined {
+    background-color: transparent;
+    border-color: #f1b70e;
+    color: #f1b70e
+}
+
+.button.is-warning.is-outlined.is-focused,
+.button.is-warning.is-outlined.is-hovered,
+.button.is-warning.is-outlined:focus,
+.button.is-warning.is-outlined:hover {
+    background-color: #f1b70e;
+    border-color: #f1b70e;
+    color: rgba(0, 0, 0, .7)
+}
+
+.button.is-warning.is-outlined.is-loading::after {
+    border-color: transparent transparent #f1b70e #f1b70e !important
+}
+
+.button.is-warning.is-outlined.is-loading.is-focused::after,
+.button.is-warning.is-outlined.is-loading.is-hovered::after,
+.button.is-warning.is-outlined.is-loading:focus::after,
+.button.is-warning.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent rgba(0, 0, 0, .7) rgba(0, 0, 0, .7) !important
+}
+
+.button.is-warning.is-outlined[disabled],
+fieldset[disabled] .button.is-warning.is-outlined {
+    background-color: transparent;
+    border-color: #f1b70e;
+    box-shadow: none;
+    color: #f1b70e
+}
+
+.button.is-warning.is-light {
+    background-color: #fef9ec;
+    color: #8c6a08
+}
+
+.button.is-warning.is-light.is-hovered,
+.button.is-warning.is-light:hover {
+    background-color: #fdf6e0;
+    border-color: transparent;
+    color: #8c6a08
+}
+
+.button.is-warning.is-light.is-active,
+.button.is-warning.is-light:active {
+    background-color: #fcf2d4;
+    border-color: transparent;
+    color: #8c6a08
+}
+
+.button.is-danger {
+    background-color: #e74c3c
+}
+
+.button.is-danger,
+.button.is-danger.is-hovered,
+.button.is-danger:hover {
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-danger.is-focused,
+.button.is-danger:focus {
+    color: #fff
+}
+
+.button.is-danger.is-focused:not(:active),
+.button.is-danger:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(231, 76, 60, .25)
+}
+
+.button.is-danger.is-active,
+.button.is-danger:active {
+    background-color: #e43725;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-danger[disabled],
+fieldset[disabled] .button.is-danger {
+    background-color: #e74c3c;
+    border-color: transparent;
+    box-shadow: none
+}
+
+.button.is-danger.is-loading::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-danger.is-outlined {
+    background-color: transparent;
+    border-color: #e74c3c;
+    color: #e74c3c
+}
+
+.button.is-danger.is-outlined.is-focused,
+.button.is-danger.is-outlined.is-hovered,
+.button.is-danger.is-outlined:focus,
+.button.is-danger.is-outlined:hover {
+    background-color: #e74c3c;
+    border-color: #e74c3c;
+    color: #fff
+}
+
+.button.is-danger.is-outlined.is-loading::after {
+    border-color: transparent transparent #e74c3c #e74c3c !important
+}
+
+.button.is-danger.is-outlined.is-loading.is-focused::after,
+.button.is-danger.is-outlined.is-loading.is-hovered::after,
+.button.is-danger.is-outlined.is-loading:focus::after,
+.button.is-danger.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff !important
+}
+
+.button.is-danger.is-outlined[disabled],
+fieldset[disabled] .button.is-danger.is-outlined {
+    background-color: transparent;
+    border-color: #e74c3c;
+    box-shadow: none;
+    color: #e74c3c
+}
+
+.button.is-danger.is-light {
+    background-color: #fdeeed;
+    color: #c32818
+}
+
+.button.is-danger.is-light.is-hovered,
+.button.is-danger.is-light:hover {
+    background-color: #fbe4e1;
+    border-color: transparent;
+    color: #c32818
+}
+
+.button.is-danger.is-light.is-active,
+.button.is-danger.is-light:active {
+    background-color: #fad9d6;
+    border-color: transparent;
+    color: #c32818
+}
+
+.button.is-small {
+    border-radius: 3px;
+    font-size: .85em
+}
+
+.button.is-normal {
+    font-size: 15px
+}
+
+.button.is-medium {
+    font-size: 1.25rem
+}
+
+.button.is-large {
+    font-size: 1.5rem
+}
+
+.button[disabled],
+fieldset[disabled] .button {
+    background-color: #8c9b9d;
+    border-color: #5e6d6f;
+    box-shadow: none;
+    opacity: .5
+}
+
+.button.is-fullwidth {
+    display: flex;
+    width: 100%
+}
+
+.button.is-loading {
+    color: transparent !important;
+    pointer-events: none
+}
+
+.button.is-loading::after {
+    left: calc(50% - (1em / 2));
+    top: calc(50% - (1em / 2));
+    position: absolute !important
+}
+
+.button.is-static {
+    background-color: #ecf0f1;
+    border-color: #5e6d6f;
+    color: #fff;
+    box-shadow: none;
+    pointer-events: none
+}
+
+.button.is-rounded {
+    border-radius: 290486px;
+    padding-left: calc(1em + .25em);
+    padding-right: calc(1em + .25em)
+}
+
+.buttons {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start
+}
+
+.buttons .button {
+    margin-bottom: .5rem
+}
+
+.buttons .button:not(:last-child):not(.is-fullwidth) {
+    margin-right: .5rem
+}
+
+.buttons:last-child {
+    margin-bottom: -.5rem
+}
+
+.buttons:not(:last-child) {
+    margin-bottom: 1rem
+}
+
+.buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large) {
+    border-radius: 3px;
+    font-size: .85em
+}
+
+.buttons.are-medium .button:not(.is-small):not(.is-normal):not(.is-large) {
+    font-size: 1.25rem
+}
+
+.buttons.are-large .button:not(.is-small):not(.is-normal):not(.is-medium) {
+    font-size: 1.5rem
+}
+
+.buttons.has-addons .button:not(:first-child) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0
+}
+
+.buttons.has-addons .button:not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    margin-right: -1px
+}
+
+.buttons.has-addons .button:last-child {
+    margin-right: 0
+}
+
+.buttons.has-addons .button.is-hovered,
+.buttons.has-addons .button:hover {
+    z-index: 2
+}
+
+.buttons.has-addons .button.is-active,
+.buttons.has-addons .button.is-focused,
+.buttons.has-addons .button.is-selected,
+.buttons.has-addons .button:active,
+.buttons.has-addons .button:focus {
+    z-index: 3
+}
+
+.buttons.has-addons .button.is-active:hover,
+.buttons.has-addons .button.is-focused:hover,
+.buttons.has-addons .button.is-selected:hover,
+.buttons.has-addons .button:active:hover,
+.buttons.has-addons .button:focus:hover {
+    z-index: 4
+}
+
+.buttons.has-addons .button.is-expanded {
+    flex-grow: 1;
+    flex-shrink: 1
+}
+
+.buttons.is-centered {
+    justify-content: center
+}
+
+.buttons.is-centered:not(.has-addons) .button:not(.is-fullwidth),
+.buttons.is-right:not(.has-addons) .button:not(.is-fullwidth) {
+    margin-left: .25rem;
+    margin-right: .25rem
+}
+
+.buttons.is-right {
+    justify-content: flex-end
+}
+
+.container {
+    flex-grow: 1;
+    margin: 0 auto;
+    position: relative;
+    width: auto
+}
+
+.container.is-fluid {
+    max-width: none;
+    padding-left: 32px;
+    padding-right: 32px;
+    width: 100%
+}
+
+@media screen and (min-width: 1024px) {
+    .container {
+        max-width: 960px
+    }
+}
+
+@media screen and (max-width: 1215px) {
+    .container.is-widescreen {
+        max-width: 1152px
+    }
+}
+
+@media screen and (max-width: 1407px) {
+    .container.is-fullhd {
+        max-width: 1344px
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .container {
+        max-width: 1152px
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .container {
+        max-width: 1344px
+    }
+}
+
+.content li+li {
+    margin-top: .25em
+}
+
+.content blockquote:not(:last-child),
+.content dl:not(:last-child),
+.content ol:not(:last-child),
+.content p:not(:last-child),
+.content pre:not(:last-child),
+.content table:not(:last-child),
+.content ul:not(:last-child) {
+    margin-bottom: 1em
+}
+
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6 {
+    color: #f2f2f2;
+    font-weight: 600;
+    line-height: 1.125
+}
+
+.content h1 {
+    font-size: 2em;
+    margin-bottom: .5em
+}
+
+.content h1:not(:first-child) {
+    margin-top: 1em
+}
+
+.content h2 {
+    font-size: 1.75em;
+    margin-bottom: .5714em
+}
+
+.content h2:not(:first-child) {
+    margin-top: 1.1428em
+}
+
+.content h3 {
+    font-size: 1.5em;
+    margin-bottom: .6666em
+}
+
+.content h3:not(:first-child) {
+    margin-top: 1.3333em
+}
+
+.content h4 {
+    font-size: 1.25em;
+    margin-bottom: .8em
+}
+
+.content h5 {
+    font-size: 1.125em;
+    margin-bottom: .8888em
+}
+
+.content h6 {
+    font-size: 1em;
+    margin-bottom: 1em
+}
+
+.content blockquote {
+    background-color: hsl(var(--main), 10%, 15%);
+    border-left: 5px solid #5e6d6f;
+    padding: 1.25em 1.5em
+}
+
+.content ol {
+    list-style-position: outside;
+    margin-left: 2em;
+    margin-top: 1em
+}
+
+.content ol:not([type]) {
+    list-style-type: decimal
+}
+
+.content ol:not([type]).is-lower-alpha {
+    list-style-type: lower-alpha
+}
+
+.content ol:not([type]).is-lower-roman {
+    list-style-type: lower-roman
+}
+
+.content ol:not([type]).is-upper-alpha {
+    list-style-type: upper-alpha
+}
+
+.content ol:not([type]).is-upper-roman {
+    list-style-type: upper-roman
+}
+
+.content ul {
+    list-style: disc outside;
+    margin-top: 1em
+}
+
+.content ul ul {
+    list-style-type: circle;
+    margin-top: .5em
+}
+
+.content ul ul ul {
+    list-style-type: square
+}
+
+.content dd,
+.content ul {
+    margin-left: 2em
+}
+
+.content figure {
+    margin-left: 2em;
+    margin-right: 2em;
+    text-align: center
+}
+
+.content figure:not(:first-child) {
+    margin-top: 2em
+}
+
+.content figure:not(:last-child) {
+    margin-bottom: 2em
+}
+
+.content figure img {
+    display: inline-block
+}
+
+.content figure figcaption {
+    font-style: italic
+}
+
+.content pre {
+    -webkit-overflow-scrolling: touch;
+    overflow-x: auto;
+    padding: 1.25em 1.5em;
+    white-space: pre;
+    word-wrap: normal
+}
+
+.content sub,
+.content sup {
+    font-size: 75%
+}
+
+.content table {
+    width: 100%
+}
+
+.content table td,
+.content table th,
+.table td,
+.table th {
+    border-width: 0 0 1px;
+    padding: .5em .75em;
+    vertical-align: top
+}
+
+.content table th,
+.table th {
+    color: #f2f2f2
+}
+
+.content table thead td,
+.content table thead th,
+.table thead td,
+.table thead th {
+    border-width: 0 0 2px;
+    color: #f2f2f2
+}
+
+.content table tfoot td,
+.content table tfoot th,
+.table tfoot td,
+.table tfoot th {
+    border-width: 2px 0 0;
+    color: #f2f2f2
+}
+
+.content table tbody tr:last-child td,
+.content table tbody tr:last-child th,
+.table tbody tr:last-child td,
+.table tbody tr:last-child th {
+    border-bottom-width: 0
+}
+
+.content .tabs li+li {
+    margin-top: 0
+}
+
+.content.is-small {
+    font-size: .85em
+}
+
+.content.is-medium {
+    font-size: 1.25rem
+}
+
+.content.is-large {
+    font-size: 1.5rem
+}
+
+.icon {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    height: 1.5rem;
+    width: 1.5rem
+}
+
+.icon.is-small {
+    height: 1rem;
+    width: 1rem
+}
+
+.icon.is-medium {
+    height: 2rem;
+    width: 2rem
+}
+
+.icon.is-large {
+    height: 3rem;
+    width: 3rem
+}
+
+.image {
+    display: block;
+    position: relative
+}
+
+.image img {
+    display: block;
+    height: auto;
+    width: 100%
+}
+
+.image img.is-rounded {
+    border-radius: 290486px
+}
+
+.image.is-fullwidth {
+    width: 100%
+}
+
+.image.is-16by9 .has-ratio,
+.image.is-16by9 img,
+.image.is-1by1 .has-ratio,
+.image.is-1by1 img,
+.image.is-1by2 .has-ratio,
+.image.is-1by2 img,
+.image.is-1by3 .has-ratio,
+.image.is-1by3 img,
+.image.is-2by1 .has-ratio,
+.image.is-2by1 img,
+.image.is-2by3 .has-ratio,
+.image.is-2by3 img,
+.image.is-3by1 .has-ratio,
+.image.is-3by1 img,
+.image.is-3by2 .has-ratio,
+.image.is-3by2 img,
+.image.is-3by4 .has-ratio,
+.image.is-3by4 img,
+.image.is-3by5 .has-ratio,
+.image.is-3by5 img,
+.image.is-4by3 .has-ratio,
+.image.is-4by3 img,
+.image.is-4by5 .has-ratio,
+.image.is-4by5 img,
+.image.is-5by3 .has-ratio,
+.image.is-5by3 img,
+.image.is-5by4 .has-ratio,
+.image.is-5by4 img,
+.image.is-9by16 .has-ratio,
+.image.is-9by16 img,
+.image.is-square .has-ratio,
+.image.is-square img {
+    height: 100%;
+    width: 100%
+}
+
+.image.is-1by1,
+.image.is-square {
+    padding-top: 100%
+}
+
+.image.is-5by4 {
+    padding-top: 80%
+}
+
+.image.is-4by3 {
+    padding-top: 75%
+}
+
+.image.is-3by2 {
+    padding-top: 66.6666%
+}
+
+.image.is-5by3 {
+    padding-top: 60%
+}
+
+.image.is-16by9 {
+    padding-top: 56.25%
+}
+
+.image.is-2by1 {
+    padding-top: 50%
+}
+
+.image.is-3by1 {
+    padding-top: 33.3333%
+}
+
+.image.is-4by5 {
+    padding-top: 125%
+}
+
+.image.is-3by4 {
+    padding-top: 133.3333%
+}
+
+.image.is-2by3 {
+    padding-top: 150%
+}
+
+.image.is-3by5 {
+    padding-top: 166.6666%
+}
+
+.image.is-9by16 {
+    padding-top: 177.7777%
+}
+
+.image.is-1by2 {
+    padding-top: 200%
+}
+
+.image.is-1by3 {
+    padding-top: 300%
+}
+
+.image.is-16x16 {
+    height: 16px;
+    width: 16px
+}
+
+.image.is-24x24 {
+    height: 24px;
+    width: 24px
+}
+
+.image.is-32x32 {
+    height: 32px;
+    width: 32px
+}
+
+.image.is-48x48 {
+    height: 48px;
+    width: 48px
+}
+
+.image.is-64x64 {
+    height: 64px;
+    width: 64px
+}
+
+.image.is-96x96 {
+    height: 96px;
+    width: 96px
+}
+
+.image.is-128x128 {
+    height: 128px;
+    width: 128px
+}
+
+.notification {
+    border-radius: .4em;
+    padding: 1.25rem 2.5rem 1.25rem 1.5rem;
+    position: relative
+}
+
+.message a:not(.button):not(.tag):not(.dropdown-item),
+.notification a:not(.button):not(.dropdown-item) {
+    color: currentColor;
+    text-decoration: underline
+}
+
+.notification code,
+.notification pre {
+    background: #fff
+}
+
+.notification pre code {
+    background: 0 0
+}
+
+.notification>.delete {
+    position: absolute;
+    right: .5rem;
+    top: .5rem
+}
+
+.notification .content,
+.notification .subtitle,
+.notification .title,
+.notification strong,
+.table td.is-selected a,
+.table td.is-selected strong,
+.table th.is-selected a,
+.table th.is-selected strong,
+.table tr.is-selected a,
+.table tr.is-selected strong {
+    color: currentColor
+}
+
+.notification.is-white {
+    background-color: #fff;
+    color: #0a0a0a
+}
+
+.notification.is-black {
+    background-color: #0a0a0a;
+    color: #fff
+}
+
+.notification.is-light {
+    background-color: #ecf0f1;
+    color: rgba(0, 0, 0, .7)
+}
+
+.notification.is-dark {
+    background-color: hsl(var(--main), 10%, 15%);
+    color: #fff
+}
+
+.notification.is-primary {
+    background-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.notification.is-primary.is-light {
+    background-color: #f1f5f9;
+    color: #4d7eb2
+}
+
+.notification.is-link {
+    background-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.notification.is-link.is-light {
+    background-color: #edfdf9;
+    color: #15987e
+}
+
+.notification.is-info {
+    background-color: #3298dc;
+    color: #fff
+}
+
+.notification.is-info.is-light {
+    background-color: #eef6fc;
+    color: #1d72aa
+}
+
+.notification.is-success {
+    background-color: #2ecc71;
+    color: #fff
+}
+
+.notification.is-success.is-light {
+    background-color: #eefbf4;
+    color: #1d8147
+}
+
+.notification.is-warning {
+    background-color: #f1b70e;
+    color: rgba(0, 0, 0, .7)
+}
+
+.notification.is-warning.is-light {
+    background-color: #fef9ec;
+    color: #8c6a08
+}
+
+.notification.is-danger {
+    background-color: #e74c3c;
+    color: #fff
+}
+
+.notification.is-danger.is-light {
+    background-color: #fdeeed;
+    color: #c32818
+}
+
+.progress {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    border: 0;
+    border-radius: 290486px;
+    display: block;
+    height: 15px;
+    overflow: hidden;
+    padding: 0;
+    width: 100%
+}
+
+.progress::-webkit-progress-bar {
+    background-color: hsl(var(--main), 10%, 15%)
+}
+
+.progress::-webkit-progress-value {
+    background-color: #dbdee0
+}
+
+.progress::-moz-progress-bar {
+    background-color: #dbdee0
+}
+
+.progress::-ms-fill {
+    background-color: #dbdee0;
+    border: 0
+}
+
+.progress.is-white::-webkit-progress-value {
+    background-color: #fff
+}
+
+.progress.is-white::-moz-progress-bar {
+    background-color: #fff
+}
+
+.progress.is-white::-ms-fill {
+    background-color: #fff
+}
+
+.progress.is-white:indeterminate {
+    background-image: linear-gradient(to right, #fff 30%, hsl(var(--main), 10%, 15%) 30%)
+}
+
+.progress.is-black::-webkit-progress-value {
+    background-color: #0a0a0a
+}
+
+.progress.is-black::-moz-progress-bar {
+    background-color: #0a0a0a
+}
+
+.progress.is-black::-ms-fill {
+    background-color: #0a0a0a
+}
+
+.progress.is-black:indeterminate {
+    background-image: linear-gradient(to right, #0a0a0a 30%, hsl(var(--main), 10%, 15%) 30%)
+}
+
+.progress.is-light::-webkit-progress-value {
+    background-color: #ecf0f1
+}
+
+.progress.is-light::-moz-progress-bar {
+    background-color: #ecf0f1
+}
+
+.progress.is-light::-ms-fill {
+    background-color: #ecf0f1
+}
+
+.progress.is-light:indeterminate {
+    background-image: linear-gradient(to right, #ecf0f1 30%, hsl(var(--main), 10%, 15%) 30%)
+}
+
+.progress.is-dark::-webkit-progress-value {
+    background-color: hsl(var(--main), 10%, 15%)
+}
+
+.progress.is-dark::-moz-progress-bar {
+    background-color: hsl(var(--main), 10%, 15%)
+}
+
+.progress.is-dark::-ms-fill {
+    background-color: hsl(var(--main), 10%, 15%)
+}
+
+.progress.is-dark:indeterminate {
+    background-image: linear-gradient(to right, #6a6a6a 30%, hsl(var(--main), 10%, 15%) 30%)
+}
+
+.progress.is-primary::-webkit-progress-value {
+    background-color: hsl(var(--main), 45%, 45%)
+}
+
+.progress.is-primary::-moz-progress-bar {
+    background-color: hsl(var(--main), 45%, 45%)
+}
+
+.progress.is-primary::-ms-fill {
+    background-color: hsl(var(--main), 45%, 45%)
+}
+
+.progress.is-primary:indeterminate {
+    background-image: linear-gradient(to right, hsl(var(--main), 45%, 45%) 30%, hsl(var(--main), 10%, 15%) 30%)
+}
+
+.progress.is-link::-webkit-progress-value {
+    background-color: hsl(var(--main), 45%, 45%)
+}
+
+.progress.is-link::-moz-progress-bar {
+    background-color: hsl(var(--main), 45%, 45%)
+}
+
+.progress.is-link::-ms-fill {
+    background-color: hsl(var(--main), 45%, 45%)
+}
+
+.progress.is-link:indeterminate {
+    background-image: linear-gradient(to right, hsl(var(--main), 45%, 45%) 30%, hsl(var(--main), 10%, 15%) 30%)
+}
+
+.progress.is-info::-webkit-progress-value {
+    background-color: #3298dc
+}
+
+.progress.is-info::-moz-progress-bar {
+    background-color: #3298dc
+}
+
+.progress.is-info::-ms-fill {
+    background-color: #3298dc
+}
+
+.progress.is-info:indeterminate {
+    background-image: linear-gradient(to right, #3298dc 30%, hsl(var(--main), 10%, 15%) 30%)
+}
+
+.progress.is-success::-webkit-progress-value {
+    background-color: #2ecc71
+}
+
+.progress.is-success::-moz-progress-bar {
+    background-color: #2ecc71
+}
+
+.progress.is-success::-ms-fill {
+    background-color: #2ecc71
+}
+
+.progress.is-success:indeterminate {
+    background-image: linear-gradient(to right, #2ecc71 30%, hsl(var(--main), 10%, 15%) 30%)
+}
+
+.progress.is-warning::-webkit-progress-value {
+    background-color: #f1b70e
+}
+
+.progress.is-warning::-moz-progress-bar {
+    background-color: #f1b70e
+}
+
+.progress.is-warning::-ms-fill {
+    background-color: #f1b70e
+}
+
+.progress.is-warning:indeterminate {
+    background-image: linear-gradient(to right, #f1b70e 30%, hsl(var(--main), 10%, 15%) 30%)
+}
+
+.progress.is-danger::-webkit-progress-value {
+    background-color: #e74c3c
+}
+
+.progress.is-danger::-moz-progress-bar {
+    background-color: #e74c3c
+}
+
+.progress.is-danger::-ms-fill {
+    background-color: #e74c3c
+}
+
+.progress.is-danger:indeterminate {
+    background-image: linear-gradient(to right, #e74c3c 30%, hsl(var(--main), 10%, 15%) 30%)
+}
+
+.progress:indeterminate {
+    -webkit-animation-duration: 1.5s;
+    animation-duration: 1.5s;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-animation-name: moveIndeterminate;
+    animation-name: moveIndeterminate;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+    background-color: hsl(var(--main), 10%, 15%);
+    background-image: linear-gradient(to right, #fff 30%, hsl(var(--main), 10%, 15%) 30%);
+    background-position: top left;
+    background-repeat: no-repeat;
+    background-size: 150% 150%
+}
+
+.progress:indeterminate::-webkit-progress-bar {
+    background-color: transparent
+}
+
+.progress:indeterminate::-moz-progress-bar {
+    background-color: transparent
+}
+
+.progress.is-small {
+    height: .85em
+}
+
+.progress.is-medium {
+    height: 1.25rem
+}
+
+.progress.is-large {
+    height: 1.5rem
+}
+
+.table {
+    background-color: hsl(var(--main), 10%, 15%);
+    color: #fff
+}
+
+.table td.is-white,
+.table th.is-white {
+    background-color: #fff;
+    border-color: #fff;
+    color: #0a0a0a
+}
+
+.hero.is-white .tabs.is-boxed li.is-active a,
+.hero.is-white .tabs.is-boxed li.is-active a:hover,
+.hero.is-white .tabs.is-toggle li.is-active a,
+.hero.is-white .tabs.is-toggle li.is-active a:hover,
+.table td.is-black,
+.table th.is-black {
+    background-color: #0a0a0a;
+    border-color: #0a0a0a;
+    color: #fff
+}
+
+.table td.is-light,
+.table th.is-light {
+    background-color: #ecf0f1;
+    border-color: #ecf0f1;
+    color: rgba(0, 0, 0, .7)
+}
+
+.table td.is-dark,
+.table th.is-dark {
+    background-color: hsl(var(--main), 10%, 15%);
+    border-color: hsl(var(--main), 10%, 15%);
+    color: #fff
+}
+
+.table td.is-primary,
+.table th.is-primary {
+    background-color: hsl(var(--main), 45%, 45%);
+    border-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.table td.is-link,
+.table th.is-link {
+    background-color: hsl(var(--main), 45%, 45%);
+    border-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.table td.is-info,
+.table th.is-info {
+    background-color: #3298dc;
+    border-color: #3298dc;
+    color: #fff
+}
+
+.table td.is-success,
+.table th.is-success {
+    background-color: #2ecc71;
+    border-color: #2ecc71;
+    color: #fff
+}
+
+.table td.is-warning,
+.table th.is-warning {
+    background-color: #f1b70e;
+    border-color: #f1b70e;
+    color: rgba(0, 0, 0, .7)
+}
+
+.table td.is-danger,
+.table th.is-danger {
+    background-color: #e74c3c;
+    border-color: #e74c3c;
+    color: #fff
+}
+
+.table td.is-narrow,
+.table th.is-narrow {
+    white-space: nowrap;
+    width: 1%
+}
+
+.table td.is-selected,
+.table th.is-selected,
+.table tr.is-selected {
+    background-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.table th:not([align]) {
+    text-align: left
+}
+
+.table tr.is-selected td,
+.table tr.is-selected th {
+    border-color: #fff;
+    color: currentColor
+}
+
+.message-body pre code,
+.table tbody,
+.table tfoot,
+.table thead {
+    background-color: transparent
+}
+
+.table.is-bordered td,
+.table.is-bordered th {
+    border-width: 1px
+}
+
+.table.is-bordered tr:last-child td,
+.table.is-bordered tr:last-child th {
+    border-bottom-width: 1px
+}
+
+.table.is-fullwidth {
+    width: 100%
+}
+
+.table.is-hoverable tbody tr:not(.is-selected):hover,
+.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
+    background-color: hsl(var(--main), 10%, 15%)
+}
+
+.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
+    background-color: #2d3435
+}
+
+.table.is-narrow td,
+.table.is-narrow th {
+    padding: .25em .5em
+}
+
+.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
+    background-color: hsl(var(--main), 10%, 15%)
+}
+
+.table-container {
+    -webkit-overflow-scrolling: touch;
+    overflow: auto;
+    overflow-y: hidden;
+    max-width: 100%
+}
+
+.tags {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start
+}
+
+.tags .tag {
+    margin-bottom: .5rem
+}
+
+.tags .tag:not(:last-child) {
+    margin-right: .5rem
+}
+
+.tags:last-child {
+    margin-bottom: -.5rem
+}
+
+.tags:not(:last-child) {
+    margin-bottom: 1rem
+}
+
+.tags.are-medium .tag:not(.is-normal):not(.is-large) {
+    font-size: 15px
+}
+
+.tags.are-large .tag:not(.is-normal):not(.is-medium) {
+    font-size: 1.25rem
+}
+
+.tags.is-centered {
+    justify-content: center
+}
+
+.tags.is-centered .tag {
+    margin-right: .25rem;
+    margin-left: .25rem
+}
+
+.tags.is-right {
+    justify-content: flex-end
+}
+
+.tags.is-right .tag:not(:first-child) {
+    margin-left: .5rem
+}
+
+.tags.is-right .tag:not(:last-child) {
+    margin-right: 0
+}
+
+.tags.has-addons .tag {
+    margin-right: 0
+}
+
+.tags.has-addons .tag:not(:first-child) {
+    margin-left: 0;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0
+}
+
+.tags.has-addons .tag:not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0
+}
+
+.tag:not(body) {
+    align-items: center;
+    background-color: hsl(var(--main), 10%, 15%);
+    border-radius: .4em;
+    color: #fff;
+    display: inline-flex;
+    font-size: .85em;
+    height: 2em;
+    justify-content: center;
+    line-height: 1.5;
+    padding-left: .75em;
+    padding-right: .75em;
+    white-space: nowrap
+}
+
+.tag:not(body) .delete {
+    margin-left: .25rem;
+    margin-right: -.375rem
+}
+
+.tag:not(body).is-white {
+    background-color: #fff;
+    color: #0a0a0a
+}
+
+.tag:not(body).is-black {
+    background-color: #0a0a0a;
+    color: #fff
+}
+
+.tag:not(body).is-light {
+    background-color: #ecf0f1;
+    color: rgba(0, 0, 0, .7)
+}
+
+.tag:not(body).is-dark {
+    background-color: hsl(var(--main), 10%, 15%);
+    color: #fff
+}
+
+.tag:not(body).is-primary {
+    background-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.tag:not(body).is-primary.is-light {
+    background-color: #f1f5f9;
+    color: #4d7eb2
+}
+
+.tag:not(body).is-link {
+    background-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.tag:not(body).is-link.is-light {
+    background-color: #edfdf9;
+    color: #15987e
+}
+
+.tag:not(body).is-info {
+    background-color: #3298dc;
+    color: #fff
+}
+
+.tag:not(body).is-info.is-light {
+    background-color: #eef6fc;
+    color: #1d72aa
+}
+
+.tag:not(body).is-success {
+    background-color: #2ecc71;
+    color: #fff
+}
+
+.tag:not(body).is-success.is-light {
+    background-color: #eefbf4;
+    color: #1d8147
+}
+
+.tag:not(body).is-warning {
+    background-color: #f1b70e;
+    color: rgba(0, 0, 0, .7)
+}
+
+.tag:not(body).is-warning.is-light {
+    background-color: #fef9ec;
+    color: #8c6a08
+}
+
+.tag:not(body).is-danger {
+    background-color: #e74c3c;
+    color: #fff
+}
+
+.tag:not(body).is-danger.is-light {
+    background-color: #fdeeed;
+    color: #c32818
+}
+
+.tag:not(body).is-normal {
+    font-size: .85em
+}
+
+.tag:not(body).is-medium {
+    font-size: 15px
+}
+
+.tag:not(body).is-large {
+    font-size: 1.25rem
+}
+
+.tag:not(body) .icon:first-child:not(:last-child) {
+    margin-left: -.375em;
+    margin-right: .1875em
+}
+
+.tag:not(body) .icon:last-child:not(:first-child) {
+    margin-left: .1875em;
+    margin-right: -.375em
+}
+
+.tag:not(body) .icon:first-child:last-child {
+    margin-left: -.375em;
+    margin-right: -.375em
+}
+
+.tag:not(body).is-delete {
+    margin-left: 1px;
+    padding: 0;
+    position: relative;
+    width: 2em
+}
+
+.tag:not(body).is-delete::after,
+.tag:not(body).is-delete::before {
+    background-color: currentColor;
+    content: "";
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%) rotate(45deg);
+    transform-origin: center center
+}
+
+.tag:not(body).is-delete::before {
+    height: 1px;
+    width: 50%
+}
+
+.tag:not(body).is-delete::after {
+    height: 50%;
+    width: 1px
+}
+
+.tag:not(body).is-delete:focus,
+.tag:not(body).is-delete:hover {
+    background-color: #1d2122
+}
+
+.tag:not(body).is-delete:active {
+    background-color: #111414
+}
+
+.tag:not(body).is-rounded {
+    border-radius: 290486px
+}
+
+a.tag:hover {
+    text-decoration: underline
+}
+
+.subtitle,
+.title {
+    word-break: break-word
+}
+
+.subtitle em,
+.subtitle span,
+.title em,
+.title span,
+.title strong {
+    font-weight: inherit
+}
+
+.subtitle sub,
+.subtitle sup,
+.title sub,
+.title sup {
+    font-size: .75em
+}
+
+.subtitle .tag,
+.title .tag {
+    vertical-align: middle
+}
+
+.title {
+    color: #fff;
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: 1.125
+}
+
+.title strong {
+    color: inherit
+}
+
+.title+.highlight {
+    margin-top: -.75rem
+}
+
+.subtitle:not(.is-spaced)+.title,
+.title:not(.is-spaced)+.subtitle {
+    margin-top: -1.25rem
+}
+
+.title.is-1 {
+    font-size: 3rem
+}
+
+.title.is-2 {
+    font-size: 2.5rem
+}
+
+.title.is-3 {
+    font-size: 2rem
+}
+
+.title.is-4 {
+    font-size: 1.5rem
+}
+
+.subtitle,
+.title.is-5 {
+    font-size: 1.25rem
+}
+
+.title.is-6 {
+    font-size: 15px
+}
+
+.title.is-7 {
+    font-size: .85em
+}
+
+.subtitle {
+    color: #d4d4d4;
+    font-weight: 400;
+    line-height: 1.25
+}
+
+.subtitle strong {
+    color: #8c9b9d;
+    font-weight: 600
+}
+
+.subtitle.is-1 {
+    font-size: 3rem
+}
+
+.subtitle.is-2 {
+    font-size: 2.5rem
+}
+
+.subtitle.is-3 {
+    font-size: 2rem
+}
+
+.subtitle.is-4 {
+    font-size: 1.5rem
+}
+
+.subtitle.is-5 {
+    font-size: 1.25rem
+}
+
+.subtitle.is-6 {
+    font-size: 15px
+}
+
+.subtitle.is-7 {
+    font-size: .85em
+}
+
+.heading {
+    display: block;
+    font-size: 11px;
+    letter-spacing: 1px;
+    margin-bottom: 5px;
+    text-transform: uppercase
+}
+
+.highlight {
+    font-weight: 400;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 0
+}
+
+.highlight pre {
+    overflow: auto;
+    max-width: 100%
+}
+
+.number {
+    align-items: center;
+    background-color: hsl(var(--main), 10%, 15%);
+    border-radius: 290486px;
+    display: inline-flex;
+    font-size: 1.25rem;
+    height: 2em;
+    justify-content: center;
+    margin-right: 1.5rem;
+    min-width: 2.5em;
+    padding: .25rem .5rem;
+    text-align: center;
+    vertical-align: top
+}
+
+.input,
+.select select,
+.textarea {
+    border: none;
+    background-color: hsl(var(--main), 15%, 15%);
+    border-radius: .4em;
+    color: #fff
+}
+
+.input:-moz-placeholder,
+.input::-moz-placeholder,
+.select select:-moz-placeholder,
+.select select::-moz-placeholder,
+.textarea:-moz-placeholder,
+.textarea::-moz-placeholder {
+    color: rgba(255, 255, 255, .3)
+}
+
+.input::-webkit-input-placeholder,
+.select select::-webkit-input-placeholder,
+.textarea::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, .3)
+}
+
+.input:-ms-input-placeholder,
+.select select:-ms-input-placeholder,
+.textarea:-ms-input-placeholder {
+    color: rgba(255, 255, 255, .3)
+}
+
+.input:hover,
+.is-hovered.input,
+.is-hovered.textarea,
+.select select.is-hovered,
+.select select:hover,
+.textarea:hover {
+    border-color: hsl(var(--main), 15%, 15%)
+}
+
+.input:active,
+.input:focus,
+.is-active.input,
+.is-active.textarea,
+.is-focused.input,
+.is-focused.textarea,
+.select select.is-active,
+.select select.is-focused,
+.select select:active,
+.select select:focus,
+.textarea:active,
+.textarea:focus {
+    border-color: hsl(var(--main), 45%, 45%);
+    box-shadow: 0 0 0 .125em hsl(var(--main), 25%, 45%, 45%)
+}
+
+.input[disabled],
+.select fieldset[disabled] select,
+.select select[disabled],
+.textarea[disabled],
+fieldset[disabled] .input,
+fieldset[disabled] .select select,
+fieldset[disabled] .textarea {
+    background-color: hsl(var(--main), 15%, 15%);
+    border-color: hsl(var(--main), 10%, 15%);
+    box-shadow: none;
+    color: #fff;
+    opacity: .9
+}
+
+.input[disabled]:-moz-placeholder,
+.input[disabled]::-moz-placeholder,
+.select fieldset[disabled] select:-moz-placeholder,
+.select fieldset[disabled] select::-moz-placeholder,
+.select select[disabled]:-moz-placeholder,
+.select select[disabled]::-moz-placeholder,
+.textarea[disabled]:-moz-placeholder,
+.textarea[disabled]::-moz-placeholder,
+fieldset[disabled] .input:-moz-placeholder,
+fieldset[disabled] .input::-moz-placeholder,
+fieldset[disabled] .select select:-moz-placeholder,
+fieldset[disabled] .select select::-moz-placeholder,
+fieldset[disabled] .textarea:-moz-placeholder,
+fieldset[disabled] .textarea::-moz-placeholder {
+    color: rgba(255, 255, 255, .3)
+}
+
+.input[disabled]::-webkit-input-placeholder,
+.select fieldset[disabled] select::-webkit-input-placeholder,
+.select select[disabled]::-webkit-input-placeholder,
+.textarea[disabled]::-webkit-input-placeholder,
+fieldset[disabled] .input::-webkit-input-placeholder,
+fieldset[disabled] .select select::-webkit-input-placeholder,
+fieldset[disabled] .textarea::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, .3)
+}
+
+.input[disabled]:-ms-input-placeholder,
+.select fieldset[disabled] select:-ms-input-placeholder,
+.select select[disabled]:-ms-input-placeholder,
+.textarea[disabled]:-ms-input-placeholder,
+fieldset[disabled] .input:-ms-input-placeholder,
+fieldset[disabled] .select select:-ms-input-placeholder,
+fieldset[disabled] .textarea:-ms-input-placeholder {
+    color: rgba(255, 255, 255, .3)
+}
+
+.input {
+    max-width: 100%
+}
+
+.input,
+.textarea {
+    box-shadow: inset 0 .0625em .125em rgba(10, 10, 10, .05);
+    width: 100%
+}
+
+.input[readonly],
+.textarea[readonly] {
+    box-shadow: none
+}
+
+.is-white.input,
+.is-white.textarea {
+    border-color: #fff
+}
+
+.is-white.input:active,
+.is-white.input:focus,
+.is-white.is-active.input,
+.is-white.is-active.textarea,
+.is-white.is-focused.input,
+.is-white.is-focused.textarea,
+.is-white.textarea:active,
+.is-white.textarea:focus {
+    box-shadow: 0 0 0 .125em rgba(255, 255, 255, .25)
+}
+
+.is-black.input,
+.is-black.textarea {
+    border-color: #0a0a0a
+}
+
+.is-black.input:active,
+.is-black.input:focus,
+.is-black.is-active.input,
+.is-black.is-active.textarea,
+.is-black.is-focused.input,
+.is-black.is-focused.textarea,
+.is-black.textarea:active,
+.is-black.textarea:focus {
+    box-shadow: 0 0 0 .125em rgba(10, 10, 10, .25)
+}
+
+.is-light.input,
+.is-light.textarea {
+    border-color: #ecf0f1
+}
+
+.is-light.input:active,
+.is-light.input:focus,
+.is-light.is-active.input,
+.is-light.is-active.textarea,
+.is-light.is-focused.input,
+.is-light.is-focused.textarea,
+.is-light.textarea:active,
+.is-light.textarea:focus {
+    box-shadow: 0 0 0 .125em rgba(236, 240, 241, .25)
+}
+
+.is-dark.input,
+.is-dark.textarea,
+.select select[disabled]:hover,
+fieldset[disabled] .select select:hover {
+    border-color: hsl(var(--main), 10%, 15%)
+}
+
+.is-dark.input:active,
+.is-dark.input:focus,
+.is-dark.is-active.input,
+.is-dark.is-active.textarea,
+.is-dark.is-focused.input,
+.is-dark.is-focused.textarea,
+.is-dark.textarea:active,
+.is-dark.textarea:focus {
+    box-shadow: 0 0 0 .125em rgba(40, 47, 47, .25)
+}
+
+.is-primary.input,
+.is-primary.textarea {
+    border-color: hsl(var(--main), 45%, 45%)
+}
+
+.is-primary.input:active,
+.is-primary.input:focus,
+.is-primary.is-active.input,
+.is-primary.is-active.textarea,
+.is-primary.is-focused.input,
+.is-primary.is-focused.textarea,
+.is-primary.textarea:active,
+.is-primary.textarea:focus {
+    box-shadow: 0 0 0 .125em rgba(55, 90, 127, .25)
+}
+
+.is-link.input,
+.is-link.textarea {
+    border-color: hsl(var(--main), 45%, 45%)
+}
+
+.is-link.input:active,
+.is-link.input:focus,
+.is-link.is-active.input,
+.is-link.is-active.textarea,
+.is-link.is-focused.input,
+.is-link.is-focused.textarea,
+.is-link.textarea:active,
+.is-link.textarea:focus {
+    box-shadow: 0 0 0 .125em rgba(26, 188, 156, .25)
+}
+
+.is-info.input,
+.is-info.textarea {
+    border-color: #3298dc
+}
+
+.is-info.input:active,
+.is-info.input:focus,
+.is-info.is-active.input,
+.is-info.is-active.textarea,
+.is-info.is-focused.input,
+.is-info.is-focused.textarea,
+.is-info.textarea:active,
+.is-info.textarea:focus {
+    box-shadow: 0 0 0 .125em rgba(50, 152, 220, .25)
+}
+
+.is-success.input,
+.is-success.textarea {
+    border-color: #2ecc71
+}
+
+.is-success.input:active,
+.is-success.input:focus,
+.is-success.is-active.input,
+.is-success.is-active.textarea,
+.is-success.is-focused.input,
+.is-success.is-focused.textarea,
+.is-success.textarea:active,
+.is-success.textarea:focus {
+    box-shadow: 0 0 0 .125em rgba(46, 204, 113, .25)
+}
+
+.is-warning.input,
+.is-warning.textarea {
+    border-color: #f1b70e
+}
+
+.is-warning.input:active,
+.is-warning.input:focus,
+.is-warning.is-active.input,
+.is-warning.is-active.textarea,
+.is-warning.is-focused.input,
+.is-warning.is-focused.textarea,
+.is-warning.textarea:active,
+.is-warning.textarea:focus {
+    box-shadow: 0 0 0 .125em rgba(241, 183, 14, .25)
+}
+
+.is-danger.input,
+.is-danger.textarea {
+    border-color: #e74c3c
+}
+
+.is-danger.input:active,
+.is-danger.input:focus,
+.is-danger.is-active.input,
+.is-danger.is-active.textarea,
+.is-danger.is-focused.input,
+.is-danger.is-focused.textarea,
+.is-danger.textarea:active,
+.is-danger.textarea:focus {
+    box-shadow: 0 0 0 .125em rgba(231, 76, 60, .25)
+}
+
+.is-small.input,
+.is-small.textarea {
+    border-radius: 3px;
+    font-size: .85em
+}
+
+.is-medium.input,
+.is-medium.textarea {
+    font-size: 1.25rem
+}
+
+.is-large.input,
+.is-large.textarea {
+    font-size: 1.5rem
+}
+
+.is-fullwidth.input,
+.is-fullwidth.textarea {
+    display: block;
+    width: 100%
+}
+
+.is-inline.input,
+.is-inline.textarea {
+    display: inline;
+    width: auto
+}
+
+.input.is-rounded {
+    border-radius: 290486px;
+    padding-left: calc(calc(.75em - 1px) + .375em);
+    padding-right: calc(calc(.75em - 1px) + .375em)
+}
+
+.input.is-static {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    padding-left: 0;
+    padding-right: 0
+}
+
+.textarea {
+    display: block;
+    max-width: 100%;
+    min-width: 100%;
+    padding: calc(.75em - 1px);
+    resize: vertical
+}
+
+.textarea:not([rows]) {
+    max-height: 40em;
+    min-height: 8em
+}
+
+.textarea[rows] {
+    height: initial
+}
+
+.textarea.has-fixed-size {
+    resize: none
+}
+
+.checkbox,
+.radio,
+.select {
+    display: inline-block;
+    position: relative
+}
+
+.checkbox,
+.radio {
+    cursor: pointer;
+    line-height: 1.25
+}
+
+.checkbox input,
+.radio input {
+    cursor: pointer
+}
+
+.checkbox:hover,
+.radio:hover {
+    color: #8c9b9d
+}
+
+.checkbox[disabled],
+.radio[disabled],
+fieldset[disabled] .checkbox,
+fieldset[disabled] .radio {
+    color: #fff;
+    cursor: not-allowed
+}
+
+.radio+.radio {
+    margin-left: .5em
+}
+
+.select {
+    max-width: 100%;
+    vertical-align: top
+}
+
+.select:not(.is-multiple) {
+    height: 2.5em
+}
+
+.select:not(.is-multiple):not(.is-loading)::after {
+    border-color: #fff;
+    right: 1.125em;
+    z-index: 4
+}
+
+.select.is-rounded select {
+    border-radius: 290486px;
+    padding-left: 1em
+}
+
+.select select {
+    cursor: pointer;
+    display: block;
+    font-size: 1em;
+    max-width: 100%;
+    outline: 0
+}
+
+.select select::-ms-expand {
+    display: none
+}
+
+.select select:not([multiple]) {
+    padding-right: 2.5em
+}
+
+.select select[multiple] {
+    height: auto;
+    padding: 0
+}
+
+.select select[multiple] option {
+    padding: .5em 1em
+}
+
+.select:not(.is-multiple):not(.is-loading):hover::after {
+    border-color: #8c9b9d
+}
+
+.select.is-white:not(:hover)::after {
+    border-color: #fff
+}
+
+.select.is-disabled::after,
+.select.is-white select {
+    border-color: #fff
+}
+
+.select.is-white select.is-hovered,
+.select.is-white select:hover {
+    border-color: #f2f2f2
+}
+
+.select.is-white select.is-active,
+.select.is-white select.is-focused,
+.select.is-white select:active,
+.select.is-white select:focus {
+    box-shadow: 0 0 0 .125em rgba(255, 255, 255, .25)
+}
+
+.select.is-black:not(:hover)::after {
+    border-color: #0a0a0a
+}
+
+.select.is-black select {
+    border-color: #0a0a0a
+}
+
+.select.is-black select.is-hovered,
+.select.is-black select:hover {
+    border-color: #000
+}
+
+.select.is-black select.is-active,
+.select.is-black select.is-focused,
+.select.is-black select:active,
+.select.is-black select:focus {
+    box-shadow: 0 0 0 .125em rgba(10, 10, 10, .25)
+}
+
+.select.is-light:not(:hover)::after {
+    border-color: #ecf0f1
+}
+
+.select.is-light select {
+    border-color: #ecf0f1
+}
+
+.select.is-light select.is-hovered,
+.select.is-light select:hover {
+    border-color: #dde4e6
+}
+
+.select.is-light select.is-active,
+.select.is-light select.is-focused,
+.select.is-light select:active,
+.select.is-light select:focus {
+    box-shadow: 0 0 0 .125em rgba(236, 240, 241, .25)
+}
+
+.select.is-dark:not(:hover)::after {
+    border-color: hsl(var(--main), 10%, 15%)
+}
+
+.select.is-dark select {
+    border-color: hsl(var(--main), 10%, 15%)
+}
+
+.select.is-dark select.is-hovered,
+.select.is-dark select:hover {
+    border-color: #1d2122
+}
+
+.select.is-dark select.is-active,
+.select.is-dark select.is-focused,
+.select.is-dark select:active,
+.select.is-dark select:focus {
+    box-shadow: 0 0 0 .125em rgba(40, 47, 47, .25)
+}
+
+.select.is-primary:not(:hover)::after {
+    border-color: hsl(var(--main), 45%, 45%)
+}
+
+.select.is-primary select {
+    border-color: hsl(var(--main), 45%, 45%)
+}
+
+.select.is-primary select.is-hovered,
+.select.is-primary select:hover {
+    border-color: #2f4d6d
+}
+
+.select.is-primary select.is-active,
+.select.is-primary select.is-focused,
+.select.is-primary select:active,
+.select.is-primary select:focus {
+    box-shadow: 0 0 0 .125em rgba(55, 90, 127, .25)
+}
+
+.select.is-link:not(:hover)::after {
+    border-color: hsl(var(--main), 45%, 45%)
+}
+
+.select.is-link select {
+    border-color: hsl(var(--main), 45%, 45%)
+}
+
+.select.is-link select.is-hovered,
+.select.is-link select:hover {
+    border-color: hsl(var(--main), 75%, 80%)
+}
+
+.select.is-link select.is-active,
+.select.is-link select.is-focused,
+.select.is-link select:active,
+.select.is-link select:focus {
+    box-shadow: 0 0 0 .125em rgba(26, 188, 156, .25)
+}
+
+.select.is-info:not(:hover)::after {
+    border-color: #3298dc
+}
+
+.select.is-info select {
+    border-color: #3298dc
+}
+
+.select.is-info select.is-hovered,
+.select.is-info select:hover {
+    border-color: #238cd1
+}
+
+.select.is-info select.is-active,
+.select.is-info select.is-focused,
+.select.is-info select:active,
+.select.is-info select:focus {
+    box-shadow: 0 0 0 .125em rgba(50, 152, 220, .25)
+}
+
+.select.is-success:not(:hover)::after {
+    border-color: #2ecc71
+}
+
+.select.is-success select {
+    border-color: #2ecc71
+}
+
+.select.is-success select.is-hovered,
+.select.is-success select:hover {
+    border-color: #29b765
+}
+
+.select.is-success select.is-active,
+.select.is-success select.is-focused,
+.select.is-success select:active,
+.select.is-success select:focus {
+    box-shadow: 0 0 0 .125em rgba(46, 204, 113, .25)
+}
+
+.select.is-warning:not(:hover)::after {
+    border-color: #f1b70e
+}
+
+.select.is-warning select {
+    border-color: #f1b70e
+}
+
+.select.is-warning select.is-hovered,
+.select.is-warning select:hover {
+    border-color: #d9a50d
+}
+
+.select.is-warning select.is-active,
+.select.is-warning select.is-focused,
+.select.is-warning select:active,
+.select.is-warning select:focus {
+    box-shadow: 0 0 0 .125em rgba(241, 183, 14, .25)
+}
+
+.select.is-danger:not(:hover)::after {
+    border-color: #e74c3c
+}
+
+.select.is-danger select {
+    border-color: #e74c3c
+}
+
+.select.is-danger select.is-hovered,
+.select.is-danger select:hover {
+    border-color: #e43725
+}
+
+.select.is-danger select.is-active,
+.select.is-danger select.is-focused,
+.select.is-danger select:active,
+.select.is-danger select:focus {
+    box-shadow: 0 0 0 .125em rgba(231, 76, 60, .25)
+}
+
+.select.is-small {
+    border-radius: 3px;
+    font-size: .85em
+}
+
+.select.is-medium {
+    font-size: 1.25rem
+}
+
+.select.is-large {
+    font-size: 1.5rem
+}
+
+.select.is-fullwidth,
+.select.is-fullwidth select {
+    width: 100%
+}
+
+.select.is-loading::after {
+    margin-top: 0;
+    position: absolute;
+    right: .625em;
+    top: .625em;
+    transform: none
+}
+
+.file.is-small,
+.select.is-loading.is-small:after {
+    font-size: .85em
+}
+
+.file.is-medium,
+.select.is-loading.is-medium:after {
+    font-size: 1.25rem
+}
+
+.file.is-large,
+.select.is-loading.is-large:after {
+    font-size: 1.5rem
+}
+
+.file {
+    align-items: stretch;
+    display: flex;
+    justify-content: flex-start;
+    position: relative
+}
+
+.file.is-white .file-cta {
+    background-color: #fff;
+    border-color: transparent;
+    color: #0a0a0a
+}
+
+.file.is-white.is-hovered .file-cta,
+.file.is-white:hover .file-cta {
+    background-color: #f9f9f9;
+    border-color: transparent;
+    color: #0a0a0a
+}
+
+.file.is-white.is-focused .file-cta,
+.file.is-white:focus .file-cta {
+    border-color: transparent;
+    box-shadow: 0 0 .5em rgba(255, 255, 255, .25);
+    color: #0a0a0a
+}
+
+.file.is-white.is-active .file-cta,
+.file.is-white:active .file-cta {
+    background-color: #f2f2f2;
+    border-color: transparent;
+    color: #0a0a0a
+}
+
+.file.is-black .file-cta {
+    background-color: #0a0a0a;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-black.is-hovered .file-cta,
+.file.is-black:hover .file-cta {
+    background-color: #040404;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-black.is-focused .file-cta,
+.file.is-black:focus .file-cta {
+    border-color: transparent;
+    box-shadow: 0 0 .5em rgba(10, 10, 10, .25);
+    color: #fff
+}
+
+.file.is-black.is-active .file-cta,
+.file.is-black:active .file-cta {
+    background-color: #000;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-light .file-cta {
+    background-color: #ecf0f1;
+    border-color: transparent;
+    color: rgba(0, 0, 0, .7)
+}
+
+.file.is-light.is-hovered .file-cta,
+.file.is-light:hover .file-cta {
+    background-color: #e5eaec;
+    border-color: transparent;
+    color: rgba(0, 0, 0, .7)
+}
+
+.file.is-light.is-focused .file-cta,
+.file.is-light:focus .file-cta {
+    border-color: transparent;
+    box-shadow: 0 0 .5em rgba(236, 240, 241, .25);
+    color: rgba(0, 0, 0, .7)
+}
+
+.file.is-light.is-active .file-cta,
+.file.is-light:active .file-cta {
+    background-color: #dde4e6;
+    border-color: transparent;
+    color: rgba(0, 0, 0, .7)
+}
+
+.file.is-dark .file-cta {
+    background-color: hsl(var(--main), 10%, 15%);
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-dark.is-hovered .file-cta,
+.file.is-dark:hover .file-cta {
+    background-color: #232829;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-dark.is-focused .file-cta,
+.file.is-dark:focus .file-cta {
+    border-color: transparent;
+    box-shadow: 0 0 .5em rgba(40, 47, 47, .25);
+    color: #fff
+}
+
+.file.is-dark.is-active .file-cta,
+.file.is-dark:active .file-cta,
+.file.is-primary .file-cta {
+    background-color: #1d2122;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-primary .file-cta {
+    background-color: hsl(var(--main), 45%, 45%)
+}
+
+.file.is-primary.is-hovered .file-cta,
+.file.is-primary:hover .file-cta {
+    background-color: #335476;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-primary.is-focused .file-cta,
+.file.is-primary:focus .file-cta {
+    border-color: transparent;
+    box-shadow: 0 0 .5em rgba(55, 90, 127, .25);
+    color: #fff
+}
+
+.file.is-link .file-cta,
+.file.is-primary.is-active .file-cta,
+.file.is-primary:active .file-cta {
+    background-color: #2f4d6d;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-link .file-cta {
+    background-color: hsl(var(--main), 45%, 45%)
+}
+
+.file.is-link.is-hovered .file-cta,
+.file.is-link:hover .file-cta {
+    background-color: #18b193;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-link.is-focused .file-cta,
+.file.is-link:focus .file-cta {
+    border-color: transparent;
+    box-shadow: 0 0 .5em rgba(26, 188, 156, .25);
+    color: #fff
+}
+
+.file.is-info .file-cta,
+.file.is-link.is-active .file-cta,
+.file.is-link:active .file-cta {
+    background-color: hsl(var(--main), 75%, 80%);
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-info .file-cta {
+    background-color: #3298dc
+}
+
+.file.is-info.is-hovered .file-cta,
+.file.is-info:hover .file-cta {
+    background-color: #2793da;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-info.is-focused .file-cta,
+.file.is-info:focus .file-cta {
+    border-color: transparent;
+    box-shadow: 0 0 .5em rgba(50, 152, 220, .25);
+    color: #fff
+}
+
+.file.is-info.is-active .file-cta,
+.file.is-info:active .file-cta,
+.file.is-success .file-cta {
+    background-color: #238cd1;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-success .file-cta {
+    background-color: #2ecc71
+}
+
+.file.is-success.is-hovered .file-cta,
+.file.is-success:hover .file-cta {
+    background-color: #2cc26b;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-success.is-focused .file-cta,
+.file.is-success:focus .file-cta {
+    border-color: transparent;
+    box-shadow: 0 0 .5em rgba(46, 204, 113, .25);
+    color: #fff
+}
+
+.file.is-success.is-active .file-cta,
+.file.is-success:active .file-cta {
+    background-color: #29b765;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-warning .file-cta {
+    background-color: #f1b70e;
+    border-color: transparent;
+    color: rgba(0, 0, 0, .7)
+}
+
+.file.is-warning.is-hovered .file-cta,
+.file.is-warning:hover .file-cta {
+    background-color: #e5ae0d;
+    border-color: transparent;
+    color: rgba(0, 0, 0, .7)
+}
+
+.file.is-warning.is-focused .file-cta,
+.file.is-warning:focus .file-cta {
+    border-color: transparent;
+    box-shadow: 0 0 .5em rgba(241, 183, 14, .25);
+    color: rgba(0, 0, 0, .7)
+}
+
+.file.is-warning.is-active .file-cta,
+.file.is-warning:active .file-cta {
+    background-color: #d9a50d;
+    border-color: transparent;
+    color: rgba(0, 0, 0, .7)
+}
+
+.file.is-danger .file-cta {
+    background-color: #e74c3c;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-danger.is-hovered .file-cta,
+.file.is-danger:hover .file-cta {
+    background-color: #e64231;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-danger.is-focused .file-cta,
+.file.is-danger:focus .file-cta {
+    border-color: transparent;
+    box-shadow: 0 0 .5em rgba(231, 76, 60, .25);
+    color: #fff
+}
+
+.file.is-danger.is-active .file-cta,
+.file.is-danger:active .file-cta {
+    background-color: #e43725;
+    border-color: transparent;
+    color: #fff
+}
+
+.file.is-medium .file-icon .fa {
+    font-size: 21px
+}
+
+.file.is-large .file-icon .fa {
+    font-size: 28px
+}
+
+.file.has-name .file-cta {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0
+}
+
+.file.has-name .file-name {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0
+}
+
+.file.has-name.is-empty .file-cta,
+.level code {
+    border-radius: .4em
+}
+
+.file.has-name.is-empty .file-name {
+    display: none
+}
+
+.file.is-boxed .file-label {
+    flex-direction: column
+}
+
+.file.is-boxed .file-cta {
+    flex-direction: column;
+    height: auto;
+    padding: 1em 3em
+}
+
+.file.is-boxed .file-name {
+    border-width: 0 1px 1px
+}
+
+.file.is-boxed .file-icon {
+    height: 1.5em;
+    width: 1.5em
+}
+
+.file.is-boxed .file-icon .fa {
+    font-size: 21px
+}
+
+.file.is-boxed.is-small .file-icon .fa {
+    font-size: 14px
+}
+
+.file.is-boxed.is-medium .file-icon .fa {
+    font-size: 28px
+}
+
+.file.is-boxed.is-large .file-icon .fa {
+    font-size: 35px
+}
+
+.card .card-image img,
+.file.is-boxed.has-name .file-cta {
+    border-radius: .4em .4em 0 0
+}
+
+.file.is-boxed.has-name .file-name {
+    border-radius: 0 0 .4em .4em;
+    border-width: 0 1px 1px
+}
+
+.file.is-centered {
+    justify-content: center
+}
+
+.file.is-fullwidth .file-label {
+    width: 100%
+}
+
+.file.is-fullwidth .file-name {
+    flex-grow: 1;
+    max-width: none
+}
+
+.file.is-right {
+    justify-content: flex-end
+}
+
+.file.is-right .file-cta {
+    border-radius: 0 .4em .4em 0
+}
+
+.file.is-right .file-name {
+    border-radius: .4em 0 0 .4em;
+    border-width: 1px 0 1px 1px;
+    order: -1
+}
+
+.file-label {
+    align-items: stretch;
+    display: flex;
+    cursor: pointer;
+    justify-content: flex-start;
+    overflow: hidden;
+    position: relative
+}
+
+.file-label:hover .file-cta {
+    background-color: #232829;
+    color: #f2f2f2
+}
+
+.file-label:hover .file-name {
+    border-color: #596668
+}
+
+.file-label:active .file-cta {
+    background-color: #1d2122;
+    color: #f2f2f2
+}
+
+.file-label:active .file-name {
+    border-color: #535f61
+}
+
+.file-input {
+    height: 100%;
+    left: 0;
+    opacity: 0;
+    outline: 0;
+    position: absolute;
+    top: 0;
+    width: 100%
+}
+
+.file-cta {
+    border-color: #5e6d6f
+}
+
+.file-cta,
+.file-name {
+    border-radius: .4em;
+    font-size: 1em;
+    padding-left: 1em;
+    padding-right: 1em;
+    white-space: nowrap
+}
+
+.file-cta {
+    background-color: hsl(var(--main), 10%, 15%);
+    color: #fff
+}
+
+.file-name {
+    border-color: #5e6d6f;
+    border-style: solid;
+    border-width: 1px 1px 1px 0;
+    display: block;
+    max-width: 16em;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis
+}
+
+.file-icon {
+    align-items: center;
+    display: flex;
+    height: 1em;
+    justify-content: center;
+    margin-right: .5em;
+    width: 1em
+}
+
+.file-icon .fa {
+    font-size: 14px
+}
+
+.label {
+    display: block;
+    font-size: 15px;
+    font-weight: 700
+}
+
+.label:not(:last-child) {
+    margin-bottom: .5em
+}
+
+.help,
+.label.is-small {
+    font-size: .85em
+}
+
+.label.is-medium {
+    font-size: 1.25rem
+}
+
+.label.is-large {
+    font-size: 1.5rem
+}
+
+.help {
+    display: block;
+    margin-top: .25rem
+}
+
+.help.is-white {
+    color: #fff
+}
+
+.help.is-black {
+    color: #0a0a0a
+}
+
+.help.is-light {
+    color: #ecf0f1
+}
+
+.help.is-dark {
+    color: hsl(var(--main), 10%, 15%)
+}
+
+.help.is-primary {
+    color: hsl(var(--main), 45%, 45%)
+}
+
+.help.is-link {
+    color: hsl(var(--main), 45%, 45%)
+}
+
+.help.is-info {
+    color: #3298dc
+}
+
+.help.is-success {
+    color: #2ecc71
+}
+
+.help.is-warning {
+    color: #f1b70e
+}
+
+.help.is-danger {
+    color: #e74c3c
+}
+
+.field:not(:last-child) {
+    margin-bottom: .75rem
+}
+
+.field.has-addons,
+.field.is-grouped {
+    display: flex;
+    justify-content: flex-start
+}
+
+.field.has-addons .control:not(:last-child) {
+    margin-right: -1px
+}
+
+.field.has-addons .control:not(:first-child):not(:last-child) .button,
+.field.has-addons .control:not(:first-child):not(:last-child) .input,
+.field.has-addons .control:not(:first-child):not(:last-child) .select select {
+    border-radius: 0
+}
+
+.field.has-addons .control:first-child:not(:only-child) .button,
+.field.has-addons .control:first-child:not(:only-child) .input,
+.field.has-addons .control:first-child:not(:only-child) .select select {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0
+}
+
+.field.has-addons .control:last-child:not(:only-child) .button,
+.field.has-addons .control:last-child:not(:only-child) .input,
+.field.has-addons .control:last-child:not(:only-child) .select select {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0
+}
+
+.field.has-addons .control .button:not([disabled]).is-hovered,
+.field.has-addons .control .button:not([disabled]):hover,
+.field.has-addons .control .input:not([disabled]).is-hovered,
+.field.has-addons .control .input:not([disabled]):hover,
+.field.has-addons .control .select select:not([disabled]).is-hovered,
+.field.has-addons .control .select select:not([disabled]):hover {
+    z-index: 2
+}
+
+.field.has-addons .control .button:not([disabled]).is-active,
+.field.has-addons .control .button:not([disabled]).is-focused,
+.field.has-addons .control .button:not([disabled]):active,
+.field.has-addons .control .button:not([disabled]):focus,
+.field.has-addons .control .input:not([disabled]).is-active,
+.field.has-addons .control .input:not([disabled]).is-focused,
+.field.has-addons .control .input:not([disabled]):active,
+.field.has-addons .control .input:not([disabled]):focus,
+.field.has-addons .control .select select:not([disabled]).is-active,
+.field.has-addons .control .select select:not([disabled]).is-focused,
+.field.has-addons .control .select select:not([disabled]):active,
+.field.has-addons .control .select select:not([disabled]):focus {
+    z-index: 3
+}
+
+.field.has-addons .control .button:not([disabled]).is-active:hover,
+.field.has-addons .control .button:not([disabled]).is-focused:hover,
+.field.has-addons .control .button:not([disabled]):active:hover,
+.field.has-addons .control .button:not([disabled]):focus:hover,
+.field.has-addons .control .input:not([disabled]).is-active:hover,
+.field.has-addons .control .input:not([disabled]).is-focused:hover,
+.field.has-addons .control .input:not([disabled]):active:hover,
+.field.has-addons .control .input:not([disabled]):focus:hover,
+.field.has-addons .control .select select:not([disabled]).is-active:hover,
+.field.has-addons .control .select select:not([disabled]).is-focused:hover,
+.field.has-addons .control .select select:not([disabled]):active:hover,
+.field.has-addons .control .select select:not([disabled]):focus:hover {
+    z-index: 4
+}
+
+.field.has-addons .control.is-expanded {
+    flex-grow: 1;
+    flex-shrink: 1
+}
+
+.field.has-addons.has-addons-centered {
+    justify-content: center
+}
+
+.field.has-addons.has-addons-right {
+    justify-content: flex-end
+}
+
+.field.has-addons.has-addons-fullwidth .control,
+.tabs.is-fullwidth li {
+    flex-grow: 1;
+    flex-shrink: 0
+}
+
+.field.is-grouped>.control {
+    flex-shrink: 0
+}
+
+.field.is-grouped>.control:not(:last-child) {
+    margin-bottom: 0;
+    margin-right: .75rem
+}
+
+.field.is-grouped>.control.is-expanded {
+    flex-grow: 1;
+    flex-shrink: 1
+}
+
+.breadcrumb.is-centered ol,
+.breadcrumb.is-centered ul,
+.field.is-grouped.is-grouped-centered {
+    justify-content: center
+}
+
+.breadcrumb.is-right ol,
+.breadcrumb.is-right ul,
+.field.is-grouped.is-grouped-right {
+    justify-content: flex-end
+}
+
+.field.is-grouped.is-grouped-multiline {
+    flex-wrap: wrap
+}
+
+.field.is-grouped.is-grouped-multiline>.control:last-child,
+.field.is-grouped.is-grouped-multiline>.control:not(:last-child) {
+    margin-bottom: .75rem
+}
+
+.field.is-grouped.is-grouped-multiline:last-child {
+    margin-bottom: -.75rem
+}
+
+.field.is-grouped.is-grouped-multiline:not(:last-child) {
+    margin-bottom: 0
+}
+
+@media screen and (min-width: 769px),
+print {
+    .field.is-horizontal {
+        display: flex
+    }
+}
+
+.field-label .label {
+    font-size: inherit
+}
+
+@media screen and (max-width: 768px) {
+    .field-label {
+        margin-bottom: .5rem
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .field-label {
+        flex-basis: 0;
+        flex-grow: 1;
+        flex-shrink: 0;
+        margin-right: 1.5rem;
+        text-align: right
+    }
+
+    .field-label.is-small {
+        font-size: .85em;
+        padding-top: .375em
+    }
+
+    .field-label.is-normal {
+        padding-top: .375em
+    }
+
+    .field-label.is-medium {
+        font-size: 1.25rem;
+        padding-top: .375em
+    }
+
+    .field-label.is-large {
+        font-size: 1.5rem;
+        padding-top: .375em
+    }
+}
+
+.field-body .field .field {
+    margin-bottom: 0
+}
+
+@media screen and (min-width: 769px),
+print {
+    .field-body {
+        display: flex;
+        flex-basis: 0;
+        flex-grow: 5
+    }
+
+    .field-body .field {
+        margin-bottom: 0
+    }
+
+    .field-body,
+    .field-body>.field {
+        flex-shrink: 1
+    }
+
+    .field-body>.field:not(.is-narrow) {
+        flex-grow: 1
+    }
+
+    .field-body>.field:not(:last-child) {
+        margin-right: .75rem
+    }
+}
+
+.control {
+    box-sizing: border-box;
+    clear: both;
+    font-size: 15px;
+    position: relative;
+    text-align: left
+}
+
+.control.has-icons-left .input:focus~.icon,
+.control.has-icons-left .select:focus~.icon,
+.control.has-icons-right .input:focus~.icon,
+.control.has-icons-right .select:focus~.icon {
+    color: #d4d4d4
+}
+
+.breadcrumb.is-small,
+.control.has-icons-left .input.is-small~.icon,
+.control.has-icons-left .select.is-small~.icon,
+.control.has-icons-right .input.is-small~.icon,
+.control.has-icons-right .select.is-small~.icon,
+.control.is-loading.is-small:after {
+    font-size: .85em
+}
+
+.breadcrumb.is-medium,
+.control.has-icons-left .input.is-medium~.icon,
+.control.has-icons-left .select.is-medium~.icon,
+.control.has-icons-right .input.is-medium~.icon,
+.control.has-icons-right .select.is-medium~.icon,
+.control.is-loading.is-medium:after {
+    font-size: 1.25rem
+}
+
+.breadcrumb.is-large,
+.control.has-icons-left .input.is-large~.icon,
+.control.has-icons-left .select.is-large~.icon,
+.control.has-icons-right .input.is-large~.icon,
+.control.has-icons-right .select.is-large~.icon,
+.control.is-loading.is-large:after {
+    font-size: 1.5rem
+}
+
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+    color: #d4d4d4;
+    height: 2.5em;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 2.5em;
+    z-index: 4
+}
+
+.control.has-icons-left .input,
+.control.has-icons-left .select select {
+    padding-left: 2.5em
+}
+
+.control.has-icons-left .icon.is-left {
+    left: 0
+}
+
+.control.has-icons-right .input,
+.control.has-icons-right .select select {
+    padding-right: 2.5em
+}
+
+.control.has-icons-right .icon.is-right {
+    right: 0
+}
+
+.control.is-loading::after {
+    position: absolute !important;
+    right: .625em;
+    top: .625em;
+    z-index: 4
+}
+
+.breadcrumb {
+    font-size: 15px;
+    white-space: nowrap
+}
+
+.breadcrumb a {
+    justify-content: center;
+    padding: 0 .75em
+}
+
+.breadcrumb a:hover {
+    color: hsl(var(--main), 75%, 90%)
+}
+
+.breadcrumb a,
+.breadcrumb li {
+    align-items: center;
+    display: flex
+}
+
+.breadcrumb li:first-child a {
+    padding-left: 0
+}
+
+.breadcrumb li.is-active a {
+    color: #f2f2f2;
+    cursor: default;
+    pointer-events: none
+}
+
+.breadcrumb li+li::before {
+    color: #8c9b9d;
+    content: "\0002f"
+}
+
+.breadcrumb ol,
+.breadcrumb ul {
+    align-items: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start
+}
+
+.breadcrumb .icon:first-child {
+    margin-right: .5em
+}
+
+.breadcrumb .icon:last-child {
+    margin-left: .5em
+}
+
+.breadcrumb.has-arrow-separator li+li::before {
+    content: "\02192"
+}
+
+.breadcrumb.has-bullet-separator li+li::before {
+    content: "\02022"
+}
+
+.breadcrumb.has-dot-separator li+li::before {
+    content: "\000b7"
+}
+
+.breadcrumb.has-succeeds-separator li+li::before {
+    content: "\0227B"
+}
+
+.card {
+    box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
+    color: #fff;
+    max-width: 100%;
+    position: relative
+}
+
+.card-header {
+    background-color: transparent;
+    align-items: stretch;
+    box-shadow: 0 .125em .25em rgba(10, 10, 10, .1);
+    display: flex
+}
+
+.card-header-title {
+    align-items: center;
+    color: #f2f2f2;
+    display: flex;
+    flex-grow: 1;
+    font-weight: 700;
+    padding: .75rem 1rem
+}
+
+.card-header-icon,
+.card-header-title.is-centered {
+    justify-content: center
+}
+
+.card-header-icon {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    padding: .75rem 1rem
+}
+
+.card-image {
+    display: block;
+    position: relative
+}
+
+.card-content,
+.card-footer {
+    background-color: transparent
+}
+
+.card-content {
+    padding: 1.5rem
+}
+
+.card-footer {
+    border-top: 1px solid #ededed;
+    align-items: stretch;
+    display: flex
+}
+
+.card-footer-item {
+    align-items: center;
+    display: flex;
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    justify-content: center;
+    padding: .75rem
+}
+
+.card-footer-item:not(:last-child) {
+    border-right: 1px solid #ededed
+}
+
+.card .media:not(:last-child) {
+    margin-bottom: 1.5rem
+}
+
+.dropdown {
+    display: inline-flex;
+    position: relative;
+    vertical-align: top
+}
+
+.dropdown.is-active .dropdown-menu,
+.dropdown.is-hoverable:hover .dropdown-menu {
+    display: block
+}
+
+.dropdown.is-right .dropdown-menu {
+    left: auto;
+    right: 0
+}
+
+.dropdown.is-up .dropdown-menu {
+    bottom: 100%;
+    padding-bottom: 4px;
+    padding-top: initial;
+    top: auto
+}
+
+.dropdown-menu {
+    display: none;
+    left: 0;
+    min-width: 12rem;
+    padding-top: 4px;
+    position: absolute;
+    top: 100%;
+    z-index: 20
+}
+
+.dropdown-content {
+    background-color: hsl(var(--main), 10%, 15%);
+    border-radius: .4em;
+    box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
+    padding-bottom: .5rem;
+    padding-top: .5rem
+}
+
+.dropdown-item {
+    color: #fff;
+    display: block;
+    font-size: .875rem;
+    line-height: 1.5;
+    padding: .375rem 1rem;
+    position: relative
+}
+
+a.dropdown-item,
+button.dropdown-item {
+    padding-right: 3rem;
+    text-align: left;
+    white-space: nowrap;
+    width: 100%
+}
+
+a.dropdown-item:hover,
+button.dropdown-item:hover {
+    background-color: hsl(var(--main), 10%, 15%);
+    color: #fff
+}
+
+a.dropdown-item.is-active,
+button.dropdown-item.is-active {
+    background-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.dropdown-divider {
+    background-color: #ededed;
+    border: 0;
+    display: block;
+    height: 1px;
+    margin: .5rem 0
+}
+
+.level {
+    align-items: center;
+    justify-content: space-between
+}
+
+.level img {
+    display: inline-block;
+    vertical-align: top
+}
+
+.level.is-mobile,
+.level.is-mobile .level-left,
+.level.is-mobile .level-right {
+    display: flex
+}
+
+.level.is-mobile .level-left+.level-right {
+    margin-top: 0
+}
+
+.level.is-mobile .level-item:not(:last-child) {
+    margin-bottom: 0;
+    margin-right: .75rem
+}
+
+.level.is-mobile .level-item:not(.is-narrow) {
+    flex-grow: 1
+}
+
+@media screen and (min-width: 769px),
+print {
+    .level {
+        display: flex
+    }
+
+    .level>.level-item:not(.is-narrow) {
+        flex-grow: 1
+    }
+}
+
+.level-item {
+    align-items: center;
+    display: flex;
+    justify-content: center
+}
+
+.level-item .subtitle,
+.level-item .title {
+    margin-bottom: 0
+}
+
+@media screen and (max-width: 768px) {
+    .level-item:not(:last-child) {
+        margin-bottom: .75rem
+    }
+}
+
+.level-item,
+.level-left,
+.level-right {
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0
+}
+
+.level-left .level-item.is-flexible,
+.level-right .level-item.is-flexible {
+    flex-grow: 1
+}
+
+@media screen and (min-width: 769px),
+print {
+
+    .level-left .level-item:not(:last-child),
+    .level-right .level-item:not(:last-child) {
+        margin-right: .75rem
+    }
+}
+
+.level-left {
+    align-items: center;
+    justify-content: flex-start
+}
+
+@media screen and (max-width: 768px) {
+    .level-left+.level-right {
+        margin-top: 1.5rem
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .level-left {
+        display: flex
+    }
+}
+
+.level-right {
+    align-items: center;
+    justify-content: flex-end
+}
+
+@media screen and (min-width: 769px),
+print {
+    .level-right {
+        display: flex
+    }
+}
+
+.list {
+    background-color: #fff;
+    border-radius: .4em;
+    box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1)
+}
+
+.list-item {
+    display: block;
+    padding: .5em 1em
+}
+
+.list-item:not(a) {
+    color: #fff
+}
+
+.list-item:first-child {
+    border-top-left-radius: .4em;
+    border-top-right-radius: .4em
+}
+
+.list-item:last-child {
+    border-bottom-left-radius: .4em;
+    border-bottom-right-radius: .4em
+}
+
+.list-item:not(:last-child) {
+    border-bottom: 1px solid #5e6d6f
+}
+
+.list-item.is-active {
+    background-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+a.list-item {
+    background-color: hsl(var(--main), 10%, 15%);
+    cursor: pointer
+}
+
+.media {
+    align-items: flex-start;
+    display: flex;
+    text-align: left
+}
+
+.media .content:not(:last-child) {
+    margin-bottom: .75rem
+}
+
+.media .media {
+    border-top: 1px solid rgba(94, 109, 111, .5);
+    display: flex;
+    padding-top: .75rem
+}
+
+.media .media .content:not(:last-child),
+.media .media .control:not(:last-child) {
+    margin-bottom: .5rem
+}
+
+.media .media .media {
+    padding-top: .5rem
+}
+
+.media .media .media+.media {
+    margin-top: .5rem
+}
+
+.media+.media {
+    border-top: 1px solid rgba(94, 109, 111, .5);
+    margin-top: 1rem;
+    padding-top: 1rem
+}
+
+.media.is-large+.media {
+    margin-top: 1.5rem;
+    padding-top: 1.5rem
+}
+
+.media-left,
+.media-right {
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0
+}
+
+.media-left {
+    margin-right: 1rem
+}
+
+.media-right {
+    margin-left: 1rem
+}
+
+.media-content {
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+    text-align: left
+}
+
+@media screen and (max-width: 768px) {
+    .media-content {
+        overflow-x: auto
+    }
+}
+
+.menu {
+    font-size: 15px
+}
+
+.menu.is-small {
+    font-size: .85em
+}
+
+.menu.is-medium {
+    font-size: 1.25rem
+}
+
+.menu.is-large {
+    font-size: 1.5rem
+}
+
+.menu-list {
+    line-height: 1.25
+}
+
+.menu-list a {
+    border-radius: 3px;
+    color: #fff;
+    display: block;
+    padding: .5em .75em
+}
+
+.menu-list a:hover {
+    background-color: hsl(var(--main), 10%, 15%);
+    color: #f2f2f2
+}
+
+.menu-list a.is-active {
+    background-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.menu-list li ul {
+    border-left: 1px solid #5e6d6f;
+    margin: .75em;
+    padding-left: .75em
+}
+
+.menu-label {
+    color: #fff;
+    font-size: .75em;
+    letter-spacing: .1em;
+    text-transform: uppercase
+}
+
+.menu-label:not(:first-child) {
+    margin-top: 1em
+}
+
+.menu-label:not(:last-child) {
+    margin-bottom: 1em
+}
+
+.message {
+    background-color: hsl(var(--main), 10%, 15%);
+    border-radius: .4em;
+    font-size: 15px
+}
+
+.message strong {
+    color: currentColor
+}
+
+.message.is-small {
+    font-size: .85em
+}
+
+.message.is-medium {
+    font-size: 1.25rem
+}
+
+.message.is-large {
+    font-size: 1.5rem
+}
+
+.message-body code,
+.message-body pre,
+.message.is-white {
+    background-color: #fff
+}
+
+.message.is-white .message-header {
+    background-color: #fff;
+    color: #0a0a0a
+}
+
+.message.is-white .message-body {
+    border-color: #fff;
+    color: #000
+}
+
+.message.is-black {
+    background-color: #fafafa
+}
+
+.message.is-black .message-header {
+    background-color: #0a0a0a;
+    color: #fff
+}
+
+.message.is-black .message-body,
+.navbar.is-white .navbar-brand .navbar-link::after {
+    border-color: #0a0a0a;
+    color: #000
+}
+
+.message.is-light {
+    background-color: #f9fafb
+}
+
+.message.is-light .message-header {
+    background-color: #ecf0f1;
+    color: rgba(0, 0, 0, .7)
+}
+
+.message.is-light .message-body {
+    border-color: #ecf0f1;
+    color: #000
+}
+
+.message.is-dark {
+    background-color: #f9fafa
+}
+
+.message.is-dark .message-header {
+    background-color: hsl(var(--main), 10%, 15%);
+    color: #fff
+}
+
+.message.is-dark .message-body {
+    border-color: hsl(var(--main), 10%, 15%);
+    color: #000
+}
+
+.message.is-primary {
+    background-color: hsl(var(--main), 50%, 90%)
+}
+
+.message.is-primary .message-header {
+    background-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.message.is-primary .message-body {
+    border-color: hsl(var(--main), 45%, 45%);
+    color: hsl(var(--main), 45%, 45%)
+}
+
+.message.is-info {
+    background-color: #eef6fc
+}
+
+.message.is-info .message-header {
+    background-color: #3298dc;
+    color: #fff
+}
+
+.message.is-info .message-body {
+    border-color: #3298dc;
+    color: #1d72aa
+}
+
+.message.is-success {
+    background-color: #eefbf4
+}
+
+.message.is-success .message-header {
+    background-color: #2ecc71;
+    color: #fff
+}
+
+.message.is-success .message-body {
+    border-color: #2ecc71;
+    color: #1d8147
+}
+
+.message.is-warning {
+    background-color: #fef9ec
+}
+
+.message.is-warning .message-header {
+    background-color: #f1b70e;
+    color: rgba(0, 0, 0, .7)
+}
+
+.message.is-warning .message-body {
+    border-color: #f1b70e;
+    color: #8c6a08
+}
+
+.message.is-danger {
+    background-color: #fdeeed
+}
+
+.message.is-danger .message-header {
+    background-color: #e74c3c;
+    color: #fff
+}
+
+.message.is-danger .message-body {
+    border-color: #e74c3c;
+    color: #c32818
+}
+
+.message-header {
+    align-items: center;
+    border-radius: .4em .4em 0 0;
+    color: rgba(0, 0, 0, .7);
+    display: flex;
+    justify-content: space-between;
+    line-height: 1.25;
+    padding: .75em 1em;
+    position: relative
+}
+
+.message-header .delete {
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-left: .75em
+}
+
+.message-header+.message-body {
+    border-width: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0
+}
+
+.message-body {
+    border-radius: .4em;
+    border-style: solid;
+    color: #fff;
+    padding: 1.25em 1.5em
+}
+
+.modal {
+    align-items: center;
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    position: fixed;
+    z-index: 40
+}
+
+.modal.is-active {
+    display: flex
+}
+
+.modal-background {
+    background-color: rgba(10, 10, 10, .86)
+}
+
+.modal-content {
+    max-height: calc(100vh - 160px);
+    overflow: auto
+}
+
+.modal-card,
+.modal-content {
+    margin: 0 20px;
+    position: relative;
+    width: 100%
+}
+
+@media screen and (min-width: 769px),
+print {
+
+    .modal-card,
+    .modal-content {
+        margin: 0 auto;
+        max-height: calc(100vh - 40px);
+        width: 640px
+    }
+}
+
+.modal-close {
+    background: 0 0;
+    height: 40px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+    width: 40px
+}
+
+.modal-card {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100vh - 40px);
+    overflow: hidden;
+    -ms-overflow-y: visible
+}
+
+.modal-card-foot,
+.modal-card-head {
+    align-items: center;
+    background-color: hsl(var(--main), 10%, 15%);
+    display: flex;
+    flex-shrink: 0;
+    justify-content: flex-start;
+    padding: 20px;
+    position: relative
+}
+
+.modal-card-head {
+    border-bottom: 1px solid #5e6d6f;
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em
+}
+
+.modal-card-title {
+    color: #f2f2f2;
+    flex-grow: 1;
+    flex-shrink: 0;
+    font-size: 1.5rem;
+    line-height: 1
+}
+
+.modal-card-foot {
+    border-bottom-left-radius: 0.5em;
+    border-bottom-right-radius: 0.5em;
+    border-top: 1px solid #5e6d6f
+}
+
+.modal-card-foot .button:not(:last-child) {
+    margin-right: .5em
+}
+
+.modal-card-body {
+    -webkit-overflow-scrolling: touch;
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: auto;
+    padding: 20px
+}
+
+.navbar {
+    background-color: hsl(var(--main), 45%, 45%);
+    min-height: 4rem;
+    position: relative;
+    z-index: 30
+}
+
+.navbar>.container {
+    align-items: stretch;
+    display: flex;
+    min-height: 4rem;
+    width: 100%
+}
+
+.navbar.has-shadow {
+    box-shadow: 0 2px 0 0 hsl(var(--main), 10%, 15%)
+}
+
+.navbar.is-fixed-bottom,
+.navbar.is-fixed-top {
+    left: 0;
+    position: fixed;
+    right: 0;
+    z-index: 30
+}
+
+.navbar.is-fixed-bottom {
+    bottom: 0
+}
+
+.navbar.is-fixed-bottom.has-shadow {
+    box-shadow: 0 -2px 0 0 hsl(var(--main), 10%, 15%)
+}
+
+.navbar.is-fixed-top {
+    top: 0
+}
+
+body.has-navbar-fixed-top,
+html.has-navbar-fixed-top {
+    padding-top: 4rem
+}
+
+body.has-navbar-fixed-bottom,
+html.has-navbar-fixed-bottom {
+    padding-bottom: 4rem
+}
+
+.navbar-brand,
+.navbar-tabs {
+    align-items: stretch;
+    display: flex;
+    flex-shrink: 0;
+    min-height: 4rem
+}
+
+.navbar-brand a.navbar-item:focus,
+.navbar-brand a.navbar-item:hover {
+    background-color: transparent
+}
+
+.navbar-tabs {
+    -webkit-overflow-scrolling: touch;
+    max-width: 100vw;
+    overflow-x: auto;
+    overflow-y: hidden
+}
+
+.navbar-burger {
+    color: #fff;
+    cursor: pointer;
+    display: block;
+    height: 4rem;
+    position: relative;
+    width: 4rem;
+    margin-left: auto
+}
+
+.navbar-burger span {
+    background-color: currentColor;
+    display: block;
+    height: 1px;
+    left: calc(50% - 0.5em);
+    position: absolute;
+    transform-origin: center;
+    transition-duration: 86ms;
+    transition-property: background-color, opacity, transform;
+    transition-timing-function: ease-out;
+    width: 16px
+}
+
+.navbar-burger span:nth-child(1) {
+    top: calc(50% - 6px)
+}
+
+.navbar-burger span:nth-child(2) {
+    top: calc(50% - 1px)
+}
+
+.navbar-burger span:nth-child(3) {
+    top: calc(50% + 4px)
+}
+
+.navbar-burger:hover {
+    background-color: rgba(0, 0, 0, .05)
+}
+
+.navbar-burger.is-active span:nth-child(1) {
+    transform: translateY(5px) rotate(45deg)
+}
+
+.navbar-burger.is-active span:nth-child(2) {
+    opacity: 0
+}
+
+.navbar-burger.is-active span:nth-child(3) {
+    transform: translateY(-5px) rotate(-45deg)
+}
+
+.navbar-menu {
+    display: none
+}
+
+.navbar-item,
+.navbar-link {
+    color: #fff;
+    display: block;
+    line-height: 1.5;
+    padding: .5rem .75rem;
+    position: relative
+}
+
+.navbar-item .icon:only-child,
+.navbar-link .icon:only-child {
+    margin-left: -.25rem;
+    margin-right: -.25rem
+}
+
+.navbar-link,
+a.navbar-item {
+    cursor: pointer
+}
+
+.navbar-link.is-active,
+.navbar-link:focus,
+.navbar-link:focus-within,
+.navbar-link:hover,
+a.navbar-item.is-active,
+a.navbar-item:focus,
+a.navbar-item:focus-within,
+a.navbar-item:hover {
+    background-color: transparent;
+    color: hsl(var(--main), 50%, 75%)
+}
+
+.navbar-item {
+    flex-grow: 0;
+    flex-shrink: 0
+}
+
+.navbar-item img {
+    max-height: 1.75rem
+}
+
+.navbar-item.has-dropdown {
+    padding: 0
+}
+
+.navbar-content,
+.navbar-item.is-expanded {
+    flex-grow: 1;
+    flex-shrink: 1
+}
+
+.navbar-item.is-tab {
+    border-bottom: 1px solid transparent;
+    min-height: 4rem;
+    padding-bottom: calc(.5rem - 1px)
+}
+
+.navbar-item.is-tab:focus,
+.navbar-item.is-tab:hover {
+    background-color: transparent;
+    border-bottom-color: hsl(var(--main), 45%, 45%)
+}
+
+.navbar-item.is-tab.is-active {
+    background-color: transparent;
+    border-bottom-color: hsl(var(--main), 45%, 45%);
+    border-bottom-style: solid;
+    border-bottom-width: 3px;
+    color: hsl(var(--main), 45%, 45%);
+    padding-bottom: calc(.5rem - 3px)
+}
+
+.navbar-link:not(.is-arrowless) {
+    padding-right: 2.5em
+}
+
+.navbar-link:not(.is-arrowless)::after {
+    border-color: #fff;
+    margin-top: -.375em;
+    right: 1.125em
+}
+
+.navbar-dropdown {
+    font-size: .875rem;
+    padding-bottom: .5rem;
+    padding-top: .5rem
+}
+
+.navbar-dropdown .navbar-item {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem
+}
+
+.navbar-divider {
+    background-color: rgba(0, 0, 0, .2);
+    border: 0;
+    display: none;
+    height: 2px;
+    margin: .5rem 0
+}
+
+@media screen and (max-width: 1023px) {
+    .navbar>.container {
+        display: block
+    }
+
+    .navbar-brand .navbar-item,
+    .navbar-tabs .navbar-item {
+        align-items: center;
+        display: flex
+    }
+
+    .navbar-link::after {
+        display: none
+    }
+
+    .navbar-menu {
+        background-color: hsl(var(--main), 45%, 45%);
+        box-shadow: 0 0.5em 16px rgba(10, 10, 10, .1);
+        padding: .5rem 0
+    }
+
+    .navbar-menu.is-active {
+        display: block
+    }
+
+    .navbar.is-fixed-bottom-touch,
+    .navbar.is-fixed-top-touch {
+        left: 0;
+        position: fixed;
+        right: 0;
+        z-index: 30
+    }
+
+    .navbar.is-fixed-bottom-touch {
+        bottom: 0
+    }
+
+    .navbar.is-fixed-bottom-touch.has-shadow {
+        box-shadow: 0 -2px 3px rgba(10, 10, 10, .1)
+    }
+
+    .navbar.is-fixed-top-touch {
+        top: 0
+    }
+
+    .navbar.is-fixed-top .navbar-menu,
+    .navbar.is-fixed-top-touch .navbar-menu {
+        -webkit-overflow-scrolling: touch;
+        max-height: calc(100vh - 4rem);
+        overflow: auto
+    }
+
+    body.has-navbar-fixed-top-touch,
+    html.has-navbar-fixed-top-touch {
+        padding-top: 4rem
+    }
+
+    body.has-navbar-fixed-bottom-touch,
+    html.has-navbar-fixed-bottom-touch {
+        padding-bottom: 4rem
+    }
+}
+
+@media screen and (min-width: 1024px) {
+
+    .navbar,
+    .navbar-end,
+    .navbar-menu,
+    .navbar-start {
+        align-items: stretch;
+        display: flex
+    }
+
+    .navbar {
+        min-height: 4rem
+    }
+
+    .navbar.is-spaced {
+        padding: 1rem 2rem
+    }
+
+    .navbar.is-spaced .navbar-end,
+    .navbar.is-spaced .navbar-start {
+        align-items: center
+    }
+
+    .navbar.is-spaced .navbar-link,
+    .navbar.is-spaced a.navbar-item {
+        border-radius: .4em
+    }
+
+    .navbar.is-transparent .navbar-link.is-active,
+    .navbar.is-transparent .navbar-link:focus,
+    .navbar.is-transparent .navbar-link:hover,
+    .navbar.is-transparent a.navbar-item.is-active,
+    .navbar.is-transparent a.navbar-item:focus,
+    .navbar.is-transparent a.navbar-item:hover {
+        background-color: transparent !important
+    }
+
+    .navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link,
+    .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:focus .navbar-link,
+    .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-link,
+    .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link {
+        background-color: transparent !important
+    }
+
+    .navbar-dropdown a.navbar-item:focus,
+    .navbar-dropdown a.navbar-item:hover,
+    .navbar.is-transparent .navbar-dropdown a.navbar-item:focus,
+    .navbar.is-transparent .navbar-dropdown a.navbar-item:hover {
+        background-color: transparent;
+        color: #dbdee0
+    }
+
+    .navbar-dropdown a.navbar-item.is-active,
+    .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active {
+        background-color: transparent;
+        color: hsl(var(--main), 45%, 45%)
+    }
+
+    .navbar-burger {
+        display: none
+    }
+
+    .navbar-item,
+    .navbar-link {
+        align-items: center
+    }
+
+    .navbar-link {
+        display: flex
+    }
+
+    .navbar-item {
+        display: flex
+    }
+
+    .navbar-item.has-dropdown {
+        align-items: stretch
+    }
+
+    .navbar-item.has-dropdown-up .navbar-link::after {
+        transform: rotate(135deg) translate(.25em, -.25em)
+    }
+
+    .navbar-item.has-dropdown-up .navbar-dropdown {
+        border-bottom: 1px solid rgba(0, 0, 0, .2);
+        border-radius: 0.5em 0.5em 0 0;
+        border-top: none;
+        bottom: 100%;
+        box-shadow: 0 -0.5em 0.5em rgba(10, 10, 10, .1);
+        top: auto
+    }
+
+    .navbar-item.is-active .navbar-dropdown,
+    .navbar-item.is-hoverable:focus .navbar-dropdown,
+    .navbar-item.is-hoverable:focus-within .navbar-dropdown,
+    .navbar-item.is-hoverable:hover .navbar-dropdown {
+        display: block
+    }
+
+    .navbar-item.is-active .navbar-dropdown.is-boxed,
+    .navbar-item.is-hoverable:focus .navbar-dropdown.is-boxed,
+    .navbar-item.is-hoverable:focus-within .navbar-dropdown.is-boxed,
+    .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed,
+    .navbar.is-spaced .navbar-item.is-active .navbar-dropdown,
+    .navbar.is-spaced .navbar-item.is-hoverable:focus .navbar-dropdown,
+    .navbar.is-spaced .navbar-item.is-hoverable:focus-within .navbar-dropdown,
+    .navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown {
+        opacity: 1;
+        pointer-events: auto;
+        transform: translateY(0)
+    }
+
+    .navbar-menu {
+        flex-grow: 1;
+        flex-shrink: 0
+    }
+
+    .navbar-start {
+        justify-content: flex-start;
+        margin-right: auto
+    }
+
+    .navbar-end {
+        justify-content: flex-end;
+        margin-left: auto
+    }
+
+    .navbar-dropdown {
+        background-color: hsl(var(--main), 45%, 45%);
+        border-bottom-left-radius: 0.5em;
+        border-bottom-right-radius: 0.5em;
+        border-top: 1px solid rgba(0, 0, 0, .2);
+        box-shadow: 0 0.5em 0.5em rgba(10, 10, 10, .1);
+        display: none;
+        font-size: .875rem;
+        left: 0;
+        min-width: 100%;
+        position: absolute;
+        top: 100%;
+        z-index: 20
+    }
+
+    .navbar-dropdown .navbar-item {
+        padding: .375rem 1rem;
+        white-space: nowrap
+    }
+
+    .navbar-dropdown a.navbar-item {
+        padding-right: 3rem
+    }
+
+    .navbar-dropdown.is-boxed,
+    .navbar.is-spaced .navbar-dropdown {
+        border-radius: 0.5em;
+        border-top: none;
+        box-shadow: 0 0.5em 0.5em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
+        display: block;
+        opacity: 0;
+        pointer-events: none;
+        top: calc(100% + (-4px));
+        transform: translateY(-5px);
+        transition-duration: 86ms;
+        transition-property: opacity, transform
+    }
+
+    .navbar-dropdown.is-right {
+        left: auto;
+        right: 0
+    }
+
+    .navbar-divider {
+        display: block
+    }
+
+    .container>.navbar .navbar-brand,
+    .navbar>.container .navbar-brand {
+        margin-left: -.75rem
+    }
+
+    .container>.navbar .navbar-menu,
+    .navbar>.container .navbar-menu {
+        margin-right: -.75rem
+    }
+
+    .navbar.is-fixed-bottom-desktop,
+    .navbar.is-fixed-top-desktop {
+        left: 0;
+        position: fixed;
+        right: 0;
+        z-index: 30
+    }
+
+    .navbar.is-fixed-bottom-desktop {
+        bottom: 0
+    }
+
+    .navbar.is-fixed-bottom-desktop.has-shadow {
+        box-shadow: 0 -2px 3px rgba(10, 10, 10, .1)
+    }
+
+    .navbar.is-fixed-top-desktop {
+        top: 0
+    }
+
+    body.has-navbar-fixed-top-desktop,
+    html.has-navbar-fixed-top-desktop {
+        padding-top: 4rem
+    }
+
+    body.has-navbar-fixed-bottom-desktop,
+    html.has-navbar-fixed-bottom-desktop {
+        padding-bottom: 4rem
+    }
+
+    body.has-spaced-navbar-fixed-top,
+    html.has-spaced-navbar-fixed-top {
+        padding-top: 6rem
+    }
+
+    body.has-spaced-navbar-fixed-bottom,
+    html.has-spaced-navbar-fixed-bottom {
+        padding-bottom: 6rem
+    }
+
+    .navbar-link.is-active,
+    a.navbar-item.is-active {
+        color: hsl(var(--main), 45%, 85%)
+    }
+
+    .navbar-link.is-active:not(:focus):not(:hover),
+    a.navbar-item.is-active:not(:focus):not(:hover) {
+        background-color: transparent
+    }
+
+    .navbar-item.has-dropdown.is-active .navbar-link,
+    .navbar-item.has-dropdown:focus .navbar-link,
+    .navbar-item.has-dropdown:hover .navbar-link {
+        background-color: transparent
+    }
+}
+
+.hero.is-fullheight-with-navbar {
+    min-height: calc(100vh - 4rem)
+}
+
+.pagination {
+    font-size: 15px;
+    margin: -.25rem
+}
+
+.pagination.is-small {
+    font-size: .85em
+}
+
+.pagination.is-medium {
+    font-size: 1.25rem
+}
+
+.pagination.is-large {
+    font-size: 1.5rem
+}
+
+.pagination.is-rounded .pagination-next,
+.pagination.is-rounded .pagination-previous {
+    padding-left: 1em;
+    padding-right: 1em;
+    border-radius: 290486px
+}
+
+.pagination.is-rounded .pagination-link {
+    border-radius: 290486px
+}
+
+.pagination,
+.pagination-list {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    text-align: center
+}
+
+.pagination-ellipsis,
+.pagination-link,
+.pagination-next,
+.pagination-previous {
+    font-size: 1em;
+    justify-content: center;
+    margin: .25rem;
+    text-align: center
+}
+
+.pagination-ellipsis,
+.pagination-link {
+    padding-left: .5em;
+    padding-right: .5em
+}
+
+.pagination-link,
+.pagination-next,
+.pagination-previous {
+    border-color: hsl(var(--main), 45%, 45%);
+    color: #fff;
+    background: hsl(var(--main), 45%, 45%);
+    min-width: 2.5em
+}
+
+.pagination-link:hover,
+.pagination-next:hover,
+.pagination-previous:hover {
+    border-color: hsl(var(--main), 85%, 85%);
+    color: hsl(var(--main), 65%, 85%)
+}
+
+.pagination-link:focus,
+.pagination-next:focus,
+.pagination-previous:focus {
+    border-color: #8c9b9d
+}
+
+.pagination-link:active,
+.pagination-next:active,
+.pagination-previous:active {
+    box-shadow: inset 0 1px 2px rgb(10 10 10 / 20%)
+}
+
+.pagination-link[disabled],
+.pagination-next[disabled],
+.pagination-previous[disabled] {
+    background-color: #5e6d6f;
+    border-color: #5e6d6f;
+    box-shadow: none;
+    color: #fff;
+    opacity: .5
+}
+
+.pagination-next,
+.pagination-previous {
+    padding-left: .75em;
+    padding-right: .75em;
+    white-space: nowrap
+}
+
+.pagination-link.is-current {
+    background-color: hsl(var(--main), 45%, 45%);
+    border-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.pagination-ellipsis {
+    color: #8c9b9d;
+    pointer-events: none
+}
+
+.pagination-list {
+    flex-wrap: wrap
+}
+
+@media screen and (max-width: 768px) {
+    .pagination {
+        flex-wrap: wrap
+    }
+
+    .pagination-list li,
+    .pagination-next,
+    .pagination-previous {
+        flex-grow: 1;
+        flex-shrink: 1
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .pagination-list {
+        flex-grow: 1;
+        flex-shrink: 1;
+        justify-content: flex-start;
+        order: 1
+    }
+
+    .pagination-previous {
+        order: 2
+    }
+
+    .pagination-next {
+        order: 3
+    }
+
+    .pagination {
+        justify-content: space-between
+    }
+
+    .pagination.is-centered .pagination-previous {
+        order: 1
+    }
+
+    .pagination.is-centered .pagination-list {
+        justify-content: center;
+        order: 2
+    }
+
+    .pagination.is-centered .pagination-next {
+        order: 3
+    }
+
+    .pagination.is-right .pagination-previous {
+        order: 1
+    }
+
+    .pagination.is-right .pagination-next {
+        order: 2
+    }
+
+    .pagination.is-right .pagination-list {
+        justify-content: flex-end;
+        order: 3
+    }
+}
+
+.panel {
+    border-radius: 0.5em;
+    box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
+    font-size: 15px;
+    background: hsl(var(--main), 15%, 12%)
+}
+
+.panel:not(:last-child) {
+    margin-bottom: 1.5rem
+}
+
+.panel.is-white .panel-heading {
+    background-color: #fff;
+    color: #0a0a0a
+}
+
+.panel.is-white .panel-tabs a.is-active {
+    border-bottom-color: #fff
+}
+
+.panel.is-white .panel-block.is-active .panel-icon {
+    color: #fff
+}
+
+.panel.is-black .panel-heading {
+    background-color: #0a0a0a;
+    color: #fff
+}
+
+.panel.is-black .panel-tabs a.is-active {
+    border-bottom-color: #0a0a0a
+}
+
+.panel.is-black .panel-block.is-active .panel-icon {
+    color: #0a0a0a
+}
+
+.panel.is-light .panel-heading {
+    background-color: #ecf0f1;
+    color: rgba(0, 0, 0, .7)
+}
+
+.panel.is-light .panel-tabs a.is-active {
+    border-bottom-color: #ecf0f1
+}
+
+.panel.is-light .panel-block.is-active .panel-icon {
+    color: #ecf0f1
+}
+
+.panel.is-dark .panel-heading {
+    background-color: hsl(var(--main), 10%, 15%);
+    color: #fff
+}
+
+.panel.is-dark .panel-tabs a.is-active {
+    border-bottom-color: hsl(var(--main), 10%, 15%)
+}
+
+.panel.is-dark .panel-block.is-active .panel-icon {
+    color: hsl(var(--main), 10%, 15%)
+}
+
+.panel.is-primary .panel-heading {
+    background-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.panel.is-primary .panel-tabs a.is-active {
+    border-bottom-color: hsl(var(--main), 45%, 45%)
+}
+
+.panel.is-primary .panel-block.is-active .panel-icon {
+    color: hsl(var(--main), 45%, 45%)
+}
+
+.panel.is-link .panel-heading {
+    background-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.panel.is-link .panel-tabs a.is-active {
+    border-bottom-color: hsl(var(--main), 45%, 45%)
+}
+
+.panel.is-link .panel-block.is-active .panel-icon {
+    color: hsl(var(--main), 45%, 45%)
+}
+
+.panel.is-info .panel-heading {
+    background-color: #3298dc;
+    color: #fff
+}
+
+.panel.is-info .panel-tabs a.is-active {
+    border-bottom-color: #3298dc
+}
+
+.panel.is-info .panel-block.is-active .panel-icon {
+    color: #3298dc
+}
+
+.panel.is-success .panel-heading {
+    background-color: #2ecc71;
+    color: #fff
+}
+
+.panel.is-success .panel-tabs a.is-active {
+    border-bottom-color: #2ecc71
+}
+
+.panel.is-success .panel-block.is-active .panel-icon {
+    color: #2ecc71
+}
+
+.panel.is-warning .panel-heading {
+    background-color: #f1b70e;
+    color: rgba(0, 0, 0, .7)
+}
+
+.panel.is-warning .panel-tabs a.is-active {
+    border-bottom-color: #f1b70e
+}
+
+.panel.is-warning .panel-block.is-active .panel-icon {
+    color: #f1b70e
+}
+
+.panel.is-danger .panel-heading {
+    background-color: #e74c3c;
+    color: #fff
+}
+
+.panel.is-danger .panel-tabs a.is-active {
+    border-bottom-color: #e74c3c
+}
+
+.panel.is-danger .panel-block.is-active .panel-icon {
+    color: #e74c3c
+}
+
+.panel-heading {
+    background-color: hsl(var(--main), 10%, 15%);
+    border-radius: 0.5em 0.5em 0 0;
+    color: #f2f2f2;
+    font-size: 1.25em;
+    line-height: 1.25;
+    padding: .75em 1em
+}
+
+.panel-tabs {
+    align-items: flex-end;
+    display: flex;
+    font-size: .875em;
+    justify-content: center
+}
+
+.panel-tabs a {
+    border-bottom: 1px solid #5e6d6f;
+    padding: .5em
+}
+
+.panel-tabs a.is-active {
+    color: hsl(var(--main), 75%, 80%)
+}
+
+.panel-list a {
+    color: #fff
+}
+
+.panel-list a:hover {
+    color: hsl(var(--main), 45%, 45%)
+}
+
+.panel-block {
+    align-items: center;
+    color: #f2f2f2;
+    display: flex;
+    justify-content: flex-start;
+    padding: .5em 1.15em
+}
+
+.panel-block input[type=checkbox] {
+    margin-right: .75em
+}
+
+.panel-block>.control {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%
+}
+
+.panel-block.is-wrapped {
+    flex-wrap: wrap
+}
+
+.panel-block.is-active {
+    border-left-color: hsl(var(--main), 45%, 45%);
+    color: hsl(var(--main), 75%, 80%)
+}
+
+.panel-block:last-child {
+    border-bottom-left-radius: 0.5em;
+    border-bottom-right-radius: 0.5em
+}
+
+a.panel-block,
+label.panel-block {
+    cursor: pointer
+}
+
+a.panel-block:hover,
+label.panel-block:hover {
+    background-color: hsl(var(--main), 10%, 15%)
+}
+
+.panel-icon {
+    display: inline-block;
+    font-size: 14px;
+    height: 1em;
+    line-height: 1em;
+    text-align: center;
+    vertical-align: top;
+    width: 1em;
+    color: #fff;
+    margin-right: .75em
+}
+
+.panel-icon .fa {
+    font-size: inherit;
+    line-height: inherit
+}
+
+.tabs {
+    -webkit-overflow-scrolling: touch;
+    align-items: stretch;
+    display: flex;
+    font-size: 15px;
+    justify-content: space-between;
+    overflow: hidden;
+    overflow-x: auto;
+    white-space: nowrap
+}
+
+.tabs a,
+.tabs ul {
+    align-items: center;
+    border-bottom-color: #5e6d6f;
+    border-bottom-style: solid;
+    display: flex
+}
+
+.tabs a {
+    color: #fff;
+    padding: .5em 1em;
+    vertical-align: top;
+    justify-content: center
+}
+
+.tabs a:hover {
+    border-bottom-color: #f2f2f2;
+    color: #f2f2f2
+}
+
+.tabs li {
+    display: block
+}
+
+.tabs li.is-active a {
+    border-bottom-color: hsl(var(--main), 45%, 45%);
+    color: hsl(var(--main), 65%, 65%)
+}
+
+.tabs ul {
+    flex-grow: 1;
+    flex-shrink: 0;
+    justify-content: flex-start;
+    border-bottom-width: 2px
+}
+
+.tabs ul.is-center,
+.tabs ul.is-left {
+    padding-right: .75em
+}
+
+.tabs ul.is-center {
+    flex: none;
+    justify-content: center;
+    padding-left: .75em
+}
+
+.tabs ul.is-right {
+    justify-content: flex-end;
+    padding-left: .75em
+}
+
+.tabs .icon:first-child {
+    margin-right: .5em
+}
+
+.tabs .icon:last-child {
+    margin-left: .5em
+}
+
+.tabs.is-centered ul {
+    justify-content: center
+}
+
+.tabs.is-right ul {
+    justify-content: flex-end
+}
+
+.tabs.is-boxed a {
+    border: 1px solid transparent;
+    border-radius: .4em .4em 0 0
+}
+
+.tabs.is-boxed a:hover {
+    background-color: hsl(var(--main), 10%, 15%);
+    border-bottom-color: #5e6d6f
+}
+
+.tabs.is-boxed li.is-active a {
+    border-color: #5e6d6f;
+    border-bottom-color: transparent !important
+}
+
+.tabs.is-toggle a {
+    border-color: #5e6d6f;
+    border-style: solid;
+    border-width: 1px;
+    margin-bottom: 0;
+    position: relative
+}
+
+.tabs.is-toggle a:hover {
+    background-color: hsl(var(--main), 10%, 15%);
+    border-color: #8c9b9d;
+    z-index: 2
+}
+
+.tabs.is-toggle li+li {
+    margin-left: -2px
+}
+
+.tabs.is-toggle li:first-child a {
+    border-radius: .4em 0 0 .4em
+}
+
+.tabs.is-toggle li:last-child a {
+    border-radius: 0 .4em .4em 0
+}
+
+.tabs.is-toggle li.is-active a {
+    background-color: hsl(var(--main), 45%, 45%);
+    border-color: hsl(var(--main), 45%, 45%);
+    color: #fff;
+    z-index: 1
+}
+
+.hero .tabs ul,
+.tabs.is-toggle ul {
+    border-bottom: none
+}
+
+.tabs.is-toggle.is-toggle-rounded li:first-child a {
+    border-bottom-left-radius: 290486px;
+    border-top-left-radius: 290486px;
+    padding-left: 1.25em
+}
+
+.tabs.is-toggle.is-toggle-rounded li:last-child a {
+    border-bottom-right-radius: 290486px;
+    border-top-right-radius: 290486px;
+    padding-right: 1.25em
+}
+
+.tabs.is-small {
+    font-size: .85em
+}
+
+.tabs.is-medium {
+    font-size: 1.25rem
+}
+
+.tabs.is-large {
+    font-size: 1.5rem
+}
+
+.column {
+    display: block;
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    padding: .75rem
+}
+
+.columns.is-mobile>.column.is-narrow {
+    flex: none
+}
+
+.columns.is-mobile>.column.is-full {
+    flex: none;
+    width: 100%
+}
+
+.columns.is-mobile>.column.is-three-quarters {
+    flex: none;
+    width: 75%
+}
+
+.columns.is-mobile>.column.is-two-thirds {
+    flex: none;
+    width: 66.6666%
+}
+
+.columns.is-mobile>.column.is-half {
+    flex: none;
+    width: 50%
+}
+
+.columns.is-mobile>.column.is-one-third {
+    flex: none;
+    width: 33.3333%
+}
+
+.columns.is-mobile>.column.is-one-quarter {
+    flex: none;
+    width: 25%
+}
+
+.columns.is-mobile>.column.is-one-fifth {
+    flex: none;
+    width: 20%
+}
+
+.columns.is-mobile>.column.is-two-fifths {
+    flex: none;
+    width: 40%
+}
+
+.columns.is-mobile>.column.is-three-fifths {
+    flex: none;
+    width: 60%
+}
+
+.columns.is-mobile>.column.is-four-fifths {
+    flex: none;
+    width: 80%
+}
+
+.columns.is-mobile>.column.is-offset-three-quarters {
+    margin-left: 75%
+}
+
+.columns.is-mobile>.column.is-offset-two-thirds {
+    margin-left: 66.6666%
+}
+
+.columns.is-mobile>.column.is-offset-half {
+    margin-left: 50%
+}
+
+.columns.is-mobile>.column.is-offset-one-third {
+    margin-left: 33.3333%
+}
+
+.columns.is-mobile>.column.is-offset-one-quarter {
+    margin-left: 25%
+}
+
+.columns.is-mobile>.column.is-offset-one-fifth {
+    margin-left: 20%
+}
+
+.columns.is-mobile>.column.is-offset-two-fifths {
+    margin-left: 40%
+}
+
+.columns.is-mobile>.column.is-offset-three-fifths {
+    margin-left: 60%
+}
+
+.columns.is-mobile>.column.is-offset-four-fifths {
+    margin-left: 80%
+}
+
+.columns.is-mobile>.column.is-0 {
+    flex: none;
+    width: 0%
+}
+
+.columns.is-mobile>.column.is-offset-0 {
+    margin-left: 0
+}
+
+.columns.is-mobile>.column.is-1 {
+    flex: none;
+    width: 8.33333%
+}
+
+.columns.is-mobile>.column.is-offset-1 {
+    margin-left: 8.33333%
+}
+
+.columns.is-mobile>.column.is-2 {
+    flex: none;
+    width: 16.66667%
+}
+
+.columns.is-mobile>.column.is-offset-2 {
+    margin-left: 16.66667%
+}
+
+.columns.is-mobile>.column.is-3 {
+    flex: none;
+    width: 25%
+}
+
+.columns.is-mobile>.column.is-offset-3 {
+    margin-left: 25%
+}
+
+.columns.is-mobile>.column.is-4 {
+    flex: none;
+    width: 33.33333%
+}
+
+.columns.is-mobile>.column.is-offset-4 {
+    margin-left: 33.33333%
+}
+
+.columns.is-mobile>.column.is-5 {
+    flex: none;
+    width: 41.66667%
+}
+
+.columns.is-mobile>.column.is-offset-5 {
+    margin-left: 41.66667%
+}
+
+.columns.is-mobile>.column.is-6 {
+    flex: none;
+    width: 50%
+}
+
+.columns.is-mobile>.column.is-offset-6 {
+    margin-left: 50%
+}
+
+.columns.is-mobile>.column.is-7 {
+    flex: none;
+    width: 58.33333%
+}
+
+.columns.is-mobile>.column.is-offset-7 {
+    margin-left: 58.33333%
+}
+
+.columns.is-mobile>.column.is-8 {
+    flex: none;
+    width: 66.66667%
+}
+
+.columns.is-mobile>.column.is-offset-8 {
+    margin-left: 66.66667%
+}
+
+.columns.is-mobile>.column.is-9 {
+    flex: none;
+    width: 75%
+}
+
+.columns.is-mobile>.column.is-offset-9 {
+    margin-left: 75%
+}
+
+.columns.is-mobile>.column.is-10 {
+    flex: none;
+    width: 83.33333%
+}
+
+.columns.is-mobile>.column.is-offset-10 {
+    margin-left: 83.33333%
+}
+
+.columns.is-mobile>.column.is-11 {
+    flex: none;
+    width: 91.66667%
+}
+
+.columns.is-mobile>.column.is-offset-11 {
+    margin-left: 91.66667%
+}
+
+.columns.is-mobile>.column.is-12 {
+    flex: none;
+    width: 100%
+}
+
+.columns.is-mobile>.column.is-offset-12 {
+    margin-left: 100%
+}
+
+@media screen and (max-width: 768px) {
+    .column.is-narrow-mobile {
+        flex: none
+    }
+
+    .column.is-full-mobile {
+        flex: none;
+        width: 100%
+    }
+
+    .column.is-three-quarters-mobile {
+        flex: none;
+        width: 75%
+    }
+
+    .column.is-two-thirds-mobile {
+        flex: none;
+        width: 66.6666%
+    }
+
+    .column.is-half-mobile {
+        flex: none;
+        width: 50%
+    }
+
+    .column.is-one-third-mobile {
+        flex: none;
+        width: 33.3333%
+    }
+
+    .column.is-one-quarter-mobile {
+        flex: none;
+        width: 25%
+    }
+
+    .column.is-one-fifth-mobile {
+        flex: none;
+        width: 20%
+    }
+
+    .column.is-two-fifths-mobile {
+        flex: none;
+        width: 40%
+    }
+
+    .column.is-three-fifths-mobile {
+        flex: none;
+        width: 60%
+    }
+
+    .column.is-four-fifths-mobile {
+        flex: none;
+        width: 80%
+    }
+
+    .column.is-offset-three-quarters-mobile {
+        margin-left: 75%
+    }
+
+    .column.is-offset-two-thirds-mobile {
+        margin-left: 66.6666%
+    }
+
+    .column.is-offset-half-mobile {
+        margin-left: 50%
+    }
+
+    .column.is-offset-one-third-mobile {
+        margin-left: 33.3333%
+    }
+
+    .column.is-offset-one-quarter-mobile {
+        margin-left: 25%
+    }
+
+    .column.is-offset-one-fifth-mobile {
+        margin-left: 20%
+    }
+
+    .column.is-offset-two-fifths-mobile {
+        margin-left: 40%
+    }
+
+    .column.is-offset-three-fifths-mobile {
+        margin-left: 60%
+    }
+
+    .column.is-offset-four-fifths-mobile {
+        margin-left: 80%
+    }
+
+    .column.is-0-mobile {
+        flex: none;
+        width: 0%
+    }
+
+    .column.is-offset-0-mobile {
+        margin-left: 0
+    }
+
+    .column.is-1-mobile {
+        flex: none;
+        width: 8.33333%
+    }
+
+    .column.is-offset-1-mobile {
+        margin-left: 8.33333%
+    }
+
+    .column.is-2-mobile {
+        flex: none;
+        width: 16.66667%
+    }
+
+    .column.is-offset-2-mobile {
+        margin-left: 16.66667%
+    }
+
+    .column.is-3-mobile {
+        flex: none;
+        width: 25%
+    }
+
+    .column.is-offset-3-mobile {
+        margin-left: 25%
+    }
+
+    .column.is-4-mobile {
+        flex: none;
+        width: 33.33333%
+    }
+
+    .column.is-offset-4-mobile {
+        margin-left: 33.33333%
+    }
+
+    .column.is-5-mobile {
+        flex: none;
+        width: 41.66667%
+    }
+
+    .column.is-offset-5-mobile {
+        margin-left: 41.66667%
+    }
+
+    .column.is-6-mobile {
+        flex: none;
+        width: 50%
+    }
+
+    .column.is-offset-6-mobile {
+        margin-left: 50%
+    }
+
+    .column.is-7-mobile {
+        flex: none;
+        width: 58.33333%
+    }
+
+    .column.is-offset-7-mobile {
+        margin-left: 58.33333%
+    }
+
+    .column.is-8-mobile {
+        flex: none;
+        width: 66.66667%
+    }
+
+    .column.is-offset-8-mobile {
+        margin-left: 66.66667%
+    }
+
+    .column.is-9-mobile {
+        flex: none;
+        width: 75%
+    }
+
+    .column.is-offset-9-mobile {
+        margin-left: 75%
+    }
+
+    .column.is-10-mobile {
+        flex: none;
+        width: 83.33333%
+    }
+
+    .column.is-offset-10-mobile {
+        margin-left: 83.33333%
+    }
+
+    .column.is-11-mobile {
+        flex: none;
+        width: 91.66667%
+    }
+
+    .column.is-offset-11-mobile {
+        margin-left: 91.66667%
+    }
+
+    .column.is-12-mobile {
+        flex: none;
+        width: 100%
+    }
+
+    .column.is-offset-12-mobile {
+        margin-left: 100%
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+
+    .column.is-narrow,
+    .column.is-narrow-tablet {
+        flex: none
+    }
+
+    .column.is-full,
+    .column.is-full-tablet {
+        flex: none;
+        width: 100%
+    }
+
+    .column.is-three-quarters,
+    .column.is-three-quarters-tablet {
+        flex: none;
+        width: 75%
+    }
+
+    .column.is-two-thirds,
+    .column.is-two-thirds-tablet {
+        flex: none;
+        width: 66.6666%
+    }
+
+    .column.is-half,
+    .column.is-half-tablet {
+        flex: none;
+        width: 50%
+    }
+
+    .column.is-one-third,
+    .column.is-one-third-tablet {
+        flex: none;
+        width: 33.3333%
+    }
+
+    .column.is-one-quarter,
+    .column.is-one-quarter-tablet {
+        flex: none;
+        width: 25%
+    }
+
+    .column.is-one-fifth,
+    .column.is-one-fifth-tablet {
+        flex: none;
+        width: 20%
+    }
+
+    .column.is-two-fifths,
+    .column.is-two-fifths-tablet {
+        flex: none;
+        width: 40%
+    }
+
+    .column.is-three-fifths,
+    .column.is-three-fifths-tablet {
+        flex: none;
+        width: 60%
+    }
+
+    .column.is-four-fifths,
+    .column.is-four-fifths-tablet {
+        flex: none;
+        width: 80%
+    }
+
+    .column.is-offset-three-quarters,
+    .column.is-offset-three-quarters-tablet {
+        margin-left: 75%
+    }
+
+    .column.is-offset-two-thirds,
+    .column.is-offset-two-thirds-tablet {
+        margin-left: 66.6666%
+    }
+
+    .column.is-offset-half,
+    .column.is-offset-half-tablet {
+        margin-left: 50%
+    }
+
+    .column.is-offset-one-third,
+    .column.is-offset-one-third-tablet {
+        margin-left: 33.3333%
+    }
+
+    .column.is-offset-one-quarter,
+    .column.is-offset-one-quarter-tablet {
+        margin-left: 25%
+    }
+
+    .column.is-offset-one-fifth,
+    .column.is-offset-one-fifth-tablet {
+        margin-left: 20%
+    }
+
+    .column.is-offset-two-fifths,
+    .column.is-offset-two-fifths-tablet {
+        margin-left: 40%
+    }
+
+    .column.is-offset-three-fifths,
+    .column.is-offset-three-fifths-tablet {
+        margin-left: 60%
+    }
+
+    .column.is-offset-four-fifths,
+    .column.is-offset-four-fifths-tablet {
+        margin-left: 80%
+    }
+
+    .column.is-0,
+    .column.is-0-tablet {
+        flex: none;
+        width: 0%
+    }
+
+    .column.is-offset-0,
+    .column.is-offset-0-tablet {
+        margin-left: 0
+    }
+
+    .column.is-1,
+    .column.is-1-tablet {
+        flex: none;
+        width: 8.33333%
+    }
+
+    .column.is-offset-1,
+    .column.is-offset-1-tablet {
+        margin-left: 8.33333%
+    }
+
+    .column.is-2,
+    .column.is-2-tablet {
+        flex: none;
+        width: 16.66667%
+    }
+
+    .column.is-offset-2,
+    .column.is-offset-2-tablet {
+        margin-left: 16.66667%
+    }
+
+    .column.is-3,
+    .column.is-3-tablet {
+        flex: none;
+        width: 25%
+    }
+
+    .column.is-offset-3,
+    .column.is-offset-3-tablet {
+        margin-left: 25%
+    }
+
+    .column.is-4,
+    .column.is-4-tablet {
+        flex: none;
+        width: 33.33333%
+    }
+
+    .column.is-offset-4,
+    .column.is-offset-4-tablet {
+        margin-left: 33.33333%
+    }
+
+    .column.is-5,
+    .column.is-5-tablet {
+        flex: none;
+        width: 41.66667%
+    }
+
+    .column.is-offset-5,
+    .column.is-offset-5-tablet {
+        margin-left: 41.66667%
+    }
+
+    .column.is-6,
+    .column.is-6-tablet {
+        flex: none;
+        width: 50%
+    }
+
+    .column.is-offset-6,
+    .column.is-offset-6-tablet {
+        margin-left: 50%
+    }
+
+    .column.is-7,
+    .column.is-7-tablet {
+        flex: none;
+        width: 58.33333%
+    }
+
+    .column.is-offset-7,
+    .column.is-offset-7-tablet {
+        margin-left: 58.33333%
+    }
+
+    .column.is-8,
+    .column.is-8-tablet {
+        flex: none;
+        width: 66.66667%
+    }
+
+    .column.is-offset-8,
+    .column.is-offset-8-tablet {
+        margin-left: 66.66667%
+    }
+
+    .column.is-9,
+    .column.is-9-tablet {
+        flex: none;
+        width: 75%
+    }
+
+    .column.is-offset-9,
+    .column.is-offset-9-tablet {
+        margin-left: 75%
+    }
+
+    .column.is-10,
+    .column.is-10-tablet {
+        flex: none;
+        width: 83.33333%
+    }
+
+    .column.is-offset-10,
+    .column.is-offset-10-tablet {
+        margin-left: 83.33333%
+    }
+
+    .column.is-11,
+    .column.is-11-tablet {
+        flex: none;
+        width: 91.66667%
+    }
+
+    .column.is-offset-11,
+    .column.is-offset-11-tablet {
+        margin-left: 91.66667%
+    }
+
+    .column.is-12,
+    .column.is-12-tablet {
+        flex: none;
+        width: 100%
+    }
+
+    .column.is-offset-12,
+    .column.is-offset-12-tablet {
+        margin-left: 100%
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .column.is-narrow-touch {
+        flex: none
+    }
+
+    .column.is-full-touch {
+        flex: none;
+        width: 100%
+    }
+
+    .column.is-three-quarters-touch {
+        flex: none;
+        width: 75%
+    }
+
+    .column.is-two-thirds-touch {
+        flex: none;
+        width: 66.6666%
+    }
+
+    .column.is-half-touch {
+        flex: none;
+        width: 50%
+    }
+
+    .column.is-one-third-touch {
+        flex: none;
+        width: 33.3333%
+    }
+
+    .column.is-one-quarter-touch {
+        flex: none;
+        width: 25%
+    }
+
+    .column.is-one-fifth-touch {
+        flex: none;
+        width: 20%
+    }
+
+    .column.is-two-fifths-touch {
+        flex: none;
+        width: 40%
+    }
+
+    .column.is-three-fifths-touch {
+        flex: none;
+        width: 60%
+    }
+
+    .column.is-four-fifths-touch {
+        flex: none;
+        width: 80%
+    }
+
+    .column.is-offset-three-quarters-touch {
+        margin-left: 75%
+    }
+
+    .column.is-offset-two-thirds-touch {
+        margin-left: 66.6666%
+    }
+
+    .column.is-offset-half-touch {
+        margin-left: 50%
+    }
+
+    .column.is-offset-one-third-touch {
+        margin-left: 33.3333%
+    }
+
+    .column.is-offset-one-quarter-touch {
+        margin-left: 25%
+    }
+
+    .column.is-offset-one-fifth-touch {
+        margin-left: 20%
+    }
+
+    .column.is-offset-two-fifths-touch {
+        margin-left: 40%
+    }
+
+    .column.is-offset-three-fifths-touch {
+        margin-left: 60%
+    }
+
+    .column.is-offset-four-fifths-touch {
+        margin-left: 80%
+    }
+
+    .column.is-0-touch {
+        flex: none;
+        width: 0%
+    }
+
+    .column.is-offset-0-touch {
+        margin-left: 0
+    }
+
+    .column.is-1-touch {
+        flex: none;
+        width: 8.33333%
+    }
+
+    .column.is-offset-1-touch {
+        margin-left: 8.33333%
+    }
+
+    .column.is-2-touch {
+        flex: none;
+        width: 16.66667%
+    }
+
+    .column.is-offset-2-touch {
+        margin-left: 16.66667%
+    }
+
+    .column.is-3-touch {
+        flex: none;
+        width: 25%
+    }
+
+    .column.is-offset-3-touch {
+        margin-left: 25%
+    }
+
+    .column.is-4-touch {
+        flex: none;
+        width: 33.33333%
+    }
+
+    .column.is-offset-4-touch {
+        margin-left: 33.33333%
+    }
+
+    .column.is-5-touch {
+        flex: none;
+        width: 41.66667%
+    }
+
+    .column.is-offset-5-touch {
+        margin-left: 41.66667%
+    }
+
+    .column.is-6-touch {
+        flex: none;
+        width: 50%
+    }
+
+    .column.is-offset-6-touch {
+        margin-left: 50%
+    }
+
+    .column.is-7-touch {
+        flex: none;
+        width: 58.33333%
+    }
+
+    .column.is-offset-7-touch {
+        margin-left: 58.33333%
+    }
+
+    .column.is-8-touch {
+        flex: none;
+        width: 66.66667%
+    }
+
+    .column.is-offset-8-touch {
+        margin-left: 66.66667%
+    }
+
+    .column.is-9-touch {
+        flex: none;
+        width: 75%
+    }
+
+    .column.is-offset-9-touch {
+        margin-left: 75%
+    }
+
+    .column.is-10-touch {
+        flex: none;
+        width: 83.33333%
+    }
+
+    .column.is-offset-10-touch {
+        margin-left: 83.33333%
+    }
+
+    .column.is-11-touch {
+        flex: none;
+        width: 91.66667%
+    }
+
+    .column.is-offset-11-touch {
+        margin-left: 91.66667%
+    }
+
+    .column.is-12-touch {
+        flex: none;
+        width: 100%
+    }
+
+    .column.is-offset-12-touch {
+        margin-left: 100%
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .column.is-narrow-desktop {
+        flex: none
+    }
+
+    .column.is-full-desktop {
+        flex: none;
+        width: 100%
+    }
+
+    .column.is-three-quarters-desktop {
+        flex: none;
+        width: 75%
+    }
+
+    .column.is-two-thirds-desktop {
+        flex: none;
+        width: 66.6666%
+    }
+
+    .column.is-half-desktop {
+        flex: none;
+        width: 50%
+    }
+
+    .column.is-one-third-desktop {
+        flex: none;
+        width: 33.3333%
+    }
+
+    .column.is-one-quarter-desktop {
+        flex: none;
+        width: 25%
+    }
+
+    .column.is-one-fifth-desktop {
+        flex: none;
+        width: 20%
+    }
+
+    .column.is-two-fifths-desktop {
+        flex: none;
+        width: 40%
+    }
+
+    .column.is-three-fifths-desktop {
+        flex: none;
+        width: 60%
+    }
+
+    .column.is-four-fifths-desktop {
+        flex: none;
+        width: 80%
+    }
+
+    .column.is-offset-three-quarters-desktop {
+        margin-left: 75%
+    }
+
+    .column.is-offset-two-thirds-desktop {
+        margin-left: 66.6666%
+    }
+
+    .column.is-offset-half-desktop {
+        margin-left: 50%
+    }
+
+    .column.is-offset-one-third-desktop {
+        margin-left: 33.3333%
+    }
+
+    .column.is-offset-one-quarter-desktop {
+        margin-left: 25%
+    }
+
+    .column.is-offset-one-fifth-desktop {
+        margin-left: 20%
+    }
+
+    .column.is-offset-two-fifths-desktop {
+        margin-left: 40%
+    }
+
+    .column.is-offset-three-fifths-desktop {
+        margin-left: 60%
+    }
+
+    .column.is-offset-four-fifths-desktop {
+        margin-left: 80%
+    }
+
+    .column.is-0-desktop {
+        flex: none;
+        width: 0%
+    }
+
+    .column.is-offset-0-desktop {
+        margin-left: 0
+    }
+
+    .column.is-1-desktop {
+        flex: none;
+        width: 8.33333%
+    }
+
+    .column.is-offset-1-desktop {
+        margin-left: 8.33333%
+    }
+
+    .column.is-2-desktop {
+        flex: none;
+        width: 16.66667%
+    }
+
+    .column.is-offset-2-desktop {
+        margin-left: 16.66667%
+    }
+
+    .column.is-3-desktop {
+        flex: none;
+        width: 25%
+    }
+
+    .column.is-offset-3-desktop {
+        margin-left: 25%
+    }
+
+    .column.is-4-desktop {
+        flex: none;
+        width: 33.33333%
+    }
+
+    .column.is-offset-4-desktop {
+        margin-left: 33.33333%
+    }
+
+    .column.is-5-desktop {
+        flex: none;
+        width: 41.66667%
+    }
+
+    .column.is-offset-5-desktop {
+        margin-left: 41.66667%
+    }
+
+    .column.is-6-desktop {
+        flex: none;
+        width: 50%
+    }
+
+    .column.is-offset-6-desktop {
+        margin-left: 50%
+    }
+
+    .column.is-7-desktop {
+        flex: none;
+        width: 58.33333%
+    }
+
+    .column.is-offset-7-desktop {
+        margin-left: 58.33333%
+    }
+
+    .column.is-8-desktop {
+        flex: none;
+        width: 66.66667%
+    }
+
+    .column.is-offset-8-desktop {
+        margin-left: 66.66667%
+    }
+
+    .column.is-9-desktop {
+        flex: none;
+        width: 75%
+    }
+
+    .column.is-offset-9-desktop {
+        margin-left: 75%
+    }
+
+    .column.is-10-desktop {
+        flex: none;
+        width: 83.33333%
+    }
+
+    .column.is-offset-10-desktop {
+        margin-left: 83.33333%
+    }
+
+    .column.is-11-desktop {
+        flex: none;
+        width: 91.66667%
+    }
+
+    .column.is-offset-11-desktop {
+        margin-left: 91.66667%
+    }
+
+    .column.is-12-desktop {
+        flex: none;
+        width: 100%
+    }
+
+    .column.is-offset-12-desktop {
+        margin-left: 100%
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .column.is-narrow-widescreen {
+        flex: none
+    }
+
+    .column.is-full-widescreen {
+        flex: none;
+        width: 100%
+    }
+
+    .column.is-three-quarters-widescreen {
+        flex: none;
+        width: 75%
+    }
+
+    .column.is-two-thirds-widescreen {
+        flex: none;
+        width: 66.6666%
+    }
+
+    .column.is-half-widescreen {
+        flex: none;
+        width: 50%
+    }
+
+    .column.is-one-third-widescreen {
+        flex: none;
+        width: 33.3333%
+    }
+
+    .column.is-one-quarter-widescreen {
+        flex: none;
+        width: 25%
+    }
+
+    .column.is-one-fifth-widescreen {
+        flex: none;
+        width: 20%
+    }
+
+    .column.is-two-fifths-widescreen {
+        flex: none;
+        width: 40%
+    }
+
+    .column.is-three-fifths-widescreen {
+        flex: none;
+        width: 60%
+    }
+
+    .column.is-four-fifths-widescreen {
+        flex: none;
+        width: 80%
+    }
+
+    .column.is-offset-three-quarters-widescreen {
+        margin-left: 75%
+    }
+
+    .column.is-offset-two-thirds-widescreen {
+        margin-left: 66.6666%
+    }
+
+    .column.is-offset-half-widescreen {
+        margin-left: 50%
+    }
+
+    .column.is-offset-one-third-widescreen {
+        margin-left: 33.3333%
+    }
+
+    .column.is-offset-one-quarter-widescreen {
+        margin-left: 25%
+    }
+
+    .column.is-offset-one-fifth-widescreen {
+        margin-left: 20%
+    }
+
+    .column.is-offset-two-fifths-widescreen {
+        margin-left: 40%
+    }
+
+    .column.is-offset-three-fifths-widescreen {
+        margin-left: 60%
+    }
+
+    .column.is-offset-four-fifths-widescreen {
+        margin-left: 80%
+    }
+
+    .column.is-0-widescreen {
+        flex: none;
+        width: 0%
+    }
+
+    .column.is-offset-0-widescreen {
+        margin-left: 0
+    }
+
+    .column.is-1-widescreen {
+        flex: none;
+        width: 8.33333%
+    }
+
+    .column.is-offset-1-widescreen {
+        margin-left: 8.33333%
+    }
+
+    .column.is-2-widescreen {
+        flex: none;
+        width: 16.66667%
+    }
+
+    .column.is-offset-2-widescreen {
+        margin-left: 16.66667%
+    }
+
+    .column.is-3-widescreen {
+        flex: none;
+        width: 25%
+    }
+
+    .column.is-offset-3-widescreen {
+        margin-left: 25%
+    }
+
+    .column.is-4-widescreen {
+        flex: none;
+        width: 33.33333%
+    }
+
+    .column.is-offset-4-widescreen {
+        margin-left: 33.33333%
+    }
+
+    .column.is-5-widescreen {
+        flex: none;
+        width: 41.66667%
+    }
+
+    .column.is-offset-5-widescreen {
+        margin-left: 41.66667%
+    }
+
+    .column.is-6-widescreen {
+        flex: none;
+        width: 50%
+    }
+
+    .column.is-offset-6-widescreen {
+        margin-left: 50%
+    }
+
+    .column.is-7-widescreen {
+        flex: none;
+        width: 58.33333%
+    }
+
+    .column.is-offset-7-widescreen {
+        margin-left: 58.33333%
+    }
+
+    .column.is-8-widescreen {
+        flex: none;
+        width: 66.66667%
+    }
+
+    .column.is-offset-8-widescreen {
+        margin-left: 66.66667%
+    }
+
+    .column.is-9-widescreen {
+        flex: none;
+        width: 75%
+    }
+
+    .column.is-offset-9-widescreen {
+        margin-left: 75%
+    }
+
+    .column.is-10-widescreen {
+        flex: none;
+        width: 83.33333%
+    }
+
+    .column.is-offset-10-widescreen {
+        margin-left: 83.33333%
+    }
+
+    .column.is-11-widescreen {
+        flex: none;
+        width: 91.66667%
+    }
+
+    .column.is-offset-11-widescreen {
+        margin-left: 91.66667%
+    }
+
+    .column.is-12-widescreen {
+        flex: none;
+        width: 100%
+    }
+
+    .column.is-offset-12-widescreen {
+        margin-left: 100%
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .column.is-narrow-fullhd {
+        flex: none
+    }
+
+    .column.is-full-fullhd {
+        flex: none;
+        width: 100%
+    }
+
+    .column.is-three-quarters-fullhd {
+        flex: none;
+        width: 75%
+    }
+
+    .column.is-two-thirds-fullhd {
+        flex: none;
+        width: 66.6666%
+    }
+
+    .column.is-half-fullhd {
+        flex: none;
+        width: 50%
+    }
+
+    .column.is-one-third-fullhd {
+        flex: none;
+        width: 33.3333%
+    }
+
+    .column.is-one-quarter-fullhd {
+        flex: none;
+        width: 25%
+    }
+
+    .column.is-one-fifth-fullhd {
+        flex: none;
+        width: 20%
+    }
+
+    .column.is-two-fifths-fullhd {
+        flex: none;
+        width: 40%
+    }
+
+    .column.is-three-fifths-fullhd {
+        flex: none;
+        width: 60%
+    }
+
+    .column.is-four-fifths-fullhd {
+        flex: none;
+        width: 80%
+    }
+
+    .column.is-offset-three-quarters-fullhd {
+        margin-left: 75%
+    }
+
+    .column.is-offset-two-thirds-fullhd {
+        margin-left: 66.6666%
+    }
+
+    .column.is-offset-half-fullhd {
+        margin-left: 50%
+    }
+
+    .column.is-offset-one-third-fullhd {
+        margin-left: 33.3333%
+    }
+
+    .column.is-offset-one-quarter-fullhd {
+        margin-left: 25%
+    }
+
+    .column.is-offset-one-fifth-fullhd {
+        margin-left: 20%
+    }
+
+    .column.is-offset-two-fifths-fullhd {
+        margin-left: 40%
+    }
+
+    .column.is-offset-three-fifths-fullhd {
+        margin-left: 60%
+    }
+
+    .column.is-offset-four-fifths-fullhd {
+        margin-left: 80%
+    }
+
+    .column.is-0-fullhd {
+        flex: none;
+        width: 0%
+    }
+
+    .column.is-offset-0-fullhd {
+        margin-left: 0
+    }
+
+    .column.is-1-fullhd {
+        flex: none;
+        width: 8.33333%
+    }
+
+    .column.is-offset-1-fullhd {
+        margin-left: 8.33333%
+    }
+
+    .column.is-2-fullhd {
+        flex: none;
+        width: 16.66667%
+    }
+
+    .column.is-offset-2-fullhd {
+        margin-left: 16.66667%
+    }
+
+    .column.is-3-fullhd {
+        flex: none;
+        width: 25%
+    }
+
+    .column.is-offset-3-fullhd {
+        margin-left: 25%
+    }
+
+    .column.is-4-fullhd {
+        flex: none;
+        width: 33.33333%
+    }
+
+    .column.is-offset-4-fullhd {
+        margin-left: 33.33333%
+    }
+
+    .column.is-5-fullhd {
+        flex: none;
+        width: 41.66667%
+    }
+
+    .column.is-offset-5-fullhd {
+        margin-left: 41.66667%
+    }
+
+    .column.is-6-fullhd {
+        flex: none;
+        width: 50%
+    }
+
+    .column.is-offset-6-fullhd {
+        margin-left: 50%
+    }
+
+    .column.is-7-fullhd {
+        flex: none;
+        width: 58.33333%
+    }
+
+    .column.is-offset-7-fullhd {
+        margin-left: 58.33333%
+    }
+
+    .column.is-8-fullhd {
+        flex: none;
+        width: 66.66667%
+    }
+
+    .column.is-offset-8-fullhd {
+        margin-left: 66.66667%
+    }
+
+    .column.is-9-fullhd {
+        flex: none;
+        width: 75%
+    }
+
+    .column.is-offset-9-fullhd {
+        margin-left: 75%
+    }
+
+    .column.is-10-fullhd {
+        flex: none;
+        width: 83.33333%
+    }
+
+    .column.is-offset-10-fullhd {
+        margin-left: 83.33333%
+    }
+
+    .column.is-11-fullhd {
+        flex: none;
+        width: 91.66667%
+    }
+
+    .column.is-offset-11-fullhd {
+        margin-left: 91.66667%
+    }
+
+    .column.is-12-fullhd {
+        flex: none;
+        width: 100%
+    }
+
+    .column.is-offset-12-fullhd {
+        margin-left: 100%
+    }
+}
+
+.columns {
+    margin-left: -.75rem;
+    margin-right: -.75rem;
+    margin-top: -.75rem
+}
+
+.columns:last-child {
+    margin-bottom: -.75rem
+}
+
+.columns:not(:last-child) {
+    margin-bottom: calc(1.5rem - .75rem)
+}
+
+.columns.is-centered {
+    justify-content: center
+}
+
+.columns.is-gapless {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0
+}
+
+.columns.is-gapless>.column {
+    margin: 0;
+    padding: 0 !important
+}
+
+.columns.is-gapless:not(:last-child) {
+    margin-bottom: 1.5rem
+}
+
+.columns.is-gapless:last-child {
+    margin-bottom: 0
+}
+
+.columns.is-mobile {
+    display: flex
+}
+
+.columns.is-multiline {
+    flex-wrap: wrap
+}
+
+.columns.is-vcentered {
+    align-items: center
+}
+
+@media screen and (min-width: 769px),
+print {
+    .columns:not(.is-desktop) {
+        display: flex
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .columns.is-desktop {
+        display: flex
+    }
+}
+
+.columns.is-variable {
+    --columnGap: 0.75rem;
+    margin-left: calc(-1 * var(--columnGap));
+    margin-right: calc(-1 * var(--columnGap))
+}
+
+.columns.is-variable .column {
+    padding-left: var(--columnGap);
+    padding-right: var(--columnGap)
+}
+
+.columns.is-variable.is-0 {
+    --columnGap: 0rem
+}
+
+@media screen and (max-width: 768px) {
+    .columns.is-variable.is-0-mobile {
+        --columnGap: 0rem
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .columns.is-variable.is-0-tablet {
+        --columnGap: 0rem
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .columns.is-variable.is-0-tablet-only {
+        --columnGap: 0rem
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .columns.is-variable.is-0-touch {
+        --columnGap: 0rem
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .columns.is-variable.is-0-desktop {
+        --columnGap: 0rem
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .columns.is-variable.is-0-desktop-only {
+        --columnGap: 0rem
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .columns.is-variable.is-0-widescreen {
+        --columnGap: 0rem
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .columns.is-variable.is-0-widescreen-only {
+        --columnGap: 0rem
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .columns.is-variable.is-0-fullhd {
+        --columnGap: 0rem
+    }
+}
+
+.columns.is-variable.is-1 {
+    --columnGap: 0.25rem
+}
+
+@media screen and (max-width: 768px) {
+    .columns.is-variable.is-1-mobile {
+        --columnGap: 0.25rem
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .columns.is-variable.is-1-tablet {
+        --columnGap: 0.25rem
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .columns.is-variable.is-1-tablet-only {
+        --columnGap: 0.25rem
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .columns.is-variable.is-1-touch {
+        --columnGap: 0.25rem
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .columns.is-variable.is-1-desktop {
+        --columnGap: 0.25rem
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .columns.is-variable.is-1-desktop-only {
+        --columnGap: 0.25rem
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .columns.is-variable.is-1-widescreen {
+        --columnGap: 0.25rem
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .columns.is-variable.is-1-widescreen-only {
+        --columnGap: 0.25rem
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .columns.is-variable.is-1-fullhd {
+        --columnGap: 0.25rem
+    }
+}
+
+.columns.is-variable.is-2 {
+    --columnGap: 0.5rem
+}
+
+@media screen and (max-width: 768px) {
+    .columns.is-variable.is-2-mobile {
+        --columnGap: 0.5rem
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .columns.is-variable.is-2-tablet {
+        --columnGap: 0.5rem
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .columns.is-variable.is-2-tablet-only {
+        --columnGap: 0.5rem
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .columns.is-variable.is-2-touch {
+        --columnGap: 0.5rem
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .columns.is-variable.is-2-desktop {
+        --columnGap: 0.5rem
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .columns.is-variable.is-2-desktop-only {
+        --columnGap: 0.5rem
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .columns.is-variable.is-2-widescreen {
+        --columnGap: 0.5rem
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .columns.is-variable.is-2-widescreen-only {
+        --columnGap: 0.5rem
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .columns.is-variable.is-2-fullhd {
+        --columnGap: 0.5rem
+    }
+}
+
+.columns.is-variable.is-3 {
+    --columnGap: 0.75rem
+}
+
+@media screen and (max-width: 768px) {
+    .columns.is-variable.is-3-mobile {
+        --columnGap: 0.75rem
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .columns.is-variable.is-3-tablet {
+        --columnGap: 0.75rem
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .columns.is-variable.is-3-tablet-only {
+        --columnGap: 0.75rem
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .columns.is-variable.is-3-touch {
+        --columnGap: 0.75rem
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .columns.is-variable.is-3-desktop {
+        --columnGap: 0.75rem
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .columns.is-variable.is-3-desktop-only {
+        --columnGap: 0.75rem
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .columns.is-variable.is-3-widescreen {
+        --columnGap: 0.75rem
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .columns.is-variable.is-3-widescreen-only {
+        --columnGap: 0.75rem
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .columns.is-variable.is-3-fullhd {
+        --columnGap: 0.75rem
+    }
+}
+
+.columns.is-variable.is-4 {
+    --columnGap: 1rem
+}
+
+@media screen and (max-width: 768px) {
+    .columns.is-variable.is-4-mobile {
+        --columnGap: 1rem
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .columns.is-variable.is-4-tablet {
+        --columnGap: 1rem
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .columns.is-variable.is-4-tablet-only {
+        --columnGap: 1rem
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .columns.is-variable.is-4-touch {
+        --columnGap: 1rem
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .columns.is-variable.is-4-desktop {
+        --columnGap: 1rem
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .columns.is-variable.is-4-desktop-only {
+        --columnGap: 1rem
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .columns.is-variable.is-4-widescreen {
+        --columnGap: 1rem
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .columns.is-variable.is-4-widescreen-only {
+        --columnGap: 1rem
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .columns.is-variable.is-4-fullhd {
+        --columnGap: 1rem
+    }
+}
+
+.columns.is-variable.is-5 {
+    --columnGap: 1.25rem
+}
+
+@media screen and (max-width: 768px) {
+    .columns.is-variable.is-5-mobile {
+        --columnGap: 1.25rem
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .columns.is-variable.is-5-tablet {
+        --columnGap: 1.25rem
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .columns.is-variable.is-5-tablet-only {
+        --columnGap: 1.25rem
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .columns.is-variable.is-5-touch {
+        --columnGap: 1.25rem
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .columns.is-variable.is-5-desktop {
+        --columnGap: 1.25rem
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .columns.is-variable.is-5-desktop-only {
+        --columnGap: 1.25rem
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .columns.is-variable.is-5-widescreen {
+        --columnGap: 1.25rem
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .columns.is-variable.is-5-widescreen-only {
+        --columnGap: 1.25rem
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .columns.is-variable.is-5-fullhd {
+        --columnGap: 1.25rem
+    }
+}
+
+.columns.is-variable.is-6 {
+    --columnGap: 1.5rem
+}
+
+@media screen and (max-width: 768px) {
+    .columns.is-variable.is-6-mobile {
+        --columnGap: 1.5rem
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .columns.is-variable.is-6-tablet {
+        --columnGap: 1.5rem
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .columns.is-variable.is-6-tablet-only {
+        --columnGap: 1.5rem
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .columns.is-variable.is-6-touch {
+        --columnGap: 1.5rem
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .columns.is-variable.is-6-desktop {
+        --columnGap: 1.5rem
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .columns.is-variable.is-6-desktop-only {
+        --columnGap: 1.5rem
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .columns.is-variable.is-6-widescreen {
+        --columnGap: 1.5rem
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .columns.is-variable.is-6-widescreen-only {
+        --columnGap: 1.5rem
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .columns.is-variable.is-6-fullhd {
+        --columnGap: 1.5rem
+    }
+}
+
+.columns.is-variable.is-7 {
+    --columnGap: 1.75rem
+}
+
+@media screen and (max-width: 768px) {
+    .columns.is-variable.is-7-mobile {
+        --columnGap: 1.75rem
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .columns.is-variable.is-7-tablet {
+        --columnGap: 1.75rem
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .columns.is-variable.is-7-tablet-only {
+        --columnGap: 1.75rem
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .columns.is-variable.is-7-touch {
+        --columnGap: 1.75rem
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .columns.is-variable.is-7-desktop {
+        --columnGap: 1.75rem
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .columns.is-variable.is-7-desktop-only {
+        --columnGap: 1.75rem
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .columns.is-variable.is-7-widescreen {
+        --columnGap: 1.75rem
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .columns.is-variable.is-7-widescreen-only {
+        --columnGap: 1.75rem
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .columns.is-variable.is-7-fullhd {
+        --columnGap: 1.75rem
+    }
+}
+
+.columns.is-variable.is-8 {
+    --columnGap: 2rem
+}
+
+@media screen and (max-width: 768px) {
+    .columns.is-variable.is-8-mobile {
+        --columnGap: 2rem
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .columns.is-variable.is-8-tablet {
+        --columnGap: 2rem
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width:1023px) {
+    .columns.is-variable.is-8-tablet-only {
+        --columnGap: 2rem
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .columns.is-variable.is-8-touch {
+        --columnGap: 2rem
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .columns.is-variable.is-8-desktop {
+        --columnGap: 2rem
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width:1215px) {
+    .columns.is-variable.is-8-desktop-only {
+        --columnGap: 2rem
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .columns.is-variable.is-8-widescreen {
+        --columnGap: 2rem
+    }
+}
+
+@media screen and (min-width: 1216px) and (max-width:1407px) {
+    .columns.is-variable.is-8-widescreen-only {
+        --columnGap: 2rem
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .columns.is-variable.is-8-fullhd {
+        --columnGap: 2rem
+    }
+}
+
+.tile {
+    align-items: stretch;
+    display: block;
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-height: -webkit-min-content;
+    min-height: -moz-min-content;
+    min-height: min-content
+}
+
+.tile.is-ancestor {
+    margin-left: -.75rem;
+    margin-right: -.75rem;
+    margin-top: -.75rem
+}
+
+.tile.is-ancestor:last-child {
+    margin-bottom: -.75rem
+}
+
+.tile.is-ancestor:not(:last-child) {
+    margin-bottom: .75rem
+}
+
+.tile.is-child {
+    margin: 0 !important
+}
+
+.tile.is-parent {
+    padding: .75rem
+}
+
+.tile.is-vertical {
+    flex-direction: column
+}
+
+.tile.is-vertical>.tile.is-child:not(:last-child) {
+    margin-bottom: 1.5rem !important
+}
+
+@media screen and (min-width: 769px),
+print {
+    .tile:not(.is-child) {
+        display: flex
+    }
+
+    .tile.is-1 {
+        flex: none;
+        width: 8.33333%
+    }
+
+    .tile.is-2 {
+        flex: none;
+        width: 16.66667%
+    }
+
+    .tile.is-3 {
+        flex: none;
+        width: 25%
+    }
+
+    .tile.is-4 {
+        flex: none;
+        width: 33.33333%
+    }
+
+    .tile.is-5 {
+        flex: none;
+        width: 41.66667%
+    }
+
+    .tile.is-6 {
+        flex: none;
+        width: 50%
+    }
+
+    .tile.is-7 {
+        flex: none;
+        width: 58.33333%
+    }
+
+    .tile.is-8 {
+        flex: none;
+        width: 66.66667%
+    }
+
+    .tile.is-9 {
+        flex: none;
+        width: 75%
+    }
+
+    .tile.is-10 {
+        flex: none;
+        width: 83.33333%
+    }
+
+    .tile.is-11 {
+        flex: none;
+        width: 91.66667%
+    }
+
+    .tile.is-12 {
+        flex: none;
+        width: 100%
+    }
+}
+
+.hero {
+    align-items: stretch;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between
+}
+
+.hero .navbar {
+    background: 0 0
+}
+
+.hero.is-white {
+    background-color: #fff;
+    color: #0a0a0a
+}
+
+.hero.is-black a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
+.hero.is-black strong,
+.hero.is-danger a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
+.hero.is-danger strong,
+.hero.is-dark a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
+.hero.is-dark strong,
+.hero.is-info a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
+.hero.is-info strong,
+.hero.is-light a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
+.hero.is-light strong,
+.hero.is-link a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
+.hero.is-link strong,
+.hero.is-primary a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
+.hero.is-primary strong,
+.hero.is-success a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
+.hero.is-success strong,
+.hero.is-warning a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
+.hero.is-warning strong,
+.hero.is-white a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
+.hero.is-white strong {
+    color: inherit
+}
+
+.hero.is-white .title {
+    color: #0a0a0a
+}
+
+.hero.is-white .subtitle {
+    color: rgba(10, 10, 10, .9)
+}
+
+.hero.is-white .subtitle a:not(.button),
+.hero.is-white .subtitle strong {
+    color: #0a0a0a
+}
+
+@media screen and (max-width: 1023px) {
+    .hero.is-white .navbar-menu {
+        background-color: #fff
+    }
+}
+
+.hero.is-white .navbar-item,
+.hero.is-white .navbar-link {
+    color: rgba(10, 10, 10, .7)
+}
+
+.hero.is-white .navbar-link.is-active,
+.hero.is-white .navbar-link:hover,
+.hero.is-white a.navbar-item.is-active,
+.hero.is-white a.navbar-item:hover {
+    background-color: #f2f2f2;
+    color: #0a0a0a
+}
+
+.hero.is-white .tabs a {
+    color: #0a0a0a;
+    opacity: .9
+}
+
+.hero.is-white .tabs a:hover,
+.hero.is-white .tabs li.is-active a {
+    opacity: 1
+}
+
+.hero.is-white .tabs.is-boxed a,
+.hero.is-white .tabs.is-toggle a {
+    color: #0a0a0a
+}
+
+.hero.is-black .tabs.is-boxed a:hover,
+.hero.is-black .tabs.is-toggle a:hover,
+.hero.is-danger .tabs.is-boxed a:hover,
+.hero.is-danger .tabs.is-toggle a:hover,
+.hero.is-dark .tabs.is-boxed a:hover,
+.hero.is-dark .tabs.is-toggle a:hover,
+.hero.is-info .tabs.is-boxed a:hover,
+.hero.is-info .tabs.is-toggle a:hover,
+.hero.is-light .tabs.is-boxed a:hover,
+.hero.is-light .tabs.is-toggle a:hover,
+.hero.is-link .tabs.is-boxed a:hover,
+.hero.is-link .tabs.is-toggle a:hover,
+.hero.is-primary .tabs.is-boxed a:hover,
+.hero.is-primary .tabs.is-toggle a:hover,
+.hero.is-success .tabs.is-boxed a:hover,
+.hero.is-success .tabs.is-toggle a:hover,
+.hero.is-warning .tabs.is-boxed a:hover,
+.hero.is-warning .tabs.is-toggle a:hover,
+.hero.is-white .tabs.is-boxed a:hover,
+.hero.is-white .tabs.is-toggle a:hover {
+    background-color: rgba(10, 10, 10, .1)
+}
+
+.hero.is-white.is-bold {
+    background-image: linear-gradient(141deg, #e6e6e6 0, #fff 71%, #fff 100%)
+}
+
+@media screen and (max-width: 768px) {
+    .hero.is-white.is-bold .navbar-menu {
+        background-image: linear-gradient(141deg, #e6e6e6 0, #fff 71%, #fff 100%)
+    }
+}
+
+.hero.is-black {
+    background-color: #0a0a0a;
+    color: #fff
+}
+
+.hero.is-black .title {
+    color: #fff
+}
+
+.hero.is-black .subtitle {
+    color: rgba(255, 255, 255, .9)
+}
+
+.hero.is-black .subtitle a:not(.button),
+.hero.is-black .subtitle strong {
+    color: #fff
+}
+
+@media screen and (max-width: 1023px) {
+    .hero.is-black .navbar-menu {
+        background-color: #0a0a0a
+    }
+}
+
+.hero.is-black .navbar-item,
+.hero.is-black .navbar-link {
+    color: rgba(255, 255, 255, .7)
+}
+
+.hero.is-black .navbar-link.is-active,
+.hero.is-black .navbar-link:hover,
+.hero.is-black a.navbar-item.is-active,
+.hero.is-black a.navbar-item:hover {
+    background-color: #000;
+    color: #fff
+}
+
+.hero.is-black .tabs a {
+    color: #fff;
+    opacity: .9
+}
+
+.hero.is-black .tabs a:hover,
+.hero.is-black .tabs li.is-active a {
+    opacity: 1
+}
+
+.hero.is-black .tabs.is-boxed a,
+.hero.is-black .tabs.is-toggle a {
+    color: #fff
+}
+
+.hero.is-black .tabs.is-boxed li.is-active a,
+.hero.is-black .tabs.is-boxed li.is-active a:hover,
+.hero.is-black .tabs.is-toggle li.is-active a,
+.hero.is-black .tabs.is-toggle li.is-active a:hover {
+    background-color: #fff;
+    border-color: #fff;
+    color: #0a0a0a
+}
+
+.hero.is-black.is-bold {
+    background-image: linear-gradient(141deg, #000 0, #0a0a0a 71%, #181616 100%)
+}
+
+@media screen and (max-width: 768px) {
+    .hero.is-black.is-bold .navbar-menu {
+        background-image: linear-gradient(141deg, #000 0, #0a0a0a 71%, #181616 100%)
+    }
+}
+
+.hero.is-light {
+    background-color: #ecf0f1
+}
+
+.hero.is-light,
+.hero.is-light .title {
+    color: rgba(0, 0, 0, .7)
+}
+
+.hero.is-light .subtitle {
+    color: rgba(0, 0, 0, .9)
+}
+
+.hero.is-light .subtitle a:not(.button),
+.hero.is-light .subtitle strong {
+    color: rgba(0, 0, 0, .7)
+}
+
+@media screen and (max-width: 1023px) {
+    .hero.is-light .navbar-menu {
+        background-color: #ecf0f1
+    }
+}
+
+.hero.is-light .navbar-item,
+.hero.is-light .navbar-link {
+    color: rgba(0, 0, 0, .7)
+}
+
+.hero.is-light .navbar-link.is-active,
+.hero.is-light .navbar-link:hover,
+.hero.is-light a.navbar-item.is-active,
+.hero.is-light a.navbar-item:hover {
+    background-color: #dde4e6;
+    color: rgba(0, 0, 0, .7)
+}
+
+.hero.is-light .tabs a {
+    color: rgba(0, 0, 0, .7);
+    opacity: .9
+}
+
+.hero.is-light .tabs a:hover,
+.hero.is-light .tabs li.is-active a {
+    opacity: 1
+}
+
+.hero.is-light .tabs.is-boxed a,
+.hero.is-light .tabs.is-toggle a {
+    color: rgba(0, 0, 0, .7)
+}
+
+.hero.is-light .tabs.is-boxed li.is-active a,
+.hero.is-light .tabs.is-boxed li.is-active a:hover,
+.hero.is-light .tabs.is-toggle li.is-active a,
+.hero.is-light .tabs.is-toggle li.is-active a:hover {
+    background-color: rgba(0, 0, 0, .7);
+    border-color: rgba(0, 0, 0, .7);
+    color: #ecf0f1
+}
+
+.hero.is-light.is-bold {
+    background-image: linear-gradient(141deg, #cadfe0 0, #ecf0f1 71%, #fafbfc 100%)
+}
+
+@media screen and (max-width: 768px) {
+    .hero.is-light.is-bold .navbar-menu {
+        background-image: linear-gradient(141deg, #cadfe0 0, #ecf0f1 71%, #fafbfc 100%)
+    }
+}
+
+.hero.is-dark {
+    background-color: hsl(var(--main), 10%, 15%);
+    color: #fff
+}
+
+.hero.is-dark .title {
+    color: #fff
+}
+
+.hero.is-dark .subtitle {
+    color: rgba(255, 255, 255, .9)
+}
+
+.hero.is-dark .subtitle a:not(.button),
+.hero.is-dark .subtitle strong {
+    color: #fff
+}
+
+@media screen and (max-width: 1023px) {
+    .hero.is-dark .navbar-menu {
+        background-color: hsl(var(--main), 10%, 15%)
+    }
+}
+
+.hero.is-dark .navbar-item,
+.hero.is-dark .navbar-link {
+    color: rgba(255, 255, 255, .7)
+}
+
+.hero.is-dark .navbar-link.is-active,
+.hero.is-dark .navbar-link:hover,
+.hero.is-dark a.navbar-item.is-active,
+.hero.is-dark a.navbar-item:hover {
+    background-color: #1d2122;
+    color: #fff
+}
+
+.hero.is-dark .tabs a,
+.hero.is-info .tabs a,
+.hero.is-link .tabs a,
+.hero.is-primary .tabs a,
+.hero.is-success .tabs a {
+    color: #fff;
+    opacity: .9
+}
+
+.hero.is-dark .tabs a:hover,
+.hero.is-dark .tabs li.is-active a {
+    opacity: 1
+}
+
+.hero.is-dark .tabs.is-boxed li.is-active a,
+.hero.is-dark .tabs.is-boxed li.is-active a:hover,
+.hero.is-dark .tabs.is-toggle li.is-active a,
+.hero.is-dark .tabs.is-toggle li.is-active a:hover {
+    background-color: #fff;
+    border-color: #fff;
+    color: hsl(var(--main), 10%, 15%)
+}
+
+.hero.is-dark.is-bold {
+    background-image: linear-gradient(141deg, #0f1615 0, hsl(var(--main), 10%, 15%) 71%, #313c40 100%)
+}
+
+@media screen and (max-width: 768px) {
+    .hero.is-dark.is-bold .navbar-menu {
+        background-image: linear-gradient(141deg, #0f1615 0, hsl(var(--main), 10%, 15%) 71%, #313c40 100%)
+    }
+}
+
+.hero.is-primary {
+    background-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.hero.is-dark .tabs.is-boxed a,
+.hero.is-dark .tabs.is-toggle a,
+.hero.is-primary .title {
+    color: #fff
+}
+
+.hero.is-primary .subtitle {
+    color: rgba(255, 255, 255, .9)
+}
+
+.hero.is-primary .subtitle a:not(.button),
+.hero.is-primary .subtitle strong {
+    color: #fff
+}
+
+@media screen and (max-width: 1023px) {
+    .hero.is-primary .navbar-menu {
+        background-color: hsl(var(--main), 45%, 45%)
+    }
+}
+
+.hero.is-primary .navbar-item,
+.hero.is-primary .navbar-link {
+    color: rgba(255, 255, 255, .7)
+}
+
+.hero.is-primary .navbar-link.is-active,
+.hero.is-primary .navbar-link:hover,
+.hero.is-primary a.navbar-item.is-active,
+.hero.is-primary a.navbar-item:hover {
+    background-color: #2f4d6d;
+    color: #fff
+}
+
+.hero.is-primary .tabs a:hover,
+.hero.is-primary .tabs li.is-active a {
+    opacity: 1
+}
+
+.hero.is-primary .tabs.is-boxed li.is-active a,
+.hero.is-primary .tabs.is-boxed li.is-active a:hover,
+.hero.is-primary .tabs.is-toggle li.is-active a,
+.hero.is-primary .tabs.is-toggle li.is-active a:hover {
+    background-color: #fff;
+    border-color: #fff;
+    color: hsl(var(--main), 45%, 45%)
+}
+
+.hero.is-primary.is-bold {
+    background-image: linear-gradient(141deg, #214b62 0, hsl(var(--main), 45%, 45%) 71%, #3a5796 100%)
+}
+
+@media screen and (max-width: 768px) {
+    .hero.is-primary.is-bold .navbar-menu {
+        background-image: linear-gradient(141deg, #214b62 0, hsl(var(--main), 45%, 45%) 71%, #3a5796 100%)
+    }
+}
+
+.hero.is-link {
+    background-color: hsl(var(--main), 45%, 45%);
+    color: #fff
+}
+
+.hero.is-link .title,
+.hero.is-primary .tabs.is-boxed a,
+.hero.is-primary .tabs.is-toggle a {
+    color: #fff
+}
+
+.hero.is-link .subtitle {
+    color: rgba(255, 255, 255, .9)
+}
+
+.hero.is-link .subtitle a:not(.button),
+.hero.is-link .subtitle strong {
+    color: #fff
+}
+
+@media screen and (max-width: 1023px) {
+    .hero.is-link .navbar-menu {
+        background-color: hsl(var(--main), 45%, 45%)
+    }
+}
+
+.hero.is-link .navbar-item,
+.hero.is-link .navbar-link {
+    color: rgba(255, 255, 255, .7)
+}
+
+.hero.is-link .navbar-link.is-active,
+.hero.is-link .navbar-link:hover,
+.hero.is-link a.navbar-item.is-active,
+.hero.is-link a.navbar-item:hover {
+    background-color: hsl(var(--main), 75%, 80%);
+    color: #fff
+}
+
+.hero.is-link .tabs a:hover,
+.hero.is-link .tabs li.is-active a {
+    opacity: 1
+}
+
+.hero.is-link .tabs.is-boxed li.is-active a,
+.hero.is-link .tabs.is-boxed li.is-active a:hover,
+.hero.is-link .tabs.is-toggle li.is-active a,
+.hero.is-link .tabs.is-toggle li.is-active a:hover {
+    background-color: #fff;
+    border-color: #fff;
+    color: hsl(var(--main), 45%, 45%)
+}
+
+.hero.is-link.is-bold {
+    background-image: linear-gradient(141deg, #0c9764 0, hsl(var(--main), 45%, 45%) 71%, #17d8d2 100%)
+}
+
+@media screen and (max-width: 768px) {
+    .hero.is-link.is-bold .navbar-menu {
+        background-image: linear-gradient(141deg, #0c9764 0, hsl(var(--main), 45%, 45%) 71%, #17d8d2 100%)
+    }
+}
+
+.hero.is-info {
+    background-color: #3298dc;
+    color: #fff
+}
+
+.hero.is-info .title,
+.hero.is-link .tabs.is-boxed a,
+.hero.is-link .tabs.is-toggle a {
+    color: #fff
+}
+
+.hero.is-info .subtitle {
+    color: rgba(255, 255, 255, .9)
+}
+
+.hero.is-info .subtitle a:not(.button),
+.hero.is-info .subtitle strong {
+    color: #fff
+}
+
+@media screen and (max-width: 1023px) {
+    .hero.is-info .navbar-menu {
+        background-color: #3298dc
+    }
+}
+
+.hero.is-info .navbar-item,
+.hero.is-info .navbar-link {
+    color: rgba(255, 255, 255, .7)
+}
+
+.hero.is-info .navbar-link.is-active,
+.hero.is-info .navbar-link:hover,
+.hero.is-info a.navbar-item.is-active,
+.hero.is-info a.navbar-item:hover {
+    background-color: #238cd1;
+    color: #fff
+}
+
+.hero.is-info .tabs a:hover,
+.hero.is-info .tabs li.is-active a {
+    opacity: 1
+}
+
+.hero.is-info .tabs.is-boxed li.is-active a,
+.hero.is-info .tabs.is-boxed li.is-active a:hover,
+.hero.is-info .tabs.is-toggle li.is-active a,
+.hero.is-info .tabs.is-toggle li.is-active a:hover {
+    background-color: #fff;
+    border-color: #fff;
+    color: #3298dc
+}
+
+.hero.is-info.is-bold {
+    background-image: linear-gradient(141deg, #159dc6 0, #3298dc 71%, #4389e5 100%)
+}
+
+@media screen and (max-width: 768px) {
+    .hero.is-info.is-bold .navbar-menu {
+        background-image: linear-gradient(141deg, #159dc6 0, #3298dc 71%, #4389e5 100%)
+    }
+}
+
+.hero.is-success {
+    background-color: #2ecc71;
+    color: #fff
+}
+
+.hero.is-info .tabs.is-boxed a,
+.hero.is-info .tabs.is-toggle a,
+.hero.is-success .title {
+    color: #fff
+}
+
+.hero.is-success .subtitle {
+    color: rgba(255, 255, 255, .9)
+}
+
+.hero.is-success .subtitle a:not(.button),
+.hero.is-success .subtitle strong {
+    color: #fff
+}
+
+@media screen and (max-width: 1023px) {
+    .hero.is-success .navbar-menu {
+        background-color: #2ecc71
+    }
+}
+
+.hero.is-success .navbar-item,
+.hero.is-success .navbar-link {
+    color: rgba(255, 255, 255, .7)
+}
+
+.hero.is-success .navbar-link.is-active,
+.hero.is-success .navbar-link:hover,
+.hero.is-success a.navbar-item.is-active,
+.hero.is-success a.navbar-item:hover {
+    background-color: #29b765;
+    color: #fff
+}
+
+.hero.is-success .tabs a:hover,
+.hero.is-success .tabs li.is-active a {
+    opacity: 1
+}
+
+.hero.is-success .tabs.is-boxed a,
+.hero.is-success .tabs.is-toggle a {
+    color: #fff
+}
+
+.hero.is-success .tabs.is-boxed li.is-active a,
+.hero.is-success .tabs.is-boxed li.is-active a:hover,
+.hero.is-success .tabs.is-toggle li.is-active a,
+.hero.is-success .tabs.is-toggle li.is-active a:hover {
+    background-color: #fff;
+    border-color: #fff;
+    color: #2ecc71
+}
+
+.hero.is-success.is-bold {
+    background-image: linear-gradient(141deg, #1bac40 0, #2ecc71 71%, #3ada98 100%)
+}
+
+@media screen and (max-width: 768px) {
+    .hero.is-success.is-bold .navbar-menu {
+        background-image: linear-gradient(141deg, #1bac40 0, #2ecc71 71%, #3ada98 100%)
+    }
+}
+
+.hero.is-warning {
+    background-color: #f1b70e
+}
+
+.hero.is-warning,
+.hero.is-warning .title {
+    color: rgba(0, 0, 0, .7)
+}
+
+.hero.is-warning .subtitle {
+    color: rgba(0, 0, 0, .9)
+}
+
+.hero.is-warning .subtitle a:not(.button),
+.hero.is-warning .subtitle strong {
+    color: rgba(0, 0, 0, .7)
+}
+
+@media screen and (max-width: 1023px) {
+    .hero.is-warning .navbar-menu {
+        background-color: #f1b70e
+    }
+}
+
+.hero.is-warning .navbar-item,
+.hero.is-warning .navbar-link {
+    color: rgba(0, 0, 0, .7)
+}
+
+.hero.is-warning .navbar-link.is-active,
+.hero.is-warning .navbar-link:hover,
+.hero.is-warning a.navbar-item.is-active,
+.hero.is-warning a.navbar-item:hover {
+    background-color: #d9a50d;
+    color: rgba(0, 0, 0, .7)
+}
+
+.hero.is-warning .tabs a {
+    color: rgba(0, 0, 0, .7);
+    opacity: .9
+}
+
+.hero.is-warning .tabs a:hover,
+.hero.is-warning .tabs li.is-active a {
+    opacity: 1
+}
+
+.hero.is-warning .tabs.is-boxed a,
+.hero.is-warning .tabs.is-toggle a {
+    color: rgba(0, 0, 0, .7)
+}
+
+.hero.is-warning .tabs.is-boxed li.is-active a,
+.hero.is-warning .tabs.is-boxed li.is-active a:hover,
+.hero.is-warning .tabs.is-toggle li.is-active a,
+.hero.is-warning .tabs.is-toggle li.is-active a:hover {
+    background-color: rgba(0, 0, 0, .7);
+    border-color: rgba(0, 0, 0, .7);
+    color: #f1b70e
+}
+
+.hero.is-warning.is-bold {
+    background-image: linear-gradient(141deg, #cb7601 0, #f1b70e 71%, #f8e520 100%)
+}
+
+@media screen and (max-width: 768px) {
+    .hero.is-warning.is-bold .navbar-menu {
+        background-image: linear-gradient(141deg, #cb7601 0, #f1b70e 71%, #f8e520 100%)
+    }
+}
+
+.hero.is-danger {
+    background-color: #e74c3c;
+    color: #fff
+}
+
+.hero.is-danger .title {
+    color: #fff
+}
+
+.hero.is-danger .subtitle {
+    color: rgba(255, 255, 255, .9)
+}
+
+.hero.is-danger .subtitle a:not(.button),
+.hero.is-danger .subtitle strong {
+    color: #fff
+}
+
+@media screen and (max-width: 1023px) {
+    .hero.is-danger .navbar-menu {
+        background-color: #e74c3c
+    }
+}
+
+.hero.is-danger .navbar-item,
+.hero.is-danger .navbar-link {
+    color: rgba(255, 255, 255, .7)
+}
+
+.hero.is-danger .navbar-link.is-active,
+.hero.is-danger .navbar-link:hover,
+.hero.is-danger a.navbar-item.is-active,
+.hero.is-danger a.navbar-item:hover {
+    background-color: #e43725;
+    color: #fff
+}
+
+.hero.is-danger .tabs a {
+    color: #fff;
+    opacity: .9
+}
+
+.hero.is-danger .tabs a:hover,
+.hero.is-danger .tabs li.is-active a {
+    opacity: 1
+}
+
+.hero.is-danger .tabs.is-boxed a,
+.hero.is-danger .tabs.is-toggle a {
+    color: #fff
+}
+
+.hero.is-danger .tabs.is-boxed li.is-active a,
+.hero.is-danger .tabs.is-boxed li.is-active a:hover,
+.hero.is-danger .tabs.is-toggle li.is-active a,
+.hero.is-danger .tabs.is-toggle li.is-active a:hover {
+    background-color: #fff;
+    border-color: #fff;
+    color: #e74c3c
+}
+
+.hero.is-danger.is-bold {
+    background-image: linear-gradient(141deg, #e20e1e 0, #e74c3c 71%, #ef784e 100%)
+}
+
+@media screen and (max-width: 768px) {
+    .hero.is-danger.is-bold .navbar-menu {
+        background-image: linear-gradient(141deg, #e20e1e 0, #e74c3c 71%, #ef784e 100%)
+    }
+}
+
+.hero.is-small .hero-body {
+    padding: 1.5rem
+}
+
+@media screen and (min-width: 769px),
+print {
+    .hero.is-medium .hero-body {
+        padding: 9rem 1.5rem
+    }
+
+    .hero.is-large .hero-body {
+        padding: 18rem 1.5rem
+    }
+}
+
+.hero.is-fullheight .hero-body,
+.hero.is-fullheight-with-navbar .hero-body,
+.hero.is-halfheight .hero-body {
+    align-items: center;
+    display: flex
+}
+
+.hero.is-fullheight .hero-body>.container,
+.hero.is-fullheight-with-navbar .hero-body>.container,
+.hero.is-halfheight .hero-body>.container {
+    flex-grow: 1;
+    flex-shrink: 1
+}
+
+.hero.is-halfheight {
+    min-height: 50vh
+}
+
+.hero.is-fullheight {
+    min-height: 100vh
+}
+
+.hero-video {
+    overflow: hidden
+}
+
+.hero-video video {
+    left: 50%;
+    min-height: 100%;
+    min-width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0)
+}
+
+.hero-video.is-transparent {
+    opacity: .3
+}
+
+@media screen and (max-width: 768px) {
+    .hero-video {
+        display: none
+    }
+}
+
+.hero-buttons {
+    margin-top: 1.5rem
+}
+
+@media screen and (max-width: 768px) {
+    .hero-buttons .button {
+        display: flex
+    }
+
+    .hero-buttons .button:not(:last-child) {
+        margin-bottom: .75rem
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .hero-buttons {
+        display: flex;
+        justify-content: center
+    }
+
+    .hero-buttons .button:not(:last-child) {
+        margin-right: 1.5rem
+    }
+}
+
+.hero-body,
+.hero-foot,
+.hero-head {
+    flex-grow: 0;
+    flex-shrink: 0
+}
+
+.hero-body {
+    flex-grow: 1
+}
+
+.hero-body,
+.section {
+    padding: 3rem 1.5rem
+}
+
+@media screen and (min-width: 1024px) {
+    .section.is-medium {
+        padding: 9rem 1.5rem
+    }
+
+    .section.is-large {
+        padding: 18rem 1.5rem
+    }
+}
+
+.footer {
+    background-color: hsl(var(--main), 10%, 15%);
+    padding: 3rem 1.5rem 6rem
+}
+
+h6 {
+    text-transform: uppercase;
+    letter-spacing: .5px
+}
+
+.hero {
+    background-color: hsl(var(--main), 10%, 15%)
+}
+
+.button {
+    transition: all .2s ease;
+    border-width: 2px;
+    color: #fff
+}
+
+.button.is-active,
+.button.is-focused,
+.button:active,
+.button:focus {
+    box-shadow: 0 0 0 2px rgba(140, 155, 157, .5)
+}
+
+.button.is-white.is-hovered,
+.button.is-white:hover {
+    background-color: #fff
+}
+
+.button.is-white.is-active,
+.button.is-white.is-focused,
+.button.is-white:active,
+.button.is-white:focus {
+    border-color: #fff;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5)
+}
+
+.button.is-black.is-hovered,
+.button.is-black:hover {
+    background-color: #1d1d1d
+}
+
+.button.is-black.is-active,
+.button.is-black.is-focused,
+.button.is-black:active,
+.button.is-black:focus {
+    border-color: #0a0a0a;
+    box-shadow: 0 0 0 2px rgba(10, 10, 10, .5)
+}
+
+.button.is-light.is-hovered,
+.button.is-light:hover {
+    background-color: #fff
+}
+
+.button.is-light.is-active,
+.button.is-light.is-focused,
+.button.is-light:active,
+.button.is-light:focus {
+    border-color: #ecf0f1;
+    box-shadow: 0 0 0 2px rgba(236, 240, 241, .5)
+}
+
+.button.is-dark.is-hovered,
+.button.is-dark:hover {
+    background-color: #3a4344
+}
+
+.button.is-dark.is-active,
+.button.is-dark.is-focused,
+.button.is-dark:active,
+.button.is-dark:focus {
+    border-color: hsl(var(--main), 10%, 15%);
+    box-shadow: 0 0 0 2px rgba(40, 47, 47, .5)
+}
+
+.button.is-primary.is-hovered,
+.button.is-primary:hover {
+    background-color: hsl(var(--main), 65%, 35%)
+}
+
+.button.is-primary.is-active,
+.button.is-primary.is-focused,
+.button.is-primary:active,
+.button.is-primary:focus {
+    box-shadow: 0 0 0 2px rgb(140 155 157 / 50%)
+}
+
+.button.is-link.is-hovered,
+.button.is-link:hover {
+    background-color: #1fdeb8
+}
+
+.button.is-link.is-active,
+.button.is-link.is-focused,
+.button.is-link:active,
+.button.is-link:focus {
+    border-color: hsl(var(--main), 45%, 45%);
+    box-shadow: 0 0 0 2px rgba(26, 188, 156, .5)
+}
+
+.button.is-info.is-hovered,
+.button.is-info:hover {
+    background-color: #53a9e2
+}
+
+.button.is-info.is-active,
+.button.is-info.is-focused,
+.button.is-info:active,
+.button.is-info:focus {
+    border-color: #3298dc;
+    box-shadow: 0 0 0 2px rgba(50, 152, 220, .5)
+}
+
+.button.is-success.is-hovered,
+.button.is-success:hover {
+    background-color: #4ad685
+}
+
+.button.is-success.is-active,
+.button.is-success.is-focused,
+.button.is-success:active,
+.button.is-success:focus {
+    border-color: #2ecc71;
+    box-shadow: 0 0 0 2px rgba(46, 204, 113, .5)
+}
+
+.button.is-warning.is-hovered,
+.button.is-warning:hover {
+    background-color: #f3c232
+}
+
+.button.is-warning.is-active,
+.button.is-warning.is-focused,
+.button.is-warning:active,
+.button.is-warning:focus {
+    border-color: #f1b70e;
+    box-shadow: 0 0 0 2px rgba(241, 183, 14, .5)
+}
+
+.button.is-danger.is-hovered,
+.button.is-danger:hover {
+    background-color: #eb6b5e
+}
+
+.button.is-danger.is-active,
+.button.is-danger.is-focused,
+.button.is-danger:active,
+.button.is-danger:focus {
+    border-color: #e74c3c;
+    box-shadow: 0 0 0 2px rgba(231, 76, 60, .5)
+}
+
+.label {
+    color: #dbdee0
+}
+
+.input,
+.textarea {
+    transition: all .2s ease;
+    box-shadow: none;
+    border-width: 2px;
+    padding-left: 1em;
+    padding-right: 1em
+}
+
+.select select,
+.select:after {
+    border-width: 2px
+}
+
+.control.has-addons .button,
+.control.has-addons .input,
+.control.has-addons .select {
+    margin-right: -2px
+}
+
+.notification {
+    background-color: hsl(var(--main), 10%, 15%)
+}
+
+.card {
+    box-shadow: none;
+    border: 2px solid hsl(var(--main), 10%, 15%);
+    background-color: hsl(var(--main), 10%, 15%);
+    border-radius: .4em
+}
+
+.card .card-header {
+    box-shadow: none;
+    border-radius: .4em .4em 0 0
+}
+
+.card .card-footer,
+.card .card-header {
+    background-color: rgba(18, 18, 18, .2)
+}
+
+.card .card-footer,
+.card .card-footer-item {
+    border-width: 2px;
+    border-color: hsl(var(--main), 10%, 15%)
+}
+
+.notification.is-white a:not(.button) {
+    color: #0a0a0a;
+    text-decoration: underline
+}
+
+.notification.is-black a:not(.button) {
+    color: #fff;
+    text-decoration: underline
+}
+
+.notification.is-light a:not(.button) {
+    color: rgba(0, 0, 0, .7);
+    text-decoration: underline
+}
+
+.notification.is-dark a:not(.button),
+.notification.is-info a:not(.button),
+.notification.is-link a:not(.button),
+.notification.is-primary a:not(.button),
+.notification.is-success a:not(.button) {
+    color: #fff;
+    text-decoration: underline
+}
+
+.notification.is-warning a:not(.button) {
+    color: rgba(0, 0, 0, .7);
+    text-decoration: underline
+}
+
+.notification.is-danger a:not(.button) {
+    color: #fff;
+    text-decoration: underline
+}
+
+.tag {
+    border-radius: .4em
+}
+
+.menu-list a {
+    transition: all .3s ease
+}
+
+.modal-card-body {
+    background-color: hsl(var(--main), 10%, 15%)
+}
+
+.modal-card-foot,
+.modal-card-head {
+    border-color: hsl(var(--main), 10%, 15%)
+}
+
+.message-header {
+    font-weight: 700;
+    background-color: hsl(var(--main), 30%, 20%);
+    color: #fff
+}
+
+.message-body {
+    border-width: 2px;
+    border-color: hsl(var(--main), 10%, 15%)
+}
+
+.navbar.is-transparent {
+    background: 0 0
+}
+
+.navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
+    background-color: hsl(var(--main), 45%, 45%)
+}
+
+@media screen and (max-width: 1023px) {
+    .navbar .navbar-menu {
+        background-color: hsl(var(--main), 45%, 45%);
+        border-radius: 0 0 .4em .4em
+    }
+}
+
+.hero .navbar,
+body>.navbar {
+    border-radius: 0
+}
+
+.pagination-link,
+.pagination-next,
+.pagination-previous,
+.panel-block,
+.panel-heading,
+.panel-tabs {
+    border-width: 2px
+}
+
+.panel-block:first-child,
+.panel-heading:first-child,
+.panel-tabs:first-child {
+    border-top-width: 2px
+}
+
+.panel-heading {
+    font-weight: 700
+}
+
+.panel-tabs a {
+    border-width: 2px;
+    margin-bottom: -2px
+}
+
+.panel-tabs a.is-active {
+    border-bottom-color: hsl(var(--main), 75%, 80%)
+}
+
+.panel-block:hover,
+.panel-block:hover .panel-icon {
+    color: hsl(var(--main), 85%, 95%)
+}
+
+.panel-block.is-active .panel-icon {
+    color: hsl(var(--main), 75%, 80%)
+}
+
+.tabs a {
+    border-bottom-width: 2px;
+    margin-bottom: -2px
+}
+
+.tabs.is-boxed a {
+    border-width: 2px
+}
+
+.tabs.is-boxed li.is-active a {
+    background-color: hsl(var(--main), 10%, 10%)
+}
+
+.tabs.is-toggle li a {
+    border-width: 2px;
+    margin-bottom: 0
+}
+
+.hero.is-black .navbar .navbar-dropdown .navbar-item:hover,
+.hero.is-danger .navbar .navbar-dropdown .navbar-item:hover,
+.hero.is-dark .navbar .navbar-dropdown .navbar-item:hover,
+.hero.is-info .navbar .navbar-dropdown .navbar-item:hover,
+.hero.is-light .navbar .navbar-dropdown .navbar-item:hover,
+.hero.is-link .navbar .navbar-dropdown .navbar-item:hover,
+.hero.is-primary .navbar .navbar-dropdown .navbar-item:hover,
+.hero.is-success .navbar .navbar-dropdown .navbar-item:hover,
+.hero.is-warning .navbar .navbar-dropdown .navbar-item:hover,
+.hero.is-white .navbar .navbar-dropdown .navbar-item:hover {
+    background-color: transparent
+}
+
+.is-flex-direction-row {
+    flex-direction: row !important
+}
+
+.is-flex-direction-row-reverse {
+    flex-direction: row-reverse !important
+}
+
+.is-flex-direction-column {
+    flex-direction: column !important
+}
+
+.is-flex-direction-column-reverse {
+    flex-direction: column-reverse !important
+}
+
+.is-flex-wrap-nowrap {
+    flex-wrap: nowrap !important
+}
+
+.is-flex-wrap-wrap {
+    flex-wrap: wrap !important
+}
+
+.is-flex-wrap-wrap-reverse {
+    flex-wrap: wrap-reverse !important
+}
+
+.is-justify-content-flex-start {
+    justify-content: flex-start !important
+}
+
+.is-justify-content-flex-end {
+    justify-content: flex-end !important
+}
+
+.is-justify-content-center {
+    justify-content: center !important
+}
+
+.is-justify-content-space-between {
+    justify-content: space-between !important
+}
+
+.is-justify-content-space-around {
+    justify-content: space-around !important
+}
+
+.is-justify-content-space-evenly {
+    justify-content: space-evenly !important
+}
+
+.is-justify-content-start {
+    justify-content: start !important
+}
+
+.is-justify-content-end {
+    justify-content: end !important
+}
+
+.is-justify-content-left {
+    justify-content: left !important
+}
+
+.is-justify-content-right {
+    justify-content: right !important
+}
+
+.is-align-content-flex-start {
+    align-content: flex-start !important
+}
+
+.is-align-content-flex-end {
+    align-content: flex-end !important
+}
+
+.is-align-content-center {
+    align-content: center !important
+}
+
+.is-align-content-space-between {
+    align-content: space-between !important
+}
+
+.is-align-content-space-around {
+    align-content: space-around !important
+}
+
+.is-align-content-space-evenly {
+    align-content: space-evenly !important
+}
+
+.is-align-content-stretch {
+    align-content: stretch !important
+}
+
+.is-align-content-start {
+    align-content: start !important
+}
+
+.is-align-content-end {
+    align-content: end !important
+}
+
+.is-align-content-baseline {
+    align-content: baseline !important
+}
+
+.is-align-items-stretch {
+    align-items: stretch !important
+}
+
+.is-align-items-flex-start {
+    align-items: flex-start !important
+}
+
+.is-align-items-flex-end {
+    align-items: flex-end !important
+}
+
+.is-align-items-center {
+    align-items: center !important
+}
+
+.is-align-items-baseline {
+    align-items: baseline !important
+}
+
+.is-align-items-start {
+    align-items: start !important
+}
+
+.is-align-items-end {
+    align-items: end !important
+}
+
+.is-align-items-self-start {
+    align-items: self-start !important
+}
+
+.is-align-items-self-end {
+    align-items: self-end !important
+}
+
+.is-align-self-auto {
+    align-self: auto !important
+}
+
+.is-align-self-flex-start {
+    align-self: flex-start !important
+}
+
+.is-align-self-flex-end {
+    align-self: flex-end !important
+}
+
+.is-align-self-center {
+    align-self: center !important
+}
+
+.is-align-self-baseline {
+    align-self: baseline !important
+}
+
+.is-align-self-stretch {
+    align-self: stretch !important
+}
+
+.is-flex-grow-0 {
+    flex-grow: 0 !important
+}
+
+.is-flex-grow-1 {
+    flex-grow: 1 !important
+}
+
+.is-flex-grow-2 {
+    flex-grow: 2 !important
+}
+
+.is-flex-grow-3 {
+    flex-grow: 3 !important
+}
+
+.is-flex-grow-4 {
+    flex-grow: 4 !important
+}
+
+.is-flex-grow-5 {
+    flex-grow: 5 !important
+}
+
+.is-flex-shrink-0 {
+    flex-shrink: 0 !important
+}
+
+.is-flex-shrink-1 {
+    flex-shrink: 1 !important
+}
+
+.is-flex-shrink-2 {
+    flex-shrink: 2 !important
+}
+
+.is-flex-shrink-3 {
+    flex-shrink: 3 !important
+}
+
+.is-flex-shrink-4 {
+    flex-shrink: 4 !important
+}
+
+.is-flex-shrink-5 {
+    flex-shrink: 5 !important
+}
+
+.is-clearfix::after {
+    clear: both;
+    content: " ";
+    display: table
+}
+
+.is-pulled-left {
+    float: left !important
+}
+
+.is-pulled-right {
+    float: right !important
+}
+
+.is-radiusless {
+    border-radius: 0 !important
+}
+
+.is-shadowless {
+    box-shadow: none !important
+}
+
+.is-clickable {
+    cursor: pointer !important
+}
+
+.is-clipped {
+    overflow: hidden !important
+}
+
+.is-relative {
+    position: relative !important
+}
+
+.is-marginless {
+    margin: 0 !important
+}
+
+.is-paddingless {
+    padding: 0 !important
+}
+
+.m-0 {
+    margin: 0 !important
+}
+
+.mt-0 {
+    margin-top: 0 !important
+}
+
+.mr-0 {
+    margin-right: 0 !important
+}
+
+.mb-0 {
+    margin-bottom: 0 !important
+}
+
+.ml-0 {
+    margin-left: 0 !important
+}
+
+.mx-0 {
+    margin-left: 0 !important;
+    margin-right: 0 !important
+}
+
+.my-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important
+}
+
+.m-1 {
+    margin: .25rem !important
+}
+
+.mt-1 {
+    margin-top: .25rem !important
+}
+
+.mr-1 {
+    margin-right: .25rem !important
+}
+
+.mb-1 {
+    margin-bottom: .25rem !important
+}
+
+.ml-1 {
+    margin-left: .25rem !important
+}
+
+.mx-1 {
+    margin-left: .25rem !important;
+    margin-right: .25rem !important
+}
+
+.my-1 {
+    margin-top: .25rem !important;
+    margin-bottom: .25rem !important
+}
+
+.m-2 {
+    margin: .5rem !important
+}
+
+.mt-2 {
+    margin-top: .5rem !important
+}
+
+.mr-2 {
+    margin-right: .5rem !important
+}
+
+.mb-2 {
+    margin-bottom: .5rem !important
+}
+
+.ml-2 {
+    margin-left: .5rem !important
+}
+
+.mx-2 {
+    margin-left: .5rem !important;
+    margin-right: .5rem !important
+}
+
+.my-2 {
+    margin-top: .5rem !important;
+    margin-bottom: .5rem !important
+}
+
+.m-3 {
+    margin: .75rem !important
+}
+
+.mt-3 {
+    margin-top: .75rem !important
+}
+
+.mr-3 {
+    margin-right: .75rem !important
+}
+
+.mb-3 {
+    margin-bottom: .75rem !important
+}
+
+.ml-3 {
+    margin-left: .75rem !important
+}
+
+.mx-3 {
+    margin-left: .75rem !important;
+    margin-right: .75rem !important
+}
+
+.my-3 {
+    margin-top: .75rem !important;
+    margin-bottom: .75rem !important
+}
+
+.m-4 {
+    margin: 1rem !important
+}
+
+.mt-4 {
+    margin-top: 1rem !important
+}
+
+.mr-4 {
+    margin-right: 1rem !important
+}
+
+.mb-4 {
+    margin-bottom: 1rem !important
+}
+
+.ml-4 {
+    margin-left: 1rem !important
+}
+
+.mx-4 {
+    margin-left: 1rem !important;
+    margin-right: 1rem !important
+}
+
+.my-4 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important
+}
+
+.m-5 {
+    margin: 1.5rem !important
+}
+
+.mt-5 {
+    margin-top: 1.5rem !important
+}
+
+.mr-5 {
+    margin-right: 1.5rem !important
+}
+
+.mb-5 {
+    margin-bottom: 1.5rem !important
+}
+
+.ml-5 {
+    margin-left: 1.5rem !important
+}
+
+.mx-5 {
+    margin-left: 1.5rem !important;
+    margin-right: 1.5rem !important
+}
+
+.my-5 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important
+}
+
+.m-6 {
+    margin: 3rem !important
+}
+
+.mt-6 {
+    margin-top: 3rem !important
+}
+
+.mr-6 {
+    margin-right: 3rem !important
+}
+
+.mb-6 {
+    margin-bottom: 3rem !important
+}
+
+.ml-6 {
+    margin-left: 3rem !important
+}
+
+.mx-6 {
+    margin-left: 3rem !important;
+    margin-right: 3rem !important
+}
+
+.my-6 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important
+}
+
+.p-0 {
+    padding: 0 !important
+}
+
+.pt-0 {
+    padding-top: 0 !important
+}
+
+.pr-0 {
+    padding-right: 0 !important
+}
+
+.pb-0 {
+    padding-bottom: 0 !important
+}
+
+.pl-0 {
+    padding-left: 0 !important
+}
+
+.px-0 {
+    padding-left: 0 !important;
+    padding-right: 0 !important
+}
+
+.py-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important
+}
+
+.p-1 {
+    padding: .25rem !important
+}
+
+.pt-1 {
+    padding-top: .25rem !important
+}
+
+.pr-1 {
+    padding-right: .25rem !important
+}
+
+.pb-1 {
+    padding-bottom: .25rem !important
+}
+
+.pl-1 {
+    padding-left: .25rem !important
+}
+
+.px-1 {
+    padding-left: .25rem !important;
+    padding-right: .25rem !important
+}
+
+.py-1 {
+    padding-top: .25rem !important;
+    padding-bottom: .25rem !important
+}
+
+.p-2 {
+    padding: .5rem !important
+}
+
+.pt-2 {
+    padding-top: .5rem !important
+}
+
+.pr-2 {
+    padding-right: .5rem !important
+}
+
+.pb-2 {
+    padding-bottom: .5rem !important
+}
+
+.pl-2 {
+    padding-left: .5rem !important
+}
+
+.px-2 {
+    padding-left: .5rem !important;
+    padding-right: .5rem !important
+}
+
+.py-2 {
+    padding-top: .5rem !important;
+    padding-bottom: .5rem !important
+}
+
+.p-3 {
+    padding: .75rem !important
+}
+
+.pt-3 {
+    padding-top: .75rem !important
+}
+
+.pr-3 {
+    padding-right: .75rem !important
+}
+
+.pb-3 {
+    padding-bottom: .75rem !important
+}
+
+.pl-3 {
+    padding-left: .75rem !important
+}
+
+.px-3 {
+    padding-left: .75rem !important;
+    padding-right: .75rem !important
+}
+
+.py-3 {
+    padding-top: .75rem !important;
+    padding-bottom: .75rem !important
+}
+
+.p-4 {
+    padding: 1rem !important
+}
+
+.pt-4 {
+    padding-top: 1rem !important
+}
+
+.pr-4 {
+    padding-right: 1rem !important
+}
+
+.pb-4 {
+    padding-bottom: 1rem !important
+}
+
+.pl-4 {
+    padding-left: 1rem !important
+}
+
+.px-4 {
+    padding-left: 1rem !important;
+    padding-right: 1rem !important
+}
+
+.py-4 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important
+}
+
+.p-5 {
+    padding: 1.5rem !important
+}
+
+.pt-5 {
+    padding-top: 1.5rem !important
+}
+
+.pr-5 {
+    padding-right: 1.5rem !important
+}
+
+.pb-5 {
+    padding-bottom: 1.5rem !important
+}
+
+.pl-5 {
+    padding-left: 1.5rem !important
+}
+
+.px-5 {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important
+}
+
+.py-5 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important
+}
+
+.p-6 {
+    padding: 3rem !important
+}
+
+.pt-6 {
+    padding-top: 3rem !important
+}
+
+.pr-6 {
+    padding-right: 3rem !important
+}
+
+.pb-6 {
+    padding-bottom: 3rem !important
+}
+
+.pl-6 {
+    padding-left: 3rem !important
+}
+
+.px-6 {
+    padding-left: 3rem !important;
+    padding-right: 3rem !important
+}
+
+.py-6 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important
+}
+
+.is-size-1 {
+    font-size: 3rem !important
+}
+
+.is-size-2 {
+    font-size: 2.5rem !important
+}
+
+.is-size-3 {
+    font-size: 2rem !important
+}
+
+.is-size-4 {
+    font-size: 1.5rem !important
+}
+
+.is-size-5 {
+    font-size: 1.25rem !important
+}
+
+.is-size-6 {
+    font-size: 1rem !important
+}
+
+.is-size-7 {
+    font-size: .75rem !important
+}
+
+@media screen and (max-width: 768px) {
+    .is-size-1-mobile {
+        font-size: 3rem !important
+    }
+
+    .is-size-2-mobile {
+        font-size: 2.5rem !important
+    }
+
+    .is-size-3-mobile {
+        font-size: 2rem !important
+    }
+
+    .is-size-4-mobile {
+        font-size: 1.5rem !important
+    }
+
+    .is-size-5-mobile {
+        font-size: 1.25rem !important
+    }
+
+    .is-size-6-mobile {
+        font-size: 1rem !important
+    }
+
+    .is-size-7-mobile {
+        font-size: .75rem !important
+    }
+}
+
+@media screen and (min-width: 769px),
+print {
+    .is-size-1-tablet {
+        font-size: 3rem !important
+    }
+
+    .is-size-2-tablet {
+        font-size: 2.5rem !important
+    }
+
+    .is-size-3-tablet {
+        font-size: 2rem !important
+    }
+
+    .is-size-4-tablet {
+        font-size: 1.5rem !important
+    }
+
+    .is-size-5-tablet {
+        font-size: 1.25rem !important
+    }
+
+    .is-size-6-tablet {
+        font-size: 1rem !important
+    }
+
+    .is-size-7-tablet {
+        font-size: .75rem !important
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .is-size-1-touch {
+        font-size: 3rem !important
+    }
+
+    .is-size-2-touch {
+        font-size: 2.5rem !important
+    }
+
+    .is-size-3-touch {
+        font-size: 2rem !important
+    }
+
+    .is-size-4-touch {
+        font-size: 1.5rem !important
+    }
+
+    .is-size-5-touch {
+        font-size: 1.25rem !important
+    }
+
+    .is-size-6-touch {
+        font-size: 1rem !important
+    }
+
+    .is-size-7-touch {
+        font-size: .75rem !important
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .is-size-1-desktop {
+        font-size: 3rem !important
+    }
+
+    .is-size-2-desktop {
+        font-size: 2.5rem !important
+    }
+
+    .is-size-3-desktop {
+        font-size: 2rem !important
+    }
+
+    .is-size-4-desktop {
+        font-size: 1.5rem !important
+    }
+
+    .is-size-5-desktop {
+        font-size: 1.25rem !important
+    }
+
+    .is-size-6-desktop {
+        font-size: 1rem !important
+    }
+
+    .is-size-7-desktop {
+        font-size: .75rem !important
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .is-size-1-widescreen {
+        font-size: 3rem !important
+    }
+
+    .is-size-2-widescreen {
+        font-size: 2.5rem !important
+    }
+
+    .is-size-3-widescreen {
+        font-size: 2rem !important
+    }
+
+    .is-size-4-widescreen {
+        font-size: 1.5rem !important
+    }
+
+    .is-size-5-widescreen {
+        font-size: 1.25rem !important
+    }
+
+    .is-size-6-widescreen {
+        font-size: 1rem !important
+    }
+
+    .is-size-7-widescreen {
+        font-size: .75rem !important
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .is-size-1-fullhd {
+        font-size: 3rem !important
+    }
+
+    .is-size-2-fullhd {
+        font-size: 2.5rem !important
+    }
+
+    .is-size-3-fullhd {
+        font-size: 2rem !important
+    }
+
+    .is-size-4-fullhd {
+        font-size: 1.5rem !important
+    }
+
+    .is-size-5-fullhd {
+        font-size: 1.25rem !important
+    }
+
+    .is-size-6-fullhd {
+        font-size: 1rem !important
+    }
+
+    .is-size-7-fullhd {
+        font-size: .75rem !important
+    }
+}
+
+.has-text-centered {
+    text-align: center !important
+}
+
+.has-text-justified {
+    text-align: justify !important
+}
+
+.has-text-left {
+    text-align: left !important
+}
+
+.has-text-right {
+    text-align: right !important
+}
\ No newline at end of file
diff --git a/static/css/pages/admin/style.css b/static/css/pages/admin/style.css
index 8f0a312a..eb596e98 100644
--- a/static/css/pages/admin/style.css
+++ b/static/css/pages/admin/style.css
@@ -1,522 +1,563 @@
-.admin-con {
-    margin-top: 53px!important
-}
-
 .sidebar {
-    background: hsl(var(--main), 10%, 15%);
-    width: 230px;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    background-size: cover;
-    background-position: 50%;
-    display: block;
-    transition: .5s cubic-bezier(.685, .0473, .346, 1);
+  background: hsl(var(--main), 10%, 15%);
+  width: 230px;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  background-size: cover;
+  background-position: 50%;
+  display: block;
+  transition: 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
 }
 
 .sidebar .sidebar-wrapper {
-    width: 100%;
-    min-height: 100%;
-    max-height: calc(100vh - 705px);
-    z-index: 4;
-    position: relative;
-    overflow: auto;
-}
-
-.sidebar .sidebar-wrapper>.nav [data-toggle=collapse]~div>ul>li>a .sidebar-normal {
-    margin: 0;
-    position: relative;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-    opacity: 1;
-    white-space: nowrap;
-    display: block;
-    line-height: 23px;
-    z-index: 1;
-    color: hsla(0, 0%, 100%, .8)
-}
-
-.sidebar .sidebar-wrapper>.nav [data-toggle=collapse]~div>ul>li>a i {
-    font-size: 17px;
-    line-height: 20px;
-    width: 26px
-}
-
-.sidebar .sidebar-wrapper [data-toggle=collapse]~div>ul>li:hover>a .sidebar-normal {
-    color: #fff
+  width: 100%;
+  min-height: 100%;
+  max-height: calc(100vh - 705px);
+  z-index: 4;
+  position: relative;
+  overflow: auto;
+}
+
+.sidebar
+  .sidebar-wrapper
+  > .nav
+  [data-toggle="collapse"]
+  ~ div
+  > ul
+  > li
+  > a
+  .sidebar-normal {
+  margin: 0;
+  position: relative;
+  -webkit-transform: translateX(0);
+  transform: translateX(0);
+  opacity: 1;
+  white-space: nowrap;
+  display: block;
+  line-height: 23px;
+  z-index: 1;
+  color: hsla(0, 0%, 100%, 0.8);
+}
+
+.sidebar
+  .sidebar-wrapper
+  > .nav
+  [data-toggle="collapse"]
+  ~ div
+  > ul
+  > li
+  > a
+  i {
+  font-size: 17px;
+  line-height: 20px;
+  width: 26px;
+}
+
+.sidebar
+  .sidebar-wrapper
+  [data-toggle="collapse"]
+  ~ div
+  > ul
+  > li:hover
+  > a
+  .sidebar-normal {
+  color: #fff;
 }
 
 .sidebar .nav {
-    margin-top: 20px;
-    display: block;
-    margin-left: 0
+  margin-top: 20px;
+  display: block;
+  margin-left: 0;
 }
 
-.sidebar .nav li>a+div .nav {
-    margin-top: 5px
+.sidebar .nav li > a + div .nav {
+  margin-top: 5px;
 }
 
-.sidebar .nav li>a+div .nav li>a {
-    margin-top: 0;
-    padding: 8px 8px
+.sidebar .nav li > a + div .nav li > a {
+  margin-top: 0;
+  padding: 0.5em 0.5em;
 }
 
-.sidebar .nav li>a {
-    margin: 10px 15px 0;
-    border-radius: 10px;
-    color: #fff;
-    display: block;
-    position: relative;
-    cursor: pointer;
-    padding: 10px 15px;
-    line-height: 1.625rem;
-    text-align: left
+.sidebar .nav li > a {
+  margin: 10px 15px 0;
+  border-radius: 10px;
+  color: #fff;
+  display: block;
+  position: relative;
+  cursor: pointer;
+  padding: 10px 15px;
+  line-height: 1.625rem;
+  text-align: left;
 }
 
-.sidebar .nav li:first-child>a {
-    margin: 0 15px
+.sidebar .nav li:first-child > a {
+  margin: 0 15px;
 }
 
-.sidebar .nav li:focus:not(.active)>a i, .sidebar .nav li:focus:not(.active)>a p, .sidebar .nav li:hover:not(.active)>a i, .sidebar .nav li:hover:not(.active)>a p {
-    color: #fff
+.sidebar .nav li:focus:not(.active) > a i,
+.sidebar .nav li:focus:not(.active) > a p,
+.sidebar .nav li:hover:not(.active) > a i,
+.sidebar .nav li:hover:not(.active) > a p {
+  color: #fff;
 }
 
-.sidebar .nav li>a:hover {
-    background: #ff939314;
-    transform: translateY(-2px)
+.sidebar .nav li > a:hover {
+  background: #ff939314;
+  transform: translateY(-2px);
 }
 
 .sidebar .nav p {
-    margin: 0;
-    font-weight: 600;
-    color: hsla(0, 0%, 100%, .8);
-    line-height: 30px;
-    position: relative;
-    display: block;
-    height: auto;
-    white-space: nowrap
+  margin: 0;
+  font-weight: 600;
+  color: hsla(0, 0%, 100%, 0.8);
+  line-height: 30px;
+  position: relative;
+  display: block;
+  height: auto;
+  white-space: nowrap;
 }
 
 .sidebar .nav i {
-    font-size: 20px;
-    float: left;
-    margin-right: 12px;
-    line-height: 30px;
-    width: 34px;
-    text-align: center;
-    color: hsla(0, 0%, 100%, .8);
-    position: relative
+  font-size: 20px;
+  float: left;
+  margin-right: 12px;
+  line-height: 30px;
+  width: 34px;
+  text-align: center;
+  color: hsla(0, 0%, 100%, 0.8);
+  position: relative;
 }
 
 .sidebar .logo {
-    position: relative;
-    padding: .5rem .7rem;
-    z-index: 4;
-    background: hsl(var(--main),37%,50%);
+  position: relative;
+  padding: 0.5rem 0.7rem;
+  z-index: 4;
+  background: hsl(var(--main), 37%, 50%);
 }
 
 .sidebar .logo a.logo-normal {
-    display: block;
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0)
+  display: block;
+  opacity: 1;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
 }
 
 .sidebar .logo p {
-    float: left;
-    font-size: 20px;
-    margin: 10px 10px;
-    color: #fff;
-    line-height: 20px;
-    font-family: Helvetica Neue, Helvetica, Arial, sans-serif
+  float: left;
+  font-size: 20px;
+  margin: 10px 10px;
+  color: #fff;
+  line-height: 20px;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 .sidebar .logo .simple-text {
-    text-transform: uppercase;
-    padding: .5rem 0;
-    display: block;
-    white-space: nowrap;
-    color: #fff;
-    text-decoration: none;
-    font-weight: 500;
-    line-height: 30px;
-    overflow: hidden;
-    text-align: center
+  text-transform: uppercase;
+  padding: 0.5rem 0;
+  display: block;
+  white-space: nowrap;
+  color: #fff;
+  text-decoration: none;
+  font-weight: 500;
+  line-height: 30px;
+  overflow: hidden;
+  text-align: center;
 }
 
 .sidebar .user {
-    padding-bottom: 20px;
-    margin: 20px auto 0;
-    position: relative
+  padding-bottom: 20px;
+  margin: 20px auto 0;
+  position: relative;
 }
 
 .sidebar .user:after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    right: 15px;
-    height: 1px;
-    width: calc(100% - 30px);
-    background: hsla(0, 0%, 100%, .5)
+  content: "";
+  position: absolute;
+  bottom: 0;
+  right: 15px;
+  height: 1px;
+  width: calc(100% - 30px);
+  background: hsla(0, 0%, 100%, 0.5);
 }
 
 .sidebar .user a {
-    color: #fff;
-    text-decoration: none;
-    padding: .5rem 15px;
-    white-space: nowrap
+  color: #fff;
+  text-decoration: none;
+  padding: 0.5rem 15px;
+  white-space: nowrap;
 }
 
 .footer {
-    margin-top: 0
+  margin-top: 0;
 }
 
 .content:not(:last-child) {
-    margin: 0
+  margin: 0;
 }
 
 .admin-con {
-    flex-grow: 1
-}
-
-.columns {
-    margin-top: 53px
+  flex-grow: 1;
+  margin-top: 50px !important;
 }
 
 li {
-    list-style-type: none;
-    margin: 0;
-    padding: 0
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
 }
 
 .nav-link .icon {
-    font-size: 16px;
-    padding-right: 18px
+  font-size: 16px;
+  padding-right: 18px;
 }
 
 .nav-link .name {
-    font-size: 14px;
-    font-weight: 500
+  font-size: 14px;
+  font-weight: 500;
 }
 
 .column {
-    padding: 24px 26px
+  padding: 24px 26px;
 }
 
 .content h2 {
-    margin-bottom: .2em
+  margin-bottom: 0.2em;
 }
 
 .section-lead {
-    color: #b5b5b5
+  color: #b5b5b5;
 }
 
 .section {
-    padding: 1rem 0
+  padding: 1rem 0;
 }
 
 .is-avatar {
-    width: 5%;
-    flex: inherit;
-    margin-right: 20px;
-    border-radius: 12px
+  width: 5%;
+  flex: inherit;
+  margin-right: 20px;
+  border-radius: 12px;
 }
 
 .header-avatar {
-    border-radius: 12px
+  border-radius: 12px;
 }
 
 .card {
-    border-radius: 8px;
-    color: #fff;
-    padding: 10px;
-    position: relative;
-    border: 0;
-    background: hsl(var(--main),15%,25%);
+  border-radius: 0.5em;
+  color: #fff;
+  padding: 10px;
+  position: relative;
+  border: 0;
+  background: hsl(var(--main), 15%, 25%);
 }
 
 .card .stat {
-    border-top: 1px solid rgba(255, 255, 255, .3);
-    font-size: 8px;
-    margin-top: 6px;
-    padding: 10px 10px 0;
-    text-transform: uppercase
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+  font-size: 0.5em;
+  margin-top: 6px;
+  padding: 10px 10px 0;
+  text-transform: uppercase;
 }
 
 .card .title {
-    display: inline-block;
-    font-size: 8px;
-    padding: 10px 10px 0;
-    text-transform: uppercase
+  display: inline-block;
+  font-size: 0.5em;
+  padding: 10px 10px 0;
+  text-transform: uppercase;
 }
 
 .card .value {
-    font-size: 28px;
-    padding: 0 10px
+  font-size: 28px;
+  padding: 0 10px;
 }
 
 .recent-beat {
-    margin-top: 20px
+  margin-top: 20px;
 }
 
 .recent-beat .section-title {
-    font-size: 20px
+  font-size: 20px;
 }
 
 .title:not(:last-child) {
-    margin-bottom: 0
+  margin-bottom: 0;
 }
 
 .user-block {
-    transition: .2s ease
+  transition: 0.2s ease;
 }
 
 .user-block {
-    display: flex;
-    border-radius: 8px;
-    padding: 12px;
-    font-weight: 700;
-    line-height: 1.3;
-    align-items: center;
-    overflow: hidden;
-    height: 76px;
-    margin-top: 8px
+  display: flex;
+  border-radius: 0.5em;
+  padding: 12px;
+  font-weight: 700;
+  line-height: 1.3;
+  align-items: center;
+  overflow: hidden;
+  height: 76px;
+  margin-top: 0.5em;
 }
 
 .user-block {
-    background-color: #413030;
-    color: #fff
+  background-color: #413030;
+  color: #fff;
 }
 
 .user-block:hover {
-    box-shadow: 0 0 1px rgba(0, 0, 0, .04), 0 4px 8px rgba(0, 0, 0, .04), 0 16px 24px rgba(0, 0, 0, .04), 0 24px 32px rgba(0, 0, 0, .04);
-    color: #fff;
-    transform: translateY(-5px)
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 0.5em rgba(0, 0, 0, 0.04),
+    0 16px 24px rgba(0, 0, 0, 0.04), 0 24px 32px rgba(0, 0, 0, 0.04);
+  color: #fff;
+  transform: translateY(-2px);
 }
 
 .avatar-picture {
-    width: 58px;
-    border-radius: 6px;
-    margin-right: 8px
+  width: 58px;
+  border-radius: 6px;
+  margin-right: 0.5em;
 }
 
 .profile-flag {
-    width: 18px
+  width: 18px;
 }
 
 .unverified {
-    background: #3c3c3c
+  background: #3c3c3c;
 }
 
 .unverified .target-button {
-    background: #4c4a4a!important
+  background: #4c4a4a !important;
 }
 
-.user-artist, .user-mapper, .user-title {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    font-size: 12
+.user-artist,
+.user-mapper,
+.user-title {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: 12;
 }
 
 .user-artist {
-    font-size: 11px;
-    font-weight: 500
+  font-size: 11px;
+  font-weight: 500;
 }
 
 .user-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    margin-top: 8px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #fff;
-    white-space: nowrap
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-top: 0.5em;
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  white-space: nowrap;
 }
 
 .user-footer .target-button {
-    background-color: #5d4343;
-    border-radius: 6px;
-    padding: 4.5px 7px;
-    font-size: 12px;
-    margin-left: 10px;
-    transition: .2s background-color;
-    color: #ff679b
+  background-color: #5d4343;
+  border-radius: 6px;
+  padding: 4.5px 7px;
+  font-size: 12px;
+  margin-left: 10px;
+  transition: 0.2s background-color;
+  color: #ff679b;
 }
 
 .user-stats {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 0
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.user-stats:hover .target-button {
+  opacity: 1;
+}
+
+.user-stats .target-button {
+  opacity: 0;
+  transition: all ease-in-out 0.1s;
 }
 
 .user-link {
-    width: 400px;
-    overflow: hidden
+  width: 400px;
+  overflow: hidden;
 }
 
 span.user-mapper {
-    padding-right: 8px
+  padding-right: 0.5em;
 }
 
 .d-flex.align-items-baseline {
-    display: flex
+  display: flex;
 }
 
 .extra-block {
-    width: 100%;
-    display: flex;
-    justify-content: center
+  width: 100%;
+  display: flex;
+  justify-content: center;
 }
 
 .map-single {
-    height: 76px;
-    min-width: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding-right: 0;
-    margin: 8px 0 0 0;
-    padding: 8px;
-    border-radius: 8px;
-    overflow: hidden;
-    background: #413030;
-    transition: .2s ease;
-    cursor: pointer
+  height: 76px;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-right: 0;
+  margin: 0.5em 0 0 0;
+  padding: 0.5em;
+  border-radius: 0.5em;
+  overflow: hidden;
+  background: #413030;
+  transition: 0.2s ease;
+  cursor: pointer;
 }
 
 .map-single:hover {
-    border-radius: 8px;
-    transform: translateY(-5px);
-    box-shadow: 0 0 1px rgba(0, 0, 0, .04), 0 4px 8px rgba(0, 0, 0, .04), 0 16px 24px rgba(0, 0, 0, .04), 0 24px 32px rgba(0, 0, 0, .04)
+  border-radius: 0.5em;
+  transform: translateY(-2px);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 0.5em rgba(0, 0, 0, 0.04),
+    0 16px 24px rgba(0, 0, 0, 0.04), 0 24px 32px rgba(0, 0, 0, 0.04);
 }
 
 .map-content1 {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 100%;
-    min-width: 0;
-    flex: 1
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+  min-width: 0;
+  flex: 1;
 }
 
 .map-title {
-    font-size: 14px;
-    display: flex;
-    font-weight: 500;
-    align-items: center;
-    white-space: nowrap
+  font-size: 14px;
+  display: flex;
+  font-weight: 500;
+  align-items: center;
+  white-space: nowrap;
 }
 
 .map-title-block {
-    display: flex;
-    flex-direction: column;
-    line-height: 1;
-    margin-left: 6px;
-    min-width: 0;
-    padding-right: 12px;
-    flex: 2
+  display: flex;
+  flex-direction: column;
+  line-height: 1;
+  margin-left: 6px;
+  min-width: 0;
+  padding-right: 12px;
+  flex: 2;
 }
 
 .map-date {
-    font-size: 10px;
-    font-weight: 500;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start
+  font-size: 10px;
+  font-weight: 500;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
 }
 
-.map-date>time {
-    margin-top: 2px
+.map-date > time {
+  margin-top: 2px;
 }
 
 .map-content2 {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    line-height: 1.2;
-    align-items: flex-end;
-    justify-content: center
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+  align-items: flex-end;
+  justify-content: center;
 }
 
 .map-pp {
-    font-weight: 700;
-    color: #cc5288;
-    font-size: 20px
+  font-weight: 700;
+  color: #cc5288;
+  font-size: 20px;
 }
 
 .map-acc {
-    font-size: 12px;
-    display: flex;
-    justify-content: flex-end
+  font-size: 12px;
+  display: flex;
+  justify-content: flex-end;
 }
 
 .main-stats {
-    display: flex;
-    flex-direction: column;
-    color: #fff;
-    height: 100%;
-    justify-content: space-between
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+  height: 100%;
+  justify-content: space-between;
 }
 
 .rank-single {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    line-height: 1
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1;
 }
 
 .rank-block {
-    margin: auto 0
+  margin: auto 0;
 }
 
 .score-details_right-block {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end;
-    height: 100%;
-    min-width: 140px;
-    justify-content: center;
-    padding-right: 14px;
-    padding-left: 20px;
-    position: relative;
-    border-radius: 0 10px 10px 0;
-    z-index: 0;
-    margin-left: 6px;
-    align-items: center
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  height: 100%;
+  min-width: 140px;
+  justify-content: center;
+  padding-right: 14px;
+  padding-left: 20px;
+  position: relative;
+  border-radius: 0 10px 10px 0;
+  z-index: 0;
+  margin-left: 6px;
+  align-items: center;
 }
 
 .score-details_pp-block {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    height: 100%;
-    justify-content: center;
-    position: relative;
-    border-radius: 0 10px 10px 0;
-    z-index: 0;
-    margin-left: 6px;
-    margin-right: 12px
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  height: 100%;
+  justify-content: center;
+  position: relative;
+  border-radius: 0 10px 10px 0;
+  z-index: 0;
+  margin-left: 6px;
+  margin-right: 12px;
 }
 
 .score-details {
-    height: 100%;
-    align-items: flex-end
+  height: 100%;
+  align-items: flex-end;
 }
 
 .score-details_grade-block .rank-single {
-    margin: 0
+  margin: 0;
 }
 
 .score-details_grade-block .map-rank {
-    font-size: 32px
+  font-size: 32px;
 }
 
 .map-image-picture {
-    width: 64px;
-    height: 45px;
-    border-radius: 6px;
-    object-fit: cover
+  width: 64px;
+  height: 45px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.user-block,
+.map-single {
+  border: 1px solid rgba(255, 255, 255, 0);
+}
+
+.user-block:hover,
+.map-single:hover {
+  border: 1px solid rgba(255, 255, 255, .2);
 }
diff --git a/static/css/pages/auth.css b/static/css/pages/auth.css
index 96bfeefd..e58f3ffa 100644
--- a/static/css/pages/auth.css
+++ b/static/css/pages/auth.css
@@ -8,7 +8,7 @@
     flex-direction: column;
     padding: 21px 22px;
     position: relative;
-    border-radius: 8px;
+    border-radius: 0.5em;
 }
 
 .title-block{
diff --git a/static/css/pages/home.css b/static/css/pages/home.css
index 51307169..0ee29619 100644
--- a/static/css/pages/home.css
+++ b/static/css/pages/home.css
@@ -1,13 +1,13 @@
 /* gulag mascot/avatar */
 
 .gulag-avatar {
-  background-image: url("/static/images/pippi.png");
+  background-image: url("/static/images/gulag.png?v=1.0");
   background-repeat: no-repeat;
   /*     available avatar widths & heights      */
   /* gulag.png:   width: 512px; height: 363px;  */
   /* pippi.png:   width: 372px; height: 432px;  */
-  width: 365px;
-  height: 579px;
+  width: 363px;
+  height: 512px;
   left: 50px;
   margin: 0;
   padding: 0;
@@ -24,7 +24,8 @@
   max-width: inherit;
 }
 
-#title, #mascot {
+#title,
+#mascot {
   animation: appear 0.4s ease;
 }
 
@@ -33,6 +34,7 @@
     -webkit-transform: translateY(-50px);
     opacity: 0;
   }
+
   100% {
     -webkit-transform: translateY(0);
     opacity: 1;
@@ -43,19 +45,24 @@
   .gulag-avatar {
     display: none;
   }
+
   #home-hero .columns.flex-vcenter {
     padding: 0 20px;
   }
+
   .main-block {
     width: initial;
     height: 285px;
   }
+
   #mascot {
     display: none !important;
   }
+
   .my-con {
     margin: 60px 0 0 0;
   }
+
   #home-hero {
     height: 300px;
   }
@@ -67,4 +74,4 @@
 
 .footer {
   margin: 0;
-}
+}
\ No newline at end of file
diff --git a/static/css/pages/leaderboard.css b/static/css/pages/leaderboard.css
index 9f94ad27..f8e8cd58 100644
--- a/static/css/pages/leaderboard.css
+++ b/static/css/pages/leaderboard.css
@@ -19,8 +19,8 @@ a:hover {
   background-color: hsl(var(--main), 30%, 50%);
   height: 194px;
   border-radius: 0;
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
+  border-top-right-radius: 0.5em;
+  border-top-left-radius: 0.5em;
 }
 
 .leaderboard-column {
@@ -32,8 +32,8 @@ a:hover {
 }
 
 .leaderboard-main-bg {
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 0.5em;
+  border-bottom-left-radius: 0.5em;
   padding: 24px 24px;
 }
 
@@ -85,7 +85,7 @@ tr td {
   width: 100%;
 }
 
-.t-column:first-child {
+/* .t-column:first-child {
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
 }
@@ -93,8 +93,22 @@ tr td {
 .t-column:last-child {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
+} */
+/* what left beyond this line are clearly not working */
+.leaderboard-column:first-of-type .column-player-rank {
+  border-top-left-radius: 6px;
+}
+.leaderboard-column:first-of-type td:last-of-type {
+  border-top-right-radius: 6px;
+}
+.leaderboard-column:last-of-type .column-player-rank {
+  border-bottom-left-radius: 6px;
+}
+.leaderboard-column:last-of-type td:last-of-type {
+  border-bottom-right-radius: 6px;
 }
 
+
 tr.leaderboard-column td {
   font-weight: 600;
   border-bottom: hsl(var(--main), 20%, 30%);
@@ -126,7 +140,7 @@ table th {
   height: 232px;
 }
 
-.main-banner > * {
+.main-banner>* {
   z-index: 2;
 }
 
@@ -142,8 +156,8 @@ table th {
   height: 100%;
   position: absolute;
   left: 0;
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
+  border-top-right-radius: 0.5em;
+  border-top-left-radius: 0.5em;
   z-index: 1;
 }
 
@@ -206,7 +220,7 @@ table th {
   cursor: pointer;
   transition: 0.3s ease;
   font-size: 14px;
-  margin: 10px 8px;
+  margin: 10px 0.5em;
 }
 
 .simple-banner-switch:hover {
@@ -221,11 +235,11 @@ table th {
 }
 
 .main-selector {
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
+  border-top-right-radius: 0.5em;
+  border-top-left-radius: 0.5em;
 }
 
-.leaderboard-table > tbody {
+.leaderboard-table>tbody {
   transition: 0.2s opacity;
 }
 
@@ -239,9 +253,11 @@ table th {
   .mode-icon {
     display: none;
   }
+
   .main-banner {
     padding: 0px 12px;
   }
+
   .banner-text {
     font-size: 36px;
   }
@@ -262,10 +278,15 @@ table th {
   margin-top: -41px;
   margin-left: -41px;
 }
-.popover-body, .tooltip-inner, .flag-dropdown {
+
+.popover-body,
+.tooltip-inner,
+.flag-dropdown {
   font-size: 12px;
 }
-.flag-dropdown, .noUi-tooltip {
+
+.flag-dropdown,
+.noUi-tooltip {
   background-color: hsl(var(--main), 15%, 5%) !important;
   filter: opacity(0.95);
   border-radius: 4px;
@@ -285,7 +306,9 @@ table th {
   font-weight: 600;
   font-style: normal;
 }
-.user-flag:hover>.flag-dropdown, .player-flag:hover>.flag-dropdown {
+
+.user-flag:hover>.flag-dropdown,
+.player-flag:hover>.flag-dropdown {
   visibility: visible;
   opacity: 1;
-}
+}
\ No newline at end of file
diff --git a/static/css/pages/profile.css b/static/css/pages/profile.css
index b9410093..b9c80f3b 100644
--- a/static/css/pages/profile.css
+++ b/static/css/pages/profile.css
@@ -1,6 +1,6 @@
 .main-block {
-  border-top-right-radius: 20px;
-  border-top-left-radius: 20px;
+  border-top-right-radius: 3em;
+  border-top-left-radius: 3em;
 }
 
 .second-block {
@@ -10,10 +10,30 @@
 .stats-block {
   width: 100%;
   background: hsl(var(--main), 25%, 25%);
-  padding: 9.5px;
-  margin-bottom: 9.5px !important;
+  padding: 1em;
+  margin-bottom: 1em !important;
+}
+
+.log-block {
+  transition: 0.2s ease;
+  margin-bottom: 12px;
+}
+
+
+.extra-block {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  background: hsl(var(--main), 20%, 20%);
 }
 
+.stats-block,
+.log-block > *:last-child
+{
+  border-radius: 0 0 0.5em 0.5em;
+}
+
+
 .profile-flex {
   width: 100%;
   display: flex;
@@ -22,7 +42,7 @@
 }
 
 .profile-bg {
-  min-height: 262px;
+  min-height: 11em;
   width: 100%;
   background-size: cover;
   background-position: center;
@@ -38,7 +58,7 @@
 .profile-avatar {
   width: 185px;
   height: 185px;
-  margin-top: -5.5rem;
+  margin-top: -9rem;
   border-radius: 16px;
   object-fit: cover;
   transition: 0.2s ease;
@@ -137,7 +157,7 @@ tbody {
 
 tr {
   display: flex;
-  padding: 8px;
+  padding: 0.5em;
 }
 
 td {
@@ -158,7 +178,7 @@ td {
 .grade-block {
   padding: 10px;
   display: block;
-  margin-top: 8px;
+  margin-top: 0.5em;
 }
 .grade-block .media-content { overflow-x: unset !important; }
 .map-rank {
@@ -182,7 +202,7 @@ td {
   flex-direction: column;
   align-items: center;
   line-height: 1;
-  margin: -2px 8px;
+  margin: -2px 0.5em;
 }
 
 .rank-block {
@@ -253,8 +273,8 @@ html {
 .header {
   padding: 10px 10px;
   background: hsl(var(--main), 30%, 50%);
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-top-left-radius: 0.5em;
+  border-top-right-radius: 0.5em;
 }
 
 .header .title {
@@ -269,20 +289,30 @@ html {
 }
 
 .map-single {
-  height: 72px;
+  /* traisition */
+  max-height: 0;
+  margin: 0;
+  opacity: 0;
+  /* transition */
+
   min-width: 0;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding-right: 0;
-  margin: 8px 0;
   justify-content: space-between;
   overflow: hidden;
   background: hsl(var(--main), 25%, 25%);
-  transition: 0.2s ease;
+  transition: 0.2 ease-in-out;
   cursor: pointer;
 }
+.map-single.show {
+  opacity: 1;
+  margin: 0.5em 0;
+  max-height: 72px;
 
+  transition: 0.2s ease-in-out;
+}
 .map-data {
   height: 72px;
   min-width: 100%;
@@ -290,7 +320,7 @@ html {
   flex-direction: row;
   align-items: center;
   padding-right: 0;
-  margin: 8px 0;
+  margin: 0.5em 0;
   justify-content: space-between;
   border-radius: 10px;
   overflow: hidden;
@@ -298,18 +328,22 @@ html {
   cursor: pointer;
 }
 
+.map-single:first-child {
+  margin-top: 0;
+  border-radius: 0.5em 0.5em 0 0;
+}
+.map-single:last-child {
+  margin-top: 0;
+  border-radius: 0 0 0.5em 0.5em;
+}
 .map-single:hover {
-  border-radius: 8px;
+  border-radius: 0.5em;
   transform: translateY(-1px);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 0.5em rgba(0, 0, 0, 0.04),
     0 16px 24px rgba(0, 0, 0, 0.04), 0 24px 32px rgba(0, 0, 0, 0.04);
   background: hsl(var(--main), 30%, 30%);
 }
 
-.map-single:first-child {
-  margin-top: 0;
-}
-
 .map-content1 {
   display: flex;
   flex-direction: row;
@@ -474,18 +508,20 @@ html {
 }
 
 .beatmap-block {
-  transition: 0.2s ease;
-}
-
-.beatmap-block {
+  max-height: 0;
+  padding: 0;
   display: flex;
-  padding: 8px;
   font-weight: 700;
   line-height: 1.3;
   align-items: center;
   overflow: hidden;
-  height: 72px;
   width: 100%;
+  transition: 0.2s ease-in-out;
+}
+.beatmap-block.show {
+  max-height: 72px;
+  padding: 0.5em;
+  transition: 0.2s ease-in-out;
 }
 
 .beatmap-block {
@@ -496,7 +532,7 @@ html {
 .beatmap-block:hover {
   background-color: hsl(var(--main), 25%, 30%);
   transform: scale(1.01);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 0.5em rgba(0, 0, 0, 0.04),
     0 16px 24px rgba(0, 0, 0, 0.04), 0 24px 32px rgba(0, 0, 0, 0.04);
   color: #fff;
 }
@@ -519,7 +555,7 @@ html {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  margin-top: 8px;
+  margin-top: 0.5em;
   font-size: 16px;
   font-weight: 600;
   color: #fff;
@@ -558,24 +594,17 @@ html {
 }
 
 span.beatmap-mapper {
-  padding-right: 8px;
+  padding-right: 0.5em;
 }
 
 .d-flex.align-items-baseline {
   display: flex;
 }
 
-.extra-block {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  background: hsl(var(--main), 20%, 20%);
-}
-
 .show-button {
   padding: 3px 42px;
   background: hsl(var(--main), 25%, 25%);
-  margin: 0px 8px 8px 8px;
+  margin: 0px 0.5em 0.5em 0.5em;
   text-align: center;
 }
 
@@ -600,6 +629,15 @@ span.beatmap-mapper {
   display: none;
 }
 
+@media screen and (min-width: 1255px) {
+  .two-sides .column.is-one-third {
+    padding-right: 0.5em;
+  }
+  .two-sides .column.is-two-third {
+    padding-left: 0.5em;
+  }
+}
+
 @media screen and (max-width: 1255px) {
   .two-sides {
     display: contents !important;
@@ -610,6 +648,12 @@ span.beatmap-mapper {
     flex: none;
     width: 100%;
   }
+  .two-sides .column.is-one-third {
+    padding-bottom: 0;
+  }
+  .two-sides .column.is-one-third .stats-block:last-of-type {
+    margin-bottom: 0 !important;
+  }
   .columns.is-marginless.is-2 {
     display: none;
   }
@@ -696,10 +740,10 @@ span.beatmap-mapper {
 }
 
 .online-infomation {
-  position: absolute;
-  top: 18px;
-  left: 42px;
-  padding: 8px 15px;
+  /* position: absolute;
+  bottom: 18px;
+  right: 42px; */
+  padding: 0.3em 1em;
   background: #00000040;
   border-radius: 6px;
 }
@@ -726,7 +770,13 @@ span.beatmap-mapper {
 .pop-enter, .pop-leave-to {
   transform: scale(0.8);
 }
-.log-block {
-  transition: 0.2s ease;
-  margin-bottom: 12px;
+
+.beatmap-block,
+.map-single {
+  border: 1px solid rgba(255, 255, 255, 0);
+}
+
+.beatmap-block:hover,
+.map-single:hover {
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
diff --git a/static/css/pages/settings/style.css b/static/css/pages/settings/style.css
index 70ff91b5..8c339bfc 100644
--- a/static/css/pages/settings/style.css
+++ b/static/css/pages/settings/style.css
@@ -8,7 +8,7 @@
   flex-direction: column;
   padding: 21px 22px;
   position: relative;
-  border-radius: 8px;
+  border-radius: 0.5em;
 }
 
 .title-block {
@@ -139,7 +139,7 @@ button:focus {
 }
 
 .main-block {
-  border-radius: 8px;
+  border-radius: 0.5em;
   display: flex;
   min-height: 688px;
 }
@@ -172,7 +172,7 @@ button:focus {
   display: flex;
   padding-left: 24px;
   align-items: center;
-  border-radius: 8px;
+  border-radius: 0.5em;
 }
 
 .left-selector {
@@ -204,8 +204,8 @@ button:focus {
   padding-left: 38px;
   color: #222;
   font-weight: 700;
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
+  border-top-right-radius: 0.5em;
+  border-top-left-radius: 0.5em;
   background-color: #f7f7f7;
 }
 
@@ -293,7 +293,7 @@ label.user-avatar:hover:before {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  padding-bottom: 8px;
+  padding-bottom: 0.5em;
   flex-direction: column;
   opacity: 0.7;
   font-weight: 400;
@@ -390,7 +390,7 @@ input::placeholder {
 .welcome-text {
   display: flex;
   flex-direction: column;
-  padding-left: 8px;
+  padding-left: 0.5em;
 }
 
 .welcome {
@@ -428,7 +428,7 @@ input::placeholder {
   width: 100%;
   box-shadow: none;
   border: solid 2px transparent;
-  border-radius: 8px;
+  border-radius: 0.5em;
 }
 
 .bootstrap-select.btn-group .dropdown-menu {
@@ -462,7 +462,7 @@ input::placeholder {
   padding: 0;
   border: 2px solid #fff;
   border-radius: 4px;
-  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.22);
+  box-shadow: 0 0.5em 15px rgba(0, 0, 0, 0.22);
 }
 
 .bootstrap-select.btn-group .dropdown-menu li {
@@ -503,8 +503,8 @@ input::placeholder {
 
 .settings-btn {
   color: #f6a;
-  border-radius: 8px;
-  padding: 8px;
+  border-radius: 0.5em;
+  padding: 0.5em;
   font-size: 14px;
   font-weight: 500;
   background-color: #fff;
@@ -589,7 +589,7 @@ input::placeholder {
   width: 100px;
   color: #fff;
   border: none;
-  padding: 8px;
+  padding: 0.5em;
 }
 
 .menu-icon {
@@ -756,7 +756,7 @@ input:checked+label.checkbox:hover {
 }
 
 label.user-avatar:hover {
-  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0.5em 15px rgba(0, 0, 0, 0.3);
 }
 
 label.user-avatar.loading:after {
@@ -838,7 +838,7 @@ i.loadspin {
   position: absolute;
   background-color: #0000008b;
   border-radius: 120px;
-  padding: 4px 8px;
+  padding: 4px 0.5em;
   margin-top: -6px;
   opacity: 0.8;
   transition: 150ms opacity;
@@ -855,7 +855,7 @@ i.loadspin {
 
 .single-right-block .right-block-content>span {
   font-size: 13px;
-  padding-bottom: 8px;
+  padding-bottom: 0.5em;
 }
 
 .btn.dropdown-toggle,
@@ -1017,13 +1017,13 @@ input:checked+label.checkbox:hover {
   width: 80px;
   height: 80px;
   margin-top: -50px;
-  border-radius: 8px;
+  border-radius: 0.5em;
   object-fit: cover;
   transition: 0.2s ease;
 }
 
 .buttons .button {
-  margin-top: 8px;
+  margin-top: 0.5em;
   border-radius: 0.4em;
   margin-left: 0px;
   width: 100%;
@@ -1038,8 +1038,8 @@ input:checked+label.checkbox:hover {
   display: flex;
   flex-direction: column;
   padding: 18px 48px;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 0.5em;
+  border-bottom-left-radius: 0.5em;
   align-items: center;
 }
 
diff --git a/static/css/pages/verify.css b/static/css/pages/verify.css
index ed3bd3a1..2f034090 100644
--- a/static/css/pages/verify.css
+++ b/static/css/pages/verify.css
@@ -8,7 +8,7 @@
     flex-direction: column;
     padding: 21px 22px;
     position: relative;
-    border-radius: 8px;
+    border-radius: 0.5em;
 }
 
 .title-block {
diff --git a/static/css/style.css b/static/css/style.css
index dd025aaf..c16ee52e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -5,6 +5,105 @@
   src: url(/static/fonts/extra.ttf) format("truetype")
 }
 
+html {
+  overflow: auto;
+}
+
+body * {
+  font-family: Quicksand, Noto Sans SC, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif
+}
+
+body {
+  color: #fff;
+  box-sizing: border-box;
+  accent-color: #fff;
+  scroll-behavior: smooth;
+  color: #fff;
+  padding: 0;
+  margin: 0
+}
+
+#head {
+  height: 100vh;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center
+}
+
+div#app{
+  border-radius: 2em;
+  overflow: hidden;
+}
+
+
+#title {
+  font-size: 6.5rem
+}
+
+#subtitle {
+  font-size: 2rem;
+  margin-bottom: 2rem
+}
+
+#head a {
+  background: #ff66ab;
+  font-size: 2rem;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: .5rem 2rem;
+  transition: all .2s ease;
+  text-decoration: none;
+  user-select: none
+}
+
+#head a:hover {
+  transform: scale(1.1)
+}
+
+#head a:active {
+  transform: scale(1)
+}
+
+*::selection {
+  background: #ff66ab33
+}
+
+.github-corner:hover .octo-arm {
+  animation: octocat-wave .56s ease-in-out
+}
+
+@keyframes octocat-wave {
+
+  0%,
+  to {
+    transform: rotate(0)
+  }
+
+  20%,
+  60% {
+    transform: rotate(-25deg)
+  }
+
+  40%,
+  80% {
+    transform: rotate(10deg)
+  }
+}
+
+@media (max-width:500px) {
+  .github-corner:hover .octo-arm {
+    animation: none
+  }
+
+  .github-corner .octo-arm {
+    animation: octocat-wave .56s ease-in-out
+  }
+}
+
 /* layout */
 
 body {
@@ -76,6 +175,11 @@ html {
   height: 100%;
 }
 
+.header
+{
+  border-radius: 1em 1em 0 0;
+}
+
 .w-locked {
   width: 1152px;
 }
@@ -99,7 +203,7 @@ html {
 }
 
 a.foot-link {
-  margin: 8px;
+  margin: 0.5em;
 }
 
 .container {
@@ -112,6 +216,7 @@ a.foot-link {
     -webkit-transform: translateY(5px);
     opacity: 0;
   }
+
   100% {
     -webkit-transform: translateY(0);
     opacity: 1;
@@ -157,12 +262,13 @@ a.foot-link {
 
 #app {
   width: 96vw;
-  transition: 0.2s ease; /* for responsive animation */
+  transition: 0.2s ease;
+  /* for responsive animation */
 }
 
 @media (min-width: 1140px) {
   #app {
-      width: 1140px;
+    width: 1140px;
   }
 }
 
@@ -173,6 +279,7 @@ a.foot-link {
   width: 100%;
   transition: 0.2s ease;
   min-height: 0rem;
+  backdrop-filter: blur(5px);
 }
 
 .navbar-logo {
@@ -232,23 +339,23 @@ a.foot-link {
 .navbar.is-primary .navbar-end .navbar-link.is-active,
 .navbar.is-primary .navbar-end .navbar-link:focus,
 .navbar.is-primary .navbar-end .navbar-link:hover,
-.navbar.is-primary .navbar-end > a.navbar-item.is-active,
-.navbar.is-primary .navbar-end > a.navbar-item:focus,
-.navbar.is-primary .navbar-end > a.navbar-item:hover,
+.navbar.is-primary .navbar-end>a.navbar-item.is-active,
+.navbar.is-primary .navbar-end>a.navbar-item:focus,
+.navbar.is-primary .navbar-end>a.navbar-item:hover,
 .navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link,
 .navbar.is-primary .navbar-item.has-dropdown:focus .navbar-link,
 .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link,
 .navbar.is-primary .navbar-start .navbar-link.is-active,
 .navbar.is-primary .navbar-start .navbar-link:focus,
 .navbar.is-primary .navbar-start .navbar-link:hover,
-.navbar.is-primary .navbar-start > a.navbar-item.is-active,
-.navbar.is-primary .navbar-start > a.navbar-item:focus,
-.navbar.is-primary .navbar-start > a.navbar-item:hover {
+.navbar.is-primary .navbar-start>a.navbar-item.is-active,
+.navbar.is-primary .navbar-start>a.navbar-item:focus,
+.navbar.is-primary .navbar-start>a.navbar-item:hover {
   background-color: transparent;
   color: #fff;
 }
 
-.navbar.is-primary .navbar-brand > a.navbar-item:hover {
+.navbar.is-primary .navbar-brand>a.navbar-item:hover {
   background-color: transparent;
   color: #fff;
 }
@@ -288,7 +395,7 @@ a.foot-link {
 }
 
 .bg-seccond {
-  background-color: hsl(var(--main),10%,15%);
+  background-color: hsl(var(--main), 10%, 15%);
 }
 
 /* auth notification */
@@ -317,7 +424,7 @@ a.foot-link {
 
 .noti-banner {
   display: flex;
-  padding: 8px;
+  padding: 0.5em;
   font-size: 12px;
   color: #fff;
   background-color: hsl(var(--main), 25%, 20%);
@@ -325,7 +432,8 @@ a.foot-link {
   flex-direction: column;
   text-align: center;
   position: relative;
-  border-radius: 10px;
+  border-radius: 0;
+  /* border-radius: 10px; */
 }
 
 .noti-banner {
@@ -424,9 +532,11 @@ a.foot-link {
   .noti-col-icon {
     display: none;
   }
+
   .noti-col-label {
     padding-bottom: 0;
   }
+
   .noti-col-label:after {
     height: 0px;
   }
@@ -621,7 +731,7 @@ a.foot-link {
 .score-stats-group {
   margin: 5px;
   display: grid;
-  grid-gap: 8px;
+  grid-gap: 0.5em;
   width: 100%;
 }
 
@@ -644,7 +754,7 @@ a.foot-link {
   text-align: center;
   background: hsl(var(--main), 25%, 20%);
   padding: 10px;
-  border-radius: 8px;
+  border-radius: 0.5em;
 }
 
 .score-stats-stat-row {
@@ -724,8 +834,9 @@ a.foot-link {
 body::-webkit-scrollbar {
   width: 12px;
   background-color: hsl(var(--main), 10%, 25%);
-  border-bottom-right-radius: 8px;
+  border-bottom-right-radius: 0.5em;
 }
+
 body::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-color: hsl(var(--main), 15%, 40%);
@@ -733,4 +844,29 @@ body::-webkit-scrollbar-thumb {
 
 [v-cloak] {
   display: none;
+}
+
+#u-search {
+  margin: 0;
+  max-width: 100%;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  outline: 0;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  text-align: left;
+  line-height: 1.2142em;
+  font-family: var(--font);
+  padding: 0.67861429em 1em;
+  background: #00000060;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  color: rgba(255, 255, 255, 0.93);
+  border-radius: 0.28571429rem;
+  -webkit-transition: box-shadow 0.1s ease, border-color 0.1s ease;
+  transition: box-shadow 0.1s ease, border-color 0.1s ease;
+  box-shadow: none;
+}
+
+.table-responsive {
+  overflow-x: scroll;
 }
\ No newline at end of file
diff --git a/static/js/_runtime-check.js b/static/js/_runtime-check.js
new file mode 100644
index 00000000..ecd5c46d
--- /dev/null
+++ b/static/js/_runtime-check.js
@@ -0,0 +1,8 @@
+/* eslint-disable no-unused-vars */
+
+// runtime check
+function _testGlobals ({ exists = [] } = {}, scope = globalThis || window) {
+  const result = exists.every(item => scope[item] !== undefined)
+
+  if (!result) throw new Error('runtime check failed: ')
+}
diff --git a/static/js/asserts/vue-flags.js b/static/js/asserts/vue-flags.js
deleted file mode 100644
index 98e2c92c..00000000
--- a/static/js/asserts/vue-flags.js
+++ /dev/null
@@ -1,254 +0,0 @@
-window.flags = {
-	'BD' : 'Bangladesh',
-	'BE' : 'Belgium',
-	'BF' : 'Burkina Faso',
-	'BG' : 'Bulgaria',
-	'BA' : 'Bosnia and Herzegovina',
-	'BB' : 'Barbados',
-	'WF' : 'Wallis and Futuna',
-	'BL' : 'Saint Barthelemy',
-	'BM' : 'Bermuda',
-	'BN' : 'Brunei',
-	'BO' : 'Bolivia',
-	'BH' : 'Bahrain',
-	'BI' : 'Burundi',
-	'BJ' : 'Benin',
-	'BT' : 'Bhutan',
-	'JM' : 'Jamaica',
-	'BV' : 'Bouvet Island',
-	'BW' : 'Botswana',
-	'WS' : 'Samoa',
-	'BQ' : 'Bonaire, Saint Eustatius and Saba',
-	'BR' : 'Brazil',
-	'BS' : 'Bahamas',
-	'JE' : 'Jersey',
-	'BY' : 'Belarus',
-	'BZ' : 'Belize',
-	'RU' : 'Russia',
-	'ussr' : "USSR",
-	'RW' : 'Rwanda',
-	'RS' : 'Serbia',
-	'TL' : 'East Timor',
-	'RE' : 'Reunion',
-	'TM' : 'Turkmenistan',
-	'TJ' : 'Tajikistan',
-	'RO' : 'Romania',
-	'TK' : 'Tokelau',
-	'GW' : 'Guinea-Bissau',
-	'GU' : 'Guam',
-	'GT' : 'Guatemala',
-	'GS' : 'South Georgia and the South Sandwich Islands',
-	'GR' : 'Greece',
-	'GQ' : 'Equatorial Guinea',
-	'GP' : 'Guadeloupe',
-	'JP' : 'Japan',
-	'GY' : 'Guyana',
-	'GG' : 'Guernsey',
-	'GF' : 'French Guiana',
-	'GE' : 'Georgia',
-	'GD' : 'Grenada',
-	'GB' : 'United Kingdom',
-	'GA' : 'Gabon',
-	'SV' : 'El Salvador',
-	'GN' : 'Guinea',
-	'GM' : 'Gambia',
-	'GL' : 'Greenland',
-	'GI' : 'Gibraltar',
-	'GH' : 'Ghana',
-	'OM' : 'Oman',
-	'TN' : 'Tunisia',
-	'JO' : 'Jordan',
-	'HR' : 'Croatia',
-	'HT' : 'Haiti',
-	'HU' : 'Hungary',
-	'HK' : 'Hong Kong',
-	'HN' : 'Honduras',
-	'HM' : 'Heard Island and McDonald Islands',
-	'VE' : 'Venezuela',
-	'PR' : 'Puerto Rico',
-	'PS' : 'Palestinian Territory',
-	'PW' : 'Palau',
-	'PT' : 'Portugal',
-	'SJ' : 'Svalbard and Jan Mayen',
-	'PY' : 'Paraguay',
-	'IQ' : 'Iraq',
-	'PA' : 'Panama',
-	'PF' : 'French Polynesia',
-	'PG' : 'Papua New Guinea',
-	'PE' : 'Peru',
-	'PK' : 'Pakistan',
-	'PH' : 'Philippines',
-	'PN' : 'Pitcairn',
-	'PL' : 'Poland',
-	'PM' : 'Saint Pierre and Miquelon',
-	'ZM' : 'Zambia',
-	'EH' : 'Western Sahara',
-	'EE' : 'Estonia',
-	'EG' : 'Egypt',
-	'ZA' : 'South Africa',
-	'EC' : 'Ecuador',
-	'IT' : 'Italy',
-	'VN' : 'Vietnam',
-	'SB' : 'Solomon Islands',
-	'ET' : 'Ethiopia',
-	'SO' : 'Somalia',
-	'ZW' : 'Zimbabwe',
-	'SA' : 'Saudi Arabia',
-	'ES' : 'Spain',
-	'ER' : 'Eritrea',
-	'ME' : 'Montenegro',
-	'MD' : 'Moldova',
-	'MG' : 'Madagascar',
-	'MF' : 'Saint Martin',
-	'MA' : 'Morocco',
-	'MC' : 'Monaco',
-	'UZ' : 'Uzbekistan',
-	'MM' : 'Myanmar',
-	'ML' : 'Mali',
-	'MO' : 'Macao',
-	'MN' : 'Mongolia',
-	'MH' : 'Marshall Islands',
-	'MK' : 'Macedonia',
-	'MU' : 'Mauritius',
-	'MT' : 'Malta',
-	'MW' : 'Malawi',
-	'MV' : 'Maldives',
-	'MQ' : 'Martinique',
-	'MP' : 'Northern Mariana Islands',
-	'MS' : 'Montserrat',
-	'MR' : 'Mauritania',
-	'IM' : 'Isle of Man',
-	'UG' : 'Uganda',
-	'TZ' : 'Tanzania',
-	'MY' : 'Malaysia',
-	'MX' : 'Mexico',
-	'IL' : 'Israel',
-	'FR' : 'France',
-	'IO' : 'British Indian Ocean Territory',
-	'SH' : 'Saint Helena',
-	'FI' : 'Finland',
-	'FJ' : 'Fiji',
-	'FK' : 'Falkland Islands',
-	'FM' : 'Micronesia',
-	'FO' : 'Faroe Islands',
-	'NI' : 'Nicaragua',
-	'NL' : 'Netherlands',
-	'NO' : 'Norway',
-	'NA' : 'Namibia',
-	'VU' : 'Vanuatu',
-	'NC' : 'New Caledonia',
-	'NE' : 'Niger',
-	'NF' : 'Norfolk Island',
-	'NG' : 'Nigeria',
-	'NZ' : 'New Zealand',
-	'NP' : 'Nepal',
-	'NR' : 'Nauru',
-	'NU' : 'Niue',
-	'CK' : 'Cook Islands',
-	'XK' : 'Kosovo',
-	'CI' : 'Ivory Coast',
-	'CH' : 'Switzerland',
-	'CO' : 'Colombia',
-	'CN' : 'China',
-	'CM' : 'Cameroon',
-	'CL' : 'Chile',
-	'CC' : 'Cocos Islands',
-	'CA' : 'Canada',
-	'CG' : 'Republic of the Congo',
-	'CF' : 'Central African Republic',
-	'CD' : 'Democratic Republic of the Congo',
-	'CZ' : 'Czech',
-	'CY' : 'Cyprus',
-	'CX' : 'Christmas Island',
-	'CR' : 'Costa Rica',
-	'CW' : 'Curacao',
-	'CV' : 'Cape Verde',
-	'CU' : 'Cuba',
-	'SZ' : 'Swaziland',
-	'SY' : 'Syria',
-	'SX' : 'Sint Maarten',
-	'KG' : 'Kyrgyzstan',
-	'KE' : 'Kenya',
-	'SS' : 'South Sudan',
-	'SR' : 'Suriname',
-	'KI' : 'Kiribati',
-	'KH' : 'Cambodia',
-	'KN' : 'Saint Kitts and Nevis',
-	'KM' : 'Comoros',
-	'ST' : 'Sao Tome and Principe',
-	'SK' : 'Slovakia',
-	'KR' : 'Korea',
-	'SI' : 'Slovenia',
-	'KP' : 'North Korea',
-	'KW' : 'Kuwait',
-	'SN' : 'Senegal',
-	'SM' : 'San Marino',
-	'SL' : 'Sierra Leone',
-	'SC' : 'Seychelles',
-	'KZ' : 'Kazakhstan',
-	'KY' : 'Cayman Islands',
-	'SG' : 'Singapore',
-	'SE' : 'Sweden',
-	'SD' : 'Sudan',
-	'DO' : 'Dominican Republic',
-	'DM' : 'Dominica',
-	'DJ' : 'Djibouti',
-	'DK' : 'Denmark',
-	'VG' : 'British Virgin Islands',
-	'DE' : 'Germany',
-	'YE' : 'Yemen',
-	'DZ' : 'Algeria',
-	'US' : 'United States',
-	'UY' : 'Uruguay',
-	'YT' : 'Mayotte',
-	'UM' : 'United States Minor Outlying Islands',
-	'LB' : 'Lebanon',
-	'LC' : 'Saint Lucia',
-	'LA' : 'Laos',
-	'TV' : 'Tuvalu',
-	'TW' : 'Taiwan',
-	'TT' : 'Trinidad and Tobago',
-	'TR' : 'Turkey',
-	'LK' : 'Sri Lanka',
-	'LI' : 'Liechtenstein',
-	'LV' : 'Latvia',
-	'TO' : 'Tonga',
-	'LT' : 'Lithuania',
-	'LU' : 'Luxembourg',
-	'LR' : 'Liberia',
-	'LS' : 'Lesotho',
-	'TH' : 'Thailand',
-	'TF' : 'French Southern Territories',
-	'TG' : 'Togo',
-	'TD' : 'Chad',
-	'TC' : 'Turks and Caicos Islands',
-	'LY' : 'Libya',
-	'VA' : 'Vatican',
-	'VC' : 'Saint Vincent and the Grenadines',
-	'AE' : 'United Arab Emirates',
-	'AD' : 'Andorra',
-	'AG' : 'Antigua and Barbuda',
-	'AF' : 'Afghanistan',
-	'AI' : 'Anguilla',
-	'VI' : 'U.S. Virgin Islands',
-	'IS' : 'Iceland',
-	'IR' : 'Iran',
-	'AM' : 'Armenia',
-	'AL' : 'Albania',
-	'AO' : 'Angola',
-	'AQ' : 'Antarctica',
-	'AS' : 'American Samoa',
-	'AR' : 'Argentina',
-	'AU' : 'Australia',
-	'AT' : 'Austria',
-	'AW' : 'Aruba',
-	'IN' : 'India',
-	'AX' : 'Aland Islands',
-	'AZ' : 'Azerbaijan',
-	'IE' : 'Ireland',
-	'ID' : 'Indonesia',
-	'UA' : 'Ukraine',
-	'QA' : 'Qatar',
-	'MZ' : 'Mozambique',
-	'XX' : 'Unknown',
-}
diff --git a/static/js/assets/jquery-min.js b/static/js/assets/jquery-min.js
new file mode 100644
index 00000000..9b173199
--- /dev/null
+++ b/static/js/assets/jquery-min.js
@@ -0,0 +1,2 @@
+/*! jQuery v3.6.1 | (c) OpenJS Foundation and other contributors | jquery.org/license */
+!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,y=n.hasOwnProperty,a=y.toString,l=a.call(Object),v={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.1",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}S.fn=S.prototype={jquery:f,constructor:S,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=S.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return S.each(this,e)},map:function(n){return this.pushStack(S.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(S.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(S.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},S.extend=S.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||m(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(S.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||S.isPlainObject(n)?n:{},i=!1,a[t]=S.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},S.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=y.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){b(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(p(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},makeArray:function(e,t){var n=t||[];return null!=e&&(p(Object(e))?S.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:i.call(t,e,n)},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(p(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return g(a)},guid:1,support:v}),"function"==typeof Symbol&&(S.fn[Symbol.iterator]=t[Symbol.iterator]),S.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var d=function(n){var e,d,b,o,i,h,f,g,w,u,l,T,C,a,E,y,s,c,v,S="sizzle"+1*new Date,p=n.document,k=0,r=0,m=ue(),x=ue(),A=ue(),N=ue(),j=function(e,t){return e===t&&(l=!0),0},D={}.hasOwnProperty,t=[],q=t.pop,L=t.push,H=t.push,O=t.slice,P=function(e,t){for(var n=0,r=e.length;n<r;n++)if(e[n]===t)return n;return-1},R="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",I="(?:\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\[^\\r\\n\\f]|[\\w-]|[^\0-\\x7f])+",W="\\["+M+"*("+I+")(?:"+M+"*([*^$|!~]?=)"+M+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+I+"))|)"+M+"*\\]",F=":("+I+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+W+")*)|.*)\\)|)",$=new RegExp(M+"+","g"),B=new RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),_=new RegExp("^"+M+"*,"+M+"*"),z=new RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&v(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!y||!y.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ve(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace(B,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ye(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ve(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],y=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="<a id='"+S+"'></a><select id='"+S+"-\r\\' msallowcapture=''><option selected=''></option></select>",e.querySelectorAll("[msallowcapture^='']").length&&y.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||y.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||y.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||y.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||y.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||y.push(".#.+[+~]"),e.querySelectorAll("\\\f"),y.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="<a href='' disabled='disabled'></a><select disabled='disabled'><option/></select>";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&y.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&y.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&y.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),y.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),y=y.length&&new RegExp(y.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),v=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&v(p,e)?-1:t==C||t.ownerDocument==p&&v(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!y||!y.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0<se(t,C,null,[e]).length},se.contains=function(e,t){return(e.ownerDocument||e)!=C&&T(e),v(e,t)},se.attr=function(e,t){(e.ownerDocument||e)!=C&&T(e);var n=b.attrHandle[t.toLowerCase()],r=n&&D.call(b.attrHandle,t.toLowerCase())?n(e,t,!E):void 0;return void 0!==r?r:d.attributes||!E?e.getAttribute(t):(r=e.getAttributeNode(t))&&r.specified?r.value:null},se.escape=function(e){return(e+"").replace(re,ie)},se.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},se.uniqueSort=function(e){var t,n=[],r=0,i=0;if(l=!d.detectDuplicates,u=!d.sortStable&&e.slice(0),e.sort(j),l){while(t=e[i++])t===e[i]&&(r=n.push(i));while(r--)e.splice(n[r],1)}return u=null,e},o=se.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=o(e)}else if(3===i||4===i)return e.nodeValue}else while(t=e[r++])n+=o(t);return n},(b=se.selectors={cacheLength:50,createPseudo:le,match:G,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1<t.indexOf(i):"$="===r?i&&t.slice(-i.length)===i:"~="===r?-1<(" "+t.replace($," ")+" ").indexOf(i):"|="===r&&(t===i||t.slice(0,i.length+1)===i+"-"))}},CHILD:function(h,e,t,g,y){var v="nth"!==h.slice(0,3),m="last"!==h.slice(-4),x="of-type"===e;return 1===g&&0===y?function(e){return!!e.parentNode}:function(e,t,n){var r,i,o,a,s,u,l=v!==m?"nextSibling":"previousSibling",c=e.parentNode,f=x&&e.nodeName.toLowerCase(),p=!n&&!x,d=!1;if(c){if(v){while(l){a=e;while(a=a[l])if(x?a.nodeName.toLowerCase()===f:1===a.nodeType)return!1;u=l="only"===h&&!u&&"nextSibling"}return!0}if(u=[m?c.firstChild:c.lastChild],m&&p){d=(s=(r=(i=(o=(a=c)[S]||(a[S]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===k&&r[1])&&r[2],a=s&&c.childNodes[s];while(a=++s&&a&&a[l]||(d=s=0)||u.pop())if(1===a.nodeType&&++d&&a===e){i[h]=[k,s,d];break}}else if(p&&(d=s=(r=(i=(o=(a=e)[S]||(a[S]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===k&&r[1]),!1===d)while(a=++s&&a&&a[l]||(d=s=0)||u.pop())if((x?a.nodeName.toLowerCase()===f:1===a.nodeType)&&++d&&(p&&((i=(o=a[S]||(a[S]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]=[k,d]),a===e))break;return(d-=y)===g||d%g==0&&0<=d/g}}},PSEUDO:function(e,o){var t,a=b.pseudos[e]||b.setFilters[e.toLowerCase()]||se.error("unsupported pseudo: "+e);return a[S]?a(o):1<a.length?(t=[e,e,"",o],b.setFilters.hasOwnProperty(e.toLowerCase())?le(function(e,t){var n,r=a(e,o),i=r.length;while(i--)e[n=P(e,r[i])]=!(t[n]=r[i])}):function(e){return a(e,0,t)}):a}},pseudos:{not:le(function(e){var r=[],i=[],s=f(e.replace(B,"$1"));return s[S]?le(function(e,t,n,r){var i,o=s(e,null,r,[]),a=e.length;while(a--)(i=o[a])&&(e[a]=!(t[a]=i))}):function(e,t,n){return r[0]=e,s(r,null,n,i),r[0]=null,!i.pop()}}),has:le(function(t){return function(e){return 0<se(t,e).length}}),contains:le(function(t){return t=t.replace(te,ne),function(e){return-1<(e.textContent||o(e)).indexOf(t)}}),lang:le(function(n){return V.test(n||"")||se.error("unsupported lang: "+n),n=n.replace(te,ne).toLowerCase(),function(e){var t;do{if(t=E?e.lang:e.getAttribute("xml:lang")||e.getAttribute("lang"))return(t=t.toLowerCase())===n||0===t.indexOf(n+"-")}while((e=e.parentNode)&&1===e.nodeType);return!1}}),target:function(e){var t=n.location&&n.location.hash;return t&&t.slice(1)===e.id},root:function(e){return e===a},focus:function(e){return e===C.activeElement&&(!C.hasFocus||C.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:ge(!1),disabled:ge(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!b.pseudos.empty(e)},header:function(e){return J.test(e.nodeName)},input:function(e){return Q.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:ye(function(){return[0]}),last:ye(function(e,t){return[t-1]}),eq:ye(function(e,t,n){return[n<0?n+t:n]}),even:ye(function(e,t){for(var n=0;n<t;n+=2)e.push(n);return e}),odd:ye(function(e,t){for(var n=1;n<t;n+=2)e.push(n);return e}),lt:ye(function(e,t,n){for(var r=n<0?n+t:t<n?t:n;0<=--r;)e.push(r);return e}),gt:ye(function(e,t,n){for(var r=n<0?n+t:n;++r<t;)e.push(r);return e})}}).pseudos.nth=b.pseudos.eq,{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})b.pseudos[e]=de(e);for(e in{submit:!0,reset:!0})b.pseudos[e]=he(e);function me(){}function xe(e){for(var t=0,n=e.length,r="";t<n;t++)r+=e[t].value;return r}function be(s,e,t){var u=e.dir,l=e.next,c=l||u,f=t&&"parentNode"===c,p=r++;return e.first?function(e,t,n){while(e=e[u])if(1===e.nodeType||f)return s(e,t,n);return!1}:function(e,t,n){var r,i,o,a=[k,p];if(n){while(e=e[u])if((1===e.nodeType||f)&&s(e,t,n))return!0}else while(e=e[u])if(1===e.nodeType||f)if(i=(o=e[S]||(e[S]={}))[e.uniqueID]||(o[e.uniqueID]={}),l&&l===e.nodeName.toLowerCase())e=e[u]||e;else{if((r=i[c])&&r[0]===k&&r[1]===p)return a[2]=r[2];if((i[c]=a)[2]=s(e,t,n))return!0}return!1}}function we(i){return 1<i.length?function(e,t,n){var r=i.length;while(r--)if(!i[r](e,t,n))return!1;return!0}:i[0]}function Te(e,t,n,r,i){for(var o,a=[],s=0,u=e.length,l=null!=t;s<u;s++)(o=e[s])&&(n&&!n(o,r,i)||(a.push(o),l&&t.push(s)));return a}function Ce(d,h,g,y,v,e){return y&&!y[S]&&(y=Ce(y)),v&&!v[S]&&(v=Ce(v,e)),le(function(e,t,n,r){var i,o,a,s=[],u=[],l=t.length,c=e||function(e,t,n){for(var r=0,i=t.length;r<i;r++)se(e,t[r],n);return n}(h||"*",n.nodeType?[n]:n,[]),f=!d||!e&&h?c:Te(c,s,d,n,r),p=g?v||(e?d:l||y)?[]:t:f;if(g&&g(f,p,n,r),y){i=Te(p,u),y(i,[],n,r),o=i.length;while(o--)(a=i[o])&&(p[u[o]]=!(f[u[o]]=a))}if(e){if(v||d){if(v){i=[],o=p.length;while(o--)(a=p[o])&&i.push(f[o]=a);v(null,p=[],i,r)}o=p.length;while(o--)(a=p[o])&&-1<(i=v?P(e,a):s[o])&&(e[i]=!(t[i]=a))}}else p=Te(p===t?p.splice(l,p.length):p),v?v(null,t,p,r):H.apply(t,p)})}function Ee(e){for(var i,t,n,r=e.length,o=b.relative[e[0].type],a=o||b.relative[" "],s=o?1:0,u=be(function(e){return e===i},a,!0),l=be(function(e){return-1<P(i,e)},a,!0),c=[function(e,t,n){var r=!o&&(n||t!==w)||((i=t).nodeType?u(e,t,n):l(e,t,n));return i=null,r}];s<r;s++)if(t=b.relative[e[s].type])c=[be(we(c),t)];else{if((t=b.filter[e[s].type].apply(null,e[s].matches))[S]){for(n=++s;n<r;n++)if(b.relative[e[n].type])break;return Ce(1<s&&we(c),1<s&&xe(e.slice(0,s-1).concat({value:" "===e[s-2].type?"*":""})).replace(B,"$1"),t,s<n&&Ee(e.slice(s,n)),n<r&&Ee(e=e.slice(n)),n<r&&xe(e))}c.push(t)}return we(c)}return me.prototype=b.filters=b.pseudos,b.setFilters=new me,h=se.tokenize=function(e,t){var n,r,i,o,a,s,u,l=x[e+" "];if(l)return t?0:l.slice(0);a=e,s=[],u=b.preFilter;while(a){for(o in n&&!(r=_.exec(a))||(r&&(a=a.slice(r[0].length)||a),s.push(i=[])),n=!1,(r=z.exec(a))&&(n=r.shift(),i.push({value:n,type:r[0].replace(B," ")}),a=a.slice(n.length)),b.filter)!(r=G[o].exec(a))||u[o]&&!(r=u[o](r))||(n=r.shift(),i.push({value:n,type:o,matches:r}),a=a.slice(n.length));if(!n)break}return t?a.length:a?se.error(e):x(e,s).slice(0)},f=se.compile=function(e,t){var n,y,v,m,x,r,i=[],o=[],a=A[e+" "];if(!a){t||(t=h(e)),n=t.length;while(n--)(a=Ee(t[n]))[S]?i.push(a):o.push(a);(a=A(e,(y=o,m=0<(v=i).length,x=0<y.length,r=function(e,t,n,r,i){var o,a,s,u=0,l="0",c=e&&[],f=[],p=w,d=e||x&&b.find.TAG("*",i),h=k+=null==p?1:Math.random()||.1,g=d.length;for(i&&(w=t==C||t||i);l!==g&&null!=(o=d[l]);l++){if(x&&o){a=0,t||o.ownerDocument==C||(T(o),n=!E);while(s=y[a++])if(s(o,t||C,n)){r.push(o);break}i&&(k=h)}m&&((o=!s&&o)&&u--,e&&c.push(o))}if(u+=l,m&&l!==u){a=0;while(s=v[a++])s(c,f,t,n);if(e){if(0<u)while(l--)c[l]||f[l]||(f[l]=q.call(r));f=Te(f)}H.apply(r,f),i&&!e&&0<f.length&&1<u+v.length&&se.uniqueSort(r)}return i&&(k=h,w=p),c},m?le(r):r))).selector=e}return a},g=se.select=function(e,t,n,r){var i,o,a,s,u,l="function"==typeof e&&e,c=!r&&h(e=l.selector||e);if(n=n||[],1===c.length){if(2<(o=c[0]=c[0].slice(0)).length&&"ID"===(a=o[0]).type&&9===t.nodeType&&E&&b.relative[o[1].type]){if(!(t=(b.find.ID(a.matches[0].replace(te,ne),t)||[])[0]))return n;l&&(t=t.parentNode),e=e.slice(o.shift().value.length)}i=G.needsContext.test(e)?0:o.length;while(i--){if(a=o[i],b.relative[s=a.type])break;if((u=b.find[s])&&(r=u(a.matches[0].replace(te,ne),ee.test(o[0].type)&&ve(t.parentNode)||t))){if(o.splice(i,1),!(e=r.length&&xe(o)))return H.apply(n,r),n;break}}}return(l||f(e,c))(r,t,!E,n,!t||ee.test(e)&&ve(t.parentNode)||t),n},d.sortStable=S.split("").sort(j).join("")===S,d.detectDuplicates=!!l,T(),d.sortDetached=ce(function(e){return 1&e.compareDocumentPosition(C.createElement("fieldset"))}),ce(function(e){return e.innerHTML="<a href='#'></a>","#"===e.firstChild.getAttribute("href")})||fe("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),d.attributes&&ce(function(e){return e.innerHTML="<input/>",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||fe("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),ce(function(e){return null==e.getAttribute("disabled")})||fe(R,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),se}(C);S.find=d,S.expr=d.selectors,S.expr[":"]=S.expr.pseudos,S.uniqueSort=S.unique=d.uniqueSort,S.text=d.getText,S.isXMLDoc=d.isXML,S.contains=d.contains,S.escapeSelector=d.escape;var h=function(e,t,n){var r=[],i=void 0!==n;while((e=e[t])&&9!==e.nodeType)if(1===e.nodeType){if(i&&S(e).is(n))break;r.push(e)}return r},T=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},k=S.expr.match.needsContext;function A(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}var N=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1<i.call(n,e)!==r}):S.filter(n,e,r)}S.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?S.find.matchesSelector(r,e)?[r]:[]:S.find.matches(e,S.grep(t,function(e){return 1===e.nodeType}))},S.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(S(e).filter(function(){for(t=0;t<r;t++)if(S.contains(i[t],this))return!0}));for(n=this.pushStack([]),t=0;t<r;t++)S.find(e,i[t],n);return 1<r?S.uniqueSort(n):n},filter:function(e){return this.pushStack(j(this,e||[],!1))},not:function(e){return this.pushStack(j(this,e||[],!0))},is:function(e){return!!j(this,"string"==typeof e&&k.test(e)?S(e):e||[],!1).length}});var D,q=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e<n;e++)if(S.contains(this,t[e]))return!0})},closest:function(e,t){var n,r=0,i=this.length,o=[],a="string"!=typeof e&&S(e);if(!k.test(e))for(;r<i;r++)for(n=this[r];n&&n!==t;n=n.parentNode)if(n.nodeType<11&&(a?-1<a.index(n):1===n.nodeType&&S.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(1<o.length?S.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?i.call(S(e),this[0]):i.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(S.uniqueSort(S.merge(this.get(),S(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),S.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return h(e,"parentNode")},parentsUntil:function(e,t,n){return h(e,"parentNode",n)},next:function(e){return O(e,"nextSibling")},prev:function(e){return O(e,"previousSibling")},nextAll:function(e){return h(e,"nextSibling")},prevAll:function(e){return h(e,"previousSibling")},nextUntil:function(e,t,n){return h(e,"nextSibling",n)},prevUntil:function(e,t,n){return h(e,"previousSibling",n)},siblings:function(e){return T((e.parentNode||{}).firstChild,e)},children:function(e){return T(e.firstChild)},contents:function(e){return null!=e.contentDocument&&r(e.contentDocument)?e.contentDocument:(A(e,"template")&&(e=e.content||e),S.merge([],e.childNodes))}},function(r,i){S.fn[r]=function(e,t){var n=S.map(this,i,e);return"Until"!==r.slice(-5)&&(t=e),t&&"string"==typeof t&&(n=S.filter(t,n)),1<this.length&&(H[r]||S.uniqueSort(n),L.test(r)&&n.reverse()),this.pushStack(n)}});var P=/[^\x20\t\r\n\f]+/g;function R(e){return e}function M(e){throw e}function I(e,t,n,r){var i;try{e&&m(i=e.promise)?i.call(e).done(t).fail(n):e&&m(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}S.Callbacks=function(r){var e,n;r="string"==typeof r?(e=r,n={},S.each(e.match(P)||[],function(e,t){n[t]=!0}),n):S.extend({},r);var i,t,o,a,s=[],u=[],l=-1,c=function(){for(a=a||r.once,o=i=!0;u.length;l=-1){t=u.shift();while(++l<s.length)!1===s[l].apply(t[0],t[1])&&r.stopOnFalse&&(l=s.length,t=!1)}r.memory||(t=!1),i=!1,a&&(s=t?[]:"")},f={add:function(){return s&&(t&&!i&&(l=s.length-1,u.push(t)),function n(e){S.each(e,function(e,t){m(t)?r.unique&&f.has(t)||s.push(t):t&&t.length&&"string"!==w(t)&&n(t)})}(arguments),t&&!i&&c()),this},remove:function(){return S.each(arguments,function(e,t){var n;while(-1<(n=S.inArray(t,s,n)))s.splice(n,1),n<=l&&l--}),this},has:function(e){return e?-1<S.inArray(e,s):0<s.length},empty:function(){return s&&(s=[]),this},disable:function(){return a=u=[],s=t="",this},disabled:function(){return!s},lock:function(){return a=u=[],t||i||(s=t=""),this},locked:function(){return!!a},fireWith:function(e,t){return a||(t=[e,(t=t||[]).slice?t.slice():t],u.push(t),i||c()),this},fire:function(){return f.fireWith(this,arguments),this},fired:function(){return!!o}};return f},S.extend({Deferred:function(e){var o=[["notify","progress",S.Callbacks("memory"),S.Callbacks("memory"),2],["resolve","done",S.Callbacks("once memory"),S.Callbacks("once memory"),0,"resolved"],["reject","fail",S.Callbacks("once memory"),S.Callbacks("once memory"),1,"rejected"]],i="pending",a={state:function(){return i},always:function(){return s.done(arguments).fail(arguments),this},"catch":function(e){return a.then(null,e)},pipe:function(){var i=arguments;return S.Deferred(function(r){S.each(o,function(e,t){var n=m(i[t[4]])&&i[t[4]];s[t[1]](function(){var e=n&&n.apply(this,arguments);e&&m(e.promise)?e.promise().progress(r.notify).done(r.resolve).fail(r.reject):r[t[0]+"With"](this,n?[e]:arguments)})}),i=null}).promise()},then:function(t,n,r){var u=0;function l(i,o,a,s){return function(){var n=this,r=arguments,e=function(){var e,t;if(!(i<u)){if((e=a.apply(n,r))===o.promise())throw new TypeError("Thenable self-resolution");t=e&&("object"==typeof e||"function"==typeof e)&&e.then,m(t)?s?t.call(e,l(u,o,R,s),l(u,o,M,s)):(u++,t.call(e,l(u,o,R,s),l(u,o,M,s),l(u,o,R,o.notifyWith))):(a!==R&&(n=void 0,r=[e]),(s||o.resolveWith)(n,r))}},t=s?e:function(){try{e()}catch(e){S.Deferred.exceptionHook&&S.Deferred.exceptionHook(e,t.stackTrace),u<=i+1&&(a!==M&&(n=void 0,r=[e]),o.rejectWith(n,r))}};i?t():(S.Deferred.getStackHook&&(t.stackTrace=S.Deferred.getStackHook()),C.setTimeout(t))}}return S.Deferred(function(e){o[0][3].add(l(0,e,m(r)?r:R,e.notifyWith)),o[1][3].add(l(0,e,m(t)?t:R)),o[2][3].add(l(0,e,m(n)?n:M))}).promise()},promise:function(e){return null!=e?S.extend(e,a):a}},s={};return S.each(o,function(e,t){var n=t[2],r=t[5];a[t[1]]=n.add,r&&n.add(function(){i=r},o[3-e][2].disable,o[3-e][3].disable,o[0][2].lock,o[0][3].lock),n.add(t[3].fire),s[t[0]]=function(){return s[t[0]+"With"](this===s?void 0:this,arguments),this},s[t[0]+"With"]=n.fireWith}),a.promise(s),e&&e.call(s,s),s},when:function(e){var n=arguments.length,t=n,r=Array(t),i=s.call(arguments),o=S.Deferred(),a=function(t){return function(e){r[t]=this,i[t]=1<arguments.length?s.call(arguments):e,--n||o.resolveWith(r,i)}};if(n<=1&&(I(e,o.done(a(t)).resolve,o.reject,!n),"pending"===o.state()||m(i[t]&&i[t].then)))return o.then();while(t--)I(i[t],a(t),o.reject);return o.promise()}});var W=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;S.Deferred.exceptionHook=function(e,t){C.console&&C.console.warn&&e&&W.test(e.name)&&C.console.warn("jQuery.Deferred exception: "+e.message,e.stack,t)},S.readyException=function(e){C.setTimeout(function(){throw e})};var F=S.Deferred();function $(){E.removeEventListener("DOMContentLoaded",$),C.removeEventListener("load",$),S.ready()}S.fn.ready=function(e){return F.then(e)["catch"](function(e){S.readyException(e)}),this},S.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--S.readyWait:S.isReady)||(S.isReady=!0)!==e&&0<--S.readyWait||F.resolveWith(E,[S])}}),S.ready.then=F.then,"complete"===E.readyState||"loading"!==E.readyState&&!E.documentElement.doScroll?C.setTimeout(S.ready):(E.addEventListener("DOMContentLoaded",$),C.addEventListener("load",$));var B=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===w(n))for(s in i=!0,n)B(e,t,s,n[s],!0,o,a);else if(void 0!==r&&(i=!0,m(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(S(e),n)})),t))for(;s<u;s++)t(e[s],n,a?r:r.call(e[s],s,t(e[s],n)));return i?e:l?t.call(e):u?t(e[0],n):o},_=/^-ms-/,z=/-([a-z])/g;function U(e,t){return t.toUpperCase()}function X(e){return e.replace(_,"ms-").replace(z,U)}var V=function(e){return 1===e.nodeType||9===e.nodeType||!+e.nodeType};function G(){this.expando=S.expando+G.uid++}G.uid=1,G.prototype={cache:function(e){var t=e[this.expando];return t||(t={},V(e)&&(e.nodeType?e[this.expando]=t:Object.defineProperty(e,this.expando,{value:t,configurable:!0}))),t},set:function(e,t,n){var r,i=this.cache(e);if("string"==typeof t)i[X(t)]=n;else for(r in t)i[X(r)]=t[r];return i},get:function(e,t){return void 0===t?this.cache(e):e[this.expando]&&e[this.expando][X(t)]},access:function(e,t,n){return void 0===t||t&&"string"==typeof t&&void 0===n?this.get(e,t):(this.set(e,t,n),void 0!==n?n:t)},remove:function(e,t){var n,r=e[this.expando];if(void 0!==r){if(void 0!==t){n=(t=Array.isArray(t)?t.map(X):(t=X(t))in r?[t]:t.match(P)||[]).length;while(n--)delete r[t[n]]}(void 0===t||S.isEmptyObject(r))&&(e.nodeType?e[this.expando]=void 0:delete e[this.expando])}},hasData:function(e){var t=e[this.expando];return void 0!==t&&!S.isEmptyObject(t)}};var Y=new G,Q=new G,J=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,K=/[A-Z]/g;function Z(e,t,n){var r,i;if(void 0===n&&1===e.nodeType)if(r="data-"+t.replace(K,"-$&").toLowerCase(),"string"==typeof(n=e.getAttribute(r))){try{n="true"===(i=n)||"false"!==i&&("null"===i?null:i===+i+""?+i:J.test(i)?JSON.parse(i):i)}catch(e){}Q.set(e,t,n)}else n=void 0;return n}S.extend({hasData:function(e){return Q.hasData(e)||Y.hasData(e)},data:function(e,t,n){return Q.access(e,t,n)},removeData:function(e,t){Q.remove(e,t)},_data:function(e,t,n){return Y.access(e,t,n)},_removeData:function(e,t){Y.remove(e,t)}}),S.fn.extend({data:function(n,e){var t,r,i,o=this[0],a=o&&o.attributes;if(void 0===n){if(this.length&&(i=Q.get(o),1===o.nodeType&&!Y.get(o,"hasDataAttrs"))){t=a.length;while(t--)a[t]&&0===(r=a[t].name).indexOf("data-")&&(r=X(r.slice(5)),Z(o,r,i[r]));Y.set(o,"hasDataAttrs",!0)}return i}return"object"==typeof n?this.each(function(){Q.set(this,n)}):B(this,function(e){var t;if(o&&void 0===e)return void 0!==(t=Q.get(o,n))?t:void 0!==(t=Z(o,n))?t:void 0;this.each(function(){Q.set(this,n,e)})},null,e,1<arguments.length,null,!0)},removeData:function(e){return this.each(function(){Q.remove(this,e)})}}),S.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=Y.get(e,t),n&&(!r||Array.isArray(n)?r=Y.access(e,t,S.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=S.queue(e,t),r=n.length,i=n.shift(),o=S._queueHooks(e,t);"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,function(){S.dequeue(e,t)},o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return Y.get(e,n)||Y.access(e,n,{empty:S.Callbacks("once memory").add(function(){Y.remove(e,[t+"queue",n])})})}}),S.fn.extend({queue:function(t,n){var e=2;return"string"!=typeof t&&(n=t,t="fx",e--),arguments.length<e?S.queue(this[0],t):void 0===n?this:this.each(function(){var e=S.queue(this,t,n);S._queueHooks(this,t),"fx"===t&&"inprogress"!==e[0]&&S.dequeue(this,t)})},dequeue:function(e){return this.each(function(){S.dequeue(this,e)})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,t){var n,r=1,i=S.Deferred(),o=this,a=this.length,s=function(){--r||i.resolveWith(o,[o])};"string"!=typeof e&&(t=e,e=void 0),e=e||"fx";while(a--)(n=Y.get(o[a],e+"queueHooks"))&&n.empty&&(r++,n.empty.add(s));return s(),i.promise(t)}});var ee=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,te=new RegExp("^(?:([+-])=|)("+ee+")([a-z%]*)$","i"),ne=["Top","Right","Bottom","Left"],re=E.documentElement,ie=function(e){return S.contains(e.ownerDocument,e)},oe={composed:!0};re.getRootNode&&(ie=function(e){return S.contains(e.ownerDocument,e)||e.getRootNode(oe)===e.ownerDocument});var ae=function(e,t){return"none"===(e=t||e).style.display||""===e.style.display&&ie(e)&&"none"===S.css(e,"display")};function se(e,t,n,r){var i,o,a=20,s=r?function(){return r.cur()}:function(){return S.css(e,t,"")},u=s(),l=n&&n[3]||(S.cssNumber[t]?"":"px"),c=e.nodeType&&(S.cssNumber[t]||"px"!==l&&+u)&&te.exec(S.css(e,t));if(c&&c[3]!==l){u/=2,l=l||c[3],c=+u||1;while(a--)S.style(e,t,c+l),(1-o)*(1-(o=s()/u||.5))<=0&&(a=0),c/=o;c*=2,S.style(e,t,c+l),n=n||[]}return n&&(c=+c||+u||0,i=n[1]?c+(n[1]+1)*n[2]:+n[2],r&&(r.unit=l,r.start=c,r.end=i)),i}var ue={};function le(e,t){for(var n,r,i,o,a,s,u,l=[],c=0,f=e.length;c<f;c++)(r=e[c]).style&&(n=r.style.display,t?("none"===n&&(l[c]=Y.get(r,"display")||null,l[c]||(r.style.display="")),""===r.style.display&&ae(r)&&(l[c]=(u=a=o=void 0,a=(i=r).ownerDocument,s=i.nodeName,(u=ue[s])||(o=a.body.appendChild(a.createElement(s)),u=S.css(o,"display"),o.parentNode.removeChild(o),"none"===u&&(u="block"),ue[s]=u)))):"none"!==n&&(l[c]="none",Y.set(r,"display",n)));for(c=0;c<f;c++)null!=l[c]&&(e[c].style.display=l[c]);return e}S.fn.extend({show:function(){return le(this,!0)},hide:function(){return le(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){ae(this)?S(this).show():S(this).hide()})}});var ce,fe,pe=/^(?:checkbox|radio)$/i,de=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),v.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="<textarea>x</textarea>",v.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="<option></option>",v.option=!!ce.lastChild;var ge={thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};function ye(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ve(e,t){for(var n=0,r=e.length;n<r;n++)Y.set(e[n],"globalEval",!t||Y.get(t[n],"globalEval"))}ge.tbody=ge.tfoot=ge.colgroup=ge.caption=ge.thead,ge.th=ge.td,v.option||(ge.optgroup=ge.option=[1,"<select multiple='multiple'>","</select>"]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d<h;d++)if((o=e[d])||0===o)if("object"===w(o))S.merge(p,o.nodeType?[o]:o);else if(me.test(o)){a=a||f.appendChild(t.createElement("div")),s=(de.exec(o)||["",""])[1].toLowerCase(),u=ge[s]||ge._default,a.innerHTML=u[1]+S.htmlPrefilter(o)+u[2],c=u[0];while(c--)a=a.lastChild;S.merge(p,a.childNodes),(a=f.firstChild).textContent=""}else p.push(t.createTextNode(o));f.textContent="",d=0;while(o=p[d++])if(r&&-1<S.inArray(o,r))i&&i.push(o);else if(l=ie(o),a=ye(f.appendChild(o),"script"),l&&ve(a),n){c=0;while(o=a[c++])he.test(o.type||"")&&n.push(o)}return f}var be=/^([^.]*)(?:\.(.+)|)/;function we(){return!0}function Te(){return!1}function Ce(e,t){return e===function(){try{return E.activeElement}catch(e){}}()==("focus"===t)}function Ee(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Ee(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Te;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return S().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=S.guid++)),e.each(function(){S.event.add(this,t,i,r,n)})}function Se(e,i,o){o?(Y.set(e,i,!1),S.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=Y.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(S.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),Y.set(this,i,r),t=o(this,i),this[i](),r!==(n=Y.get(this,i))||t?Y.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n&&n.value}else r.length&&(Y.set(this,i,{value:S.event.trigger(S.extend(r[0],S.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===Y.get(e,i)&&S.event.add(e,i,we)}S.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,y=Y.get(t);if(V(t)){n.handler&&(n=(o=n).handler,i=o.selector),i&&S.find.matchesSelector(re,i),n.guid||(n.guid=S.guid++),(u=y.events)||(u=y.events=Object.create(null)),(a=y.handle)||(a=y.handle=function(e){return"undefined"!=typeof S&&S.event.triggered!==e.type?S.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(P)||[""]).length;while(l--)d=g=(s=be.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=S.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=S.event.special[d]||{},c=S.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&S.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(d,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),S.event.global[d]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,y=Y.hasData(e)&&Y.get(e);if(y&&(u=y.events)){l=(t=(t||"").match(P)||[""]).length;while(l--)if(d=g=(s=be.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d){f=S.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;while(o--)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,y.handle)||S.removeEvent(e,d,y.handle),delete u[d])}else for(d in u)S.event.remove(e,d+t[l],n,r,!0);S.isEmptyObject(u)&&Y.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=new Array(arguments.length),u=S.event.fix(e),l=(Y.get(this,"events")||Object.create(null))[u.type]||[],c=S.event.special[u.type]||{};for(s[0]=u,t=1;t<arguments.length;t++)s[t]=arguments[t];if(u.delegateTarget=this,!c.preDispatch||!1!==c.preDispatch.call(this,u)){a=S.event.handlers.call(this,u,l),t=0;while((i=a[t++])&&!u.isPropagationStopped()){u.currentTarget=i.elem,n=0;while((o=i.handlers[n++])&&!u.isImmediatePropagationStopped())u.rnamespace&&!1!==o.namespace&&!u.rnamespace.test(o.namespace)||(u.handleObj=o,u.data=o.data,void 0!==(r=((S.event.special[o.origType]||{}).handle||o.handler).apply(i.elem,s))&&!1===(u.result=r)&&(u.preventDefault(),u.stopPropagation()))}return c.postDispatch&&c.postDispatch.call(this,u),u.result}},handlers:function(e,t){var n,r,i,o,a,s=[],u=t.delegateCount,l=e.target;if(u&&l.nodeType&&!("click"===e.type&&1<=e.button))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n<u;n++)void 0===a[i=(r=t[n]).selector+" "]&&(a[i]=r.needsContext?-1<S(i,this).index(l):S.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u<t.length&&s.push({elem:l,handlers:t.slice(u)}),s},addProp:function(t,e){Object.defineProperty(S.Event.prototype,t,{enumerable:!0,configurable:!0,get:m(e)?function(){if(this.originalEvent)return e(this.originalEvent)}:function(){if(this.originalEvent)return this.originalEvent[t]},set:function(e){Object.defineProperty(this,t,{enumerable:!0,configurable:!0,writable:!0,value:e})}})},fix:function(e){return e[S.expando]?e:new S.Event(e)},special:{load:{noBubble:!0},click:{setup:function(e){var t=this||e;return pe.test(t.type)&&t.click&&A(t,"input")&&Se(t,"click",we),!1},trigger:function(e){var t=this||e;return pe.test(t.type)&&t.click&&A(t,"input")&&Se(t,"click"),!0},_default:function(e){var t=e.target;return pe.test(t.type)&&t.click&&A(t,"input")&&Y.get(t,"click")||A(t,"a")}},beforeunload:{postDispatch:function(e){void 0!==e.result&&e.originalEvent&&(e.originalEvent.returnValue=e.result)}}}},S.removeEvent=function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n)},S.Event=function(e,t){if(!(this instanceof S.Event))return new S.Event(e,t);e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||void 0===e.defaultPrevented&&!1===e.returnValue?we:Te,this.target=e.target&&3===e.target.nodeType?e.target.parentNode:e.target,this.currentTarget=e.currentTarget,this.relatedTarget=e.relatedTarget):this.type=e,t&&S.extend(this,t),this.timeStamp=e&&e.timeStamp||Date.now(),this[S.expando]=!0},S.Event.prototype={constructor:S.Event,isDefaultPrevented:Te,isPropagationStopped:Te,isImmediatePropagationStopped:Te,isSimulated:!1,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=we,e&&!this.isSimulated&&e.preventDefault()},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=we,e&&!this.isSimulated&&e.stopPropagation()},stopImmediatePropagation:function(){var e=this.originalEvent;this.isImmediatePropagationStopped=we,e&&!this.isSimulated&&e.stopImmediatePropagation(),this.stopPropagation()}},S.each({altKey:!0,bubbles:!0,cancelable:!0,changedTouches:!0,ctrlKey:!0,detail:!0,eventPhase:!0,metaKey:!0,pageX:!0,pageY:!0,shiftKey:!0,view:!0,"char":!0,code:!0,charCode:!0,key:!0,keyCode:!0,button:!0,buttons:!0,clientX:!0,clientY:!0,offsetX:!0,offsetY:!0,pointerId:!0,pointerType:!0,screenX:!0,screenY:!0,targetTouches:!0,toElement:!0,touches:!0,which:!0},S.event.addProp),S.each({focus:"focusin",blur:"focusout"},function(t,e){S.event.special[t]={setup:function(){return Se(this,t,Ce),!1},trigger:function(){return Se(this,t),!0},_default:function(e){return Y.get(e.target,t)},delegateType:e}}),S.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(e,i){S.event.special[e]={delegateType:i,bindType:i,handle:function(e){var t,n=e.relatedTarget,r=e.handleObj;return n&&(n===this||S.contains(this,n))||(e.type=r.origType,t=r.handler.apply(this,arguments),e.type=i),t}}}),S.fn.extend({on:function(e,t,n,r){return Ee(this,e,t,n,r)},one:function(e,t,n,r){return Ee(this,e,t,n,r,1)},off:function(e,t,n){var r,i;if(e&&e.preventDefault&&e.handleObj)return r=e.handleObj,S(e.delegateTarget).off(r.namespace?r.origType+"."+r.namespace:r.origType,r.selector,r.handler),this;if("object"==typeof e){for(i in e)this.off(i,t,e[i]);return this}return!1!==t&&"function"!=typeof t||(n=t,t=void 0),!1===n&&(n=Te),this.each(function(){S.event.remove(this,e,n,t)})}});var ke=/<script|<style|<link/i,Ae=/checked\s*(?:[^=]|=\s*.checked.)/i,Ne=/^\s*<!\[CDATA\[|\]\]>\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n<r;n++)S.event.add(t,i,s[i][n]);Q.hasData(e)&&(o=Q.access(e),a=S.extend({},o),Q.set(t,a))}}function He(n,r,i,o){r=g(r);var e,t,a,s,u,l,c=0,f=n.length,p=f-1,d=r[0],h=m(d);if(h||1<f&&"string"==typeof d&&!v.checkClone&&Ae.test(d))return n.each(function(e){var t=n.eq(e);h&&(r[0]=d.call(this,e,t.html())),He(t,r,i,o)});if(f&&(t=(e=xe(r,n[0].ownerDocument,!1,n,o)).firstChild,1===e.childNodes.length&&(e=t),t||o)){for(s=(a=S.map(ye(e,"script"),De)).length;c<f;c++)u=e,c!==p&&(u=S.clone(u,!0,!0),s&&S.merge(a,ye(u,"script"))),i.call(n[c],u,c);if(s)for(l=a[a.length-1].ownerDocument,S.map(a,qe),c=0;c<s;c++)u=a[c],he.test(u.type||"")&&!Y.access(u,"globalEval")&&S.contains(l,u)&&(u.src&&"module"!==(u.type||"").toLowerCase()?S._evalUrl&&!u.noModule&&S._evalUrl(u.src,{nonce:u.nonce||u.getAttribute("nonce")},l):b(u.textContent.replace(Ne,""),u,l))}return n}function Oe(e,t,n){for(var r,i=t?S.filter(t,e):e,o=0;null!=(r=i[o]);o++)n||1!==r.nodeType||S.cleanData(ye(r)),r.parentNode&&(n&&ie(r)&&ve(ye(r,"script")),r.parentNode.removeChild(r));return e}S.extend({htmlPrefilter:function(e){return e},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=ie(e);if(!(v.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||S.isXMLDoc(e)))for(a=ye(c),r=0,i=(o=ye(e)).length;r<i;r++)s=o[r],u=a[r],void 0,"input"===(l=u.nodeName.toLowerCase())&&pe.test(s.type)?u.checked=s.checked:"input"!==l&&"textarea"!==l||(u.defaultValue=s.defaultValue);if(t)if(n)for(o=o||ye(e),a=a||ye(c),r=0,i=o.length;r<i;r++)Le(o[r],a[r]);else Le(e,c);return 0<(a=ye(c,"script")).length&&ve(a,!f&&ye(e,"script")),c},cleanData:function(e){for(var t,n,r,i=S.event.special,o=0;void 0!==(n=e[o]);o++)if(V(n)){if(t=n[Y.expando]){if(t.events)for(r in t.events)i[r]?S.event.remove(n,r):S.removeEvent(n,r,t.handle);n[Y.expando]=void 0}n[Q.expando]&&(n[Q.expando]=void 0)}}}),S.fn.extend({detach:function(e){return Oe(this,e,!0)},remove:function(e){return Oe(this,e)},text:function(e){return B(this,function(e){return void 0===e?S.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return He(this,arguments,function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||je(this,e).appendChild(e)})},prepend:function(){return He(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=je(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return He(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return He(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(S.cleanData(ye(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return S.clone(this,e,t)})},html:function(e){return B(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!ke.test(e)&&!ge[(de.exec(e)||["",""])[1].toLowerCase()]){e=S.htmlPrefilter(e);try{for(;n<r;n++)1===(t=this[n]||{}).nodeType&&(S.cleanData(ye(t,!1)),t.innerHTML=e);t=0}catch(e){}}t&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(){var n=[];return He(this,arguments,function(e){var t=this.parentNode;S.inArray(this,n)<0&&(S.cleanData(ye(this)),t&&t.replaceChild(e,this))},n)}}),S.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,a){S.fn[e]=function(e){for(var t,n=[],r=S(e),i=r.length-1,o=0;o<=i;o++)t=o===i?this:this.clone(!0),S(r[o])[a](t),u.apply(n,t.get());return this.pushStack(n)}});var Pe=new RegExp("^("+ee+")(?!px)[a-z%]+$","i"),Re=/^--/,Me=function(e){var t=e.ownerDocument.defaultView;return t&&t.opener||(t=C),t.getComputedStyle(e)},Ie=function(e,t,n){var r,i,o={};for(i in t)o[i]=e.style[i],e.style[i]=t[i];for(i in r=n.call(e),t)e.style[i]=o[i];return r},We=new RegExp(ne.join("|"),"i"),Fe="[\\x20\\t\\r\\n\\f]",$e=new RegExp("^"+Fe+"+|((?:^|[^\\\\])(?:\\\\.)*)"+Fe+"+$","g");function Be(e,t,n){var r,i,o,a,s=Re.test(t),u=e.style;return(n=n||Me(e))&&(a=n.getPropertyValue(t)||n[t],s&&(a=a.replace($e,"$1")),""!==a||ie(e)||(a=S.style(e,t)),!v.pixelBoxStyles()&&Pe.test(a)&&We.test(t)&&(r=u.width,i=u.minWidth,o=u.maxWidth,u.minWidth=u.maxWidth=u.width=a,a=n.width,u.width=r,u.minWidth=i,u.maxWidth=o)),void 0!==a?a+"":a}function _e(e,t){return{get:function(){if(!e())return(this.get=t).apply(this,arguments);delete this.get}}}!function(){function e(){if(l){u.style.cssText="position:absolute;left:-11111px;width:60px;margin-top:1px;padding:0;border:0",l.style.cssText="position:relative;display:block;box-sizing:border-box;overflow:scroll;margin:auto;border:1px;padding:1px;width:60%;top:1%",re.appendChild(u).appendChild(l);var e=C.getComputedStyle(l);n="1%"!==e.top,s=12===t(e.marginLeft),l.style.right="60%",o=36===t(e.right),r=36===t(e.width),l.style.position="absolute",i=12===t(l.offsetWidth/3),re.removeChild(u),l=null}}function t(e){return Math.round(parseFloat(e))}var n,r,i,o,a,s,u=E.createElement("div"),l=E.createElement("div");l.style&&(l.style.backgroundClip="content-box",l.cloneNode(!0).style.backgroundClip="",v.clearCloneStyle="content-box"===l.style.backgroundClip,S.extend(v,{boxSizingReliable:function(){return e(),r},pixelBoxStyles:function(){return e(),o},pixelPosition:function(){return e(),n},reliableMarginLeft:function(){return e(),s},scrollboxSize:function(){return e(),i},reliableTrDimensions:function(){var e,t,n,r;return null==a&&(e=E.createElement("table"),t=E.createElement("tr"),n=E.createElement("div"),e.style.cssText="position:absolute;left:-11111px;border-collapse:separate",t.style.cssText="border:1px solid",t.style.height="1px",n.style.height="9px",n.style.display="block",re.appendChild(e).appendChild(t).appendChild(n),r=C.getComputedStyle(t),a=parseInt(r.height,10)+parseInt(r.borderTopWidth,10)+parseInt(r.borderBottomWidth,10)===t.offsetHeight,re.removeChild(e)),a}}))}();var ze=["Webkit","Moz","ms"],Ue=E.createElement("div").style,Xe={};function Ve(e){var t=S.cssProps[e]||Xe[e];return t||(e in Ue?e:Xe[e]=function(e){var t=e[0].toUpperCase()+e.slice(1),n=ze.length;while(n--)if((e=ze[n]+t)in Ue)return e}(e)||e)}var Ge=/^(none|table(?!-c[ea]).+)/,Ye={position:"absolute",visibility:"hidden",display:"block"},Qe={letterSpacing:"0",fontWeight:"400"};function Je(e,t,n){var r=te.exec(t);return r?Math.max(0,r[2]-(n||0))+(r[3]||"px"):t}function Ke(e,t,n,r,i,o){var a="width"===t?1:0,s=0,u=0;if(n===(r?"border":"content"))return 0;for(;a<4;a+=2)"margin"===n&&(u+=S.css(e,n+ne[a],!0,i)),r?("content"===n&&(u-=S.css(e,"padding"+ne[a],!0,i)),"margin"!==n&&(u-=S.css(e,"border"+ne[a]+"Width",!0,i))):(u+=S.css(e,"padding"+ne[a],!0,i),"padding"!==n?u+=S.css(e,"border"+ne[a]+"Width",!0,i):s+=S.css(e,"border"+ne[a]+"Width",!0,i));return!r&&0<=o&&(u+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-o-u-s-.5))||0),u}function Ze(e,t,n){var r=Me(e),i=(!v.boxSizingReliable()||n)&&"border-box"===S.css(e,"boxSizing",!1,r),o=i,a=Be(e,t,r),s="offset"+t[0].toUpperCase()+t.slice(1);if(Pe.test(a)){if(!n)return a;a="auto"}return(!v.boxSizingReliable()&&i||!v.reliableTrDimensions()&&A(e,"tr")||"auto"===a||!parseFloat(a)&&"inline"===S.css(e,"display",!1,r))&&e.getClientRects().length&&(i="border-box"===S.css(e,"boxSizing",!1,r),(o=s in e)&&(a=e[s])),(a=parseFloat(a)||0)+Ke(e,t,n||(i?"border":"content"),o,r,a)+"px"}function et(e,t,n,r,i){return new et.prototype.init(e,t,n,r,i)}S.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Be(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,gridArea:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnStart:!0,gridRow:!0,gridRowEnd:!0,gridRowStart:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,o,a,s=X(t),u=Re.test(t),l=e.style;if(u||(t=Ve(s)),a=S.cssHooks[t]||S.cssHooks[s],void 0===n)return a&&"get"in a&&void 0!==(i=a.get(e,!1,r))?i:l[t];"string"===(o=typeof n)&&(i=te.exec(n))&&i[1]&&(n=se(e,t,i),o="number"),null!=n&&n==n&&("number"!==o||u||(n+=i&&i[3]||(S.cssNumber[s]?"":"px")),v.clearCloneStyle||""!==n||0!==t.indexOf("background")||(l[t]="inherit"),a&&"set"in a&&void 0===(n=a.set(e,n,r))||(u?l.setProperty(t,n):l[t]=n))}},css:function(e,t,n,r){var i,o,a,s=X(t);return Re.test(t)||(t=Ve(s)),(a=S.cssHooks[t]||S.cssHooks[s])&&"get"in a&&(i=a.get(e,!0,n)),void 0===i&&(i=Be(e,t,r)),"normal"===i&&t in Qe&&(i=Qe[t]),""===n||n?(o=parseFloat(i),!0===n||isFinite(o)?o||0:i):i}}),S.each(["height","width"],function(e,u){S.cssHooks[u]={get:function(e,t,n){if(t)return!Ge.test(S.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?Ze(e,u,n):Ie(e,Ye,function(){return Ze(e,u,n)})},set:function(e,t,n){var r,i=Me(e),o=!v.scrollboxSize()&&"absolute"===i.position,a=(o||n)&&"border-box"===S.css(e,"boxSizing",!1,i),s=n?Ke(e,u,n,a,i):0;return a&&o&&(s-=Math.ceil(e["offset"+u[0].toUpperCase()+u.slice(1)]-parseFloat(i[u])-Ke(e,u,"border",!1,i)-.5)),s&&(r=te.exec(t))&&"px"!==(r[3]||"px")&&(e.style[u]=t,t=S.css(e,u)),Je(0,t,s)}}}),S.cssHooks.marginLeft=_e(v.reliableMarginLeft,function(e,t){if(t)return(parseFloat(Be(e,"marginLeft"))||e.getBoundingClientRect().left-Ie(e,{marginLeft:0},function(){return e.getBoundingClientRect().left}))+"px"}),S.each({margin:"",padding:"",border:"Width"},function(i,o){S.cssHooks[i+o]={expand:function(e){for(var t=0,n={},r="string"==typeof e?e.split(" "):[e];t<4;t++)n[i+ne[t]+o]=r[t]||r[t-2]||r[0];return n}},"margin"!==i&&(S.cssHooks[i+o].set=Je)}),S.fn.extend({css:function(e,t){return B(this,function(e,t,n){var r,i,o={},a=0;if(Array.isArray(t)){for(r=Me(e),i=t.length;a<i;a++)o[t[a]]=S.css(e,t[a],!1,r);return o}return void 0!==n?S.style(e,t,n):S.css(e,t)},e,t,1<arguments.length)}}),((S.Tween=et).prototype={constructor:et,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||S.easing._default,this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(S.cssNumber[n]?"":"px")},cur:function(){var e=et.propHooks[this.prop];return e&&e.get?e.get(this):et.propHooks._default.get(this)},run:function(e){var t,n=et.propHooks[this.prop];return this.options.duration?this.pos=t=S.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):this.pos=t=e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):et.propHooks._default.set(this),this}}).init.prototype=et.prototype,(et.propHooks={_default:{get:function(e){var t;return 1!==e.elem.nodeType||null!=e.elem[e.prop]&&null==e.elem.style[e.prop]?e.elem[e.prop]:(t=S.css(e.elem,e.prop,""))&&"auto"!==t?t:0},set:function(e){S.fx.step[e.prop]?S.fx.step[e.prop](e):1!==e.elem.nodeType||!S.cssHooks[e.prop]&&null==e.elem.style[Ve(e.prop)]?e.elem[e.prop]=e.now:S.style(e.elem,e.prop,e.now+e.unit)}}}).scrollTop=et.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},S.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},_default:"swing"},S.fx=et.prototype.init,S.fx.step={};var tt,nt,rt,it,ot=/^(?:toggle|show|hide)$/,at=/queueHooks$/;function st(){nt&&(!1===E.hidden&&C.requestAnimationFrame?C.requestAnimationFrame(st):C.setTimeout(st,S.fx.interval),S.fx.tick())}function ut(){return C.setTimeout(function(){tt=void 0}),tt=Date.now()}function lt(e,t){var n,r=0,i={height:e};for(t=t?1:0;r<4;r+=2-t)i["margin"+(n=ne[r])]=i["padding"+n]=e;return t&&(i.opacity=i.width=e),i}function ct(e,t,n){for(var r,i=(ft.tweeners[t]||[]).concat(ft.tweeners["*"]),o=0,a=i.length;o<a;o++)if(r=i[o].call(n,t,e))return r}function ft(o,e,t){var n,a,r=0,i=ft.prefilters.length,s=S.Deferred().always(function(){delete u.elem}),u=function(){if(a)return!1;for(var e=tt||ut(),t=Math.max(0,l.startTime+l.duration-e),n=1-(t/l.duration||0),r=0,i=l.tweens.length;r<i;r++)l.tweens[r].run(n);return s.notifyWith(o,[l,n,t]),n<1&&i?t:(i||s.notifyWith(o,[l,1,0]),s.resolveWith(o,[l]),!1)},l=s.promise({elem:o,props:S.extend({},e),opts:S.extend(!0,{specialEasing:{},easing:S.easing._default},t),originalProperties:e,originalOptions:t,startTime:tt||ut(),duration:t.duration,tweens:[],createTween:function(e,t){var n=S.Tween(o,l.opts,e,t,l.opts.specialEasing[e]||l.opts.easing);return l.tweens.push(n),n},stop:function(e){var t=0,n=e?l.tweens.length:0;if(a)return this;for(a=!0;t<n;t++)l.tweens[t].run(1);return e?(s.notifyWith(o,[l,1,0]),s.resolveWith(o,[l,e])):s.rejectWith(o,[l,e]),this}}),c=l.props;for(!function(e,t){var n,r,i,o,a;for(n in e)if(i=t[r=X(n)],o=e[n],Array.isArray(o)&&(i=o[1],o=e[n]=o[0]),n!==r&&(e[r]=o,delete e[n]),(a=S.cssHooks[r])&&"expand"in a)for(n in o=a.expand(o),delete e[r],o)n in e||(e[n]=o[n],t[n]=i);else t[r]=i}(c,l.opts.specialEasing);r<i;r++)if(n=ft.prefilters[r].call(l,o,c,l.opts))return m(n.stop)&&(S._queueHooks(l.elem,l.opts.queue).stop=n.stop.bind(n)),n;return S.map(c,ct,l),m(l.opts.start)&&l.opts.start.call(o,l),l.progress(l.opts.progress).done(l.opts.done,l.opts.complete).fail(l.opts.fail).always(l.opts.always),S.fx.timer(S.extend(u,{elem:o,anim:l,queue:l.opts.queue})),l}S.Animation=S.extend(ft,{tweeners:{"*":[function(e,t){var n=this.createTween(e,t);return se(n.elem,e,te.exec(t),n),n}]},tweener:function(e,t){m(e)?(t=e,e=["*"]):e=e.match(P);for(var n,r=0,i=e.length;r<i;r++)n=e[r],ft.tweeners[n]=ft.tweeners[n]||[],ft.tweeners[n].unshift(t)},prefilters:[function(e,t,n){var r,i,o,a,s,u,l,c,f="width"in t||"height"in t,p=this,d={},h=e.style,g=e.nodeType&&ae(e),y=Y.get(e,"fxshow");for(r in n.queue||(null==(a=S._queueHooks(e,"fx")).unqueued&&(a.unqueued=0,s=a.empty.fire,a.empty.fire=function(){a.unqueued||s()}),a.unqueued++,p.always(function(){p.always(function(){a.unqueued--,S.queue(e,"fx").length||a.empty.fire()})})),t)if(i=t[r],ot.test(i)){if(delete t[r],o=o||"toggle"===i,i===(g?"hide":"show")){if("show"!==i||!y||void 0===y[r])continue;g=!0}d[r]=y&&y[r]||S.style(e,r)}if((u=!S.isEmptyObject(t))||!S.isEmptyObject(d))for(r in f&&1===e.nodeType&&(n.overflow=[h.overflow,h.overflowX,h.overflowY],null==(l=y&&y.display)&&(l=Y.get(e,"display")),"none"===(c=S.css(e,"display"))&&(l?c=l:(le([e],!0),l=e.style.display||l,c=S.css(e,"display"),le([e]))),("inline"===c||"inline-block"===c&&null!=l)&&"none"===S.css(e,"float")&&(u||(p.done(function(){h.display=l}),null==l&&(c=h.display,l="none"===c?"":c)),h.display="inline-block")),n.overflow&&(h.overflow="hidden",p.always(function(){h.overflow=n.overflow[0],h.overflowX=n.overflow[1],h.overflowY=n.overflow[2]})),u=!1,d)u||(y?"hidden"in y&&(g=y.hidden):y=Y.access(e,"fxshow",{display:l}),o&&(y.hidden=!g),g&&le([e],!0),p.done(function(){for(r in g||le([e]),Y.remove(e,"fxshow"),d)S.style(e,r,d[r])})),u=ct(g?y[r]:0,r,p),r in y||(y[r]=u.start,g&&(u.end=u.start,u.start=0))}],prefilter:function(e,t){t?ft.prefilters.unshift(e):ft.prefilters.push(e)}}),S.speed=function(e,t,n){var r=e&&"object"==typeof e?S.extend({},e):{complete:n||!n&&t||m(e)&&e,duration:e,easing:n&&t||t&&!m(t)&&t};return S.fx.off?r.duration=0:"number"!=typeof r.duration&&(r.duration in S.fx.speeds?r.duration=S.fx.speeds[r.duration]:r.duration=S.fx.speeds._default),null!=r.queue&&!0!==r.queue||(r.queue="fx"),r.old=r.complete,r.complete=function(){m(r.old)&&r.old.call(this),r.queue&&S.dequeue(this,r.queue)},r},S.fn.extend({fadeTo:function(e,t,n,r){return this.filter(ae).css("opacity",0).show().end().animate({opacity:t},e,n,r)},animate:function(t,e,n,r){var i=S.isEmptyObject(t),o=S.speed(e,n,r),a=function(){var e=ft(this,S.extend({},t),o);(i||Y.get(this,"finish"))&&e.stop(!0)};return a.finish=a,i||!1===o.queue?this.each(a):this.queue(o.queue,a)},stop:function(i,e,o){var a=function(e){var t=e.stop;delete e.stop,t(o)};return"string"!=typeof i&&(o=e,e=i,i=void 0),e&&this.queue(i||"fx",[]),this.each(function(){var e=!0,t=null!=i&&i+"queueHooks",n=S.timers,r=Y.get(this);if(t)r[t]&&r[t].stop&&a(r[t]);else for(t in r)r[t]&&r[t].stop&&at.test(t)&&a(r[t]);for(t=n.length;t--;)n[t].elem!==this||null!=i&&n[t].queue!==i||(n[t].anim.stop(o),e=!1,n.splice(t,1));!e&&o||S.dequeue(this,i)})},finish:function(a){return!1!==a&&(a=a||"fx"),this.each(function(){var e,t=Y.get(this),n=t[a+"queue"],r=t[a+"queueHooks"],i=S.timers,o=n?n.length:0;for(t.finish=!0,S.queue(this,a,[]),r&&r.stop&&r.stop.call(this,!0),e=i.length;e--;)i[e].elem===this&&i[e].queue===a&&(i[e].anim.stop(!0),i.splice(e,1));for(e=0;e<o;e++)n[e]&&n[e].finish&&n[e].finish.call(this);delete t.finish})}}),S.each(["toggle","show","hide"],function(e,r){var i=S.fn[r];S.fn[r]=function(e,t,n){return null==e||"boolean"==typeof e?i.apply(this,arguments):this.animate(lt(r,!0),e,t,n)}}),S.each({slideDown:lt("show"),slideUp:lt("hide"),slideToggle:lt("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(e,r){S.fn[e]=function(e,t,n){return this.animate(r,e,t,n)}}),S.timers=[],S.fx.tick=function(){var e,t=0,n=S.timers;for(tt=Date.now();t<n.length;t++)(e=n[t])()||n[t]!==e||n.splice(t--,1);n.length||S.fx.stop(),tt=void 0},S.fx.timer=function(e){S.timers.push(e),S.fx.start()},S.fx.interval=13,S.fx.start=function(){nt||(nt=!0,st())},S.fx.stop=function(){nt=null},S.fx.speeds={slow:600,fast:200,_default:400},S.fn.delay=function(r,e){return r=S.fx&&S.fx.speeds[r]||r,e=e||"fx",this.queue(e,function(e,t){var n=C.setTimeout(e,r);t.stop=function(){C.clearTimeout(n)}})},rt=E.createElement("input"),it=E.createElement("select").appendChild(E.createElement("option")),rt.type="checkbox",v.checkOn=""!==rt.value,v.optSelected=it.selected,(rt=E.createElement("input")).value="t",rt.type="radio",v.radioValue="t"===rt.value;var pt,dt=S.expr.attrHandle;S.fn.extend({attr:function(e,t){return B(this,S.attr,e,t,1<arguments.length)},removeAttr:function(e){return this.each(function(){S.removeAttr(this,e)})}}),S.extend({attr:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return"undefined"==typeof e.getAttribute?S.prop(e,t,n):(1===o&&S.isXMLDoc(e)||(i=S.attrHooks[t.toLowerCase()]||(S.expr.match.bool.test(t)?pt:void 0)),void 0!==n?null===n?void S.removeAttr(e,t):i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:(e.setAttribute(t,n+""),n):i&&"get"in i&&null!==(r=i.get(e,t))?r:null==(r=S.find.attr(e,t))?void 0:r)},attrHooks:{type:{set:function(e,t){if(!v.radioValue&&"radio"===t&&A(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,r=0,i=t&&t.match(P);if(i&&1===e.nodeType)while(n=i[r++])e.removeAttribute(n)}}),pt={set:function(e,t,n){return!1===t?S.removeAttr(e,n):e.setAttribute(n,n),n}},S.each(S.expr.match.bool.source.match(/\w+/g),function(e,t){var a=dt[t]||S.find.attr;dt[t]=function(e,t,n){var r,i,o=t.toLowerCase();return n||(i=dt[o],dt[o]=r,r=null!=a(e,t,n)?o:null,dt[o]=i),r}});var ht=/^(?:input|select|textarea|button)$/i,gt=/^(?:a|area)$/i;function yt(e){return(e.match(P)||[]).join(" ")}function vt(e){return e.getAttribute&&e.getAttribute("class")||""}function mt(e){return Array.isArray(e)?e:"string"==typeof e&&e.match(P)||[]}S.fn.extend({prop:function(e,t){return B(this,S.prop,e,t,1<arguments.length)},removeProp:function(e){return this.each(function(){delete this[S.propFix[e]||e]})}}),S.extend({prop:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return 1===o&&S.isXMLDoc(e)||(t=S.propFix[t]||t,i=S.propHooks[t]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){var t=S.find.attr(e,"tabindex");return t?parseInt(t,10):ht.test(e.nodeName)||gt.test(e.nodeName)&&e.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),v.optSelected||(S.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),S.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){S.propFix[this.toLowerCase()]=this}),S.fn.extend({addClass:function(t){var e,n,r,i,o,a;return m(t)?this.each(function(e){S(this).addClass(t.call(this,e,vt(this)))}):(e=mt(t)).length?this.each(function(){if(r=vt(this),n=1===this.nodeType&&" "+yt(r)+" "){for(o=0;o<e.length;o++)i=e[o],n.indexOf(" "+i+" ")<0&&(n+=i+" ");a=yt(n),r!==a&&this.setAttribute("class",a)}}):this},removeClass:function(t){var e,n,r,i,o,a;return m(t)?this.each(function(e){S(this).removeClass(t.call(this,e,vt(this)))}):arguments.length?(e=mt(t)).length?this.each(function(){if(r=vt(this),n=1===this.nodeType&&" "+yt(r)+" "){for(o=0;o<e.length;o++){i=e[o];while(-1<n.indexOf(" "+i+" "))n=n.replace(" "+i+" "," ")}a=yt(n),r!==a&&this.setAttribute("class",a)}}):this:this.attr("class","")},toggleClass:function(t,n){var e,r,i,o,a=typeof t,s="string"===a||Array.isArray(t);return m(t)?this.each(function(e){S(this).toggleClass(t.call(this,e,vt(this),n),n)}):"boolean"==typeof n&&s?n?this.addClass(t):this.removeClass(t):(e=mt(t),this.each(function(){if(s)for(o=S(this),i=0;i<e.length;i++)r=e[i],o.hasClass(r)?o.removeClass(r):o.addClass(r);else void 0!==t&&"boolean"!==a||((r=vt(this))&&Y.set(this,"__className__",r),this.setAttribute&&this.setAttribute("class",r||!1===t?"":Y.get(this,"__className__")||""))}))},hasClass:function(e){var t,n,r=0;t=" "+e+" ";while(n=this[r++])if(1===n.nodeType&&-1<(" "+yt(vt(n))+" ").indexOf(t))return!0;return!1}});var xt=/\r/g;S.fn.extend({val:function(n){var r,e,i,t=this[0];return arguments.length?(i=m(n),this.each(function(e){var t;1===this.nodeType&&(null==(t=i?n.call(this,e,S(this).val()):n)?t="":"number"==typeof t?t+="":Array.isArray(t)&&(t=S.map(t,function(e){return null==e?"":e+""})),(r=S.valHooks[this.type]||S.valHooks[this.nodeName.toLowerCase()])&&"set"in r&&void 0!==r.set(this,t,"value")||(this.value=t))})):t?(r=S.valHooks[t.type]||S.valHooks[t.nodeName.toLowerCase()])&&"get"in r&&void 0!==(e=r.get(t,"value"))?e:"string"==typeof(e=t.value)?e.replace(xt,""):null==e?"":e:void 0}}),S.extend({valHooks:{option:{get:function(e){var t=S.find.attr(e,"value");return null!=t?t:yt(S.text(e))}},select:{get:function(e){var t,n,r,i=e.options,o=e.selectedIndex,a="select-one"===e.type,s=a?null:[],u=a?o+1:i.length;for(r=o<0?u:a?o:0;r<u;r++)if(((n=i[r]).selected||r===o)&&!n.disabled&&(!n.parentNode.disabled||!A(n.parentNode,"optgroup"))){if(t=S(n).val(),a)return t;s.push(t)}return s},set:function(e,t){var n,r,i=e.options,o=S.makeArray(t),a=i.length;while(a--)((r=i[a]).selected=-1<S.inArray(S.valHooks.option.get(r),o))&&(n=!0);return n||(e.selectedIndex=-1),o}}}}),S.each(["radio","checkbox"],function(){S.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=-1<S.inArray(S(e).val(),t)}},v.checkOn||(S.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})}),v.focusin="onfocusin"in C;var bt=/^(?:focusinfocus|focusoutblur)$/,wt=function(e){e.stopPropagation()};S.extend(S.event,{trigger:function(e,t,n,r){var i,o,a,s,u,l,c,f,p=[n||E],d=y.call(e,"type")?e.type:e,h=y.call(e,"namespace")?e.namespace.split("."):[];if(o=f=a=n=n||E,3!==n.nodeType&&8!==n.nodeType&&!bt.test(d+S.event.triggered)&&(-1<d.indexOf(".")&&(d=(h=d.split(".")).shift(),h.sort()),u=d.indexOf(":")<0&&"on"+d,(e=e[S.expando]?e:new S.Event(d,"object"==typeof e&&e)).isTrigger=r?2:3,e.namespace=h.join("."),e.rnamespace=e.namespace?new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,e.result=void 0,e.target||(e.target=n),t=null==t?[e]:S.makeArray(t,[e]),c=S.event.special[d]||{},r||!c.trigger||!1!==c.trigger.apply(n,t))){if(!r&&!c.noBubble&&!x(n)){for(s=c.delegateType||d,bt.test(s+d)||(o=o.parentNode);o;o=o.parentNode)p.push(o),a=o;a===(n.ownerDocument||E)&&p.push(a.defaultView||a.parentWindow||C)}i=0;while((o=p[i++])&&!e.isPropagationStopped())f=o,e.type=1<i?s:c.bindType||d,(l=(Y.get(o,"events")||Object.create(null))[e.type]&&Y.get(o,"handle"))&&l.apply(o,t),(l=u&&o[u])&&l.apply&&V(o)&&(e.result=l.apply(o,t),!1===e.result&&e.preventDefault());return e.type=d,r||e.isDefaultPrevented()||c._default&&!1!==c._default.apply(p.pop(),t)||!V(n)||u&&m(n[d])&&!x(n)&&((a=n[u])&&(n[u]=null),S.event.triggered=d,e.isPropagationStopped()&&f.addEventListener(d,wt),n[d](),e.isPropagationStopped()&&f.removeEventListener(d,wt),S.event.triggered=void 0,a&&(n[u]=a)),e.result}},simulate:function(e,t,n){var r=S.extend(new S.Event,n,{type:e,isSimulated:!0});S.event.trigger(r,null,t)}}),S.fn.extend({trigger:function(e,t){return this.each(function(){S.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];if(n)return S.event.trigger(e,t,n,!0)}}),v.focusin||S.each({focus:"focusin",blur:"focusout"},function(n,r){var i=function(e){S.event.simulate(r,e.target,S.event.fix(e))};S.event.special[r]={setup:function(){var e=this.ownerDocument||this.document||this,t=Y.access(e,r);t||e.addEventListener(n,i,!0),Y.access(e,r,(t||0)+1)},teardown:function(){var e=this.ownerDocument||this.document||this,t=Y.access(e,r)-1;t?Y.access(e,r,t):(e.removeEventListener(n,i,!0),Y.remove(e,r))}}});var Tt=C.location,Ct={guid:Date.now()},Et=/\?/;S.parseXML=function(e){var t,n;if(!e||"string"!=typeof e)return null;try{t=(new C.DOMParser).parseFromString(e,"text/xml")}catch(e){}return n=t&&t.getElementsByTagName("parsererror")[0],t&&!n||S.error("Invalid XML: "+(n?S.map(n.childNodes,function(e){return e.textContent}).join("\n"):e)),t};var St=/\[\]$/,kt=/\r?\n/g,At=/^(?:submit|button|image|reset|file)$/i,Nt=/^(?:input|select|textarea|keygen)/i;function jt(n,e,r,i){var t;if(Array.isArray(e))S.each(e,function(e,t){r||St.test(n)?i(n,t):jt(n+"["+("object"==typeof t&&null!=t?e:"")+"]",t,r,i)});else if(r||"object"!==w(e))i(n,e);else for(t in e)jt(n+"["+t+"]",e[t],r,i)}S.param=function(e,t){var n,r=[],i=function(e,t){var n=m(t)?t():t;r[r.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(null==e)return"";if(Array.isArray(e)||e.jquery&&!S.isPlainObject(e))S.each(e,function(){i(this.name,this.value)});else for(n in e)jt(n,e[n],t,i);return r.join("&")},S.fn.extend({serialize:function(){return S.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=S.prop(this,"elements");return e?S.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!S(this).is(":disabled")&&Nt.test(this.nodeName)&&!At.test(e)&&(this.checked||!pe.test(e))}).map(function(e,t){var n=S(this).val();return null==n?null:Array.isArray(n)?S.map(n,function(e){return{name:t.name,value:e.replace(kt,"\r\n")}}):{name:t.name,value:n.replace(kt,"\r\n")}}).get()}});var Dt=/%20/g,qt=/#.*$/,Lt=/([?&])_=[^&]*/,Ht=/^(.*?):[ \t]*([^\r\n]*)$/gm,Ot=/^(?:GET|HEAD)$/,Pt=/^\/\//,Rt={},Mt={},It="*/".concat("*"),Wt=E.createElement("a");function Ft(o){return function(e,t){"string"!=typeof e&&(t=e,e="*");var n,r=0,i=e.toLowerCase().match(P)||[];if(m(t))while(n=i[r++])"+"===n[0]?(n=n.slice(1)||"*",(o[n]=o[n]||[]).unshift(t)):(o[n]=o[n]||[]).push(t)}}function $t(t,i,o,a){var s={},u=t===Mt;function l(e){var r;return s[e]=!0,S.each(t[e]||[],function(e,t){var n=t(i,o,a);return"string"!=typeof n||u||s[n]?u?!(r=n):void 0:(i.dataTypes.unshift(n),l(n),!1)}),r}return l(i.dataTypes[0])||!s["*"]&&l("*")}function Bt(e,t){var n,r,i=S.ajaxSettings.flatOptions||{};for(n in t)void 0!==t[n]&&((i[n]?e:r||(r={}))[n]=t[n]);return r&&S.extend(!0,e,r),e}Wt.href=Tt.href,S.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:Tt.href,type:"GET",isLocal:/^(?:about|app|app-storage|.+-extension|file|res|widget):$/.test(Tt.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":It,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":S.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?Bt(Bt(e,S.ajaxSettings),t):Bt(S.ajaxSettings,e)},ajaxPrefilter:Ft(Rt),ajaxTransport:Ft(Mt),ajax:function(e,t){"object"==typeof e&&(t=e,e=void 0),t=t||{};var c,f,p,n,d,r,h,g,i,o,y=S.ajaxSetup({},t),v=y.context||y,m=y.context&&(v.nodeType||v.jquery)?S(v):S.event,x=S.Deferred(),b=S.Callbacks("once memory"),w=y.statusCode||{},a={},s={},u="canceled",T={readyState:0,getResponseHeader:function(e){var t;if(h){if(!n){n={};while(t=Ht.exec(p))n[t[1].toLowerCase()+" "]=(n[t[1].toLowerCase()+" "]||[]).concat(t[2])}t=n[e.toLowerCase()+" "]}return null==t?null:t.join(", ")},getAllResponseHeaders:function(){return h?p:null},setRequestHeader:function(e,t){return null==h&&(e=s[e.toLowerCase()]=s[e.toLowerCase()]||e,a[e]=t),this},overrideMimeType:function(e){return null==h&&(y.mimeType=e),this},statusCode:function(e){var t;if(e)if(h)T.always(e[T.status]);else for(t in e)w[t]=[w[t],e[t]];return this},abort:function(e){var t=e||u;return c&&c.abort(t),l(0,t),this}};if(x.promise(T),y.url=((e||y.url||Tt.href)+"").replace(Pt,Tt.protocol+"//"),y.type=t.method||t.type||y.method||y.type,y.dataTypes=(y.dataType||"*").toLowerCase().match(P)||[""],null==y.crossDomain){r=E.createElement("a");try{r.href=y.url,r.href=r.href,y.crossDomain=Wt.protocol+"//"+Wt.host!=r.protocol+"//"+r.host}catch(e){y.crossDomain=!0}}if(y.data&&y.processData&&"string"!=typeof y.data&&(y.data=S.param(y.data,y.traditional)),$t(Rt,y,t,T),h)return T;for(i in(g=S.event&&y.global)&&0==S.active++&&S.event.trigger("ajaxStart"),y.type=y.type.toUpperCase(),y.hasContent=!Ot.test(y.type),f=y.url.replace(qt,""),y.hasContent?y.data&&y.processData&&0===(y.contentType||"").indexOf("application/x-www-form-urlencoded")&&(y.data=y.data.replace(Dt,"+")):(o=y.url.slice(f.length),y.data&&(y.processData||"string"==typeof y.data)&&(f+=(Et.test(f)?"&":"?")+y.data,delete y.data),!1===y.cache&&(f=f.replace(Lt,"$1"),o=(Et.test(f)?"&":"?")+"_="+Ct.guid+++o),y.url=f+o),y.ifModified&&(S.lastModified[f]&&T.setRequestHeader("If-Modified-Since",S.lastModified[f]),S.etag[f]&&T.setRequestHeader("If-None-Match",S.etag[f])),(y.data&&y.hasContent&&!1!==y.contentType||t.contentType)&&T.setRequestHeader("Content-Type",y.contentType),T.setRequestHeader("Accept",y.dataTypes[0]&&y.accepts[y.dataTypes[0]]?y.accepts[y.dataTypes[0]]+("*"!==y.dataTypes[0]?", "+It+"; q=0.01":""):y.accepts["*"]),y.headers)T.setRequestHeader(i,y.headers[i]);if(y.beforeSend&&(!1===y.beforeSend.call(v,T,y)||h))return T.abort();if(u="abort",b.add(y.complete),T.done(y.success),T.fail(y.error),c=$t(Mt,y,t,T)){if(T.readyState=1,g&&m.trigger("ajaxSend",[T,y]),h)return T;y.async&&0<y.timeout&&(d=C.setTimeout(function(){T.abort("timeout")},y.timeout));try{h=!1,c.send(a,l)}catch(e){if(h)throw e;l(-1,e)}}else l(-1,"No Transport");function l(e,t,n,r){var i,o,a,s,u,l=t;h||(h=!0,d&&C.clearTimeout(d),c=void 0,p=r||"",T.readyState=0<e?4:0,i=200<=e&&e<300||304===e,n&&(s=function(e,t,n){var r,i,o,a,s=e.contents,u=e.dataTypes;while("*"===u[0])u.shift(),void 0===r&&(r=e.mimeType||t.getResponseHeader("Content-Type"));if(r)for(i in s)if(s[i]&&s[i].test(r)){u.unshift(i);break}if(u[0]in n)o=u[0];else{for(i in n){if(!u[0]||e.converters[i+" "+u[0]]){o=i;break}a||(a=i)}o=o||a}if(o)return o!==u[0]&&u.unshift(o),n[o]}(y,T,n)),!i&&-1<S.inArray("script",y.dataTypes)&&S.inArray("json",y.dataTypes)<0&&(y.converters["text script"]=function(){}),s=function(e,t,n,r){var i,o,a,s,u,l={},c=e.dataTypes.slice();if(c[1])for(a in e.converters)l[a.toLowerCase()]=e.converters[a];o=c.shift();while(o)if(e.responseFields[o]&&(n[e.responseFields[o]]=t),!u&&r&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u=o,o=c.shift())if("*"===o)o=u;else if("*"!==u&&u!==o){if(!(a=l[u+" "+o]||l["* "+o]))for(i in l)if((s=i.split(" "))[1]===o&&(a=l[u+" "+s[0]]||l["* "+s[0]])){!0===a?a=l[i]:!0!==l[i]&&(o=s[0],c.unshift(s[1]));break}if(!0!==a)if(a&&e["throws"])t=a(t);else try{t=a(t)}catch(e){return{state:"parsererror",error:a?e:"No conversion from "+u+" to "+o}}}return{state:"success",data:t}}(y,s,T,i),i?(y.ifModified&&((u=T.getResponseHeader("Last-Modified"))&&(S.lastModified[f]=u),(u=T.getResponseHeader("etag"))&&(S.etag[f]=u)),204===e||"HEAD"===y.type?l="nocontent":304===e?l="notmodified":(l=s.state,o=s.data,i=!(a=s.error))):(a=l,!e&&l||(l="error",e<0&&(e=0))),T.status=e,T.statusText=(t||l)+"",i?x.resolveWith(v,[o,l,T]):x.rejectWith(v,[T,l,a]),T.statusCode(w),w=void 0,g&&m.trigger(i?"ajaxSuccess":"ajaxError",[T,y,i?o:a]),b.fireWith(v,[T,l]),g&&(m.trigger("ajaxComplete",[T,y]),--S.active||S.event.trigger("ajaxStop")))}return T},getJSON:function(e,t,n){return S.get(e,t,n,"json")},getScript:function(e,t){return S.get(e,void 0,t,"script")}}),S.each(["get","post"],function(e,i){S[i]=function(e,t,n,r){return m(t)&&(r=r||n,n=t,t=void 0),S.ajax(S.extend({url:e,type:i,dataType:r,data:t,success:n},S.isPlainObject(e)&&e))}}),S.ajaxPrefilter(function(e){var t;for(t in e.headers)"content-type"===t.toLowerCase()&&(e.contentType=e.headers[t]||"")}),S._evalUrl=function(e,t,n){return S.ajax({url:e,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,converters:{"text script":function(){}},dataFilter:function(e){S.globalEval(e,t,n)}})},S.fn.extend({wrapAll:function(e){var t;return this[0]&&(m(e)&&(e=e.call(this[0])),t=S(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstElementChild)e=e.firstElementChild;return e}).append(this)),this},wrapInner:function(n){return m(n)?this.each(function(e){S(this).wrapInner(n.call(this,e))}):this.each(function(){var e=S(this),t=e.contents();t.length?t.wrapAll(n):e.append(n)})},wrap:function(t){var n=m(t);return this.each(function(e){S(this).wrapAll(n?t.call(this,e):t)})},unwrap:function(e){return this.parent(e).not("body").each(function(){S(this).replaceWith(this.childNodes)}),this}}),S.expr.pseudos.hidden=function(e){return!S.expr.pseudos.visible(e)},S.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},S.ajaxSettings.xhr=function(){try{return new C.XMLHttpRequest}catch(e){}};var _t={0:200,1223:204},zt=S.ajaxSettings.xhr();v.cors=!!zt&&"withCredentials"in zt,v.ajax=zt=!!zt,S.ajaxTransport(function(i){var o,a;if(v.cors||zt&&!i.crossDomain)return{send:function(e,t){var n,r=i.xhr();if(r.open(i.type,i.url,i.async,i.username,i.password),i.xhrFields)for(n in i.xhrFields)r[n]=i.xhrFields[n];for(n in i.mimeType&&r.overrideMimeType&&r.overrideMimeType(i.mimeType),i.crossDomain||e["X-Requested-With"]||(e["X-Requested-With"]="XMLHttpRequest"),e)r.setRequestHeader(n,e[n]);o=function(e){return function(){o&&(o=a=r.onload=r.onerror=r.onabort=r.ontimeout=r.onreadystatechange=null,"abort"===e?r.abort():"error"===e?"number"!=typeof r.status?t(0,"error"):t(r.status,r.statusText):t(_t[r.status]||r.status,r.statusText,"text"!==(r.responseType||"text")||"string"!=typeof r.responseText?{binary:r.response}:{text:r.responseText},r.getAllResponseHeaders()))}},r.onload=o(),a=r.onerror=r.ontimeout=o("error"),void 0!==r.onabort?r.onabort=a:r.onreadystatechange=function(){4===r.readyState&&C.setTimeout(function(){o&&a()})},o=o("abort");try{r.send(i.hasContent&&i.data||null)}catch(e){if(o)throw e}},abort:function(){o&&o()}}}),S.ajaxPrefilter(function(e){e.crossDomain&&(e.contents.script=!1)}),S.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(e){return S.globalEval(e),e}}}),S.ajaxPrefilter("script",function(e){void 0===e.cache&&(e.cache=!1),e.crossDomain&&(e.type="GET")}),S.ajaxTransport("script",function(n){var r,i;if(n.crossDomain||n.scriptAttrs)return{send:function(e,t){r=S("<script>").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Ut,Xt=[],Vt=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Xt.pop()||S.expando+"_"+Ct.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Vt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Vt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Vt,"$1"+r):!1!==e.jsonp&&(e.url+=(Et.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Xt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),v.createHTMLDocument=((Ut=E.implementation.createHTMLDocument("").body).innerHTML="<form></form><form></form>",2===Ut.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(v.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1<s&&(r=yt(e.slice(s)),e=e.slice(0,s)),m(t)?(n=t,t=void 0):t&&"object"==typeof t&&(i="POST"),0<a.length&&S.ajax({url:e,type:i||"GET",dataType:"html",data:t}).done(function(e){o=arguments,a.html(r?S("<div>").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return B(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=_e(v.pixelPosition,function(e,t){if(t)return t=Be(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return B(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0<arguments.length?this.on(n,null,e,t):this.trigger(n)}});var Gt=/^[\s\uFEFF\xA0]+|([^\s\uFEFF\xA0])[\s\uFEFF\xA0]+$/g;S.proxy=function(e,t){var n,r,i;if("string"==typeof t&&(n=e[t],t=e,e=n),m(e))return r=s.call(arguments,2),(i=function(){return e.apply(t||this,r.concat(s.call(arguments)))}).guid=e.guid=e.guid||S.guid++,i},S.holdReady=function(e){e?S.readyWait++:S.ready(!0)},S.isArray=Array.isArray,S.parseJSON=JSON.parse,S.nodeName=A,S.isFunction=m,S.isWindow=x,S.camelCase=X,S.type=w,S.now=Date.now,S.isNumeric=function(e){var t=S.type(e);return("number"===t||"string"===t)&&!isNaN(e-parseFloat(e))},S.trim=function(e){return null==e?"":(e+"").replace(Gt,"$1")},"function"==typeof define&&define.amd&&define("jquery",[],function(){return S});var Yt=C.jQuery,Qt=C.$;return S.noConflict=function(e){return C.$===S&&(C.$=Qt),e&&C.jQuery===S&&(C.jQuery=Yt),S},"undefined"==typeof e&&(C.jQuery=C.$=S),S});
\ No newline at end of file
diff --git a/static/js/asserts/vue-axios.js b/static/js/assets/vue-axios.js
similarity index 100%
rename from static/js/asserts/vue-axios.js
rename to static/js/assets/vue-axios.js
diff --git a/static/js/assets/vue-flags.js b/static/js/assets/vue-flags.js
new file mode 100644
index 00000000..9db6bf94
--- /dev/null
+++ b/static/js/assets/vue-flags.js
@@ -0,0 +1,254 @@
+window.flags = {
+  BD: 'Bangladesh',
+  BE: 'Belgium',
+  BF: 'Burkina Faso',
+  BG: 'Bulgaria',
+  BA: 'Bosnia and Herzegovina',
+  BB: 'Barbados',
+  WF: 'Wallis and Futuna',
+  BL: 'Saint Barthelemy',
+  BM: 'Bermuda',
+  BN: 'Brunei',
+  BO: 'Bolivia',
+  BH: 'Bahrain',
+  BI: 'Burundi',
+  BJ: 'Benin',
+  BT: 'Bhutan',
+  JM: 'Jamaica',
+  BV: 'Bouvet Island',
+  BW: 'Botswana',
+  WS: 'Samoa',
+  BQ: 'Bonaire, Saint Eustatius and Saba',
+  BR: 'Brazil',
+  BS: 'Bahamas',
+  JE: 'Jersey',
+  BY: 'Belarus',
+  BZ: 'Belize',
+  RU: 'Russia',
+  ussr: 'USSR',
+  RW: 'Rwanda',
+  RS: 'Serbia',
+  TL: 'East Timor',
+  RE: 'Reunion',
+  TM: 'Turkmenistan',
+  TJ: 'Tajikistan',
+  RO: 'Romania',
+  TK: 'Tokelau',
+  GW: 'Guinea-Bissau',
+  GU: 'Guam',
+  GT: 'Guatemala',
+  GS: 'South Georgia and the South Sandwich Islands',
+  GR: 'Greece',
+  GQ: 'Equatorial Guinea',
+  GP: 'Guadeloupe',
+  JP: 'Japan',
+  GY: 'Guyana',
+  GG: 'Guernsey',
+  GF: 'French Guiana',
+  GE: 'Georgia',
+  GD: 'Grenada',
+  GB: 'United Kingdom',
+  GA: 'Gabon',
+  SV: 'El Salvador',
+  GN: 'Guinea',
+  GM: 'Gambia',
+  GL: 'Greenland',
+  GI: 'Gibraltar',
+  GH: 'Ghana',
+  OM: 'Oman',
+  TN: 'Tunisia',
+  JO: 'Jordan',
+  HR: 'Croatia',
+  HT: 'Haiti',
+  HU: 'Hungary',
+  HK: 'Hong Kong',
+  HN: 'Honduras',
+  HM: 'Heard Island and McDonald Islands',
+  VE: 'Venezuela',
+  PR: 'Puerto Rico',
+  PS: 'Palestinian Territory',
+  PW: 'Palau',
+  PT: 'Portugal',
+  SJ: 'Svalbard and Jan Mayen',
+  PY: 'Paraguay',
+  IQ: 'Iraq',
+  PA: 'Panama',
+  PF: 'French Polynesia',
+  PG: 'Papua New Guinea',
+  PE: 'Peru',
+  PK: 'Pakistan',
+  PH: 'Philippines',
+  PN: 'Pitcairn',
+  PL: 'Poland',
+  PM: 'Saint Pierre and Miquelon',
+  ZM: 'Zambia',
+  EH: 'Western Sahara',
+  EE: 'Estonia',
+  EG: 'Egypt',
+  ZA: 'South Africa',
+  EC: 'Ecuador',
+  IT: 'Italy',
+  VN: 'Vietnam',
+  SB: 'Solomon Islands',
+  ET: 'Ethiopia',
+  SO: 'Somalia',
+  ZW: 'Zimbabwe',
+  SA: 'Saudi Arabia',
+  ES: 'Spain',
+  ER: 'Eritrea',
+  ME: 'Montenegro',
+  MD: 'Moldova',
+  MG: 'Madagascar',
+  MF: 'Saint Martin',
+  MA: 'Morocco',
+  MC: 'Monaco',
+  UZ: 'Uzbekistan',
+  MM: 'Myanmar',
+  ML: 'Mali',
+  MO: 'Macao',
+  MN: 'Mongolia',
+  MH: 'Marshall Islands',
+  MK: 'Macedonia',
+  MU: 'Mauritius',
+  MT: 'Malta',
+  MW: 'Malawi',
+  MV: 'Maldives',
+  MQ: 'Martinique',
+  MP: 'Northern Mariana Islands',
+  MS: 'Montserrat',
+  MR: 'Mauritania',
+  IM: 'Isle of Man',
+  UG: 'Uganda',
+  TZ: 'Tanzania',
+  MY: 'Malaysia',
+  MX: 'Mexico',
+  IL: 'Israel',
+  FR: 'France',
+  IO: 'British Indian Ocean Territory',
+  SH: 'Saint Helena',
+  FI: 'Finland',
+  FJ: 'Fiji',
+  FK: 'Falkland Islands',
+  FM: 'Micronesia',
+  FO: 'Faroe Islands',
+  NI: 'Nicaragua',
+  NL: 'Netherlands',
+  NO: 'Norway',
+  NA: 'Namibia',
+  VU: 'Vanuatu',
+  NC: 'New Caledonia',
+  NE: 'Niger',
+  NF: 'Norfolk Island',
+  NG: 'Nigeria',
+  NZ: 'New Zealand',
+  NP: 'Nepal',
+  NR: 'Nauru',
+  NU: 'Niue',
+  CK: 'Cook Islands',
+  XK: 'Kosovo',
+  CI: 'Ivory Coast',
+  CH: 'Switzerland',
+  CO: 'Colombia',
+  CN: 'China',
+  CM: 'Cameroon',
+  CL: 'Chile',
+  CC: 'Cocos Islands',
+  CA: 'Canada',
+  CG: 'Republic of the Congo',
+  CF: 'Central African Republic',
+  CD: 'Democratic Republic of the Congo',
+  CZ: 'Czech',
+  CY: 'Cyprus',
+  CX: 'Christmas Island',
+  CR: 'Costa Rica',
+  CW: 'Curacao',
+  CV: 'Cape Verde',
+  CU: 'Cuba',
+  SZ: 'Swaziland',
+  SY: 'Syria',
+  SX: 'Sint Maarten',
+  KG: 'Kyrgyzstan',
+  KE: 'Kenya',
+  SS: 'South Sudan',
+  SR: 'Suriname',
+  KI: 'Kiribati',
+  KH: 'Cambodia',
+  KN: 'Saint Kitts and Nevis',
+  KM: 'Comoros',
+  ST: 'Sao Tome and Principe',
+  SK: 'Slovakia',
+  KR: 'Korea',
+  SI: 'Slovenia',
+  KP: 'North Korea',
+  KW: 'Kuwait',
+  SN: 'Senegal',
+  SM: 'San Marino',
+  SL: 'Sierra Leone',
+  SC: 'Seychelles',
+  KZ: 'Kazakhstan',
+  KY: 'Cayman Islands',
+  SG: 'Singapore',
+  SE: 'Sweden',
+  SD: 'Sudan',
+  DO: 'Dominican Republic',
+  DM: 'Dominica',
+  DJ: 'Djibouti',
+  DK: 'Denmark',
+  VG: 'British Virgin Islands',
+  DE: 'Germany',
+  YE: 'Yemen',
+  DZ: 'Algeria',
+  US: 'United States',
+  UY: 'Uruguay',
+  YT: 'Mayotte',
+  UM: 'United States Minor Outlying Islands',
+  LB: 'Lebanon',
+  LC: 'Saint Lucia',
+  LA: 'Laos',
+  TV: 'Tuvalu',
+  TW: 'Taiwan',
+  TT: 'Trinidad and Tobago',
+  TR: 'Turkey',
+  LK: 'Sri Lanka',
+  LI: 'Liechtenstein',
+  LV: 'Latvia',
+  TO: 'Tonga',
+  LT: 'Lithuania',
+  LU: 'Luxembourg',
+  LR: 'Liberia',
+  LS: 'Lesotho',
+  TH: 'Thailand',
+  TF: 'French Southern Territories',
+  TG: 'Togo',
+  TD: 'Chad',
+  TC: 'Turks and Caicos Islands',
+  LY: 'Libya',
+  VA: 'Vatican',
+  VC: 'Saint Vincent and the Grenadines',
+  AE: 'United Arab Emirates',
+  AD: 'Andorra',
+  AG: 'Antigua and Barbuda',
+  AF: 'Afghanistan',
+  AI: 'Anguilla',
+  VI: 'U.S. Virgin Islands',
+  IS: 'Iceland',
+  IR: 'Iran',
+  AM: 'Armenia',
+  AL: 'Albania',
+  AO: 'Angola',
+  AQ: 'Antarctica',
+  AS: 'American Samoa',
+  AR: 'Argentina',
+  AU: 'Australia',
+  AT: 'Austria',
+  AW: 'Aruba',
+  IN: 'India',
+  AX: 'Aland Islands',
+  AZ: 'Azerbaijan',
+  IE: 'Ireland',
+  ID: 'Indonesia',
+  UA: 'Ukraine',
+  QA: 'Qatar',
+  MZ: 'Mozambique',
+  XX: 'Unknown'
+}
diff --git a/static/js/asserts/vue.js b/static/js/assets/vue.js
similarity index 100%
rename from static/js/asserts/vue.js
rename to static/js/assets/vue.js
diff --git a/static/js/main.js b/static/js/main.js
index c69fd847..0d77f3ca 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,17 +1,145 @@
+/* eslint-disable no-unused-vars */
+/* eslint-env jquery, browser */
+
 // sticky header
 $(window).scroll(() => {
-    var header = document.getElementById("navbar");
-    var sticky = header.offsetTop;
+  const header = document.getElementById('navbar')
+  if (!header) return
+  const sticky = header.offsetTop
+
+  if (window.pageYOffset > sticky) {
+    header.classList.add('minimized')
+  } else {
+    header.classList.remove('minimized')
+  }
+})
+
+// toggle navbar for mobile
+function togglenavbar () {
+  const navbar = document.getElementById('navbar')
+  navbar && navbar.classList.toggle('is-active')
+  const burger = document.getElementById('navbar-burger')
+  burger && burger.classList.toggle('is-active')
+}
+
+function setStyle (el, obj) {
+  Object.entries(obj).forEach(([k, v]) => {
+    el.style[k] = v
+  })
+}
 
-    if (window.pageYOffset > sticky) {
-        header.classList.add("minimized");
-    } else {
-        header.classList.remove("minimized");
+async function searchUser () {
+  // eslint-disable-next-line no-undef
+  _testGlobals(
+    { exists: ['domain'] }
+  )
+  const search = document.getElementById('u-search')
+  if (!search) return
+  const value = search.value
+  const content = document.getElementById('u-search-content')
+  content && (content.innerHTML = '')
+  const data = await fetch(`//osu.${window.domain}/search?q=${value}`).then(res => res.json())
+  // TODO it's.... too much for me to handle..
+  // eslint-disable-next-line eqeqeq
+  if (data != '{}') {
+    content && content.removeAttribute('style')
+    data.forEach(n => {
+      const result = ({
+        title: n.name,
+        url: '/u/' + n.id,
+        image: '//a.' + window.domain + '/' + n.id
+      })
+      const root = document.createElement('a')
+      root.href = result.url
+      root.className = 'navbar-item'
+      const image = document.createElement('img')
+      image.src = result.image
+      setStyle(image, {
+        width: '3rem',
+        maxHeight: '3rem',
+        backgroundSize: 'cover',
+        borderRadius: '0.5em'
+      })
+      root.appendChild(image)
+      const textSpan = document.createElement('span')
+      setStyle(textSpan, {
+        marginLeft: '5px',
+        fontWeight: 700,
+        fontSize: '1.2em',
+        color: 'rgba(255,255,255,0.9)'
+      })
+      textSpan.innerText = result.title
+      root.appendChild(textSpan)
+      content && content.appendChild(root)
+    })
+  } else {
+    content && setStyle(content, {
+      display: 'none'
+    })
+  }
+}
+
+function createState (initial) {
+  const isProxy = Symbol('isProxy')
+  const hooks = []
+  const recursiveReactive = (bubbleUp = false) => ({
+    get (target, key) {
+      if (key === isProxy) { return true }
+      return target[key]
+    },
+    set (target, key, value, proxy) {
+      if (
+        value instanceof File ||
+          value instanceof Blob
+      ) {
+        target[key] = value
+      } else if (typeof value === 'object') {
+        target[key] = new Proxy(value, recursiveReactive(true))
+      } else if (Array.isArray(value)) {
+        target[key] = new Proxy(value, recursiveReactive(true))
+      } else target[key] = value
+      if (bubbleUp) {
+        updateState({ bubble: true })
+      }
+    }
+  })
+  const state = new Proxy({}, recursiveReactive())
+  for (const [k, v] of Object.entries(initial)) {
+    state[k] = v
+  }
+  const reactive = new Proxy(state, {
+    get (target, key) {
+      const returnValue = target[key]
+      // if (returnValue && returnValue[isProxy]) {
+      //   setTimeout(updateState, 0)
+      // }
+      return returnValue
+    },
+    set (target, key, value) {
+      target[key] = value
+      updateState()
+    }
+  })
+  function useHook (cb) {
+    hooks.push(cb)
+  }
+  async function updateState ({ bubble = false } = {}) {
+    console.log('update state:', state)
+    for (const hook of hooks) {
+      await hook(reactive)
     }
-});
+  }
+  function transaction (cb, immediate = true) {
+    cb(state)
+    if (immediate) updateState()
+    else return () => updateState()
+  }
 
-//toggle navbar for mobile
-function togglenavbar() {
-    document.getElementById('navbar').classList.toggle("is-active");
-    document.getElementById('navbar-burger').classList.toggle("is-active");
-}
\ No newline at end of file
+  return {
+    useHook,
+    forceUpdate: updateState,
+    nonReactive: state,
+    reactive,
+    transaction
+  }
+}
diff --git a/static/js/pages/admin/beatmaps.js b/static/js/pages/admin/beatmaps.js
new file mode 100644
index 00000000..46e0d327
--- /dev/null
+++ b/static/js/pages/admin/beatmaps.js
@@ -0,0 +1,37 @@
+// eslint-disable-next-line no-unused-vars
+function searchMaps () {
+  const search = document.getElementById('search-bar')
+  if (!search) return
+  if (search.value === '') window.location.href = '/admin/beatmaps'
+  else window.location.href = '/admin/beatmaps/search/' + search.value
+}
+
+function updateMaps(sid) {
+  _testGlobals(
+      { exists: ['domain', 'api_key'] }
+  )
+  var bar = document.getElementById('progress_bar')
+  var elements = document.getElementsByClassName('operate-button');
+  bar && bar.removeAttribute('style')
+  Array.prototype.forEach.call(elements, function (element) {
+      element.classList.add('is-disabled')
+  });
+  $.ajax({
+    type: "GET",
+    url: '//api.' + window.domain + '/v1/update_maps?&sid=' + sid,
+    beforeSend: function(request) {
+        request.setRequestHeader("Authorization", window.api_key);
+    },
+    success: function (data, status) {
+      bar && setStyle(bar, {
+          display: 'none'
+      })
+      Array.prototype.forEach.call(elements, function (element) {
+          element.classList.remove('is-disabled')
+      });
+      if (status == 'success') {
+          window.location.href = '/admin/beatmaps/search/' + data['sid']
+      }
+  }
+});
+}
diff --git a/static/js/pages/admin/dashboard.js b/static/js/pages/admin/dashboard.js
index 7f515d39..458f06d9 100644
--- a/static/js/pages/admin/dashboard.js
+++ b/static/js/pages/admin/dashboard.js
@@ -1,35 +1,40 @@
+_testGlobals(
+  { exists: ['domain'] }
+)
+
+// eslint-disable-next-line no-undef, no-new
 new Vue({
-    el: "#dashboard",
-    delimiters: ["<%", "%>"],
-    data() {
-        return {
-            online_users: 0,
-        }
-    },
-    created() {
-        var vm = this;
-        vm.GetOnlineUsers()
-    },
-    methods: {
-        GetOnlineUsers() {
-            var vm = this;
-            vm.$axios.get(`${window.location.protocol}//api.${domain}/v1/get_player_count`)
-                .then(function (response) {
-                    vm.online_users = response.data.counts.online;
-                });
-        },
-        addCommas(nStr) {
-            nStr += '';
-            var x = nStr.split('.');
-            var x1 = x[0];
-            var x2 = x.length > 1 ? '.' + x[1] : '';
-            var rgx = /(\d+)(\d{3})/;
-            while (rgx.test(x1)) {
-                x1 = x1.replace(rgx, '$1' + ',' + '$2');
-            }
-            return x1 + x2;
-        }
+  el: '#dashboard',
+  delimiters: ['<%', '%>'],
+  data () {
+    return {
+      online_users: 0
+    }
+  },
+  computed: {
+  },
+  created () {
+    const vm = this
+    vm.GetOnlineUsers()
+  },
+  methods: {
+    GetOnlineUsers () {
+      const vm = this
+      vm.$axios.get(`//api.${window.domain}/v1/get_player_count`)
+        .then(function (response) {
+          vm.online_users = response.data.counts.online
+        })
     },
-    computed: {
+    addCommas (nStr) {
+      nStr += ''
+      const x = nStr.split('.')
+      let x1 = x[0]
+      const x2 = x.length > 1 ? '.' + x[1] : ''
+      const rgx = /(\d+)(\d{3})/
+      while (rgx.test(x1)) {
+        x1 = x1.replace(rgx, '$1' + ',' + '$2')
+      }
+      return x1 + x2
     }
-});
+  }
+})
diff --git a/static/js/pages/admin/users.js b/static/js/pages/admin/users.js
new file mode 100644
index 00000000..b36bf49d
--- /dev/null
+++ b/static/js/pages/admin/users.js
@@ -0,0 +1,7 @@
+// eslint-disable-next-line no-unused-vars
+function searchUsers () {
+  const search = document.getElementById('search-bar')
+  if (!search) return
+  if (search.value === '') window.location.href = '/admin/users'
+  else window.location.href = '/admin/users/search/' + search.value
+}
diff --git a/static/js/pages/admin/users/upload-scores.js b/static/js/pages/admin/users/upload-scores.js
new file mode 100644
index 00000000..9e11b8cc
--- /dev/null
+++ b/static/js/pages/admin/users/upload-scores.js
@@ -0,0 +1,173 @@
+/* globals createState */
+/* eslint-disable no-unused-vars */
+
+const { nonReactive, reactive: s, useHook, forceUpdate, transaction } = createState({
+  userId: -1,
+  apiKey: undefined,
+
+  parseSucceed: false,
+  parsed: {},
+  replayFile: undefined,
+  validationErrors: {}
+})
+
+useHook((state) => {
+  // const result = document.getElementById('osr-result')
+  const file = document.getElementById('form-replay-file-label')
+
+  if (!state.replayFile) {
+    const form = document.getElementById('osr-reader')
+    delete form.replay_file.value
+  } else {
+    if (state.parseSucceed) {
+      // result.classList.remove('is-hidden')
+      file.classList.add('is-success')
+      file.classList.remove('is-danger')
+    } else {
+      // result.classList.add('is-hidden')
+      file.classList.add('is-danger')
+      file.classList.remove('is-success')
+    }
+  }
+})
+
+useHook(state => {
+  const display = document.getElementById('replay-result')
+  const template = document.getElementById('template-replay-row')
+  const elements = Object.entries(state.parsed)
+    .filter(([key, value]) =>
+      ['username', 'replay_id'].includes(key) &&
+      value
+    )
+    .map(([key, value]) => {
+      const copy = template.content.cloneNode(true)
+      const _key = copy.querySelector('#key')
+      _key.innerText = key
+      const _value = copy.querySelector('#value')
+      _value.innerText = value
+      _value.id = `display-${key}`
+      return copy
+    })
+  display.replaceChildren(...elements)
+})
+
+useHook(state => {
+  const form = document.getElementById('submit-replay')
+  console.log('re-populate submitting values')
+  Object.entries(state.parsed).forEach(([key, value]) => {
+    if (!form[key]) return
+    form[key].value = value
+  })
+  form.foreign_score_id.value = state.parsed.replay_id || 0
+})
+
+useHook(state => {
+  const inputs = submittingForm.querySelectorAll('input, select')
+  inputs.forEach(el => {
+    const id = `error-${el.name}`
+    let error = document.getElementById(id)
+    if (state.validationErrors[el.name]) {
+      if (!error) {
+        error = document.createElement('p')
+        error.classList.add('has-text-danger', 'm-0')
+        error.setAttribute('id', id)
+        el.parentNode.appendChild(error)
+      }
+      error.innerText = state.validationErrors[el.name]
+    } else {
+      if (error) {
+        error.remove()
+      }
+    }
+  })
+})
+
+async function uploadOsr () {
+  const update = transaction((s) => {
+    s.parseSucceed = false
+    s.parsed = {}
+    s.replayFile = undefined
+  }, false)
+
+  const form = document.getElementById('osr-reader')
+  const formData = new FormData(form)
+  const replay = formData.get('replay_file')
+  if (replay.size > 0 && replay.name.endsWith('.osr')) {
+    const { replay: data, status } = await fetch('/admin/replays/parse', {
+      method: 'post',
+      body: formData
+    }).then(res => res.json())
+    if (status === 200) {
+      transaction((s) => {
+        s.parseSucceed = true
+        s.parsed = data
+        s.replayFile = replay
+      })
+    }
+  } else {
+    update()
+  }
+}
+
+async function submitReplay () {
+  s.validationErrors = {}
+  if (!nonReactive.userId) {
+    window.alert('need userid but unset.')
+    return
+  }
+  if (!s.parseSucceed) {
+    window.alert('osr parse failed.')
+    return
+  }
+  const form = document.getElementById('submit-replay')
+  const formData = new FormData(form)
+  const replayFile = nonReactive.replayFile
+  formData.append('replay_file', replayFile)
+  formData.append('userid', nonReactive.userId)
+  formData.append('perfect', nonReactive.parsed.perfect)
+
+  // console.log([...formData.entries()])
+  const endpoint = `//api.${window.domain}/v1/submit_score`
+  const { detail, status, score_id: scoreId } = await fetch(endpoint, {
+    method: 'post',
+    body: formData,
+    headers: {
+      Authorization: s.apiKey
+    }
+  }).then(res => res.json())
+  if (detail) {
+    detail.forEach(setError(form))
+    forceUpdate()
+  }
+  if (status === 200) {
+    window.alert('submitted!\n score id: ' + scoreId)
+    transaction((state) => {
+      state.parseSucceed = false
+      state.parsed = {}
+      state.replayFile = undefined
+      state.validationErrors = {}
+    })
+  }
+}
+
+function setError (el) {
+  return (error) => {
+    const occured = error.loc[1]
+    const message = error.msg
+    nonReactive.validationErrors[occured] = message
+  }
+}
+const submittingForm = document.getElementById('submit-replay')
+
+submittingForm.querySelectorAll('input, select').forEach((el) => {
+  // console.log(el)
+  el.addEventListener('change', (value) => {
+    if (el.type === 'checkbox') {
+      s.parsed[el.name] = el.checked
+    } else if (el.type === 'number') {
+      s.parsed[el.name] = el.valueAsNumber
+    } else {
+      s.parsed[el.name] = el.value
+    }
+  })
+})
diff --git a/static/js/pages/leaderboard.js b/static/js/pages/leaderboard.js
index e91ada52..63f8b936 100644
--- a/static/js/pages/leaderboard.js
+++ b/static/js/pages/leaderboard.js
@@ -1,77 +1,89 @@
+
+// eslint-disable-next-line no-undef
+_testGlobals({ exists: ['flags', 'mode', 'mods', 'sort', 'domain'] })
+
+// eslint-disable-next-line no-new, no-undef
 new Vue({
-    el: "#app",
-    delimiters: ["<%", "%>"],
-    data() {
-        return {
-            flags: window.flags,
-            boards : {},
-            mode : 'std',
-            mods : 'vn',
-            sort : 'pp',
-            load : false,
-            no_player : false, // soon
-        };
+  el: '#app',
+  delimiters: ['<%', '%>'],
+  data () {
+    return {
+      flags: window.flags,
+      boards: {},
+      mode: window.mode || 'std',
+      mods: window.mods || 'vn',
+      sort: window.sort || 'pp',
+      load: false,
+      no_player: false // soon ^TM
+    }
+  },
+  computed: {},
+  created () {
+    this.LoadData(window.mode, window.mods, window.sort)
+    this.LoadLeaderboard(this.sort, this.mode, this.mods)
+  },
+  methods: {
+    secondsToDhm (seconds) {
+      seconds = Number(seconds)
+      const dDisplay = `${Math.floor(seconds / (3600 * 24))}d `
+      const hDisplay = `${Math.floor(seconds % (3600 * 24) / 3600)}h `
+      const mDisplay = `${Math.floor(seconds % 3600 / 60)}m `
+      return dDisplay + hDisplay + mDisplay
     },
-    created() {
-        this.LoadData(mode, mods, sort);
-        this.LoadLeaderboard(sort, mode, mods);
+    LoadData (mode, mods, sort) {
+      this.mode = mode
+      this.mods = mods
+      this.sort = sort
     },
-    methods: {
-        LoadData(mode, mods, sort) {
-            this.$set(this, 'mode', mode);
-            this.$set(this, 'mods', mods);
-            this.$set(this, 'sort', sort);
-        },
-        LoadLeaderboard(sort, mode, mods) {
-            if (window.event)
-                window.event.preventDefault();
+    LoadLeaderboard (sort, mode, mods) {
+      if (window.event) { window.event.preventDefault() }
 
-            window.history.replaceState('', document.title, `/leaderboard/${this.mode}/${this.sort}/${this.mods}`);
-            this.$set(this, 'mode', mode);
-            this.$set(this, 'mods', mods);
-            this.$set(this, 'sort', sort);
-            this.$set(this, 'load', true);
-            this.$axios.get(`${window.location.protocol}//api.${domain}/v1/get_leaderboard`, { params: {
-                mode: this.StrtoGulagInt(),
-                sort: this.sort
-            }}).then(res => {
-                this.boards = res.data.leaderboard;
-                this.$set(this, 'load', false);
-            });
-        },
-        scoreFormat(score) {
-            var addCommas = this.addCommas;
-            if (score > 1000 * 1000) {
-                if (score > 1000 * 1000 * 1000)
-                    return `${addCommas((score / 1000000000).toFixed(2))} billion`;
-                return `${addCommas((score / 1000000).toFixed(2))} million`;
-            }
-            return addCommas(score);
-        },
-        addCommas(nStr) {
-            nStr += '';
-            var x = nStr.split('.');
-            var x1 = x[0];
-            var x2 = x.length > 1 ? '.' + x[1] : '';
-            var rgx = /(\d+)(\d{3})/;
-            while (rgx.test(x1)) {
-                x1 = x1.replace(rgx, '$1' + ',' + '$2');
-            }
-            return x1 + x2;
-        },
-        StrtoGulagInt() {
-            switch (this.mode + "|" + this.mods) {
-                case 'std|vn': return 0;
-                case 'taiko|vn': return 1;
-                case 'catch|vn': return 2;
-                case 'mania|vn': return 3;
-                case 'std|rx': return 4;
-                case 'taiko|rx': return 5;
-                case 'catch|rx': return 6;
-                case 'std|ap': return 8;
-                default: return -1;
-            }
-        },
+      window.history.replaceState('', document.title, `/leaderboard/${this.mode}/${this.sort}/${this.mods}`)
+      this.$set(this, 'mode', mode)
+      this.$set(this, 'mods', mods)
+      this.$set(this, 'sort', sort)
+      this.$set(this, 'load', true)
+      this.$axios.get(`//api.${window.domain}/v1/get_leaderboard`, {
+        params: {
+          mode: this.StrtoGulagInt(),
+          sort: this.sort
+        }
+      }).then(res => {
+        this.boards = res.data.leaderboard
+        this.$set(this, 'load', false)
+      })
+    },
+    scoreFormat (score) {
+      const addCommas = this.addCommas
+      if (score > 1000 * 1000) {
+        if (score > 1000 * 1000 * 1000) { return `${addCommas((score / 1000000000).toFixed(2))} billion` }
+        return `${addCommas((score / 1000000).toFixed(2))} million`
+      }
+      return addCommas(score)
+    },
+    addCommas (nStr) {
+      nStr += ''
+      const x = nStr.split('.')
+      let x1 = x[0]
+      const x2 = x.length > 1 ? '.' + x[1] : ''
+      const rgx = /(\d+)(\d{3})/
+      while (rgx.test(x1)) {
+        x1 = x1.replace(rgx, '$1' + ',' + '$2')
+      }
+      return x1 + x2
     },
-    computed: {}
-});
+    StrtoGulagInt () {
+      switch (this.mode + '|' + this.mods) {
+        case 'std|vn': return 0
+        case 'taiko|vn': return 1
+        case 'catch|vn': return 2
+        case 'mania|vn': return 3
+        case 'std|rx': return 4
+        case 'taiko|rx': return 5
+        case 'catch|rx': return 6
+        case 'std|ap': return 8
+        default: return -1
+      }
+    }
+  }
+})
diff --git a/static/js/pages/profile.js b/static/js/pages/profile.js
index 725a6766..dc4aa908 100644
--- a/static/js/pages/profile.js
+++ b/static/js/pages/profile.js
@@ -1,234 +1,430 @@
-new Vue({
-    el: "#app",
-    delimiters: ["<%", "%>"],
-    data() {
-        return {
-            data: {
-                stats: {
-                    out: [{}],
-                    load: true
-                },
-                grades: {},
-                scores: {
-                    recent: {
-                        out: [],
-                        load: true,
-                        more: {
-                            limit: 5,
-                            full: true
-                        }
-                    },
-                    best: {
-                        out: [],
-                        load: true,
-                        more: {
-                            limit: 5,
-                            full: true
-                        }
-                    }
-                },
-                maps: {
-                    most: {
-                        out: [],
-                        load: true,
-                        more: {
-                            limit: 5,
-                            full: true
-                        }
-                    }
-                },
-                status: {}
-            },
-            mode: mode,
-            mods: mods,
-            modegulag: 0,
-            userid: userid
-        };
-    },
-    created() {
-        // starting a page
-        this.modegulag = this.StrtoGulagInt();
-        this.LoadProfileData();
-        this.LoadAllofdata();
-        this.LoadUserStatus();
-    },
-    methods: {
-        LoadAllofdata() {
-            this.LoadMostBeatmaps();
-            this.LoadScores('best');
-            this.LoadScores('recent');
-        },
-        LoadProfileData() {
-            this.$set(this.data.stats, 'load', true);
-            this.$axios.get(`${window.location.protocol}//api.${domain}/v1/get_player_info`, {
-                    params: {
-                        id: this.userid,
-                        scope: 'all'
-                    }
-                })
-                .then(res => {
-                    this.$set(this.data.stats, 'out', res.data.player.stats);
-                    this.data.stats.load = false;
-                });
-        },
-        LoadScores(sort) {
-            this.$set(this.data.scores[`${sort}`], 'load', true);
-            this.$axios.get(`${window.location.protocol}//api.${domain}/v1/get_player_scores`, {
-                    params: {
-                        id: this.userid,
-                        mode: this.StrtoGulagInt(),
-                        scope: sort,
-                        limit: this.data.scores[`${sort}`].more.limit
-                    }
-                })
-                .then(res => {
-                    this.data.scores[`${sort}`].out = res.data.scores;
-                    this.data.scores[`${sort}`].load = false
-                    this.data.scores[`${sort}`].more.full = this.data.scores[`${sort}`].out.length != this.data.scores[`${sort}`].more.limit;
-                });
-        },
-        LoadMostBeatmaps() {
-            this.$set(this.data.maps.most, 'load', true);
-            this.$axios.get(`${window.location.protocol}//api.${domain}/v1/get_player_most_played`, {
-                    params: {
-                        id: this.userid,
-                        mode: this.StrtoGulagInt(),
-                        limit: this.data.maps.most.more.limit
-                    }
-                })
-                .then(res => {
-                    this.data.maps.most.out = res.data.maps;
-                    this.data.maps.most.load = false;
-                    this.data.maps.most.more.full = this.data.maps.most.out.length != this.data.maps.most.more.limit;
-                });
-        },
-        LoadUserStatus() {
-            this.$axios.get(`${window.location.protocol}//api.${domain}/v1/get_player_status`, {
-                    params: {
-                        id: this.userid
-                    }
-                })
-                .then(res => {
-                    this.$set(this.data, 'status', res.data.player_status)
-                })
-                .catch(function (error) {
-                    clearTimeout(loop);
-                    console.log(error);
-                });
-            loop = setTimeout(this.LoadUserStatus, 5000);
-        },
-        ChangeModeMods(mode, mods) {
-            if (window.event)
-                window.event.preventDefault();
+/* eslint-env browser */
 
-            this.mode = mode;
-            this.mods = mods;
+window.addEventListener('load', () => {
+  const s = window._state?.reactive
+  if (!s) {
+    throw new Error('unable to locate states')
+  }
 
-            this.modegulag = this.StrtoGulagInt();
-            this.data.scores.recent.more.limit = 5
-            this.data.scores.best.more.limit = 5
-            this.data.maps.most.more.limit = 6
-            this.LoadAllofdata();
+  // eslint-disable-next-line no-undef
+  _testGlobals({ exists: ['mode', 'mods', 'userid', 'domain'] }, s)
+  // eslint-disable-next-line no-new, no-undef
+  new Vue({
+    el: '#app',
+    delimiters: ['<%', '%>'],
+    data () {
+      return {
+        loop: undefined,
+        fetchMoreIncremental: {
+          score: 20,
+          map: 20
         },
-        AddLimit(which) {
-            if (window.event)
-                window.event.preventDefault();
-
-            if (which == 'bestscore') {
-                this.data.scores.best.more.limit += 5;
-                this.LoadScores('best');
-            } else if (which == 'recentscore') {
-                this.data.scores.recent.more.limit += 5;
-                this.LoadScores('recent');
-            } else if (which == 'mostplay') {
-                this.data.maps.most.more.limit += 4;
-                this.LoadMostBeatmaps();
-            }
+        cap: {
+          best: 100,
+          recent: 100,
+          most: 100
         },
-        actionIntToStr(d) {
-            switch (d.action) {
-                case 0:
-                    return 'Idle: 🔍 Song Select';
-                case 1:
-                    return '🌙 AFK';
-                case 2:
-                    return `Playing: 🎶 ${d.info_text}`;
-                case 3:
-                    return `Editing: 🔨 ${d.info_text}`;
-                case 4:
-                    return `Modding: 🔨 ${d.info_text}`;
-                case 5:
-                    return 'In Multiplayer: Song Select';
-                case 6:
-                    return `Watching: 👓 ${d.info_text}`;
-                    // 7 not used
-                case 8:
-                    return `Testing: 🎾 ${d.info_text}`;
-                case 9:
-                    return `Submitting: 🧼 ${d.info_text}`;
-                    // 10 paused, never used
-                case 11:
-                    return 'Idle: 🏢 In multiplayer lobby';
-                case 12:
-                    return `In Multiplayer: Playing 🌍 ${d.info_text} 🎶`;
-                case 13:
-                    return 'Idle: 🔍 Searching for beatmaps in osu!direct';
-                default:
-                    return 'Unknown: 🚔 not yet implemented!';
+        data: {
+          stats: {
+            out: [],
+            load: true
+          },
+          grades: {},
+          scores: {
+            recent: {
+              out: [],
+              load: true,
+              more: {
+                limit: 5,
+                full: true
+              }
+            },
+            best: {
+              out: [],
+              load: true,
+              more: {
+                limit: 5,
+                full: true
+              }
             }
-        },
-        addCommas(nStr) {
-            nStr += '';
-            var x = nStr.split('.');
-            var x1 = x[0];
-            var x2 = x.length > 1 ? '.' + x[1] : '';
-            var rgx = /(\d+)(\d{3})/;
-            while (rgx.test(x1)) {
-                x1 = x1.replace(rgx, '$1' + ',' + '$2');
-            }
-            return x1 + x2;
-        },
-        secondsToDhm(seconds) {
-            seconds = Number(seconds);
-            var dDisplay = `${Math.floor(seconds / (3600 * 24))}d `;
-            var hDisplay = `${Math.floor(seconds % (3600 * 24) / 3600)}h `;
-            var mDisplay = `${Math.floor(seconds % 3600 / 60)}m `;
-            return dDisplay + hDisplay + mDisplay;
-        },
-        StrtoGulagInt() {
-            switch (this.mode + "|" + this.mods) {
-                case 'std|vn':
-                    return 0;
-                case 'taiko|vn':
-                    return 1;
-                case 'catch|vn':
-                    return 2;
-                case 'mania|vn':
-                    return 3;
-                case 'std|rx':
-                    return 4;
-                case 'taiko|rx':
-                    return 5;
-                case 'catch|rx':
-                    return 6;
-                case 'std|ap':
-                    return 8;
-                default:
-                    return -1;
+          },
+          maps: {
+            most: {
+              out: [],
+              load: true,
+              more: {
+                limit: 10,
+                full: true
+              }
             }
+          },
+          status: {}
         },
-        StrtoModeInt() {
-            switch (this.mode) {
-                case 'std':
-                    return 0;
-                case 'taiko':
-                    return 1;
-                case 'catch':
-                    return 2;
-                case 'mania':
-                    return 3;
+        mode: s.mode,
+        // @ts-ignore
+        mods: s.mods,
+        modegulag: 0,
+        userid: s.userid,
+        getScoreMods: (() => {
+          const NoFail = 1
+          const Easy = 2
+          const NoVideo = 4
+          const Hidden = 8
+          const HardRock = 16
+          const SuddenDeath = 32
+          const DoubleTime = 64
+          const Relax = 128
+          const HalfTime = 256
+          const Nightcore = 512
+          const Flashlight = 1024
+          const Autoplay = 2048
+          const SpunOut = 4096
+          const Relax2 = 8192
+          const Perfect = 16384
+          const Key4 = 32768
+          const Key5 = 65536
+          const Key6 = 131072
+          const Key7 = 262144
+          const Key8 = 524288
+          const keyMod = 1015808
+          const FadeIn = 1048576
+          const Random = 2097152
+          const LastMod = 4194304
+          const Key9 = 16777216
+          const Key10 = 33554432
+          const Key1 = 67108864
+          const Key3 = 134217728
+          const Key2 = 268435456
+
+          return function getScoreMods (m) {
+            let r = ''
+            let hasNightcore = false
+            if (m & NoFail) {
+              r += 'NF'
             }
-        },
+            if (m & Easy) {
+              r += 'EZ'
+            }
+            if (m & NoVideo) {
+              r += 'NV'
+            }
+            if (m & Hidden) {
+              r += 'HD'
+            }
+            if (m & HardRock) {
+              r += 'HR'
+            }
+            if (m & SuddenDeath) {
+              r += 'SD'
+            }
+            if (m & Nightcore) {
+              r += 'NC'
+              hasNightcore = true
+            }
+            if (!hasNightcore && m & DoubleTime) {
+              r += 'DT'
+            }
+            if (m & Relax) {
+              r += 'RX'
+            }
+            if (m & HalfTime) {
+              r += 'HT'
+            }
+            if (m & Flashlight) {
+              r += 'FL'
+            }
+            if (m & Autoplay) {
+              r += 'AP'
+            }
+            if (m & SpunOut) {
+              r += 'SO'
+            }
+            if (m & Relax2) {
+              r += 'AP'
+            }
+            if (m & Perfect) {
+              r += 'PF'
+            }
+            if (m & Key4) {
+              r += '4K'
+            }
+            if (m & Key5) {
+              r += '5K'
+            }
+            if (m & Key6) {
+              r += '6K'
+            }
+            if (m & Key7) {
+              r += '7K'
+            }
+            if (m & Key8) {
+              r += '8K'
+            }
+            if (m & keyMod) {
+              r += ''
+            }
+            if (m & FadeIn) {
+              r += 'FD'
+            }
+            if (m & Random) {
+              r += 'RD'
+            }
+            if (m & LastMod) {
+              r += 'CN'
+            }
+            if (m & Key9) {
+              r += '9K'
+            }
+            if (m & Key10) {
+              r += '10K'
+            }
+            if (m & Key1) {
+              r += '1K'
+            }
+            if (m & Key3) {
+              r += '3K'
+            }
+            if (m & Key2) {
+              r += '2K'
+            }
+            if (r.length > 0) {
+              return r.slice()
+            } else {
+              return 'NM'
+            }
+          }
+        })()
+      }
     },
-    computed: {}
-});
+    computed: {},
+    created () {
+      // starting a page
+      this.modegulag = this.StrtoGulagInt()
+      this.LoadProfileData()
+      this.LoadAllofdata({ animation: false })
+      this.LoadUserStatus({ animation: false })
+    },
+    methods: {
+      LoadAllofdata (opt) {
+        this.LoadMostBeatmaps(opt)
+        this.LoadScores('best', opt)
+        this.LoadScores('recent', opt)
+      },
+      LoadProfileData () {
+        this.$set(this.data.stats, 'load', true)
+        this.$axios
+          .get(`//api.${s.domain}/v1/get_player_info`, {
+            params: {
+              id: this.userid,
+              scope: 'all'
+            }
+          })
+          .then((res) => {
+            this.$set(this.data.stats, 'out', res.data.player.stats)
+            this.data.stats.load = false
+          })
+      },
+      async LoadScores (sort, { animation = true } = {}) {
+        this.$set(this.data.scores[`${sort}`], 'load', true)
+        await this.$axios
+          .get(`//api.${s.domain}/v1/get_player_scores`, {
+            params: {
+              id: this.userid,
+              mode: this.StrtoGulagInt(),
+              scope: sort,
+              limit: this.data.scores[`${sort}`].more.limit
+            }
+          })
+          .then((res) => {
+            this.data.scores[`${sort}`].out = res.data.scores
+            this.data.scores[`${sort}`].more.full =
+            (this.data.scores[`${sort}`].out.length !== this.data.scores[`${sort}`].more.limit ||
+              this.data.scores[`${sort}`].out.length >= this.cap[sort]
+            )
+          })
+        const toShow =
+          (this.$refs.scores &&
+            this.$refs.scores.filter((el) => !el.classList.contains('show'))) ||
+          []
+        // animation
+        if (!animation) {
+          toShow.forEach((el) => el.classList.add('show'))
+          this.data.scores[`${sort}`].load = false
+        } else {
+          this.data.scores[`${sort}`].load = false
+          toShow.forEach((el, index) => {
+            setTimeout(() => {
+              el.classList.add('show')
+            }, index * 25)
+          })
+        }
+      },
+      async LoadMostBeatmaps ({ animation = true } = {}) {
+        this.$set(this.data.maps.most, 'load', true)
+        await this.$axios
+          .get(`//api.${s.domain}/v1/get_player_most_played`, {
+            params: {
+              id: this.userid,
+              mode: this.StrtoGulagInt(),
+              limit: this.data.maps.most.more.limit
+            }
+          })
+          .then((res) => {
+            this.data.maps.most.out = res.data.maps
+            this.data.maps.most.more.full = this.data.maps.most.out.length !== this.data.maps.most.more.limit
+          })
+        const toShow =
+          (this.$refs.mostPlayed &&
+            this.$refs.mostPlayed.filter(
+              (el) => !el.classList.contains('show')
+            )) ||
+          []
+        // animation
+        if (!animation) {
+          toShow.forEach((el) => el.classList.add('show'))
+          this.data.maps.most.load = false
+        } else {
+          this.data.maps.most.load = false
+          toShow.forEach((el, index) => {
+            setTimeout(() => {
+              el.classList.add('show')
+            }, index * 20)
+          })
+        }
+      },
+      LoadUserStatus () {
+        this.$axios
+          .get(`//api.${s.domain}/v1/get_player_status`, {
+            params: {
+              id: this.userid
+            }
+          })
+          .then((res) => {
+            this.$set(this.data, 'status', res.data.player_status)
+          })
+          .catch(function (error) {
+            clearTimeout(this.loop)
+            console.log(error)
+          })
+        this.loop = setTimeout(this.LoadUserStatus, 5000)
+      },
+      ChangeModeMods (mode, mods) {
+        if (s.event) {
+          s.event.preventDefault()
+        }
+
+        this.mode = mode
+        this.mods = mods
+
+        this.modegulag = this.StrtoGulagInt()
+        this.data.scores.recent.more.limit = 5
+        this.data.scores.best.more.limit = 5
+        this.data.maps.most.more.limit = 6
+        this.LoadAllofdata()
+      },
+      AddLimit (which) {
+        if (s.event) {
+          s.event.preventDefault()
+        }
+
+        if (which === 'bestscore') {
+          this.data.scores.best.more.limit += this.fetchMoreIncremental.score
+          if (this.data.scores.best.more.limit >= this.cap.best) { this.data.scores.best.more.limit = this.cap.best }
+          this.LoadScores('best')
+        } else if (which === 'recentscore') {
+          this.data.scores.recent.more.limit += this.fetchMoreIncremental.score
+          if (this.data.scores.recent.more.limit >= this.cap.best) { this.data.recent.best.more.limit = this.cap.best }
+          this.LoadScores('recent')
+        } else if (which === 'mostplay') {
+          this.data.maps.most.more.limit += this.fetchMoreIncremental.map
+          if (this.data.maps.most.more.limit >= this.cap.best) { this.data.maps.most.more.limit = this.cap.best }
+          this.LoadMostBeatmaps()
+        }
+      },
+      actionIntToStr (d) {
+        switch (d.action) {
+          case 0:
+            return 'Idle: 🔍 Song Select'
+          case 1:
+            return '🌙 AFK'
+          case 2:
+            return `Playing: 🎶 ${d.info_text}`
+          case 3:
+            return `Editing: 🔨 ${d.info_text}`
+          case 4:
+            return `Modding: 🔨 ${d.info_text}`
+          case 5:
+            return 'In Multiplayer: Song Select'
+          case 6:
+            return `Watching: 👓 ${d.info_text}`
+          // 7 not used
+          case 8:
+            return `Testing: 🎾 ${d.info_text}`
+          case 9:
+            return `Submitting: 🧼 ${d.info_text}`
+          // 10 paused, never used
+          case 11:
+            return 'Idle: 🏢 In multiplayer lobby'
+          case 12:
+            return `In Multiplayer: Playing 🌍 ${d.info_text} 🎶`
+          case 13:
+            return 'Idle: 🔍 Searching for beatmaps in osu!direct'
+          default:
+            return 'Unknown: 🚔 not yet implemented!'
+        }
+      },
+      addCommas (nStr) {
+        nStr += ''
+        const x = nStr.split('.')
+        let x1 = x[0]
+        const x2 = x.length > 1 ? '.' + x[1] : ''
+        const rgx = /(\d+)(\d{3})/
+        while (rgx.test(x1)) {
+          x1 = x1.replace(rgx, '$1' + ',' + '$2')
+        }
+        return x1 + x2
+      },
+      secondsToDhm (seconds) {
+        seconds = Number(seconds)
+        const dDisplay = `${Math.floor(seconds / (3600 * 24))}d `
+        const hDisplay = `${Math.floor((seconds % (3600 * 24)) / 3600)}h `
+        const mDisplay = `${Math.floor((seconds % 3600) / 60)}m `
+        return dDisplay + hDisplay + mDisplay
+      },
+      StrtoGulagInt () {
+        switch (this.mode + '|' + this.mods) {
+          case 'std|vn':
+            return 0
+          case 'taiko|vn':
+            return 1
+          case 'catch|vn':
+            return 2
+          case 'mania|vn':
+            return 3
+          case 'std|rx':
+            return 4
+          case 'taiko|rx':
+            return 5
+          case 'catch|rx':
+            return 6
+          case 'std|ap':
+            return 8
+          default:
+            return -1
+        }
+      },
+      StrtoModeInt () {
+        switch (this.mode) {
+          case 'std':
+            return 0
+          case 'taiko':
+            return 1
+          case 'catch':
+            return 2
+          case 'mania':
+            return 3
+        }
+      }
+    }
+  })
+})
diff --git a/templates/404.html b/templates/404.html
index 9480f44b..e051c8c3 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -2,23 +2,23 @@
 {% block title %} 404 {% endblock %}
 
 {% block header %}
-<link rel="stylesheet" href="/static/css/pages/404.css">
+<link rel="stylesheet" href="/static/css/pages/404.css?v={{ appVersion() }} ">
 <style>html {--main: 355;}</style>
 {% endblock %}
 
 {% block content %}
 <div class="main-block">
 	<div class="title-block">
-		<span>404</span>
+		<span>{{ t('404.404') }}</span>
 		<h2 class="error-title">
-			Page not found
+            {{ t('404.page-not-found') }}
 		</h2>
 	</div>
 	<div class="error-block">
-		<h3 class="error-subtitle">Where am I?</h3>
+		<h3 class="error-subtitle">{{ t('404.where-am-i') }}</h3>
 		<ol>
-			<li>- Check that the URL you entered is correct.</li>
-			<li>- Make sure that the place you are visiting isn't under maintenance!</li>
+			<li>- {{ t('404.check-url') }}</li>
+			<li>- {{ t('404.make-sure-visit') }}</li>
 			<li></li>
 		</ol>
 	</div>
diff --git a/templates/admin/base.html b/templates/admin/base.html
index d91b3df7..fc87b760 100644
--- a/templates/admin/base.html
+++ b/templates/admin/base.html
@@ -1,95 +1,136 @@
 <html>
+  <head>
+    <!-- injection check -->
+    <script src="/static/js/_runtime-check.js"></script>
+    <!-- title -->
+    <title>
+      {{ appName() }} - {{ t('admin.base.admin') }} - {% block title %}{%
+      endblock %}
+    </title>
 
-<head>
-  <!-- title -->
-  <title>{{ appName() }} - Admin - {% block title %}{% endblock %}</title>
+    <!-- favicon -->
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/static/favicon/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/static/favicon/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/static/favicon/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/static/favicon/site.webmanifest" />
+    <link
+      rel="mask-icon"
+      href="/static/favicon/safari-pinned-tab.svg"
+      color="#d55b9e"
+    />
+    <link rel="shortcut icon" href="/static/favicon/favicon.ico" />
+    <meta name="msapplication-TileColor" content="#000000" />
+    <meta
+      name="msapplication-config"
+      content="/static/favicon/browserconfig.xml"
+    />
+    <meta name="theme-color" content="#000000" />
 
-  <!-- favicon -->
-  <link rel="apple-touch-icon" sizes="180x180" href="/static/favicon/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon/favicon-16x16.png">
-  <link rel="manifest" href="/static/favicon/site.webmanifest">
-  <link rel="mask-icon" href="/static/favicon/safari-pinned-tab.svg" color="#d55b9e">
-  <link rel="shortcut icon" href="/static/favicon/favicon.ico">
-  <meta name="msapplication-TileColor" content="#000000">
-  <meta name="msapplication-config" content="/static/favicon/browserconfig.xml">
-  <meta name="theme-color" content="#000000">
+    <!-- metadata -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-  <!-- metadata -->
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- jquery -->
+    <script src="/static/js/assets/jquery-min.js"></script>
 
-  <!-- jquery -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"
-    integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g=="
-    crossorigin="anonymous"></script>
+    <!-- bulma -->
+    <link rel="stylesheet" href="/static/css/bulma.css?v={{ appVersion() }} " />
 
-  <!-- bulma -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HakuraSukinoe/bulma-hsl/bulma.min-v6.css" />
+    <!-- font awesome -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+    />
 
-  <!-- font awesome -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+    <!-- custom style -->
+    <link rel="stylesheet" href="/static/css/style.css?v={{ appVersion() }} " />
+    <link
+      rel="stylesheet"
+      href="/static/css/pages/admin/style.css?v={{ appVersion() }} "
+    />
 
-  <!-- custom style -->
-  <link rel="stylesheet" href="/static/css/style.css">
-  <link rel="stylesheet" href="/static/css/pages/admin/style.css">
+    {% block header %} {% endblock %}
+  </head>
 
-  {% block header %}
-  {% endblock %}
-</head>
+  <body>
+    <!-- Header -->
+    {% include './components/navbar.html' %}
 
-<body>
-  <!-- Header -->
-  {% include './components/navbar.html' %}
-
-  <!-- content -->
-  <div class="content admin-con">
-    <div class="columns is-marginless is-paddingless">
-      <div class="colmun">
-        <div class="sidebar">
-          <div id="style-3" class="sidebar-wrapper">
-            <div class="logo"><a class="simple-text logo-normal">{{ appName() }} Admin Panel</a></div>
-            <ul class="nav">
-              <li class="nav-item"><a class="nav-link"><span class="icon"><i class="fa fa-home"></i></span> <span
-                    class="name">Dashboard</span></a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div class="column content">
-        <div class="main-content">
-          <div class="columns is-marginless">
-            <div class="column is-paddingless is-avatar">
-              <img src="https://a.{{ domain() }}/{{ session.user_data['id'] }}"
-                onError="this.src='/static/images/avatar_notwork.png';" class="header-avatar">
-            </div>
-            <div class="column is-paddingless flex-vcenter">
-              <h2 class="section-title">Dashboard</h2>
-              <p class="section-lead">Welcome to {{ appName() }} admin panel!</p>
+    <!-- content -->
+    <div class="content admin-con">
+      {#
+      <div class="columns is-marginless is-paddingless">
+        <div class="colmun">
+          <div class="sidebar">
+            <div id="style-3" class="sidebar-wrapper">
+              <div class="logo">
+                <a class="simple-text logo-normal"
+                  >{{ t('admin.base.admin-panel', appName = appName()) }}</a
+                >
+              </div>
+              <ul class="nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="/admin/dashboard"
+                    ><span class="icon"><i class="fa fa-home"></i></span>
+                    <span class="name">{{ t('admin.base.dashboard') }}</span></a
+                  >
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="/admin/users"
+                    ><span class="icon"><i class="fa fa-user"></i></span>
+                    <span class="name">{{ t("admin.base.users") }}</span></a
+                  >
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="/admin/restrictions"
+                    ><span class="icon"><i class="fa fa-ban"></i></span>
+                    <span class="name"
+                      >{{ t("admin.base.restrictions") }}</span
+                    ></a
+                  >
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="/admin/beatmaps"
+                    ><span class="icon"><i class="fa fa-map"></i></span>
+                    <span class="name">{{ t("admin.base.beatmaps") }}</span></a
+                  >
+                </li>
+              </ul>
             </div>
           </div>
-          <section class="section">
-            {% block content %}
-            {% endblock %}
-          </section>
+        </div>
+        <div class="column content">
+          <section class="section">/* block content */</section>
         </div>
       </div>
+      #}
+      <section class="section m-4">{% block content %} {% endblock %}</section>
     </div>
-  </div>
-
-  <!-- footer -->
-  <footer class="footer">
-    <div class="content">
-      <span>{{ appName() }} <strong>v{{ appVersion() }}</strong></span>
-      <a class="foot-link" href="/github"><i class="fa fa-github"></i> GitHub</a>
-      <a class="foot-link" href="/discord"><i class="fab fa-discord"></i> Discord</a>
-      <a class="foot-link" href="/youtube"><i class="fab fa-youtube"></i> YouTube</a>
-      <a class="foot-link" href="/twitter"><i class="fab fa-twitter"></i> Twitter</a>
-      <a class="foot-link" href="/instagram"><i class="fab fa-instagram"></i> Instagram</a>
-    </div>
-  </footer>
 
-  <!-- main js script -->
-  <script src="/static/js/main.js" crossorigin="anonymous"></script>
-</body>
+    <!-- footer -->
+    <footer class="footer">
+      <div class="content">
+        <span>{{ appName() }} <strong>v{{ appVersion() }}</strong></span>
+      </div>
+    </footer>
 
+    <!-- main js script -->
+    <script
+      src="/static/js/main.js?v={{ appVersion() }} "
+      crossorigin="anonymous"
+    ></script>
+  </body>
 </html>
diff --git a/templates/admin/beatmaps.html b/templates/admin/beatmaps.html
new file mode 100644
index 00000000..3d1b4b1a
--- /dev/null
+++ b/templates/admin/beatmaps.html
@@ -0,0 +1,257 @@
+{% extends 'admin/base.html' %}
+{% block header %}
+<style>
+    .rounded-sm {
+        border-radius: 7px !important;
+    }
+
+    .rounded {
+        border-radius: 0.5em
+    }
+
+    .h-100 {
+        height: 100%
+    }
+
+    .d-flex {
+        display: flex;
+    }
+
+    .gap-2 {
+        grid-gap: 1em 1em;
+    }
+
+    .i-text-no-wrap * {
+        white-space: nowrap;
+    }
+
+    .my-auto {
+        vertical-align: middle !important;
+    }
+
+    .progress {
+        position: fixed;
+        margin-top: -30px;
+        width: 85%;
+        z-index: 1;
+    }
+
+    .shadow {
+        filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.2));
+    }
+
+    .card .title,
+    .card .stat {
+        font-size: 12px
+    }
+</style>
+{% endblock %}
+{% block title %} Beatmaps {% endblock %}
+
+{% block content %}
+
+<script>
+    window.api_key = {{ session.user_data['api_key'] | JSON }}
+</script>
+
+<progress id="progress_bar" class="progress is-small is-primary" max="100" style="display: none;"></progress>
+<div class="columns is-marginless">
+    <div class="column is-paddingless flex-vcenter">
+        <h2 class="section-title">{{ t("admin.base.beatmaps") }}</h2>
+        <p class="section-lead">{{ t("admin.beatmaps.welcome-to-beatmaps-panel") }}</p>
+    </div>
+</div>
+<div class="row row-deck row-cards" style="margin-top: 20px">
+    <div class="columns is-marginless is-paddingless">
+        <div class="column is-paddingless p-3">
+            <div class="card has-text-right">
+                <i class="fa fa-plus"></i>
+                <div class="title">{{ t("admin.beatmaps.total-beatmaps") }}</div>
+                <div class="value">{{ counts['total'] }}</div>
+                <div class="stat has-text-left">{{ t("admin.beatmaps.thats-a-lot-of-maps") }}</div>
+            </div>
+        </div>
+        <div class="column is-paddingless p-3">
+            <div class="card has-text-right">
+                <i class="fa fa-bolt"></i>
+                <div class="title">{{ t("admin.beatmaps.ranked") }}</div>
+                <div class="value">{{ counts['ranked'] }}</div>
+                <div class="stat has-text-left">{{ t("admin.beatmaps.these-maps-can-gain-many-pp") }}</div>
+            </div>
+        </div>
+        <div class="column is-paddingless p-3">
+            <div class="card has-text-right">
+                <i class="fa fa-heart"></i>
+                <div class="title">{{ t("admin.beatmaps.loved") }}</div>
+                <div class="value"> {{counts['loved'] }}</div>
+                <div class="stat has-text-left">{{ t("admin.beatmaps.we-loved-them-so-much") }}</div>
+            </div>
+        </div>
+        <div class="column is-paddingless p-3">
+            <div class="card has-text-right">
+                <i class="fa fa-arrows-rotate"></i>
+                <div class="title">{{ t("admin.beatmaps.pending") }}</div>
+                <div class="value">{{ counts['pending'] }}</div>
+                <div class="stat has-text-left">{{ t("admin.beatmaps.they-are-also-good-maps") }}</div>
+            </div>
+        </div>
+    </div>
+    <div class="p-0 d-flex gap-2 py-3">
+        <input placeholder='{{ t("admin.beatmaps.search-by-bid-sid-or-title") }}' id="search-bar" class="input"
+            value="{{ search_word }}">
+        <button onclick="searchMaps()" class="button" style="width: 200px">{{ t("admin.beatmaps.search") }}</button>
+    </div>
+    <div class="table-responsive py-3">
+        <table class="table rounded">
+            <thead>
+                <tr class="i-text-no-wrap">
+                    <th class="has-text-centered" style="width: 400px">{{ t("admin.beatmaps.beatmap") }}</th>
+                    <th class="has-text-right">{{ t("admin.beatmaps.cs-keys") }}</th>
+                    <th class="has-text-right">{{ t("admin.beatmaps.ar") }}</th>
+                    <th class="has-text-right">{{ t("admin.beatmaps.hp") }}</th>
+                    <th class="has-text-right">{{ t("admin.beatmaps.od") }}</th>
+                    <th class="has-text-right">{{ t("admin.beatmaps.bpm") }}</th>
+                    <th class="has-text-right">{{ t("admin.beatmaps.stars") }}</th>
+                    <th class="has-text-centered">{{ t("admin.beatmaps.status") }}</th>
+                    <th class="has-text-centered">{{ t("admin.restrictions.action") }}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for i in bmap_query %}
+                <tr>
+                    <td style="width: 400px">
+                        <div class="card p-0 m-0 shadow"
+                            style="background-image: url(https://assets.ppy.sh/beatmaps/{{ i.set_id }}/covers/cover.jpg); background-size: cover; height: 100px; width: 400px;">
+                            <a href="https://osu.ppy.sh/beatmapsets/{{ i.set_id }}">
+                                <div 
+                                    class="card-body rounded-sm h-100 p-4"
+                                    style="background-color: rgba(0, 0, 0, 0.8);cursor:pointer;"
+                                >
+                                    <div class="play-detail__title">{{ i.title }}
+                                        <small style="display: inline;">by {{ i.creator }}</small>
+                                    </div>
+                                    <span style="color: #ea0; font-size: 14px; display: block;">{{ i.diff_name }}</span>
+                                    <div
+                                        style="font-size: 14px; position: absolute;bottom: 1em; right: 1em; opacity: 0.7;">
+                                        bid: <span style="color: #ea0;">{{ i.map_id }}</span>
+                                    </div>
+                                </div>
+                            </a>
+                        </div>
+                    </td>
+                    <td class="!bigger_td my-auto has-text-right">
+                        {{ i.cs }}
+                    </td>
+                    <td class="!bigger_td my-auto has-text-right">
+                        {{ i.ar }}
+                    </td>
+                    <td class="!bigger_td my-auto has-text-right">
+                        {{ i.hp }}
+                    </td>
+                    <td class="!bigger_td my-auto has-text-right">
+                        {{ i.od }}
+                    </td>
+                    <td class="!bigger_td my-auto has-text-right">
+                        {{ i.bpm }}
+                    </td>
+                    <td class="!bigger_td my-auto has-text-right">
+                        {{ i.stars }}
+                    </td>
+                    <td class="!bigger_td my-auto has-text-centered">
+                        <div class="tag
+                        {% if i.status == 2 %} is-primary
+                        {% elif i.status == 3 %} is-success
+                        {% elif i.status == 0 %} is-light
+                        {% elif i.status == 5 %} is-danger 
+                        {% else %} is-dark 
+                        {% endif %}
+                        ">{{ decode_map_status(i.status) }}</div>
+                    </td>
+                    <td class="!bigger_td my-auto has-text-centered">
+                        <div class="dropdown is-right" id="i-dropdown-{{ i.map_id }}">
+                            <div class="dropdown-trigger">
+                                <button class="button" aria-haspopup="true" aria-controls="dropdown-menu"
+                                    onclick="document.getElementById('i-dropdown-{{ i.map_id }}').classList.toggle('is-active')">
+                                    <span>{{ t("admin.beatmaps.edit-status") }}</span>
+                                    <span class="icon is-small">
+                                        <i class="fas fa-angle-down" aria-hidden="true"></i>
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ i.map_id }}" role="menu">
+                                <div class="dropdown-content has-background-primary">
+                                    <a class="dropdown-item {% if i.status == 2 %} is-disabled {% endif %}"
+                                        href="/admin/beatmaps/edit/{{ i.map_id }}?status=2&set=0">{{
+                                        t("admin.beatmaps.ranked-diff") }}</a>
+                                    <a class="dropdown-item {% if i.status == 5 %} is-disabled {% endif %}"
+                                        href="/admin/beatmaps/edit/{{ i.map_id }}?status=5&set=0">{{
+                                        t("admin.beatmaps.loved-diff") }}</a>
+                                    <a class="dropdown-item {% if i.status == 3 %} is-disabled {% endif %}"
+                                        href="/admin/beatmaps/edit/{{ i.map_id }}?status=3&set=0">{{
+                                        t("admin.beatmaps.approved-diff") }}</a>
+                                    <a class="dropdown-item {% if i.status == 0 %} is-disabled {% endif %}"
+                                        href="/admin/beatmaps/edit/{{ i.map_id }}?status=0&set=0">{{
+                                        t("admin.beatmaps.pending-diff") }}</a>
+                                    <hr class="dropdown-divider">
+                                    <a class="dropdown-item"
+                                        href="/admin/beatmaps/edit/{{ i.set_id }}?status=2&set=1">{{
+                                        t("admin.beatmaps.ranked-set") }}</a>
+                                    <a class="dropdown-item"
+                                        href="/admin/beatmaps/edit/{{ i.set_id }}?status=5&set=1">{{
+                                        t("admin.beatmaps.loved-set") }}</a>
+                                    <a class="dropdown-item"
+                                        href="/admin/beatmaps/edit/{{ i.set_id }}?status=3&set=1">{{
+                                        t("admin.beatmaps.approved-set") }}</a>
+                                    <a class="dropdown-item"
+                                        href="/admin/beatmaps/edit/{{ i.set_id }}?status=0&set=1">{{
+                                        t("admin.beatmaps.pending-set") }}</a>
+                                    <hr class="dropdown-divider">
+                                    <a class="dropdown-item"
+                                        href="javascript:void(0);" onclick="updateMaps({{ i.set_id }})">{{
+                                        t("admin.beatmaps.update-maps") }}</a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+<style>
+    .bigger_td {
+        line-height: 7;
+        font-size: 20;
+    }
+
+    .play-detail__title {
+        color: #fff;
+        font-size: 20px;
+        display: block;
+        align-self: flex-start;
+        max-width: 100%;
+    }
+    /* mimic <a> tag behavior */
+    .play-detail__title:hover {
+        color: hsl(var(--main), 90%, 90%);
+    }
+</style>
+<script>
+    $(document).ready(function () {
+        $(".dropdown .buttond").click(function () {
+            const dropdown = $(this).parents('.dropdown');
+            dropdown.toggleClass('is-active');
+            dropdown.focusout(function () {
+                $(this).removeClass('is-active');
+            });
+        });
+    });
+    $("#search-bar").keydown(function (e) {
+        if (e.keyCode == 13) {
+            searchMaps()
+        }
+    });  
+</script>
+<script src="/static/js/pages/admin/beatmaps.js?v={{ appVersion() }} "></script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/admin/home.html b/templates/admin/home.html
index 107380e2..6de69609 100644
--- a/templates/admin/home.html
+++ b/templates/admin/home.html
@@ -1,60 +1,71 @@
 {% extends 'admin/base.html' %}
 {% block title %} Dashboard {% endblock %}
 {% block header %}
-<script src="/static/js/asserts/vue.js"></script>
-<script src="/static/js/asserts/vue-axios.js"></script>
+<script src="/static/js/assets/vue.js?v={{ appVersion() }} "></script>
+<script src="/static/js/assets/vue-axios.js?v={{ appVersion() }} "></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/timeago.js/4.0.2/timeago.min.js"></script>
 <script>
-    var domain = "{{ domain() }}";
+    window.domain = {{ domain() | JSON }};
 </script>
+<style>
+    .card .title, .card .stat {
+        font-size: 12px
+    }
+</style>
 {% endblock%}
 
 {% block content %}
 
+<div class="columns is-marginless">
+    <div class="column is-paddingless flex-vcenter">
+      <h2 class="section-title">{{ t('admin.base.dashboard') }}</h2>
+      <p class="section-lead">{{ t('admin.base.welcome-to-admin-panel', appName = appName()) }}</p>
+    </div>
+</div>
 <div class="dashboard" id="dashboard">
     <div class="columns is-marginless is-paddingless">
         <div class="column is-paddingless p-3">
             <div class="card">
-                <div class="title">total users</div>
+                <div class="title">{{ t('admin.home.total-users') }}</div>
                 <i class="fa fa-users"></i>
                 <div class="value">{{ dashdata['count'] }}</div>
-                <div class="stat">that's a lot of people!</div>
+                <div class="stat">{{ t('admin.home.that-s-a-lot-of-people') }}</div>
             </div>
         </div>
         <div class="column is-paddingless p-3">
             <div class="card">
-                <div class="title">total online</div>
+                <div class="title">{{ t('admin.home.total-online') }}</div>
                 <i class="fa fa-circle"></i>
                 <div class="value">
                     <% online_users %>
                 </div>
-                <div class="stat">rising in popularity are we?</div>
+                <div class="stat">{{ t('admin.home.rising-in-popularity-aren-t-we') }}</div>
             </div>
         </div>
         <div class="column is-paddingless p-3">
             <div class="card">
-                <div class="title">lastest user</div>
+                <div class="title">{{ t('admin.home.latest-user') }}</div>
                 <i class="fa fa-book"></i>
                 <div class="value">{{ dashdata['lastest_user'] }}</div>
-                <div class="stat">latest and greatest! welcome!</div>
+                <div class="stat">{{ t('admin.home.latest-and-greatest-welcome') }}</div>
             </div>
         </div>
         <div class="column is-paddingless p-3">
             <div class="card">
-                <div class="title">total banned</div>
+                <div class="title">{{ t('admin.home.total-banned') }}</div>
                 <i class="fa fa-calendar"></i>
                 <div class="value">{{ dashdata['banned'] }}</div>
-                <div class="stat">naughty naughty :(</div>
+                <div class="stat">{{ t('admin.home.naughty-sad-face') }}</div>
             </div>
         </div>
     </div>
 <div class="columns is-marginless is-paddingless">
     {% if recentusers %}
-    <div class="column is-paddingless m-2 is-3">
+    <div class="column is-paddingless m-1 is-3">
         <div class="recent-beat">
             <div class="columns is-marginless">
                 <div class="column is-paddingless flex-vcenter">
-                    <h2 class="section-title">Recent Users</h2>
+                    <h2 class="section-title">{{ t('admin.home.recent-users') }}</h2>
                 </div>
             </div>
             <div class="blockdata">
@@ -72,10 +83,6 @@ <h2 class="section-title">Recent Users</h2>
                                 (datetime.datetime.now() + datetime.timedelta(seconds = 60 * 3.4))) }}
                             </span>
                             <div class="d-flex align-items-baseline">
-                                <span>
-                                {{ timeago.format((datetime.datetime.fromtimestamp(user.latest_activity)),
-                                    (datetime.datetime.now() + datetime.timedelta(seconds = 60 * 3.4))) }}
-                                </span>
                                 <div class="target-button newmaps-color">
                                     <i class="fa fa-arrow-right"></i>
                                 </div>
@@ -89,11 +96,11 @@ <h2 class="section-title">Recent Users</h2>
     </div>
     {% endif %}
     {% if recentscores %}
-    <div class="column is-paddingless m-2">
+    <div class="column is-paddingless m-1">
         <div class="recent-beat">
             <div class="columns is-marginless">
                 <div class="column is-paddingless flex-vcenter">
-                    <h2 class="section-title">Recent Score</h2>
+                    <h2 class="section-title">{{ t('admin.home.recent-score') }}</h2>
                 </div>
             </div>
             <div class="blockdata">
@@ -119,8 +126,8 @@ <h2 class="section-title">Recent Score</h2>
                             <div class="score-details_right-block">
                                 <div class="score-details_pp-block">
                                     <div class="map-pp">
-                                        {{ maps.pp }}<span class="map-pp-unit">pp</span></div>
-                                    <div class="map-acc">accuracy:&nbsp;<b>
+                                        {{ maps.pp }}<span class="map-pp-unit">{{ t('global.pp').upper() }}</span></div>
+                                    <div class="map-acc">{{ t('global.accuracy') }}:&nbsp;<b>
                                         {{ maps.acc }}%
                                         </b></div>
                                 </div>
@@ -142,6 +149,6 @@ <h2 class="section-title">Recent Score</h2>
     {% endif %}
 </div>
 
-<script src="/static/js/pages/admin/dashboard.js"></script>
+<script src="/static/js/pages/admin/dashboard.js?v={{ appVersion() }} "></script>
 
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/admin/restrictions.html b/templates/admin/restrictions.html
new file mode 100644
index 00000000..2eb86a71
--- /dev/null
+++ b/templates/admin/restrictions.html
@@ -0,0 +1,69 @@
+{% extends 'admin/base.html' %} {% block header %}
+<style>
+  .text-nowrap {
+    white-space: nowrap;
+  }
+  .rounded {
+    border-radius: 0.5rem;
+  }
+  .d-flex {
+    display: flex;
+  }
+  .gap-2 {
+    grid-gap: 1em 1em;
+  }
+</style>
+{% endblock %} {% block title %} Restrictions {% endblock %} {% block content %}
+<div class="columns is-marginless">
+  <div class="column is-paddingless flex-vcenter">
+    <h2 class="section-title">{{ t("admin.base.restrictions") }}</h2>
+    <p class="section-lead">
+      {{ t("admin.restrictions.welcome-to-restrictions-panel") }}
+    </p>
+  </div>
+</div>
+<div class="table-responsive pt-4">
+  <table class="table table-vcenter text-nowrap datatable rounded">
+    <thead>
+      <tr>
+        <th class="has-text-right">{{ t("admin.users.id") }}</th>
+        <th>{{ t("admin.users.flag-or-username") }}</th>
+        <th class="has-text-centered">{{ t("admin.restrictions.details") }}</th>
+        <th class="has-text-centered">{{ t("admin.restrictions.date") }}</th>
+        <th class="has-text-centered">{{ t("admin.restrictions.action") }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for i in query_data %}
+      <tr>
+        <td class="has-text-right">{{ i.id }}</td>
+        <td class="td-truncate text-nowrap">
+          <img
+            src="/static/images/flags/{{ i.country|upper }}.png"
+            class="profile-flag"
+            style="
+              width: 25px;
+              height: 17px;
+              -webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.63);
+              box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2);
+            "
+          />
+          <a class="ml-2" href="/u/{{ i.id }}">{{ i.name }}</a>
+        </td>
+        <td>{% if i.msg %}{{ i.msg }} {% else %} - {% endif %}</td>
+        <td class="has-text-centered">
+          {% if i.time %}{{ i.time }} {% else %} - {% endif %}
+        </td>
+        <td>
+          <a class="btn text-nowrap" href="/admin/user/{{ i.id }}/edit">
+            <i class="far fa-edit" aria-hidden="true"></i> {{
+            t("admin.users.edit") }}
+          </a>
+        </td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+
+{% endblock %}
diff --git a/templates/admin/users/edit.html b/templates/admin/users/edit.html
new file mode 100644
index 00000000..3c3fd90e
--- /dev/null
+++ b/templates/admin/users/edit.html
@@ -0,0 +1,100 @@
+{% extends 'admin/base.html' %}
+{% block header %}
+<style>
+    .text-nowrap {
+        white-space: nowrap;
+    }
+
+    .w-100 {
+        width: 100%;
+    }
+
+    .ml-auto {
+        margin-left: auto;
+    }
+
+    .gap-2 {
+        gap: 0.5em;
+    }
+</style>
+{% endblock %}
+{% block title %} Users {% endblock %}
+
+{% block content %}
+<form action="/admin/user/{{ search_data['id'] }}/update" method="POST" id="edit-user">
+    <div class="is-flex is-align-items-center is-flex-direction-column">
+        <article style="min-width: fit-content; width: 40vw;" class="panel is-primary">
+            <p class="panel-heading">
+                {{ t("admin.users.edit-info-of", name = search_data['name']) }}
+            </p>
+            <div class="panel-block columns" style="height: 50px;">
+                <div class="column is-one-quarter text-nowrap is-flex is-align-items-center gap-2">
+                    <i class="fas fa-id-card" aria-hidden="true"></i>
+                    {{ t("admin.users.username") }}
+                </div>
+                <div class="column">
+                    <input name="edit-username" type="text" class="input" value="{{ search_data.name }}">
+                </div>
+            </div>
+            <div class="panel-block columns" style="height: 50px;">
+                <div class="column is-one-quarter text-nowrap is-flex is-align-items-center gap-2">
+                    <i class="fas fa-envelope" aria-hidden="true"></i>
+                    {{ t("admin.users.email") }}
+                </div>
+                <div class="column">
+                    <input name="edit-email" type="text" class="input" value="{{ search_data.email }}">
+                </div>
+            </div>
+            <div class="panel-block columns" style="height: 50px;">
+                <div class="column is-one-quarter text-nowrap is-flex is-align-items-center gap-2">
+                    <i class="fas fa-globe-americas" aria-hidden="true"></i>
+                    {{ t("admin.users.country") }}
+                </div>
+                <div class="column is-flex gap-2 is-align-items-center">
+                    <img id="country-preview" src="/static/images/flags/{{ search_data.country | upper }}.png"
+                        class="profile-flag"
+                        style="width: 25px; height: 17px; -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.63); box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.2);">
+                    <input name="edit-country" type="text" class="input" value="{{ search_data.country }}" oninput="
+                        if (this.value.length === 2) {
+                            document.getElementById('country-preview').src = '/static/images/flags/' + this.value.toUpperCase() + '.png'
+                        }
+                    ">
+                </div>
+            </div>
+            <div class="panel-block columns" style="height: 50px;">
+                <div class="column is-one-quarter text-nowrap is-flex is-align-items-center gap-2">
+                    <i class="fas fa-key" aria-hidden="true"></i>
+                    {{ t("admin.users.password") }}
+                </div>
+                <div class="column">
+                    <input name="password" type="text" class="input" placeholder='{{ t("admin.users.new-password") }}'>
+                </div>
+            </div>
+            <div class="panel-block columns" style="height: 50px;">
+                <div class="column is-one-quarter text-nowrap is-flex is-align-items-center gap-2">
+                    <i class="fas fa-ban" aria-hidden="true"></i>
+                    {{ t("admin.users.legality") }}
+                </div>
+                <div class="column">
+                    <div class="select w-100">
+                        <select name="legality" class="w-100">
+                            <option value="unrestricted">{{ t("admin.users.unrestricted") }}</option>
+                            {% if search_data.priv == 2 %}
+                            <option value="restricted" selected>{{ t("admin.users.restricted") }}</option>
+                            {% endif %}
+                            {% if search_data.priv != 2 %}
+                            <option value="restricted">{{ t("admin.users.restricted") }}</option>
+                            {% endif %}
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="panel-block pb-4">
+                <div style="margin-left: auto;"></div>
+                <button type="submit" form="edit-user" style="margin-right: 1em; width: 100px;"
+                    class="button is-primary">{{ t("admin.users.update") }}</button>
+            </div>
+        </article>
+    </div>
+</form>
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/admin/users/index.html b/templates/admin/users/index.html
new file mode 100644
index 00000000..d5245d8e
--- /dev/null
+++ b/templates/admin/users/index.html
@@ -0,0 +1,126 @@
+{% extends 'admin/base.html' %}
+{% block header %}
+<style>
+    .text-nowrap {
+        white-space: nowrap;
+    }
+
+    .rounded {
+        border-radius: 0.5rem;
+    }
+
+    .d-flex {
+        display: flex;
+    }
+
+    .gap-2 {
+        grid-gap: 1em 1em;
+    }
+</style>
+{% endblock %}
+{% block title %} Users {% endblock %}
+
+{% block content %}
+<div class="columns is-marginless">
+    <div class="column is-paddingless flex-vcenter">
+        <h2 class="section-title">{{ t("admin.base.users") }}</h2>
+        <p class="section-lead">{{ t("admin.users.welcome-to-users-panel") }}</p>
+    </div>
+</div>
+<div class="card" style="margin-top: 20px">
+    <div class="columns">
+        <div class="column px-3 pb-2 pt-4 d-flex gap-2">
+            <input id="search-bar" class="input" v-model.trim="search" placeholder='{{ t("admin.users.search-by-username-or-email") }}'
+                value="{{ search_value }}">
+            <a class="button is-primary" onclick="searchUsers()">{{ t("admin.users.search") }}</a>
+        </div>
+    </div>
+    <div class="table-responsive">
+        <table class="table card-table table-vcenter text-nowrap datatable rounded">
+            <thead>
+                <tr>
+                    <th class="has-text-right">{{ t("admin.users.id") }}</th>
+                    <th>{{ t("admin.users.flag-or-username") }}</th>
+                    <th class="has-text-centered">{{ t("admin.users.privilege") }}</th>
+                    <th class="has-text-centered">{{ t("admin.users.last-login") }}</th>
+                    <th class="has-text-centered">{{ t("admin.users.joined-at") }}</th>
+                    <th class="has-text-centered">{{ t("admin.users.client-channel") }}</th>
+                    <th class="has-text-centered">{{ t("admin.users.email") }}</th>
+                    <th class="has-text-centered">{{ t("admin.users.ip") }}</th>
+                    <th class="has-text-centered"></th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for i in query_data %}
+                <tr>
+                    <td class="has-text-right">{{ i.id }}</td>
+                    <td class="td-truncate text-nowrap">
+                        <img src="/static/images/flags/{{ i.country|upper }}.png" class="profile-flag"
+                            style="width: 25px; height: 17px; -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.63); box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.2);">
+                        <a class='ml-2' href="/u/{{ i.id }}">{{ i.name }}</a>
+                    </td>
+                    <td class="has-text-centered">
+                        {% for priv in (format_priv(i.priv)) %}
+                        <div class="tag
+                        {% if priv == 'Normal' %} is-disabled
+                        {% elif priv == 'Restricted' %} is-danger
+                        {% elif priv == 'Disclaimed' %} is-warning
+                        {% elif priv == 'Stuff' %} is-info
+                        {% elif priv == 'Nominator' %} is-success
+                        {% else %} is-primary
+                        {% endif %}
+                        ">{{ priv }}</div>
+                        {% endfor %}</td>
+                    <td class="has-text-centered">
+                    {% if i.last_login %}{{ i.last_login }}
+                    {% else %} -
+                    {% endif %}
+                    </td>
+                    <td class="has-text-centered">{{ handle_timestamp(i.creation_time) }}</td>
+                    <td class="has-text-centered">
+                    {% if i.osu_stream %}
+                        <div class="tag
+                        {% if i.osu_stream == 'stable' %} is-disabled
+                        {% elif i.osu_stream == 'beta' %} is-info
+                        {% elif i.osu_stream == 'cuttingedge' %} is-primary
+                        {% elif i.osu_stream == 'tourney' %} is-dark
+                        {% elif i.osu_stream == 'fallback' %} is-warning
+                        {% else %} is-danger
+                        {% endif %}
+                        ">{{ i.osu_stream }}
+                        </div>
+                    {% else %} -
+                    {% endif %}
+                    </td>
+                    <td class="has-text-centered"><a href="mailto:{{ i.email }}">{{ i.email }}</a></td>
+                    <td class="has-text-centered">
+                        {% if i.ip != None %}
+                        <a target="_blank" href="https://whatismyipaddress.com/ip/{{ i.ip }}">
+                            {{ i.ip }}
+                        </a>
+                        {% else %}
+                        -
+                        {% endif %}
+                    </td>
+                    <td class="has-text-centered">
+                        <a class="btn text-nowrap" href="/admin/user/{{ i.id }}/edit">
+                            <i class="far fa-edit" aria-hidden="true"></i> {{ t("admin.users.edit") }}
+                        </a>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<script>
+    $("#search-bar").keydown(function (e) {
+        if (e.keyCode == 13) {
+            searchUsers()
+        }
+    });  
+</script>
+<script src="/static/js/pages/admin/users.js?v={{ appVersion() }} " crossorigin="anonymous"></script>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 554a31e2..96168af7 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,6 +1,8 @@
 <html>
 
 <head>
+  <!-- injection check -->
+  <script src="/static/js/_runtime-check.js"></script>
   <!-- Title -->
   <title>{{ appName() }} - {% block title %}{% endblock %}</title>
 
@@ -19,18 +21,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <!-- JQuery -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"
-    integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g=="
-    crossorigin="anonymous"></script>
+  <script src="/static/js/assets/jquery-min.js"></script>
 
   <!-- Bulma -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HakuraSukinoe/bulma-hsl/bulma.min-v7.css" />
+  <link rel="stylesheet" href="/static/css/bulma.css?v={{ appVersion() }} " />
+
 
   <!-- Font awesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
 
   <!-- Custom style -->
-  <link rel="stylesheet" href="/static/css/style.css">
+  <link rel="stylesheet" href="/static/css/style.css?v={{ appVersion() }} ">
 
   {% block header %}
   {% endblock %}
@@ -50,10 +51,10 @@
   {% include 'components/footer.html' %}
 
   <!-- Main JS script -->
-  <script src="/static/js/main.js" crossorigin="anonymous"></script>
+  <script src="/static/js/main.js?v={{ appVersion() }} " crossorigin="anonymous"></script>
 
   <!-- Customisation -->
   {% block bottom %}{% endblock %}
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/templates/components/footer.html b/templates/components/footer.html
index e3598af8..c755cfd8 100644
--- a/templates/components/footer.html
+++ b/templates/components/footer.html
@@ -1,10 +1,5 @@
 <footer class="footer">
     <div class="content">
         <span>{{ appName() }} <strong>v{{ appVersion() }}</strong></span>
-        <a class="foot-link" href="/github"><i class="fab fa-github"></i> GitHub</a>
-        <a class="foot-link" href="/discord"><i class="fab fa-discord"></i> Discord</a>
-        <a class="foot-link" href="/youtube"><i class="fab fa-youtube"></i> YouTube</a>
-        <a class="foot-link" href="/twitter"><i class="fab fa-twitter"></i> Twitter</a>
-        <a class="foot-link" href="/instagram"><i class="fab fa-instagram"></i> Instagram</a>
     </div>
 </footer>
diff --git a/templates/components/navbar.html b/templates/components/navbar.html
index 8f82323f..84af767f 100644
--- a/templates/components/navbar.html
+++ b/templates/components/navbar.html
@@ -1,3 +1,6 @@
+<script type="text/javascript">
+    window.domain = {{ domain() | JSON }}
+</script>
 <nav id="navbar" class="navbar is-primary">
     <div class="navbar-brand">
         <a class="navbar-item navbar-logo" href="/home">
@@ -14,39 +17,64 @@
     <div id="navbar" class="navbar-menu">
         <div class="navbar-start">
             <a class="navbar-item" href="/home">
-                Home
+                {{ t('navbar.home') }}
             </a>
 
             <a class="navbar-item" href="/leaderboard">
-                Leaderboards
+                {{ t('navbar.leaderboards') }}
             </a>
 
-            <!--<div class="navbar-item has-dropdown is-hoverable">
-                <a class="navbar-link">
-                    Information
+
+            {% if session.authenticated and session.user_data['is_staff'] %}
+            <div class="navbar-item has-dropdown is-hoverable">
+                <a class="navbar-link" href="/admin">
+                    {{ t('navbar.admin') }}
                 </a>
                 <div class="navbar-dropdown">
-                    <a class="navbar-item" href="/doc/rules">
-                        Rules
+                    <a class="navbar-item" href="/admin/dashboard">
+                        {{ t('admin.base.dashboard') }}
+                    </a>
+                    <a class="navbar-item" href="/admin/users">
+                        {{ t("admin.base.users") }}
                     </a>
-                    <a class="navbar-item" href="/discord">
-                        Discord
+                    <a class="navbar-item" href="/admin/restrictions">
+                        {{ t("admin.base.restrictions") }}
                     </a>
-                    <hr class="navbar-divider">
-                    <a class="navbar-item" href="https://github.com/varkaria/guweb/issues/new">
-                        Report an issue
+                    <a class="navbar-item" href="/admin/beatmaps">
+                        {{ t("admin.base.beatmaps") }}
                     </a>
                 </div>
-            </div>-->
-
-            {% if session.authenticated and session.user_data['is_staff'] %}
-            <a class="navbar-item" href="/admin">
-                Admin
-            </a>
+            </div>
             {% endif %}
         </div>
 
         <div class="navbar-end">
+            <div class="navbar-item has-dropdown is-hoverable" style="align-items: center;">
+                <div class="navbar-search">
+                    <input autocomplete="off" type="text" placeholder='{{ t("navbar.looking-for-someone") }}'
+                        id="u-search" oninput="searchUser()">
+                </div>
+                <div id="u-search-content" class="navbar-dropdown" style="display: none;">
+                </div>
+            </div>
+            <div class="navbar-item has-dropdown is-hoverable">
+                <i style="display: flex;" class="fa fa-globe navbar-link"></i>
+                <div class="navbar-dropdown">
+                    <a class="navbar-item" href="/language/zh_CN{{ request.path }}">
+                        <img style="size: 20px; margin-right: 5px;" src="/static/images/flags/CN.png">
+                        简体中文
+                    </a>
+                    <a class="navbar-item" href="/language/en_US{{ request.path }}">
+                        <img style="size: 20px; margin-right: 5px;" src="/static/images/flags/US.png">
+                        English - US
+                    </a>
+                    <a class="navbar-item" href="/language/en_GB{{ request.path }}">
+                        <img style="size: 20px; margin-right: 5px;" src="/static/images/flags/GB.png">
+                        English - Global
+                    </a>
+                </div>
+            </div>
+
             {% if session.authenticated %}
             <div class="navbar-item has-dropdown is-hoverable">
                 <a class="navbar-link">
@@ -54,26 +82,26 @@
                 </a>
                 <div class="navbar-dropdown">
                     <a class="navbar-item" href="/u/{{ session.user_data['id'] }}">
-                        Profile
+                        {{ t('navbar.profile') }}
                     </a>
                     <a class="navbar-item" href="/settings">
-                        Settings
+                        {{ t('navbar.settings') }}
                     </a>
                 </div>
             </div>
             <div class="navbar-item">
                 <a class="button is-light" href="/logout">
-                    Logout
+                    {{ t('navbar.logout') }}
                 </a>
             </div>
             {% else %}
             <div class="navbar-item">
                 <div class="buttons">
                     <a class="button is-primary" href="/register">
-                        <strong>Sign up</strong>
+                        <strong>{{ t('global.sign-up') }}</strong>
                     </a>
                     <a class="button is-light" href="/login">
-                        Log in
+                        {{ t('global.log-in') }}
                     </a>
                 </div>
             </div>
@@ -81,4 +109,4 @@
         </div>
     </div>
     </div>
-</nav>
+</nav>
\ No newline at end of file
diff --git a/templates/forgot.html b/templates/forgot.html
new file mode 100644
index 00000000..42fce30a
--- /dev/null
+++ b/templates/forgot.html
@@ -0,0 +1,66 @@
+{% extends "base.html" %}
+{% block title %} Reset Password {% endblock %}
+
+{% block header %}
+<link rel="stylesheet" href="/static/css/pages/auth.css?v={{ appVersion() }} ">
+{% endblock %}
+
+{% block content %}
+
+<div class="main-block is-marginless is-paddingless is-auth">
+  <div class="columns is-reset is-weeb">
+    <div class="column title-block">
+      <h1 class="title" id="regtitle">Reset Password</h1>
+    </div>
+  </div>
+  <div class="columns is-reset flex-lcenter is-block">
+    <div class="box">
+     <div class="content">
+    <form action="/reset_password" method="post" class="form-content">
+      <div class="field">
+        <label for="user" class="label">Username</label>
+        <div class="control has-icons-left">
+          <input id="user" type="text" name="username" placeholder="Username" class="input" autocomplete="off" required>
+          <span class="icon is-small is-left">
+            <i class="fa fa-user"></i>
+          </span>
+        </div>
+      </div>
+      <div class="field">
+        <label for="email" class="label">Email</label>
+        <div class="control has-icons-left">
+          <input id="email" type="text" name="email" placeholder="Email" class="input" autocomplete="off" required>
+          <span class="icon is-small is-left">
+            <i class="fa fa-envelope"></i>
+          </span>
+        </div>
+      </div>
+      <div class="field">
+        <label for="code" class="label">Verify Code</label>
+        <div class="control has-icons-left">
+          <input id="code" type="text" name="code" placeholder="Verify Code" class="input" autocomplete="off" required>
+          <span class="icon is-small is-left">
+            <i class="fa fa-lock"></i>
+          </span>
+        </div>
+      </div>
+      <div class="mt-5"></div>
+      <div class="field flex-vcenter">
+        <div class="buttons">
+          <button type="submit" class="button is-primary">
+              Reset
+          </button>
+        </div>
+      </div>
+    </form></div>
+    </div>
+  </div>
+</div>
+
+{% if flash %}
+<div class="paper-snackbar is-{{ status }}" style="opacity: 1;">
+  {{ flash }}
+</div>
+{% endif %}
+
+{% endblock %}
diff --git a/templates/home.html b/templates/home.html
index bab491e2..5c799b15 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -2,7 +2,7 @@
 {% block title %} Home {% endblock %}
 
 {% block header %}
-<link rel="stylesheet" href="/static/css/pages/home.css">
+<link rel="stylesheet" href="/static/css/pages/home.css?v={{ appVersion() }} ">
 {% endblock %}
 
 {% block content %}
@@ -15,16 +15,16 @@
       <div class='noti-col noti-col-label'>
         <div class='noti-bannertype'>
           {% if status=='error' %}
-          Warning
+          {{ t('global.bannertype-error') }}
           {% elif status=='success' %}
-          Notice
+          {{ t('global.bannertype-success') }}
           {% endif %}
         </div>
         <div class='noti-bannertext'>
           {% if status=='error' %}
-          Uh oh! Be careful!
+          {{ t('global.bannertext-error') }}
           {% elif status=='success' %}
-          Hey! Listen!
+          {{ t('global.bannertext-success') }}
           {% endif %}
         </div>
       </div>
@@ -42,19 +42,16 @@
       <div class="column flex-vcenter flex-lcenter is-size-2-desktop is-size-1-fullhd" id="title">
         <h1 class="title is-spaced is-size-2-desktop is-size-1-fullhd">{{ appName() }}</h1>
         <h2 class="subtitle">
-          We are an osu! private server built from the ground up with many
-          unique features not seen elsewhere - for more information, check
-          out <a href="http://github.com/cmyui/gulag">gulag</a>
-          and <a href="https://github.com/Varkaria/guweb">guweb</a>
-          on GitHub - we're fully open source!
+          {{ t('home.subtitle-big', appName = appName()) }}
+
         </h2>
         {% if not session.authenticated %}
         <div class="buttons">
           <a class="button is-primary" href="/register">
-            <strong>Sign up</strong>
+            <strong>{{ t('global.sign-up') }}</strong>
           </a>
           <a class="button is-light" href="/login">
-            Log in
+            {{ t('global.log-in') }}
           </a>
         </div>
         {% endif %}
@@ -66,9 +63,9 @@ <h2 class="subtitle">
   </div>
 </div>
 
-<section class="section">
+<section class="section" style="display: none;">
   <div class="container has-text-centered py-4">
-    <h2 class="title mb-6">Some of our coolest features</h2>
+    <h2 class="title mb-6">{{ t('home.some-of-our-coolest-features') }}</h2>
     <div class="columns has-text-left mb-6">
       <div class="column is-4">
         <div class="columns">
@@ -76,11 +73,8 @@ <h2 class="title mb-6">Some of our coolest features</h2>
             <i class="image is-32x32 fas fa-address-card"></i>
           </div>
           <div class="column is-10">
-            <h4 class="title is-spaced is-4">PP for Relax and Autopilot</h4>
-            <p class="subtitle is-6">Our server has unique pp formula for relax and autopilot.
-              Good at waving your cursor or just smashing your keyboard? Join {{ appName() }} and get a fair reward for
-              your skills!
-            </p>
+            <h4 class="title is-spaced is-4">{{ t('home.features-title-1') }}</h4>
+            <p class="subtitle is-6">{{ t('home.features-content-1', appName = appName()) }}</p>
           </div>
         </div>
       </div>
@@ -90,12 +84,8 @@ <h4 class="title is-spaced is-4">PP for Relax and Autopilot</h4>
             <i class="image is-32x32 fas fa-ambulance"></i>
           </div>
           <div class="column is-10">
-            <h4 class="title is-spaced is-4">Free osu!direct</h4>
-            <p class="subtitle is-6">You won't have to pay for osu!supporter to have a convenient gameplay experience in
-              the
-              client - osu!direct is available for everyone! Keep in mind supporting us still grants a huge set of cool
-              perks but
-              absence of it doesn't affect your game sessions!</p>
+            <h4 class="title is-spaced is-4">{{ t('home.features-title-2') }}</h4>
+            <p class="subtitle is-6">{{ t('home.features-content-2') }}</p>
           </div>
         </div>
       </div>
@@ -105,9 +95,8 @@ <h4 class="title is-spaced is-4">Free osu!direct</h4>
             <i class="image is-32x32 fas fa-archive"></i>
           </div>
           <div class="column is-10">
-            <h4 class="title is-spaced is-4">Flexible library</h4>
-            <p class="subtitle is-6">We're written on top of cmyui's multipurpose library allowing for a fully
-              asynchronous environment, both improving performance and the user's experience in the long term!</p>
+            <h4 class="title is-spaced is-4">{{ t('home.features-title-3') }}</h4>
+            <p class="subtitle is-6">{{ t('home.features-content-3') }}</p>
           </div>
         </div>
       </div>
@@ -116,18 +105,17 @@ <h4 class="title is-spaced is-4">Flexible library</h4>
 </section>
 
 {% if not session.authenticated %}
-<section class="hero splash">
+<section class="hero splash" style="display: none;">
   <div class="hero-body">
     <div class="container has-text-centered">
-      <h1 class="title is-spaced">What are you waiting for?</h1>
-      <h2 class="subtitle">Join {{ appName() }}! It's risk-free! You won't get your account banned on official servers
-        if
-        you play here with us! And don't worry, as you can always switch between the official servers and us at any time!</h2>
-      <div class="buttons is-centered"><a class="control button is-primary" href="/register">Sign up for free</a><a
-          class="control button is-light" href="/login">Login</a></div>
+      <h1 class="title is-spaced">{{ t('home.what-are-you-waiting-for') }}</h1>
+      <h2 class="subtitle">{{ t('home.subtitle', appName = appName()) }}</h2>
+      <div class="buttons is-centered"><a class="control button is-primary" href="/register">{{
+          t('home.sign-up-for-free') }}</a><a class="control button is-light" href="/login">{{ t('global.log-in') }}</a>
+      </div>
     </div>
   </div>
 </section>
 {% endif %}
 
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/leaderboard.html b/templates/leaderboard.html
index a217ba8c..0bb907eb 100644
--- a/templates/leaderboard.html
+++ b/templates/leaderboard.html
@@ -1,118 +1,128 @@
 {% extends 'base.html' %}
-{% block title %} Leaderboard {% endblock %}
+{% block title %} {{ t('global.leaderboard') }} {% endblock %}
 
 {% block header %}
-<script src="/static/js/asserts/vue.js"></script>
-<script src="/static/js/asserts/vue-axios.js"></script>
+<script src="/static/js/assets/vue.js?v={{ appVersion() }} "></script>
+<script src="/static/js/assets/vue-axios.js?v={{ appVersion() }} "></script>
 
 <script>
-    var mode = "{{ mode }}";
-    var mods = "{{ mods }}";
-    var sort = "{{ sort }}";
-    var domain = "{{ domain() }}";
+  globalThis.mode = {{ mode | JSON }};
+  globalThis.mods = {{ mods | JSON }};
+  globalThis.sort = {{ sort | JSON }};
+  globalThis.domain = {{ domain() | JSON }};
 </script>
 
-<link rel="stylesheet" href="/static/css/pages/leaderboard.css">
+<link rel="stylesheet" href="/static/css/pages/leaderboard.css?v={{ appVersion() }} ">
 {% endblock %}
 
 {% block content %}
 <div id="app" :class="(load ? 'load' : '')">
-    <div class="leaderboard-banner main-banner">
-        <div class="main-selector">
-            <a class="mode-select" v-bind:class="{ 'active': mode === 'std' }"
-            @click="LoadLeaderboard(sort, 'std', mods)">
-                <i class="mode-icon mode-osu"></i><span class="modetext"> osu!</span>
-            </a>
-            <a class="mode-select" v-bind:class="{ 'active': mode === 'taiko', 'disabled': mods === 'ap' }"
-            @click="LoadLeaderboard(sort, 'taiko', mods)">
-                <i class="mode-icon mode-taiko"></i><span class="modetext"> osu!taiko</span>
-            </a>
-            <a class="mode-select" v-bind:class="{ 'active': mode === 'catch', 'disabled': mods === 'ap' }"
-            @click="LoadLeaderboard(sort, 'catch', mods)">
-                <i class="mode-icon mode-catch"></i><span class="modetext"> osu!catch</span>
-            </a>
-            <a class="mode-select" v-bind:class="{ 'active': mode === 'mania', 'disabled': mods === 'ap' || mods === 'rx' }"
-            @click="LoadLeaderboard(sort, 'mania', mods)">
-                <i class="mode-icon mode-mania"></i><span class="modetext"> osu!mania</span>
-            </a>
-        </div>
-        <div class="banner-text">Leaderboard</div>
-        <div class="selector">
-            <div class="left">
-                <a class="simple-banner-switch" v-bind:class="{ 'active': sort === 'pp' }"
-                @click="LoadLeaderboard('pp', mode, mods, '')">PP</a>
-                <a class="simple-banner-switch" v-bind:class="{ 'active': sort === 'rscore' }"
-                @click="LoadLeaderboard('rscore', mode, mods, '')">Score</a>
-            </div>
-            <div class="right">
-                <a class="simple-banner-switch" v-bind:class=" { 'active': mods === 'vn' }"
-                @click="LoadLeaderboard(sort, mode, 'vn')">Vanilla</a>
-                <a class="simple-banner-switch" v-bind:class=" { 'active': mods === 'rx', 'disabled': mode === 'mania' }"
-                @click="LoadLeaderboard(sort, mode, 'rx')">Relax</a>
-                <a class="simple-banner-switch" v-bind:class=" { 'active': mods === 'ap', 'disabled': mode === 'taiko' || mode === 'catch' || mode === 'mania'  }"
-                @click="LoadLeaderboard(sort, mode, 'ap')">Autopilot</a>
-            </div>
-        </div>
+  <div class="leaderboard-banner main-banner">
+    <div class="main-selector">
+      <a class="mode-select" :class="{ 'active': mode === 'std' }" @click="LoadLeaderboard(sort, 'std', mods)">
+        <i class="mode-icon mode-osu"></i><span class="modetext"> {{ t('global.mode.osu') }}</span>
+      </a>
+      <a class="mode-select" :class="{ 'active': mode === 'taiko', 'disabled': mods === 'ap' }"
+        @click="LoadLeaderboard(sort, 'taiko', mods)">
+        <i class="mode-icon mode-taiko"></i><span class="modetext"> {{ t('global.mode.taiko') }}</span>
+      </a>
+      <a class="mode-select" :class="{ 'active': mode === 'catch', 'disabled': mods === 'ap' }"
+        @click="LoadLeaderboard(sort, 'catch', mods)">
+        <i class="mode-icon mode-catch"></i><span class="modetext"> {{ t('global.mode.catch') }}</span>
+      </a>
+      <a class="mode-select" :class="{ 'active': mode === 'mania', 'disabled': mods === 'ap' || mods === 'rx' }"
+        @click="LoadLeaderboard(sort, 'mania', mods)">
+        <i class="mode-icon mode-mania"></i><span class="modetext"> {{ t('global.mode.mania') }}</span>
+      </a>
     </div>
-    <div class="main-block">
-        <div class="leaderboard-main-bg table-responsive">
-            <div v-if="boards.length != undefined && boards.length != 0">
-                <table class="leaderboard-table table-responsive">
-                    <thead>
-                        <tr>
-                            <th class="t-heading"> </th>
-                            <th class="t-heading t-heading--main"></th>
-                            <th v-if="sort == 'pp' || sort == 'rscore'" class="t-heading table--selected">
-                                <% (sort=='pp' ? "PP" : "" ) %>
-                                    <% (sort=='rscore' ? "Score" : "" ) %>
-                            </th>
-                            <th class="t-heading"> Accuracy </th>
-                            <th class="t-heading"> Playcount </th>
-                            <th class="t-heading"> Max Combo </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="(user, index) in boards" class="leaderboard-column">
-                            <td class="column-player-rank">#<% index + 1 %>
-                            </td>
-                            <td class="column-player-name text-left">
-                                <a :title="flags[user.country.toUpperCase()]"
-                                    :style="'background-image: url(/static/images/flags/' + user.country.toUpperCase() + '.png)'"
-                                    class="player-flag">
-                                    <div class="flag-dropdown">
-                                        <% flags[user.country.toUpperCase()] %>
-                                    </div>
-                                </a>
-                                <a :href="'/u/'+user.player_id+'?mode='+mode+'&mods='+mods">
-                                    <% user.name %>
-                                </a>
-                            </td>
-                            <td v-if="sort == 'pp' || sort == 'rscore'">
-                                <% (sort=='pp' ? user.pp+'pp' : "" ) %>
-                                    <% (sort=='rscore' ? scoreFormat(user.rscore) : "" ) %>
-                            </td>
-                            <td>
-                                <% user.acc.toFixed(2) %>%
-                            </td>
-                            <td>
-                                <% addCommas(user.plays) %>
-                            </td>
-                            <td>
-                                <% addCommas(user.max_combo) %>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            <div v-else>
-                <div class="text-center">
-                    there are no players to display!
-                </div>
-            </div>
+    <div class="banner-text">{{ t('leaderboard.leaderboard') }}</div>
+    <div class="selector">
+      <div class="left">
+        <a class="simple-banner-switch" :class="{ 'active': sort === 'pp' }"
+          @click="LoadLeaderboard('pp', mode, mods, '')">{{ t('global.pp').upper() }}</a>
+        <a class="simple-banner-switch" :class="{ 'active': sort === 'rscore' }"
+          @click="LoadLeaderboard('rscore', mode, mods, '')">{{ t('global.score') }}</a>
+        <a class="simple-banner-switch" :class="{ 'active': sort === 'acc' }"
+          @click="LoadLeaderboard('acc', mode, mods, '')">{{ t('global.acc') }}</a>
+        <a class="simple-banner-switch" :class="{ 'active': sort === 'plays' }"
+          @click="LoadLeaderboard('plays', mode, mods, '')">{{ t('global.playcount') }}</a>
+        <a class="simple-banner-switch" :class="{ 'active': sort === 'playtime' }"
+          @click="LoadLeaderboard('playtime', mode, mods, '')">{{ t('global.playtime') }}</a>
+      </div>
+      <div class="right">
+        <a class="simple-banner-switch" :class=" { 'active': mods === 'vn' }"
+          @click="LoadLeaderboard(sort, mode, 'vn')">{{ t('global.mode.vanilla') }}</a>
+        <a class="simple-banner-switch" :class=" { 'active': mods === 'rx', 'disabled': mode === 'mania' }"
+          @click="LoadLeaderboard(sort, mode, 'rx')">{{ t('global.mode.relax') }}</a>
+        <a class="simple-banner-switch"
+          :class=" { 'active': mods === 'ap', 'disabled': mode === 'taiko' || mode === 'catch' || mode === 'mania'  }"
+          @click="LoadLeaderboard(sort, mode, 'ap')">{{ t('global.mode.autopilot') }}</a>
+      </div>
+    </div>
+  </div>
+  <div class="main-block">
+    <div class="leaderboard-main-bg table-responsive">
+      <div v-if="boards.length != undefined && boards.length != 0">
+        <table class="leaderboard-table table-responsive">
+          <thead>
+            <tr>
+              <th class="t-heading"> </th>
+              <th class="t-heading t-heading--main"></th>
+              <th v-if="sort == 'pp' || sort == 'rscore'" class="t-heading table--selected">
+                <% (sort=='pp' ? {{ t('global.pp').upper() | JSON }} : "" ) %>
+                  <% (sort=='rscore' ? {{ t('global.score') | JSON }} : "" ) %>
+              </th>
+              <th class="t-heading"> {{ t('global.accuracy') }} </th>
+              <th class="t-heading"> {{ t('global.playcount') }} </th>
+              <th class="t-heading"> {{ t('global.max-combo') }} </th>
+              <th class="t-heading"> {{ t('global.playtime') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(user, index) in boards" class="leaderboard-column">
+              <td class="column-player-rank">#<% index + 1 %>
+              </td>
+              <td class="column-player-name has-text-left">
+                <a :title="flags[user.country.toUpperCase()]"
+                  :style="'background-image: url(/static/images/flags/' + user.country.toUpperCase() + '.png)'"
+                  class="player-flag">
+                  <div class="flag-dropdown">
+                    <% flags[user.country.toUpperCase()] %>
+                  </div>
+                </a>
+                <a :href="'/u/'+user.player_id">
+                  <% user.name %>
+                </a>
+              </td>
+              <td v-if="sort == 'pp' || sort == 'rscore'" class="has-text-right pr-3">
+                <% (sort=='pp' ? addCommas(user.pp) : "" ) %>
+                  <% (sort=='rscore' ? scoreFormat(user.rscore) : "" ) %>
+              </td>
+              <td class="has-text-right pr-3">
+                <% user.acc.toFixed(2) %>%
+              </td>
+              <td class="has-text-right pr-3">
+                <% addCommas(user.plays) %>
+              </td>
+              <td class="has-text-right pr-3">
+                <% addCommas(user.max_combo) %>
+              </td>
+              <td class="has-text-right pr-3">
+                <% secondsToDhm(user.playtime) %>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-else>
+        <div class="text-center">
+          {{ t('leaderboard.there-are-no-players-to-display') }}
         </div>
+      </div>
     </div>
+  </div>
 </div>
 
-<script src="/static/js/asserts/vue-flags.js"></script>
-<script src="/static/js/pages/leaderboard.js"></script>
-{% endblock %}
+<script src="/static/js/assets/vue-flags.js?v={{ appVersion() }} "></script>
+<script src="/static/js/pages/leaderboard.js?v={{ appVersion() }}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
index 95404e52..ab127c0c 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,8 +1,8 @@
 {% extends "base.html" %}
-{% block title %} Login {% endblock %}
+{% block title %} {{ t('global.login') }} {% endblock %}
 
 {% block header %}
-<link rel="stylesheet" href="/static/css/pages/auth.css">
+<link rel="stylesheet" href="/static/css/pages/auth.css?v={{ appVersion() }} ">
 {% endblock %}
 
 {% block content %}
@@ -10,7 +10,7 @@
 <div class="main-block is-marginless is-paddingless is-auth">
   <div class="columns is-reset is-weeb">
     <div class="column title-block">
-      <h1 class="title" id="regtitle">Login</h1>
+      <h1 class="title" id="regtitle">{{ t('global.log-in') }}</h1>
     </div>
   </div>
   <div class="columns is-reset flex-lcenter is-block">
@@ -18,7 +18,7 @@ <h1 class="title" id="regtitle">Login</h1>
      <div class="content">
     <form action="/login" method="post" class="form-content">
       <div class="field">
-        <label for="user" class="label">Username</label>
+        <label for="user" class="label">{{ t('login.username') }}</label>
         <div class="control has-icons-left">
           <input id="user" type="text" name="username" placeholder="Username" class="input" autocomplete="username" required>
           <span class="icon is-small is-left">
@@ -27,7 +27,7 @@ <h1 class="title" id="regtitle">Login</h1>
         </div>
       </div>
       <div class="field">
-        <label for="pass" class="label">Password</label>
+        <label for="pass" class="label">{{ t('global.password') }}</label>
         <div class="control has-icons-left">
           <input id="pass" type="password" name="password" placeholder="Password" class="input" autocomplete="current-password" required>
           <span class="icon is-small is-left">
@@ -37,18 +37,18 @@ <h1 class="title" id="regtitle">Login</h1>
       </div>
       <div class="mt-5"></div>
       <div class="dialog">
-        Don't have an account?
+          {{ t('login.dont-have-an-account') }}
         <a href="/register">
-          Register
+            {{ t('login.register') }}
         </a>
       </div>
       <div class="field flex-vcenter">
         <div class="buttons">
           <button type="submit" class="button is-primary">
-            Login
+              {{ t('global.log-in') }}
           </button>
           <a href="/forgot" class="button is-info"> <!-- will probably have paths "/forgot/username" and "/forgot/password" -->
-            Forgot login?
+              {{ t('login.forgot-login') }}
           </a>
         </div>
       </div>
diff --git a/templates/profile.html b/templates/profile.html
index 23c5d5e3..cf1257f8 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -1,374 +1,495 @@
-{% extends 'base.html' %}
-{% block title %} Profile {% endblock %}
-
-{% macro scores(title, id) %}
-<div class="log-block" v-bind:class="{ 'load' : data.scores.{{ id }}.load }">
-    <div class="header">
-        <div class="title">
-            <i class="fas fa-trophy"></i> {{ title }}
-        </div>
+{% extends 'base.html' %} {% block title %} {{ t('global.profile__literal') }} {%
+endblock %} {% macro userpage(user) %} {% if user['userpage_content'] != None
+and user['userpage_content'] != "" %}
+<div class="log-block">
+  <div class="header">
+    <div class="title">
+      <i class="fas fa-address-book"></i> {{ t("profile.about-me-title") }}
     </div>
-    <div v-if="data.scores.{{ id }}.out.length != 0" class="scores">
-        <div v-for="(map, index) in data.scores.{{ id }}.out" class="map-single"
-            :style="`background: linear-gradient(hsl(var(--main), 25%, 25%, 90%), hsl(var(--main), 25%, 25%, 90%)), url(https://assets.ppy.sh/beatmaps/${map.beatmap.set_id}/covers/cover.jpg)`">
-            <div class="map-data">
-                <div class="map-content1">
-                    <div class="map-image">
-                        <img v-bind:src="'https://assets.ppy.sh/beatmaps/' + map.beatmap.set_id + '/covers/card.jpg'"
-                            class="map-image-picture">
-                    </div>
-                    <div class="map-title-block">
-                        <div class="map-title">
-                            <a class="beatmap-link">
-                                <% map.beatmap.artist %> - <% map.beatmap.title %> [<% map.beatmap.version %>] <!--<span v-if="map.mods != 0">+ <% modsStr(map.mods) %></span>-->
-                            </a>
-                        </div>
-                        <div class="play-stats">
-                            <% addCommas(map.score) %> / <% map.max_combo %><b>x</b>
-                        </div>
-                        <div class="map-date">
-                            <time>
-                                <% timeago.format(map.play_time) %>
-                            </time>
-                        </div>
-                    </div>
-                </div>
-                <div class="map-content2">
-                    <div class="score-details d-flex">
-                        <div class="score-details_right-block">
-                            <div class="score-details_pp-block">
-                                <div class="map-pp">
-                                    <% map.pp.toFixed() %><span class="map-pp-unit">pp</span>
-                                </div>
-                                <div class="map-acc">accuracy:&nbsp;<b>
-                                        <% map.acc.toFixed(2) %>%
-                                    </b></div>
-                            </div>
-                            <div class="score-details_grade-block">
-                                <div class="rank-single">
-                                    <div v-bind:class="'map-rank rank-'+map.grade">
-                                        <% map.grade.replace("X", "SS" ).replace("H", "" ) %>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+  </div>
+  <div class="stats-block rank-block" style="padding: 12.5px">
+    <article class="reset-bulma-style">
+      {{ render_markdown(user['userpage_content']) | safe }}
+    </article>
+  </div>
+</div>
+{% endif %} {% endmacro %} {% macro scores(title, id) %}
+<div class="log-block" :class="{ load : data.scores.{{ id }}.load }">
+  <div class="header">
+    <div class="title"><i class="fas fa-trophy"></i> {{ title }}</div>
+  </div>
+  <div v-if="data.scores.{{ id }}.out.length" class="scores">
+    <div v-for="(map, index) in data.scores.{{ id }}.out" class="map-single" ref="scores" :key="map.beatmap.map_id"
+      :style="`background: linear-gradient(hsl(var(--main), 25%, 25%, 90%), hsl(var(--main), 25%, 25%, 90%)), url(https://assets.ppy.sh/beatmaps/${map.beatmap.set_id}/covers/cover.jpg)`">
+      <div class="map-data" @click="window.open(`https://osu.ppy.sh/beatmaps/${map.beatmap.id}`) ">
+        <div class="map-content1">
+          <div class="map-image">
+            <img :src="`https://assets.ppy.sh/beatmaps/${map.beatmap.set_id}/covers/card.jpg`" class="map-image-picture"
+              defer />
+          </div>
+          <div class="map-title-block">
+            <div class="map-title">
+              <a class="beatmap-link">
+                <% map.beatmap.artist %> - <% map.beatmap.title %> [<% map.beatmap.version %>]
+              </a>
             </div>
-        </div>
-    </div>
-    <div v-else-if="data.scores.{{ id }}.out.length == 0" class="stats-block">
-        <div class="columns is-marginless">
-            <div class="column is-1">
-                <h1 class="title">: (</h1>
+            <div class="play-stats">
+              <% getScoreMods(map.mods) %> /
+                <b>
+                  <% addCommas(map.max_combo) %>
+                </b>x
             </div>
-            <div class="column">
-                <h1 class="title is-6">No scores available</h1>
-                <p class="subtitle is-7">Try playing something?</p>
+            <div class="map-date">
+              <time>
+                <% timeago.format(map.play_time) %>
+              </time>
             </div>
+          </div>
         </div>
-    </div>
-    <div v-if="data.scores.{{ id }}.more.full == false" class="extra-block">
-        <a class="show-button" @click="AddLimit('{{ id }}score')">Show more</a>
-    </div>
-</div>
-{% endmacro %}
-
-{% macro maps(title, id) %}
-<div class="log-block" v-bind:class="{ 'load' : data.maps.{{ id }}.load }">
-    <div class="header">
-        <div class="title">
-            <i class="fas fa-address-book"></i> Most Played Beatmaps
-        </div>
-    </div>
-    <div v-if="data.maps.{{ id }}.out.length != 0" class="beatmaps">
-        <a v-for="(map, index) in data.maps.{{ id }}.out" class="beatmap-block">
-            <div class="beatmap-preview"
-                v-bind:style='{ background: `url(https://assets.ppy.sh/beatmaps/${map.set_id}/covers/card.jpg)` }'>
-            </div>
-            <div class="beatmap-stats"><span class="beatmap-title">
-                    <% map.title %>
-                </span> <span class="beatmap-artist">
-                    <% map.artist %>
-                </span>
-                <div class="beatmap-footer"><span class="beatmap-mapper"> by <span
-                            class="newmaps-color">
-                            <% map.creator %>
-                        </span></span>
-                    <div class="d-flex align-items-baseline"><span>
-                            <% map.plays %>
-                        </span>
-                        <div class="target-button newmaps-color"><i class="fas fa-arrow-right"></i>
-                        </div>
-                    </div>
+        <div class="map-content2">
+          <div class="score-details d-flex">
+            <div class="score-details_right-block">
+              <div class="score-details_pp-block">
+                <div class="map-pp">
+                  <% addCommas(map.pp.toFixed()) %><span class="map-pp-unit">{{ t('global.pp') }}</span>
                 </div>
+                <div class="map-acc">
+                  {{ t('global.accuracy') }}:&nbsp;<b>
+                    <% map.acc.toFixed(2) %>%
+                  </b>
+                </div>
+              </div>
+              <div class="score-details_grade-block">
+                <div class="rank-single">
+                  <div :class="`map-rank rank-${map.grade}`">
+                    <% map.grade.replace("X", "SS" ).replace("H", "" ) %>
+                  </div>
+                </div>
+              </div>
             </div>
-        </a>
+          </div>
+        </div>
+      </div>
     </div>
-    <div v-else-if="data.maps.{{ id }}.out.length == 0" class="stats-block">
-        <div class="columns is-marginless">
-            <div class="column is-1">
-                <h1 class="title">: (</h1>
-            </div>
-            <div class="column">
-                <h1 class="title is-6">No beatmaps available</h1>
-                <p class="subtitle is-7">Try playing something?</p>
+  </div>
+  <div v-else-if="data.scores.{{ id }}.out.length == 0" class="stats-block">
+    <div class="columns is-marginless">
+      <div class="column is-1">
+        <h1 class="title">: (</h1>
+      </div>
+      <div class="column">
+        <h1 class="title is-6">{{ t('profile.no-scores-available') }}</h1>
+        <p class="subtitle is-7">{{ t('profile.try-playing-something') }}</p>
+      </div>
+    </div>
+  </div>
+  <div v-if="data.scores.{{ id }}.more.full == false" class="extra-block">
+    <a class="show-button rounded-sm" @click="AddLimit('{{ id }}score')">{{ t('profile.show-more') }}</a>
+  </div>
+</div>
+{% endmacro %} {% macro maps(title, id) %}
+<div class="log-block" :class="{ load : data.maps.{{ id }}.load }">
+  <div class="header">
+    <div class="title"><i class="fas fa-address-book"></i> {{ title }}</div>
+  </div>
+  <div v-if="data.maps.{{ id }}.out.length" class="beatmaps">
+    <a v-for="(map, index) in data.maps.{{ id }}.out" class="beatmap-block rounded-sm" ref="mostPlayed" :key="map.id">
+      <div class="beatmap-preview"
+        :style="{ background: `url(https://assets.ppy.sh/beatmaps/${map.set_id}/covers/card.jpg)` }"></div>
+      <div class="beatmap-stats">
+        <span class="beatmap-title">
+          <% map.title %>
+        </span>
+        <span class="beatmap-artist">
+          <% map.artist %>
+        </span>
+        <div class="beatmap-footer">
+          <span class="beatmap-mapper">
+            {{ t('profile.by') }}
+            <span class="newmaps-color">
+              <% map.creator %>
+            </span></span>
+          <div class="d-flex align-items-baseline">
+            <span>
+              <% map.plays %>
+            </span>
+            <div class="target-button newmaps-color">
+              <i class="fas fa-arrow-right"></i>
             </div>
+          </div>
         </div>
+      </div>
+    </a>
+  </div>
+  <div v-else-if="data.maps.{{ id }}.out.length == 0" class="stats-block">
+    <div class="columns is-marginless">
+      <div class="column is-1">
+        <h1 class="title">: (</h1>
+      </div>
+      <div class="column">
+        <h1 class="title is-6">{{ t('profile.no-beatmaps-available') }}</h1>
+        <p class="subtitle is-7">{{ t('profile.try-playing-something') }}</p>
+      </div>
     </div>
-    <div v-if="data.maps.{{ id }}.more.full == false" class="extra-block">
-        <a class="show-button" @click="AddLimit('mostplay')">Show more</a>
-    </div>
+  </div>
+  <div v-show="data.maps.{{ id }}.more.full == false" class="extra-block">
+    <a class="show-button rounded-sm" @click="AddLimit('mostplay')">{{ t('profile.show-more') }}</a>
+  </div>
 </div>
-{% endmacro %}
-
-{% block header %}
-<script src="/static/js/asserts/vue.js"></script>
-<script src="/static/js/asserts/vue-axios.js"></script>
+{% endmacro %} {% block header %}
+<script src="/static/js/assets/vue.js?v={{ appVersion() }} "></script>
+<script src="/static/js/assets/vue-axios.js?v={{ appVersion() }} "></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/timeago.js/4.0.2/timeago.min.js"></script>
-<link rel="stylesheet" href="/static/css/pages/profile.css">
+<link rel="stylesheet" href="/static/css/pages/profile.css?v={{ appVersion() }} " />
 
 <script>
-    var userid = Number("{{ user['id'] }}"); //For text editor doesn't dizzy lmao
-    var mode = '{{ mode }}';
-    var mods = '{{ mods }}';
-    var domain = "{{ domain() }}";
+  window.addEventListener('load', () => {
+    window._state = createState({
+      userid: {{ user['id'] | JSON }},
+    mode: {{ mode | JSON }},
+    mods: {{ mods | JSON }},
+    domain: {{ domain() | JSON }}
+      })
+  })
 </script>
-{% endblock %}
+<style>
+  .rounded-sm {
+    border-radius: 0.5em;
+  }
+</style>
+
+{% if user['userpage_content'] != None and user['userpage_content'] != "" %}
+<style>
+  /* HTML5 display-role reset for older browsers */
+
+  article,
+  .reset-bulma-style aside,
+  .reset-bulma-style details,
+  .reset-bulma-style figcaption,
+  .reset-bulma-style figure,
+  .reset-bulma-style footer,
+  .reset-bulma-style header,
+  .reset-bulma-style hgroup,
+  .reset-bulma-style menu,
+  .reset-bulma-style nav,
+  .reset-bulma-style section {
+    display: block;
+  }
+
+  .reset-bulma-style body {
+    line-height: 1;
+  }
+
+  .reset-bulma-style ol,
+  .reset-bulma-style ul {
+    list-style: none;
+  }
+
+  .reset-bulma-style blockquote,
+  .reset-bulma-style q {
+    quotes: none;
+  }
+
+  .reset-bulma-style blockquote:before,
+  .reset-bulma-style blockquote:after,
+  .reset-bulma-style q:before,
+  .reset-bulma-style q:after {
+    content: "";
+    content: none;
+  }
+
+  .reset-bulma-style table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
 
-{% block content %}
+  /* custom css */
+
+  .reset-bulma-style ul,
+  .reset-bulma-style li {
+    list-style: initial;
+    padding: initial;
+    margin: initial;
+    margin-left: 1em;
+  }
+
+  .reset-bulma-style h1 {
+    font-size: 2.5em;
+  }
+
+  .reset-bulma-style h2 {
+    font-size: 2em;
+  }
+
+  .reset-bulma-style h3 {
+    font-size: 1.67em;
+  }
+
+  .reset-bulma-style h4 {
+    font-size: 1.33em;
+  }
+
+  .reset-bulma-style h5 {
+    font-size: 1em;
+  }
+
+  .reset-bulma-style h6 {
+    font-size: 0.5em;
+  }
+
+  .reset-bulma-style pre {
+    border-radius: 0.5em;
+  }
+</style>
+{% endif %} {% endblock %} {% block content %}
 <div id="app">
-    <div class="main-block">
-        <div class="profile-bg">
-            <div class="info-block">
-                <h1 class="title">
-                    <p class="ranks">
-                        <img src="/static/images/flags/{{ user['country']|upper }}.png" class="profile-flag">
-                        <span class="bgf">{{ user['name'] }}</span>
-                    </p>
-                </h1>
-                <transition name="fade">
-                    <div class="subtitle" v-if='data.status.online == false'>
-                        <a class='circle'>●</a> Offline
-                    </div>
-                    <div class="subtitle" v-else-if='data.status.online == true'>
-                        <a class='circle green'>●</a> Online
-                    </div>
-                </transition>
-            </div>
-            <div class="anime-girl">
-                <!-- (if you want to add it)
-                    <img src="{your transparent img src}" alt="">
-                -->
-            </div>
+  <div class="main-block">
+    <div class="profile-bg">
+      <div class="info-block">
+        <h1 class="title">
+          <p class="ranks">
+            <img src="/static/images/flags/{{ user['country']|upper }}.png" class="profile-flag" />
+            <span class="bgf">{{ user['name'] }}</span>
+          </p>
+        </h1>
+        <transition name="fade">
+          <div class="subtitle" v-if="data.status.online == false">
+            <a class="circle">●</a> {{ t('global.offline') }}
+          </div>
+          <div class="subtitle" v-else-if="data.status.online == true" :style="{
+                        display: 'flex',
+                        gap: '0.5em',
+                        alignItems: 'center'
+                    }">
+            <a class="circle green">●</a> {{ t('global.online') }}
             <transition name="click">
-                <div class="online-infomation" v-if='data.status.online == true'
-                    :key="actionIntToStr(data.status.status)">
-                    <% actionIntToStr(data.status.status) %>
-                </div>
+              <div class="online-infomation" :key="`online-information`">
+                <% actionIntToStr(data.status.status) %>
+              </div>
             </transition>
+          </div>
+        </transition>
+      </div>
+      <div class="anime-girl">
+        <!-- (if you want to add it)
+                    <img src="{your transparent img src}" alt="">
+                -->
+      </div>
+    </div>
+    <div class="profile-flex">
+      <div class="profile-avatar-area">
+        <img src="https://a.{{ domain() }}/{{ user['id'] }}" alt="avatar" class="rounded-avatar profile-avatar"
+          onError="this.src='/static/images/avatar_notwork.png';" defer />
+      </div>
+      <div class="bar-selection mode-selects">
+        <div class="select-left">
+          <a class="simple-banner-switch" :class="{ 'selected': mode === 'std' }" @click="ChangeModeMods('std',mods)"><i
+              class="mode-icon mode-osu"></i><span class="mode-text">{{ t('global.mode.osu') }}</span></a>
+          <a class="simple-banner-switch" :class="{ 'selected': mode === 'taiko', 'disabled': mods === 'ap' }"
+            @click="ChangeModeMods('taiko',mods)"><i class="mode-icon mode-taiko"></i><span class="mode-text">{{
+              t('global.mode.taiko') }}</span></a>
+          <a class="simple-banner-switch" :class="{ 'selected': mode === 'catch', 'disabled': mods === 'ap' }"
+            @click="ChangeModeMods('catch',mods)"><i class="mode-icon mode-catch"></i><span class="mode-text">{{
+              t('global.mode.catch') }}</span></a>
+          <a class="simple-banner-switch"
+            :class="{ 'selected': mode === 'mania', 'disabled': mods === 'ap' || mods === 'rx' }"
+            @click="ChangeModeMods('mania',mods)"><i class="mode-icon mode-mania"></i><span class="mode-text">{{
+              t('global.mode.mania') }}</span></a>
         </div>
-        <div class="profile-flex">
-            <div class="profile-avatar-area">
-                <img src="https://a.{{ domain() }}/{{ user['id'] }}" alt="avatar" class="rounded-avatar profile-avatar"
-                    onError="this.src='/static/images/avatar_notwork.png';">
-            </div>
-            <div class="bar-selection mode-selects">
-                <div class="select-left">
-                    <a class="simple-banner-switch" v-bind:class="{ 'selected': mode === 'std' }"
-                        @click="ChangeModeMods('std',mods)"><i class="mode-icon mode-osu"></i><span
-                            class="mode-text">osu!</span></a>
-                    <a class="simple-banner-switch" v-bind:class="{ 'selected': mode === 'taiko', 'disabled': mods === 'ap' }"
-                        @click="ChangeModeMods('taiko',mods)"><i class="mode-icon mode-taiko"></i><span
-                            class="mode-text">osu!taiko</span></a>
-                    <a class="simple-banner-switch" v-bind:class="{ 'selected': mode === 'catch', 'disabled': mods === 'ap' }"
-                        @click="ChangeModeMods('catch',mods)"><i class="mode-icon mode-catch"></i><span
-                            class="mode-text">osu!catch</span></a>
-                    <a class="simple-banner-switch" v-bind:class="{ 'selected': mode === 'mania', 'disabled': mods === 'ap' || mods === 'rx' }"
-                        @click="ChangeModeMods('mania',mods)"><i class="mode-icon mode-mania"></i><span
-                            class="mode-text">osu!mania</span></a>
-                </div>
-                <div class="select-right">
-                    <a class="simple-banner-switch" v-bind:class=" { 'selected': mods === 'vn' }"
-                        @click="ChangeModeMods(mode,'vn')"><span class="mods-fulltext">Vanilla</span>
-                        <span class="mods-shorttext">VN</span></a>
-                    <a class="simple-banner-switch" v-bind:class=" { 'selected': mods === 'rx', 'disabled': mode === 'mania' }"
-                        @click="ChangeModeMods(mode,'rx')"><span class="mods-fulltext">Relax</span>
-                        <span class="mods-shorttext">RX</span></a>
-                    <a class="simple-banner-switch" v-bind:class=" { 'selected': mods === 'ap', 'disabled': mode === 'taiko' || mode === 'catch' || mode === 'mania'  }"
-                        @click="ChangeModeMods(mode,'ap')"><span class="mods-fulltext">Autopilot</span><span
-                            class="mods-shorttext">AP</span></a>
-                </div>
-            </div>
-            <div class="bar-selection badge-selects">
-                <span>
-                    Badges not yet implemented!
-                </span>
-            </div>
+        <div class="select-right">
+          <a class="simple-banner-switch" :class=" { 'selected': mods === 'vn' }"
+            @click="ChangeModeMods(mode,'vn')"><span class="mods-fulltext">{{ t('global.mode.vanilla') }}</span>
+            <span class="mods-shorttext">{{ t('global.mode.VN') }}</span></a>
+          <a class="simple-banner-switch" :class=" { 'selected': mods === 'rx', 'disabled': mode === 'mania' }"
+            @click="ChangeModeMods(mode,'rx')"><span class="mods-fulltext">{{ t('global.mode.relax') }}</span>
+            <span class="mods-shorttext">{{ t('global.mode.RX') }}</span></a>
+          <a class="simple-banner-switch"
+            :class=" { 'selected': mods === 'ap', 'disabled': mode === 'taiko' || mode === 'catch' || mode === 'mania'  }"
+            @click="ChangeModeMods(mode,'ap')"><span class="mods-fulltext">{{ t('global.mode.autopilot') }}</span><span
+              class="mods-shorttext">{{ t('global.mode.AP') }}</span></a>
         </div>
+      </div>
     </div>
-    <div class="second-block">
-        <div class="columns is-marginless two-sides">
-            <div class="column is-one-third" v-cloak>
-                <!--<div class="header" v-if='data.stats[`rank_global_${modegulag}`] != -1'>
+  </div>
+  <div class="second-block">
+    <div class="columns is-marginless two-sides">
+      <div class="column is-one-third" v-cloak>
+        <!-- <div class="header">
                     <div class="title">
-                        <i class="fas fa-user-friends"></i> Rank
+                        <i class="fas fa-user-friends"></i> Badge
                     </div>
                 </div>
-                <div class="stats-block rank-block" v-if='data.stats[`rank_global_${modegulag}`] != -1'>
+                <div class="stats-block rank-block">
                     <table class="is-striped">
                         <tbody>
                             <tr>
-                                <td>Global rank</td>
-                                <td class="right-aligned">
-                                    <span id="global-rank">
-                                        <% '#' + data.stats[`rank_global_${modegulag}`] %>
-                                    </span>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>Country rank</td>
-                                <td class="right-aligned">
-                                    <span id="country-rank">
-                                        <% '#' + data.stats[`rank_country_${modegulag}`] %>
-                                    </span>
-                                </td>
+                                <td>Not yet implement</td>
                             </tr>
                         </tbody>
                     </table>
-                </div>-->
-                <div class="header">
-                    <div class="title">
-                        <i class="fas fa-chart-pie"></i> Statistics
+                </div> -->
+        <template v-if="data.stats.out[modegulag]">
+          <div class="header" v-if="data.stats.out[modegulag].rank != 0">
+            <div class="title">
+              <i class="fas fa-user-friends"></i> {{ t("profile.rank-title") }}
+            </div>
+          </div>
+          <div class="stats-block rank-block" v-if="data.stats.out[modegulag].rank != 0">
+            <table class="is-striped">
+              <tbody>
+                <tr>
+                  <td>{{ t('profile.global-rank') }}</td>
+                  <td class="right-aligned">
+                    <span id="global-rank">
+                      <% '#' + data.stats.out[modegulag].rank %>
+                    </span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>{{ t('profile.country-rank') }}</td>
+                  <td class="right-aligned">
+                    <span id="country-rank">
+                      <% '#' + data.stats.out[modegulag].country_rank %>
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="header">
+            <div class="title">
+              <i class="fas fa-chart-pie"></i> {{ t('profile.statistics') }}
+            </div>
+          </div>
+          <div class="stats-block">
+            <table class="is-striped">
+              <tbody>
+                <tr>
+                  <td><b>{{ t('global.pp').upper() }}</b></td>
+                  <td class="right-aligned">
+                    <% addCommas(data.stats.out[modegulag].pp) %>
+                  </td>
+                </tr>
+                <tr>
+                  <td><b>{{ t('global.ranked-score') }}</b></td>
+                  <td class="right-aligned">
+                    <% addCommas(data.stats.out[modegulag].rscore) %>
+                  </td>
+                </tr>
+                <tr>
+                  <td><b>{{ t('global.total-score') }}</b></td>
+                  <td class="right-aligned">
+                    <% addCommas(data.stats.out[modegulag].tscore) %>
+                  </td>
+                </tr>
+                <tr>
+                  <td><b>{{ t('global.max-combo') }}</b></td>
+                  <td class="right-aligned">
+                    <% addCommas(data.stats.out[modegulag].max_combo) %>
+                  </td>
+                </tr>
+                <tr>
+                  <td><b>{{ t('global.playcount') }}</b></td>
+                  <td class="right-aligned">
+                    <% addCommas(data.stats.out[modegulag].plays) %>
+                  </td>
+                </tr>
+                <tr>
+                  <td><b>{{ t('global.playtime') }}</b></td>
+                  <td class="right-aligned">
+                    <% secondsToDhm(data.stats.out[modegulag].playtime) %>
+                  </td>
+                </tr>
+                <tr>
+                  <td><b>{{ t('global.accuracy') }}</b></td>
+                  <td class="right-aligned">
+                    <% data.stats.out[modegulag].acc %>%
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div class="grade-block" v-if="data.grades">
+              <article class="media">
+                <div class="media-content">
+                  <div class="grade-line">
+                    <div class="rank-single">
+                      <div class="map-rank rank-X">
+                        {{ t('global.rank.ss') }}
+                      </div>
+                      <div class="rank-amount">
+                        <% data.stats.out[modegulag].x_count %>
+                      </div>
                     </div>
-                </div>
-                <div class="stats-block">
-                    <table class="is-striped">
-                        <tbody>
-                            <tr>
-                                <td><b>PP</b></td>
-                                <td class="right-aligned">
-                                    <% addCommas(data.stats.out[modegulag].pp) %>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td><b>Ranked score</b></td>
-                                <td class="right-aligned">
-                                    <% addCommas(data.stats.out[modegulag].rscore) %>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td><b>Total score</b></td>
-                                <td class="right-aligned">
-                                    <% addCommas(data.stats.out[modegulag].tscore) %>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td><b>Max combo</b></td>
-                                <td class="right-aligned">
-                                    <% addCommas(data.stats.out[modegulag].max_combo) %>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td><b>Playcount</b></td>
-                                <td class="right-aligned">
-                                    <% addCommas(data.stats.out[modegulag].plays) %>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td><b>Playtime</b></td>
-                                <td class="right-aligned">
-                                    <% secondsToDhm(data.stats.out[modegulag].playtime) %>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td><b>Accuracy</b></td>
-                                <td class="right-aligned">
-                                    <% data.stats.out[modegulag].acc %>%
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <div class="grade-block" v-if="data.grades">
-                        <article class="media">
-                            <div class="media-content">
-                                <div class="grade-line">
-                                    <div class="rank-single">
-                                        <div class="map-rank rank-X">SS</div>
-                                        <div class="rank-amount">
-                                            <% data.stats.out[modegulag].x_count %>
-                                        </div>
-                                    </div>
-                                    <div class="rank-single">
-                                        <div class="map-rank rank-XH">SS</div>
-                                        <div class="rank-amount">
-                                            <% data.stats.out[modegulag].xh_count %>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="grade-line">
-                                    <div class="rank-single">
-                                        <div class="map-rank rank-S">S</div>
-                                        <div class="rank-amount">
-                                            <% data.stats.out[modegulag].s_count %>
-                                        </div>
-                                    </div>
-                                    <div class="rank-single">
-                                        <div class="map-rank rank-SH">S</div>
-                                        <div class="rank-amount">
-                                            <% data.stats.out[modegulag].sh_count %>
-                                        </div>
-                                    </div>
-                                    <div class="rank-single">
-                                        <div class="map-rank rank-A">A</div>
-                                        <div class="rank-amount">
-                                            <% data.stats.out[modegulag].a_count %>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </article>
+                    <div class="rank-single">
+                      <div class="map-rank rank-XH">
+                        {{ t('global.rank.ssh') }}
+                      </div>
+                      <div class="rank-amount">
+                        <% data.stats.out[modegulag].xh_count %>
+                      </div>
                     </div>
-                </div>
-                <!--<div class="level-block">
-                    <div class="columns is-marginless is-2">
-                        <div class="column level-bar is-paddingless">
-                            <div class="progress-level"></div>
-                        </div>
-                        <div class="column level-num is-one-fifth is-textcen">
-                            <% data.stats[`level_${modegulag}`] %>
-                        </div>
+                  </div>
+                  <div class="grade-line">
+                    <div class="rank-single">
+                      <div class="map-rank rank-S">
+                        {{ t('global.rank.s') }}
+                      </div>
+                      <div class="rank-amount">
+                        <% data.stats.out[modegulag].s_count %>
+                      </div>
                     </div>
-                </div>-->
-            </div>
-            <div class="column">
-                {{ scores('Best Scores', 'best')}}
-                {{ scores('Recent Scores', 'recent')}}
-                {{ maps('Most Beatmaps Played', 'most')}}
+                    <div class="rank-single">
+                      <div class="map-rank rank-SH">
+                        {{ t('global.rank.sh') }}
+                      </div>
+                      <div class="rank-amount">
+                        <% data.stats.out[modegulag].sh_count %>
+                      </div>
+                    </div>
+                    <div class="rank-single">
+                      <div class="map-rank rank-A">
+                        {{ t('global.rank.a') }}
+                      </div>
+                      <div class="rank-amount">
+                        <% data.stats.out[modegulag].a_count %>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </article>
             </div>
-        </div>
+          </div>
+        </template>
+      </div>
+      <div class="column is-two-third">
+        {{ userpage(user) }} {{ scores(t('profile.best-scores') , 'best')}} {{
+        scores(t('profile.recent-scores'), 'recent')}} {{
+        maps(t('profile.most-played-beatmaps'), 'most')}}
+      </div>
     </div>
+  </div>
 </div>
-{% endblock %}
-
-{% block bottom %}
-<script src="/static/js/pages/profile.js"></script>
-{% if user['customisation']['banner'] == True or user['customisation']['background'] == True %}
+{% endblock %} {% block bottom %}
+<script src="/static/js/pages/profile.js?v={{ appVersion() }} "></script>
+{% if user['customisation']['banner'] == True %}
+<style>
+  .profile-bg {
+    min-height: 262px;
+    background: linear-gradient(hsl(var(--main), 25%, 25%, 20%),
+      hsl(var(--main), 25%, 25%, 60%)),
+    url("/banners/{{ user['id'] }}");
+    background-size: cover;
+  }
+</style>
+{% endif %} {% if user['customisation']['background'] == True %}
 <style>
-    {% if user['customisation']['banner'] == True %}
-        .profile-bg {
-            min-height: 262px;
-            background: linear-gradient(hsl(var(--main), 25%, 25%, 20%), hsl(var(--main), 25%, 25%, 60%)), url("/banners/{{ user['id'] }}");
-            background-size: cover;
-        }
-    {% endif %}
-    {% if user['customisation']['background'] == True %}
-        body {
-            background: linear-gradient(hsl(var(--main), 25%, 25%, 20%), hsl(var(--main), 10%, 10%)), url("/backgrounds/{{ user['id'] }}");
-            background-size: cover;
-            background-clip: content-box;
-        }
-    {% endif %}
+  body {
+    background: linear-gradient(hsl(var(--main), 25%, 25%, 20%),
+      hsl(var(--main), 10%, 10%)),
+    url("/backgrounds/{{ user['id'] }}");
+    background-size: cover;
+    background-clip: content-box;
+  }
 </style>
-{% endif %}
-{% endblock bottom %}
+{% endif %} {% endblock bottom %}
\ No newline at end of file
diff --git a/templates/register.html b/templates/register.html
index b11e0880..71aedf69 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -1,15 +1,15 @@
 {% extends "base.html" %}
-{% block title %} Register {% endblock %}
+{% block title %} {{ t('global.register') }} {% endblock %}
 
 {% block header %}
-<link rel="stylesheet" href="/static/css/pages/auth.css">
+<link rel="stylesheet" href="/static/css/pages/auth.css?v={{ appVersion() }} ">
 {% endblock %}
 
 {% block content %}
 <div class="main-block is-marginless is-paddingless is-auth">
   <div class="columns pm-reset is-weeb">
     <div class="column title-block">
-      <h1 class="title" id="regtitle">Registration</h1>
+      <h1 class="title" id="regtitle">{{ t('register.registration') }}</h1>
     </div>
   </div>
   <div class="columns pm-reset flex-lcenter is-block">
@@ -17,7 +17,7 @@ <h1 class="title" id="regtitle">Registration</h1>
       <div class="login-bg"></div>
       <form action="/register" method="post" class="form-content">
         <div class="field">
-          <label for="user" class="label">Username</label>
+          <label for="user" class="label">{{ t('register.username') }}</label>
           <div class="control has-icons-left">
             <input id="user" type="text" name="username" placeholder="e.g. Aika" class="input" autocomplete="username" required>
             <span class="icon is-small is-left">
@@ -26,7 +26,7 @@ <h1 class="title" id="regtitle">Registration</h1>
           </div>
         </div>
         <div class="field">
-          <label for="email" class="label">Email</label>
+          <label for="email" class="label">{{ t('register.email') }}</label>
           <div class="control has-icons-left">
             <input id="email" type="email" name="email" placeholder="e.g. aika@gul.ag" class="input" autocomplete="email" required>
             <span class="icon is-small is-left">
@@ -35,7 +35,7 @@ <h1 class="title" id="regtitle">Registration</h1>
           </div>
         </div>
         <div class="field">
-          <label for="pass" class="label">Password</label>
+          <label for="pass" class="label">{{ t('global.password') }}</label>
           <div class="control has-icons-left">
             <input id="pass" type="password" name="password" placeholder="*************" class="input" autocomplete="new-password" required>
             <span class="icon is-small is-left">
@@ -45,7 +45,7 @@ <h1 class="title" id="regtitle">Registration</h1>
         </div>
         <div class="mt-5"></div>
         <div class="dialog">
-          Already have an account? <a href="/login">Login</a>
+            {{ t('register.already-have-an-account') }} <a href="/login">{{ t('global.log-in') }}</a>
         </div>
         {% if not captchaKey() == 'changeme' %}
         <div class="field">
@@ -54,7 +54,7 @@ <h1 class="title" id="regtitle">Registration</h1>
         {% endif %}
         <div class="field">
           <button type="submit" class="button is-primary">
-            Register
+              {{ t('register.register') }}
           </button>
         </div>
       </form>
diff --git a/templates/settings/aboutme.html b/templates/settings/aboutme.html
new file mode 100644
index 00000000..4852be51
--- /dev/null
+++ b/templates/settings/aboutme.html
@@ -0,0 +1,50 @@
+{% extends 'base.html' %}
+{% block title %} {{ t('settings.about-me') }} {% endblock %}
+
+{% block content %}
+<link rel="stylesheet" href="/static/css/pages/settings/style.css?v={{ appVersion() }} ">
+
+<div class="main-block">
+  {% include "settings/sidebar.html" %}
+  <div class="block-content right" id="settings-content">
+    <div id="general" class="single-right-block">
+      <div class="right-block-header">
+          {{ t("settings.about-me-title") }}
+      </div>
+      <form style=" margin-left: 20px; margin-right: 20px;" action="/settings/aboutme" method="post" class="right-block-content">
+        <textarea name="userpage_content" class="input" style="max-width: 800px; min-height: 300px;">{{ userpage_content }}</textarea>
+        <button style="margin-top: 10px" class='button is-primary' type='submit'><span>{{ t('settings.save') }}</span><span class='icon is-small'><i class='fas fa-check'></i></span></button>
+      </form>
+    </div>
+  </div>
+</div>
+{% if flash %}
+<div class='noti-banner noti-banner-warning'>
+  <div class="container">
+    <div class="noti-column">
+      <div class='noti-col noti-col-icon'></div>
+      <div class='noti-col noti-col-label'>
+        <div class='noti-bannertype'>
+          {% if status=='error' %}
+            {{ t('global.bannertype-error') }}
+          {% elif status=='success' %}
+            {{ t('global.bannertype-success') }}
+          {% endif %}
+        </div>
+        <div class='noti-bannertext'>
+          {% if status=='error' %}
+            {{ t('global.bannertext-error') }}
+          {% elif status=='success' %}
+            {{ t('global.bannertext-success') }}
+          {% endif %}
+        </div>
+      </div>
+      <div class='noti-banner-text'>
+        {{ flash }}
+      </div>
+    </div>
+  </div>
+</div>
+{% endif %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/templates/settings/avatar.html b/templates/settings/avatar.html
index d832b39b..4c4c9ac5 100644
--- a/templates/settings/avatar.html
+++ b/templates/settings/avatar.html
@@ -1,31 +1,29 @@
 {% extends 'base.html' %}
-{% block title %} Avatar {% endblock %}
+{% block title %} {{ t('settings.avatar') }} {% endblock %}
 
 {% block content %}
-<link rel="stylesheet" href="/static/css/pages/settings/style.css">
+<link rel="stylesheet" href="/static/css/pages/settings/style.css?v={{ appVersion() }} ">
 
 <div class="main-block">
   {% include "settings/sidebar.html" %}
   <div class="block-content right" id="settings-content">
     <div class="single-right-block">
       <div class="right-block-header">
-        Avatar
+          {{ t('settings.avatar') }}
       </div>
       <div class="right-block-content">
         <div class="flex avatar-flex">
           <div class="column">
             <div class="single-block-content avatar-block-content">
-              <h4 class="mb-4">Avatar</h4>
-              <div class="subtitle">We recommend an image of at least 512x512 (or 1:1 ratio).
-                You can upload a PNG, JPG under 5MB
-              </div>
+              <h4 class="mb-4">{{ t('settings.avatar-title') }}</h4>
+              <div class="subtitle">{{ t('settings.avatar-description') }}</div>
               <form id="upload-profile" action="/settings/avatar" method="post" enctype="multipart/form-data">
                 <div class="buttons margin-top" id="selection">
                   <label class="file-label">
                     <input class="file-input" id="file" type="file" accept="image/jpeg" name="avatar">
                     <span class="file-cta">
                       <span class="file-label">
-                        Choose file
+                        {{ t('settings.choose-file') }}
                       </span>
                       <span class="file-icon">
                         <i class="fa fa-upload"></i>
@@ -33,14 +31,14 @@ <h4 class="mb-4">Avatar</h4>
                     </span>
                   </label>
                   <button class="button is-primary" type="submit">
-                    <span class="icon is-small"><i class="fas fa-check"></i></span><span>Save</span>
+                    <span class="icon is-small"><i class="fas fa-check"></i></span><span>{{ t('settings.save') }}</span>
                   </button>
                 </div>
               </form>
             </div>
           </div>
           <div class="column">
-            <h4 class="mb-4">Preview</h4>
+            <h4 class="mb-4">{{ t('settings.preview') }}</h4>
             <div class="preview-block" id="avatar">
               <div class="top-block"></div>
               <div class="bottom-block">
@@ -59,12 +57,12 @@ <h4 class="mb-4">Preview</h4>
   <script>
     $("#file")
       .change(function (e) {
-        var f = e.target.files;
+        const f = e.target.files;
         if (f.length < 1) {
           return;
         }
-        var u = window.URL.createObjectURL(f[0]);
-        var i = $("#avatar-img")[0];
+        const u = window.URL.createObjectURL(f[0]);
+        const i = $("#avatar-img")[0];
         i.src = u;
         $('#avatar-img').attr('src', i.src)
       });
@@ -79,16 +77,16 @@ <h4 class="mb-4">Preview</h4>
       <div class='noti-col noti-col-label'>
         <div class='noti-bannertype'>
           {% if status=='error' %}
-          Warning
+            {{ t('global.bannertype-error') }}
           {% elif status=='success' %}
-          Notice
+            {{ t('global.bannertype-success') }}
           {% endif %}
         </div>
         <div class='noti-bannertext'>
           {% if status=='error' %}
-          Uh oh! Be careful!
+            {{ t('global.bannertext-error') }}
           {% elif status=='success' %}
-          Hey! Listen!
+            {{ t('global.bannertype-success') }}
           {% endif %}
         </div>
       </div>
diff --git a/templates/settings/custom.html b/templates/settings/custom.html
index 48defe52..fb38fceb 100644
--- a/templates/settings/custom.html
+++ b/templates/settings/custom.html
@@ -1,29 +1,29 @@
 {% extends 'base.html' %}
-{% block title %} Avatar {% endblock %}
+{% block title %} {{ t('settings.avatar') }} {% endblock %}
 
 {% block content %}
-<link rel="stylesheet" href="/static/css/pages/settings/style.css">
+<link rel="stylesheet" href="/static/css/pages/settings/style.css?v={{ appVersion() }} ">
 
 <div class="main-block">
   {% include "settings/sidebar.html" %}
   <div class="block-content right" id="settings-content">
     <div class="single-right-block">
       <div class="right-block-header">
-        Customisation
+          {{ t('settings.customization') }}
       </div>
       <div class="right-block-content">
         <div class="flex avatar-flex">
           <div class="column">
             <form id="upload-profile" action="/settings/custom" method="post" enctype="multipart/form-data">
               <div class="single-block-content avatar-block-content mb-6">
-                <h4 class="mb-4">Banner</h4>
-                <div class="subtitle">Recommend with 1440x262 pixels with GIF, PNG, JPG, JPEG</div>
+                <h4 class="mb-4">{{ t('settings.banner') }}</h4>
+                <div class="subtitle">{{ t('settings.banner-description') }}</div>
                 <div class="buttons margin-top" id="selection">
                   <label class="file-label">
                     <input class="file-input" id="file-bn" type="file" name="banner">
                     <span class="file-cta">
                       <span class="file-label">
-                        Choose file
+                        {{ t('settings.choose-file') }}
                       </span>
                       <span class="file-icon">
                         <i class="fa fa-upload"></i>
@@ -33,16 +33,16 @@ <h4 class="mb-4">Banner</h4>
                 </div>
               </div>
               <div class="single-block-content avatar-block-content">
-                <h4 class="mb-4">Profile Background</h4>
+                <h4 class="mb-4">{{ t('settings.profile-background') }}</h4>
                 <div class="subtitle">
-                  Recommend with 16:9 ratio with PNG, JPG, JPEG
+                    {{ t('settings.profile-background-description') }}
                 </div>
                 <div class="buttons margin-top" id="selection">
                   <label class="file-label">
                     <input class="file-input" id="file-bg" type="file" name="background">
                     <span class="file-cta">
                       <span class="file-label">
-                        Choose file
+                        {{ t('settings.choose-file') }}
                       </span>
                       <span class="file-icon">
                         <i class="fa fa-upload"></i>
@@ -52,12 +52,12 @@ <h4 class="mb-4">Profile Background</h4>
                 </div>
               </div>
               <div class="custom-button buttons mt-6">
-                <button class='button is-primary' type='submit'><span class='icon is-small'><i class='fas fa-check'></i></span><span>Save</span></button>
+                <button class='button is-primary' type='submit'><span class='icon is-small'><i class='fas fa-check'></i></span><span>{{ t('settings.save') }}</span></button>
               </div>
             </form>
           </div>
           <div class="column">
-            <h4 class="mb-4">Preview</h4>
+            <h4 class="mb-4">{{ t('settings.preview') }}</h4>
             <div class="preview-block" id="avatar">
               <div class="top-block" {% if customizations['banner'] == True %}style="background: linear-gradient(hsl(var(--main), 25%, 25%, 20%), hsl(var(--main), 25%, 25%, 60%)), url(/profbanner/{{ session['user_data']['id'] }}); background-size: cover"{% endif %}></div>
               <div class="bottom-block">
@@ -77,24 +77,24 @@ <h4 class="mb-4">Preview</h4>
   <script>
     $("#file-bg")
       .change(function (e) {
-        var f = e.target.files;
+        const f = e.target.files;
         if (f.length < 1) {
           return;
         }
-        var u = window.URL.createObjectURL(f[0]);
-        var i = $("body")[0];
+        const u = window.URL.createObjectURL(f[0]);
+        const i = $("body")[0];
         i.src = u;
         $('body').css({'background': `linear-gradient(hsl(var(--main), 25%, 25%, 20%), hsl(var(--main), 10%, 10%)), url(${i.src})`, 'background-size': 'cover'})
       });
 
       $("#file-bn")
       .change(function (e) {
-        var f = e.target.files;
+        const f = e.target.files;
         if (f.length < 1) {
           return;
         }
-        var u = window.URL.createObjectURL(f[0]);
-        var i = $(".top-block")[0];
+        const u = window.URL.createObjectURL(f[0]);
+        const i = $(".top-block")[0];
         i.src = u;
         $('.top-block').css({'background': `linear-gradient(hsl(var(--main), 25%, 25%, 20%), hsl(var(--main), 25%, 25%, 60%)), url(${i.src})`, 'background-size': 'cover'})
       });
@@ -109,16 +109,16 @@ <h4 class="mb-4">Preview</h4>
       <div class='noti-col noti-col-label'>
         <div class='noti-bannertype'>
           {% if status=='error' %}
-          Warning
+            {{ t('global.bannertype-error') }}
           {% elif status=='success' %}
-          Notice
+            {{ t('global.bannertype-success') }}
           {% endif %}
         </div>
         <div class='noti-bannertext'>
           {% if status=='error' %}
-          Uh oh! Be careful!
+          {{ t('global.bannertext-error') }}
           {% elif status=='success' %}
-          Hey! Listen!
+          {{ t('global.bannertype-success') }}
           {% endif %}
         </div>
       </div>
diff --git a/templates/settings/password.html b/templates/settings/password.html
index b795372d..911efbc2 100644
--- a/templates/settings/password.html
+++ b/templates/settings/password.html
@@ -1,21 +1,21 @@
 {% extends 'base.html' %}
-{% block title %} Password {% endblock %}
+{% block title %} {{ t('global.password') }} {% endblock %}
 
 {% block content %}
-<link rel="stylesheet" href="/static/css/pages/settings/style.css">
+<link rel="stylesheet" href="/static/css/pages/settings/style.css?v={{ appVersion() }} ">
 
 <div class="main-block">
   {% include "settings/sidebar.html" %}
   <div class="block-content right" id="settings-content">
     <div id="general" class="single-right-block">
       <div class="right-block-header">
-        Password Change
+          {{ t('settings.password-change') }}
       </div>
       <form action="/settings/password" method="post" class="right-block-content">
         <div class="single-block-content">
           <div class="block-content--left">
             <div class="field-label is-normal">
-              <label class="label">Old Password</label>
+              <label class="label">{{ t('settings.old-password') }}</label>
             </div>
           </div>
           <div class="block-content--right">
@@ -31,7 +31,7 @@
         <div class="single-block-content">
             <div class="block-content--left">
               <div class="field-label is-normal">
-                <label class="label">New Password</label>
+                <label class="label">{{ t('settings.new-password') }}</label>
               </div>
             </div>
             <div class="block-content--right">
@@ -47,7 +47,7 @@
           <div class="single-block-content">
             <div class="block-content--left">
               <div class="field-label is-normal">
-                <label class="label">Repeat Password</label>
+                <label class="label">{{ t('settings.repeat-password') }}</label>
               </div>
             </div>
             <div class="block-content--right">
@@ -60,7 +60,7 @@
               </div>
             </div>
           </div>
-        <button class='button is-primary' type='submit'><span>Save</span><span class='icon is-small'><i class='fas fa-check'></i></span></button>
+        <button class='button is-primary' type='submit'><span>{{ t('settings.save') }}</span><span class='icon is-small'><i class='fas fa-check'></i></span></button>
         </form>
     </div>
   </div>
@@ -74,16 +74,16 @@
       <div class='noti-col noti-col-label'>
         <div class='noti-bannertype'>
           {% if status=='error' %}
-          Warning
+            {{ t('global.bannertype-error') }}
           {% elif status=='success' %}
-          Notice
+            {{ t('global.bannertype-success') }}
           {% endif %}
         </div>
         <div class='noti-bannertext'>
           {% if status=='error' %}
-          Uh oh! Be careful!
+          {{ t('global.bannertext-error') }}
           {% elif status=='success' %}
-          Hey! Listen!
+            {{ t('global.bannertype-success') }}
           {% endif %}
         </div>
       </div>
diff --git a/templates/settings/profile.html b/templates/settings/profile.html
index 14a59ac3..2781ecb9 100644
--- a/templates/settings/profile.html
+++ b/templates/settings/profile.html
@@ -1,29 +1,28 @@
 {% extends 'base.html' %}
-{% block title %} Profile {% endblock %}
+{% block title %} {{ t('global.profile__literal') }} {% endblock %}
 
 {% block content %}
-<link rel="stylesheet" href="/static/css/pages/settings/style.css">
+<link rel="stylesheet" href="/static/css/pages/settings/style.css?v={{ appVersion() }} ">
 
 <div class="main-block">
   {% include "settings/sidebar.html" %}
   <div class="block-content right">
     <div id="general" class="single-right-block">
       <div class="right-block-header">
-        User Infomation
+        {{ t('settings.user-information') }}
       </div>
       <form action="/settings/profile" method="post" class="setting-block-content">
         <div class="single-block-content">
           <div class="block-content--left">
             <div class="field-label is-normal">
-              <label class="label">Username</label>
+              <label class="label">{{ t('settings.username') }}</label>
             </div>
           </div>
           <div class="block-content--right">
             <div class="field-body">
               <div class="field">
                 <p class="control">
-                  <input class="input" type="text" name="username"
-                  value="{{ session.user_data['name'] }}" {% if not session.user_data['is_donator'] %}readonly{% endif %}>
+                  <input class="input" type="text" name="username" value="{{ session.user_data['name'] }}">
                 </p>
               </div>
             </div>
@@ -32,7 +31,7 @@
         <div class="single-block-content">
           <div class="block-content--left">
             <div class="field-label is-normal">
-              <label class="label">Email</label>
+              <label class="label">{{ t('login.email') }}</label>
             </div>
           </div>
           <div class="block-content--right">
@@ -45,25 +44,24 @@
             </div>
           </div>
         </div>
-        <!-- Disabled - Username AKA doesn't exist in gulag? (for now?)
         <div class="single-block-content">
           <div class="block-content--left">
             <div class="field-label is-normal">
-              <label class="label">name aka</label>
+              <label class="label">{{ t("settings.api-key") }}</label>
             </div>
           </div>
           <div class="block-content--right">
             <div class="field-body">
               <div class="field">
                 <p class="control">
-                  <input class="input" type="aka" value="">
+                  <input class="input" readonly type="text" name="api_key" value="{{ session.user_data['api_key'] }}">
                 </p>
               </div>
             </div>
           </div>
         </div>
-        -->
-        <button class='button is-primary' type='submit'><span>Save</span><span class='icon is-small'><i class='fas fa-check'></i></span></button>
+        <button class='button is-primary' type='submit'><span>{{ t('settings.save') }}</span><span
+            class='icon is-small'><i class='fas fa-check'></i></span></button>
       </form>
     </div>
   </div>
@@ -77,16 +75,16 @@
       <div class='noti-col noti-col-label'>
         <div class='noti-bannertype'>
           {% if status=='error' %}
-          Warning
+          {{ t('global.bannertype-error') }}
           {% elif status=='success' %}
-          Notice
+          {{ t('global.bannertype-success') }}
           {% endif %}
         </div>
         <div class='noti-bannertext'>
           {% if status=='error' %}
-          Uh oh! Be careful!
+          {{ t('global.bannertext-error') }}
           {% elif status=='success' %}
-          Hey! Listen!
+          {{ t('global.bannertype-success') }}
           {% endif %}
         </div>
       </div>
@@ -98,4 +96,4 @@
 </div>
 {% endif %}
 
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/settings/sidebar.html b/templates/settings/sidebar.html
index 460a09f6..2b57234a 100644
--- a/templates/settings/sidebar.html
+++ b/templates/settings/sidebar.html
@@ -4,21 +4,25 @@
             style="background-image: url(https://a.{{ domain() }}/{{ session.user_data['id']}});"></a>
         <div class="welcome-text">
             <span class="username pink-bold">{{ session.user_data['name']}}</span>
-            <span class="welcome">Settings</span>
+            <span class="welcome">{{ t('settings.settings') }}</span>
         </div>
     </div>
     <div class="left-selector">
         <a class="single-menu single-menu--active router-link" href="/settings/profile">
-            <i class="fas fa-user"></i><span class="single-menu--text"> Profile </span>
+            <i class="fas fa-user"></i><span class="single-menu--text"> {{ t('global.profile__literal') }} </span>
         </a>
         <a class="single-menu single-menu--active router-link" href="/settings/avatar">
-            <i class="fas fa-brush"></i><span class="single-menu--text"> Avatar </span>
+            <i class="fas fa-brush"></i><span class="single-menu--text"> {{ t('settings.avatar') }} </span>
         </a>
         <a class="single-menu single-menu--active router-link" href="/settings/password">
-            <i class="fas fa-lock"></i><span class="single-menu--text"> Password </span>
+            <i class="fas fa-lock"></i><span class="single-menu--text"> {{ t('global.password') }} </span>
         </a>
         <a class="single-menu single-menu--active router-link" href="/settings/custom">
-            <i class="fas fa-air-freshener"></i><span class="single-menu--text"> Customisation </span>
+            <i class="fas fa-air-freshener"></i><span class="single-menu--text"> {{ t('settings.customization') }}
+            </span>
+        </a>
+        <a class="single-menu single-menu--active router-link" href="/settings/aboutme">
+            <i class="fas fa-air-freshener"></i><span class="single-menu--text">{{ t("settings.about-me") }}</span>
         </a>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/templates/verify.html b/templates/verify.html
index 2b990997..f3aaafb6 100644
--- a/templates/verify.html
+++ b/templates/verify.html
@@ -1,8 +1,8 @@
 {% extends 'base.html' %}
-{% block title %} Verify {% endblock %}
+{% block title %} {{ t('global.verify') }} {% endblock %}
 
 {% block header %}
-<link rel="stylesheet" href="/static/css/pages/verify.css">
+<link rel="stylesheet" href="/static/css/pages/verify.css?v={{ appVersion() }} ">
 {% endblock %}
 
 {% block content %}
@@ -10,8 +10,8 @@
     <div class="columns pm-reset is-weeb">
         <div class="column title-block">
             <div class="titlewithsub">
-                <h1 class="title is-left">How to verify your account</h1>
-                <h2 class="subtitle">What do you mean? This must be easy right?</h2>
+                <h1 class="title is-left">{{ t('verify.how-to-verify-your-account') }}</h1>
+                <h2 class="subtitle">{{ t('verify.what-do-you-mean-this-must-be-easy-right') }}</h2>
             </div>
         </div>
         <div class="column icon-block">
@@ -22,8 +22,8 @@ <h2 class="subtitle">What do you mean? This must be easy right?</h2>
         <div class="box is-padding">
             <div class="bordertitle">
                 <div class="titlewithsub">
-                    <h1 class="title is-left">Verification</h1>
-                    <h2 class="subtitle">Follow these three simple steps to get started playing {{ appName() }}!</h2>
+                    <h1 class="title is-left">{{ t('verify.verification') }}</h1>
+                    <h2 class="subtitle">{{ t('verify.follow-these-three-simple-steps', appName = appName()) }}</h2>
                 </div>
             </div>
             <div class="howto-content">
@@ -35,8 +35,8 @@ <h2 class="subtitle">Follow these three simple steps to get started playing {{ a
                                 <div class="howto-number">1</div>
                             </div>
                             <div class="howto-withsub">
-                                <h1 class="title is-left">Osu shortcut</h1>
-                                <h2 class="subtitle">Find your shortcut to osu on desktop and copy it!</h2>
+                                <h1 class="title is-left">{{ t('verify.osu-shortcut') }}</h1>
+                                <h2 class="subtitle">{{ t('verify.find-your-shortcut') }}</h2>
                             </div>
                         </div>
                     </div>
@@ -47,8 +47,12 @@ <h2 class="subtitle">Find your shortcut to osu on desktop and copy it!</h2>
                                 <div class="howto-number">2</div>
                             </div>
                             <div class="howto-withsub">
-                                <h1 class="title is-left">Edit it</h1>
-                                <h2 class="subtitle"><strong>1.</strong> Right click -> Properties <strong>2.</strong> Find "Target element" Box <strong>3.</strong> Add " -devserver {{ domain() }}" at the end of it</h2>
+                                <h1 class="title is-left">{{ t('verify.edit-it') }}</h1>
+                                <h2 class="subtitle">
+                                    <strong>1.</strong>{{ t('verify.right-click-properties') }}
+                                    <strong>2.</strong>{{ t('verify.find-target-element-box') }}
+                                    <strong>3.</strong>{{ t('verify.add-domain', domain = domain()) }}
+                                </h2>
                             </div>
                         </div>
                     </div>
@@ -59,34 +63,19 @@ <h2 class="subtitle"><strong>1.</strong> Right click -> Properties <strong>2.</s
                                 <div class="howto-number">3</div>
                             </div>
                             <div class="howto-withsub">
-                                <h1 class="title is-left">Login to your account</h1>
-                                <h2 class="subtitle">Login to your {{ appName() }} account and you should be done!</h2>
+                                <h1 class="title is-left">{{ t('verify.login-to-your-account') }}</h1>
+                                <h2 class="subtitle">{{ t('verify.login-to-your-app-name-account', appName = appName()) }}</h2>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="bordertitle">
-                <div class="titlewithsub">
-                    <h1 class="title is-left">Oh crap! I'm stuck please help me!</h1>
-                    <h2 class="subtitle">Need help? We've got you covered - join the Discord so our community can help you out!</h2>
-                </div>
-            </div>
-            <div class="box flex is-mpadding is-marginless">
-                <a href="/discord" class="flex" id="discord"><img
-                        src="https://cdn.iconscout.com/icon/free/png-256/discord-2752210-2285027.png"
-                        class="discord-logo">
-                    <div class="clickhere-title flex flex-vcenter">
-                        <h1 class="title">Click here to join our Discord!</h1>
-                    </div>
-                </a>
-            </div>
             <div class="box is-block is-paddingless is-marginless is-waiting">
                 <div class="columns flex is-paddingless is-marginless">
                     <div class="column flex flex-vcenter">
                         <div>
-                            <h1 class="title is-left">Waiting for verification!</h1>
-                            <h2 class="subtitle">Follow the simple instructions above and once you're done reload this page!</h2>
+                            <h1 class="title is-left">{{ t('verify.waiting-for-verification') }}</h1>
+                            <h2 class="subtitle">{{ t('verify.follow-the-simple-instructions') }}</h2>
                         </div>
                     </div>
                     <div class="column icon-block">
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..ec303c7e
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,115 @@
+{
+  "ts-node": {
+    // It is faster to skip typechecking.
+    // Remove if you want ts-node to do typechecking.
+    "transpileOnly": true,
+    "files": true,
+    "compilerOptions": {
+      // compilerOptions specified here will override those declared below,
+      // but *only* in ts-node.  Useful if you want ts-node and tsc to use
+      // different options with a single tsconfig.json.
+    }
+  },
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "ES2020",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "CommonJS",                                /* Specify what module code is generated. */
+    // "rootDir": "./utils",                                  /* Specify the root folder within your source files. */
+    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    "rootDirs": ["./utils"],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    "typeRoots": ["./utils/i18n/types"],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    "outDir": ".built",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+  },
+  "include": ["./utils/**/*"]
+}
diff --git a/utils/i18n/built-reader.ts b/utils/i18n/built-reader.ts
new file mode 100644
index 00000000..fdc02c82
--- /dev/null
+++ b/utils/i18n/built-reader.ts
@@ -0,0 +1,91 @@
+import glob from 'glob'
+import path from 'path'
+import fs from 'fs'
+import yaml from 'js-yaml'
+
+import { compiledFileNameSchema, compiledFileSchema, compiled as translationPath, divider, FileContext } from './config'
+
+const parseFileName = (file: string): FileContext => {
+  const fileName = path.relative(translationPath, file)
+  const parts = fileName.split(divider)
+  return compiledFileNameSchema.reduce((acc: Partial<FileContext>, part: 'namespace' | 'locale' | 'extension', index) => {
+    acc[part] = parts[index]
+    return acc
+  }, {}) as FileContext
+}
+
+const parseLocale = (file: string, context: FileContext): LocaleRoot | undefined => {
+  const locale = yaml.load(fs.readFileSync(file, 'utf8')) as Locale | Locale[]
+  const _parse = (locale: Locale): LocaleRoot => {
+    const rtn: LocaleRoot = {
+      [context.locale]: {
+        [context.namespace]: null
+      }
+    }
+    let current = locale
+    let currentLocale: string
+    compiledFileSchema.forEach(part => {
+      switch (part) {
+        case 'locale': {
+          currentLocale = context.locale
+          current = (current as InnerLocale)?.[currentLocale]
+          break
+        }
+        case 'entries': {
+          if (currentLocale === undefined) break
+          rtn[currentLocale][context.namespace] = current
+          break
+        }
+        default: {
+          throw new Error('unknown type of file')
+        }
+      }
+    })
+    return rtn
+  }
+  if (Array.isArray(locale)) {
+    const toMerge = locale.map(_parse)
+    let rtn = {}
+    for (const item of toMerge) {
+      rtn = {
+        ...rtn,
+        ...item
+      }
+    }
+  } else {
+    return _parse(locale)
+  }
+}
+/* ----------------------------------------------------------------
+** return format: {
+  [locale]: {
+      [namespace]: {
+          ...entries
+      }
+  }
+}
+*/
+export const readLocales = async (): Promise<LocaleRoot> => await new Promise((resolve, reject) => {
+  glob(path.join(translationPath, '**/*.yml'), (err, matches) => {
+    if (err != null) throw err
+    const locales = matches.reduce(async (acc: Promise<LocaleRoot> | LocaleRoot, match): Promise<LocaleRoot> => {
+      try {
+        acc = await acc
+        const name = parseFileName(match)
+        const data = parseLocale(match, name)
+        if (data === undefined) { return acc }
+        if (acc[name.locale] == null) { acc[name.locale] = {} }
+        acc[name.locale] = {
+          ...acc[name.locale] as Record<string, Locale>,
+          ...data[name.locale] as Record<string, Locale>
+        }
+        return acc
+      } catch (error) {
+        reject(error)
+        return acc as LocaleRoot
+      }
+    }, {})
+
+    resolve(locales)
+  })
+})
diff --git a/utils/i18n/built-writer.ts b/utils/i18n/built-writer.ts
new file mode 100644
index 00000000..e54c62f1
--- /dev/null
+++ b/utils/i18n/built-writer.ts
@@ -0,0 +1,62 @@
+import { compiledFileNameSchema, compiledFileSchema, compiled as translationPath, divider, FileContext } from './config'
+import yaml from 'js-yaml'
+import { join, dirname } from 'path'
+import fs from 'fs/promises'
+import { existsSync, mkdirSync } from 'fs'
+
+export function formatLocaleData (locale: LocaleRoot, context: FileContext): string {
+  const current = locale[context.locale][context.namespace]
+  // transform schema
+  let write: LocaleRoot = {}
+  const path: string[] = []
+  compiledFileSchema.forEach(k => {
+    switch (k) {
+      case 'locale': {
+        write = {
+          [context.locale.replace('-', '_')]: write
+        }
+        path.push(context.locale.replace('-', '_'))
+        break
+      }
+      case 'entries': {
+        if (path.length === 0) throw new Error('should at least have one entry')
+        const readonly = [...path]
+        const last = readonly.pop() as string
+        const target = readonly.reduce((acc: Locale, cur): InnerLocale => {
+          if (acc === undefined || ['string', 'number'].includes(typeof acc)) throw new Error('unable to find Locale')
+          return (acc as InnerLocale)?.[cur] as InnerLocale
+        }, write)
+        ;(target as InnerLocale)[last] = current
+      }
+    }
+  })
+
+  return yaml.dump(write)
+}
+
+export function generateFileName (context: FileContext): string {
+  return compiledFileNameSchema.map(k => context[k].replace('-', '_')).join(divider)
+}
+
+export async function writeToDisk (locales: LocaleRoot): Promise<unknown> {
+  const works: Array<Promise<void>> = []
+  for (const locale in locales) {
+    const namespaces = locales[locale]
+    for (const namespace in namespaces) {
+      const context: FileContext = {
+        locale,
+        namespace,
+        extension: 'yml'
+      }
+      const fileName = generateFileName(context)
+      const yaml = formatLocaleData(locales, context)
+      const path = join(translationPath, fileName)
+      const dir = dirname(path)
+      if (!existsSync(path)) {
+        mkdirSync(dir, { recursive: true })
+      }
+      works.push(fs.writeFile(path, yaml, 'utf8'))
+    }
+  }
+  return await Promise.all(works)
+}
diff --git a/utils/i18n/commands/build.ts b/utils/i18n/commands/build.ts
new file mode 100644
index 00000000..a97d154e
--- /dev/null
+++ b/utils/i18n/commands/build.ts
@@ -0,0 +1,14 @@
+
+import { readLocales } from '../reader'
+import { writeToDisk } from '../built-writer'
+import clui from 'clui'
+const { Spinner } = clui
+
+void (async () => {
+  const work = new Spinner('reading locales...')
+  const data = await readLocales()
+  work.message('transforming to python-i18n format...')
+  await writeToDisk(data)
+  work.stop()
+  console.log('transformed to python-i18n format')
+})()
diff --git a/utils/i18n/commands/format-html.ts b/utils/i18n/commands/format-html.ts
new file mode 100644
index 00000000..2f176382
--- /dev/null
+++ b/utils/i18n/commands/format-html.ts
@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+import glob from 'glob'
+import path from 'path'
+import fs from 'fs/promises'
+import clui from 'clui'
+
+import { rootPath } from '../config'
+
+const parallel = (process.env.PARALLEL != null) || false
+const { Spinner } = clui
+
+const doWork = async (match: string): Promise<void> => {
+  try {
+    let template = await fs.readFile(match, { encoding: 'utf8' })
+    template = template.replace(/\{\{\s?t\('(.*)'\s?(,\s?(.+)\s?)?\)\s?\}\}/gmu, '{{ t(\'$1\'$2) }}')
+    template = template.replace(/\{\{\s?t\("(.*)"\s?(,\s?(.+)\s?)?\)\s?\}\}/gmu, '{{ t("$1"$2) }}')
+    await fs.writeFile(match, template, 'utf8')
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+glob(path.join(rootPath, 'templates/**/*.html'), async (err, matches) => {
+  if (err != null) throw err
+  const work = new Spinner('formatting templates...')
+  work.start()
+  if (parallel) {
+    await Promise.all(matches.map(async match => {
+      const work = new Spinner(`formatting template: ${match}`)
+      work.start()
+      await doWork(match)
+      work.stop()
+    }))
+  } else {
+    for (const match of matches) {
+      work.message(`formatting template: ${match}`)
+      await doWork(match)
+    }
+  }
+  work.stop()
+  console.log('formatting templates...  done')
+})
diff --git a/utils/i18n/commands/format-yaml.ts b/utils/i18n/commands/format-yaml.ts
new file mode 100644
index 00000000..d820985c
--- /dev/null
+++ b/utils/i18n/commands/format-yaml.ts
@@ -0,0 +1,48 @@
+import { parseDocument } from 'yaml'
+
+import fs from 'fs/promises'
+import clui from 'clui'
+
+import { asyncGlob } from '../lib'
+
+import { paths } from '../config'
+
+const parallel = (process.env.PARALLEL != null) || false
+const { Spinner } = clui
+
+const doWork = async (match: string): Promise<void> => {
+  try {
+    const data = parseDocument(await fs.readFile(match, { encoding: 'utf8' }))
+    const formatted = data.toString({
+      blockQuote: 'literal',
+      defaultStringType: 'BLOCK_FOLDED'
+    })
+    await fs.writeFile(match, formatted, 'utf8')
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+void (async () => {
+  for (const translationPath of paths) {
+    if (translationPath == null) continue
+    const matches = await asyncGlob(translationPath.path)
+    const work = new Spinner('formatting locales...')
+    work.start()
+    if (parallel) {
+      await Promise.all(matches.map(async (match) => {
+        const work = new Spinner(`formatting locale: ${match}`)
+        work.start()
+        await doWork(match)
+        work.stop()
+      }))
+    } else {
+      for (const match of matches) {
+        work.message(`formatting locale: ${match}`)
+        await doWork(match)
+      }
+    }
+    work.stop()
+    console.log('formatting locales...  done')
+  }
+})()
diff --git a/utils/i18n/commands/migrate.ts b/utils/i18n/commands/migrate.ts
new file mode 100644
index 00000000..78585747
--- /dev/null
+++ b/utils/i18n/commands/migrate.ts
@@ -0,0 +1,5 @@
+
+// import { readLocales } from '../built-reader'
+// import { writeToDisk } from '../writer'
+
+// void readLocales().then(locales => writeToDisk(locales))
diff --git a/utils/i18n/config.ts b/utils/i18n/config.ts
new file mode 100644
index 00000000..1e2a2502
--- /dev/null
+++ b/utils/i18n/config.ts
@@ -0,0 +1,123 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import { join } from 'path'
+import { merge } from 'lodash'
+
+// import { useLocales } from '../../config.js'
+let useLocales
+
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { useLocales: _useLocales } = require('../../config.js')
+  useLocales = _useLocales
+} catch (error) {
+  console.error('check if you created config.js')
+  process.exit(1)
+}
+export const compiledFileNameSchema = ['namespace', 'locale', 'extension'] as Array<'namespace' | 'locale' | 'extension'>
+export const compiledFileSchema = ['locale', 'entries']
+export const compiled = join(__dirname, '../../.locales')
+export const rootPath = join(__dirname, '../../')
+
+export type LocalePathConfig =
+    | string
+    | [string, Partial<{
+      filter: (path: string) => boolean
+      only: string | string[]
+      except: string | string[]
+    }>]
+
+// eslint-disable-next-line array-callback-return
+export const paths = (useLocales as LocalePathConfig[]).map((p) => {
+  if (typeof p === 'string') {
+    return {
+      path: join(__dirname, '../../', p),
+      filter: () => true
+    }
+  } else if (Array.isArray(p)) {
+    if (p.length < 1) return undefined
+    const path = p[0]
+    const returnValue = {
+      path: join(__dirname, '../../', path),
+      filter: (_: string) => true
+    }
+    if (p.length < 2) return returnValue
+
+    const conf = p[1]
+    if (conf.filter) {
+      returnValue.filter = conf.filter
+      return returnValue
+    } else {
+      if (typeof conf.only === 'string') {
+        conf.only = [conf.only]
+        conf.only = conf.only.map((path) => join(returnValue.path, path))
+        returnValue.filter = (path: string) => (conf.only as string[]).some(only => path.startsWith(only))
+        return returnValue
+      }
+      if (typeof conf.except === 'string') {
+        conf.except = [conf.except]
+        conf.except = conf.except.map((path) => join(returnValue.path, path))
+        returnValue.filter = (path) => (conf.except as string[]).every(except => !path.startsWith(except))
+        return returnValue
+      }
+      throw new Error(`config invalid: ${p.toString()}`)
+    }
+  }
+}).filter(Boolean)
+export const divider = '.'
+
+export function contextToFileName (context: FileContext): string {
+  return `${context.namespace}/${context.locale}.${context.extension || 'yml'}`
+}
+
+export function contextFromFileName (fileName: string) {
+  const split = fileName.split('/').join(divider).split(divider)
+  const namespaces = split.slice(0, split.length - 2)
+  const [locale, extension] = split.slice(-2)
+  return {
+    namespace: namespaces.join('.'),
+    namespaces,
+    locale: locale.replace('_', '-'),
+    extension
+  }
+}
+export interface FileContext {
+  namespace: string
+  namespaces?: string[]
+  locale: string
+  extension: string
+}
+
+export const createConflictKeyHandler = (mergeMode: boolean) => function onConflictingKey (oldVal: any, newVal: any, key: string) {
+  if (typeof newVal[key] !== 'object' && typeof oldVal[key] !== 'object') {
+    return {
+      ...oldVal,
+      ...newVal
+    }
+  }
+  if (typeof newVal[key] === 'object' && typeof oldVal[key] === 'object') {
+    if (!mergeMode) console.info('merged object', oldVal, newVal)
+    return merge(oldVal, newVal)
+  }
+  if (typeof newVal[key] === 'string') {
+    console.info(`[info] ${key} renamed into ${key}._string.`)
+    return {
+      ...oldVal,
+      ...newVal,
+      [key]: {
+        ...oldVal[key],
+        _string: newVal[key]
+      }
+    }
+  } else if (typeof oldVal[key] === 'string') {
+    console.info(`[info] ${key} renamed into ${key}._string.`)
+    return {
+      ...oldVal,
+      ...newVal,
+      [key]: {
+        ...newVal[key],
+        _string: oldVal[key]
+      }
+    }
+  }
+}
diff --git a/utils/i18n/lib.ts b/utils/i18n/lib.ts
new file mode 100644
index 00000000..2a0365f2
--- /dev/null
+++ b/utils/i18n/lib.ts
@@ -0,0 +1,9 @@
+import glob from 'glob'
+export const asyncGlob = async (path: string): Promise<string[]> => await new Promise((resolve, reject) => {
+  glob(path, (err, matches) => {
+    if (err != null) reject(err)
+    else resolve(matches)
+  })
+})
+const mode = process.argv[2]
+export const strict = mode?.includes('strict') || false
diff --git a/utils/i18n/reader.ts b/utils/i18n/reader.ts
new file mode 100644
index 00000000..1d47e1d8
--- /dev/null
+++ b/utils/i18n/reader.ts
@@ -0,0 +1,122 @@
+import { strict, asyncGlob } from './lib'
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+import path from 'path'
+import fs from 'fs'
+import yaml from 'js-yaml'
+import { mergeWith } from 'lodash'
+
+import { paths as translationPaths, contextFromFileName, createConflictKeyHandler, FileContext } from './config'
+
+const parseLocale = (file: string, context: FileContext): LocaleRoot => {
+  const locale = yaml.load(fs.readFileSync(file, 'utf8')) as Locale
+  const _parse = (locale: Locale): LocaleRoot => {
+    if (context.namespaces == null) {
+      return {
+        [context.locale]: {
+          [context.namespace]: locale
+        }
+      }
+    }
+    const rtn: Record<string, any> = {}
+    let inner = rtn
+    context.namespaces.forEach((ns, index) => {
+      if (index === (context as FileContext & {namespaces: []}).namespaces.length - 1) {
+        inner[ns] = locale
+        return
+      }
+      rtn[ns] = {}
+      inner = rtn[ns]
+    })
+    return {
+      [context.locale]: rtn
+    }
+  }
+  if (Array.isArray(locale)) {
+    const toMerge = locale.map(_parse)
+    let rtn = {}
+    for (const item of toMerge) {
+      rtn = {
+        ...rtn,
+        ...item
+      }
+    }
+    return rtn
+  } else {
+    return _parse(locale)
+  }
+}
+
+const mixinLocale = (
+  { merging, joinedLocales, mixingWith: { parsedLocale, context }, strict }:
+  {
+    strict: boolean
+    merging: boolean
+    joinedLocales: LocaleRoot
+    mixingWith: {
+      parsedLocale: LocaleRoot
+      context: FileContext
+    }
+  }
+): void => {
+  if (joinedLocales[context.locale] == null) joinedLocales[context.locale] = {}
+  joinedLocales[context.locale] = mergeWith(
+    joinedLocales[context.locale],
+    parsedLocale[context.locale],
+    (objValue, srcValue, key) => {
+      if (objValue == null) {
+        return srcValue
+      }
+      for (const k in srcValue) {
+        if ((Boolean(objValue[k])) && objValue[k] !== srcValue[k]) {
+          if (!merging) {
+            console.warn(`[Warning] Merging into initialized value:
+${key}.${k}: [${typeof srcValue[k]}${(typeof srcValue[k] === 'string' && `\`${srcValue[k]}\``) || ''}] merging into [${typeof objValue[k]}${(typeof objValue[k] === 'string' && `\`${objValue[k]}\``) || ''}].`)
+            if (strict) process.exit(1)
+          }
+          objValue = createConflictKeyHandler(merging)(objValue, srcValue, k)
+          if (!merging) console.log('')
+        } else {
+          objValue[k] = srcValue[k]
+        }
+      }
+      return objValue
+      // return merge(objValue, srcValue)
+    }
+  )
+}
+
+const createReducer = ({ translationPath, merging, strict }: {translationPath: string, merging: boolean, strict: boolean}) => async (acc: LocaleRoot, match: string) => {
+  console.log('parsing', match, '...\n')
+  try {
+    acc = await acc
+    const relative = path.relative(translationPath, match)
+    const context = contextFromFileName(relative)
+    const data = await parseLocale(match, context)
+    mixinLocale({
+      merging,
+      joinedLocales: acc,
+      mixingWith: {
+        parsedLocale: data,
+        context
+      },
+      strict
+    })
+    return acc
+  } catch (error) {
+    console.error(error)
+  }
+}
+export const readLocales = async (): Promise<LocaleRoot> => {
+  let locales = {}
+  for (const [index, conf] of translationPaths.entries()) {
+    if (conf == null) continue
+    const { path: translationPath, filter } = conf
+    const matches = (await asyncGlob(path.join(translationPath, '**/*.yml')))
+      .filter(filter)
+    const reducer = createReducer({ translationPath, merging: index > 0, strict })
+    locales = await matches.reduce(reducer, locales)
+  }
+
+  return locales
+}
diff --git a/utils/i18n/types/index.ts b/utils/i18n/types/index.ts
new file mode 100644
index 00000000..6bd7e5cf
--- /dev/null
+++ b/utils/i18n/types/index.ts
@@ -0,0 +1,17 @@
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+interface InnerLocale {
+  [index: string]: Locale
+}
+type Locale =
+| InnerLocale
+| string
+| number
+| undefined
+| null
+
+interface LocaleRoot {
+  [locale: string]: {
+    [namespace: string]: Locale
+  }
+}
diff --git a/utils/i18n/writer.ts b/utils/i18n/writer.ts
new file mode 100644
index 00000000..f255364f
--- /dev/null
+++ b/utils/i18n/writer.ts
@@ -0,0 +1,41 @@
+// // @ts-check
+// import {
+//   compiledFileNameSchema,
+//   compiledFileSchema,
+//   paths as translationPath,
+//   divider,
+//   contextToFileName,
+//   FileContext
+// } from './config'
+// import yaml from 'js-yaml'
+// import _path, { join } from 'path'
+// import fs from 'fs/promises'
+// import { existsSync, mkdirSync } from 'fs'
+
+// export function formatLocaleData (locale: Record<string, any>, context: FileContext) {
+//   const current = locale[context.locale][context.namespace]
+//   return yaml.dump(current)
+// }
+
+// export function writeToDisk (locales: any): void {
+//   throw new Error('deprecated!! nothing has changed.')
+//   for (const locale in locales) {
+//       const namespaces = locales[locale]
+//       for (const namespace in namespaces) {
+//           const entries = namespaces[namespace]
+//           const context = {
+//               locale,
+//               namespace,
+//               extension: 'yml'
+//           }
+//           const fileName = contextToFileName(context)
+//           const yaml = formatLocaleData(locales, context)
+//           const path = join(translationPath, fileName)
+//           const dir = _path.dirname(path)
+//           if (!existsSync(path)) {
+//               mkdirSync(dir, {recursive: true})
+//           }
+//           fs.writeFile(path, yaml, 'utf8')
+//       }
+//   }
+// }