diff --git a/app.js b/app.js
index d084c29..9603cce 100644
--- a/app.js
+++ b/app.js
@@ -213,13 +213,6 @@ function makeMutClosure(arg0, arg1, dtor, f) {
                 
                 return real;
             }
-function __wbg_adapter_32(arg0, arg1, arg2) {
-wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h45eceffb37154584(arg0, arg1, addHeapObject(arg2));
-}
-
-function __wbg_adapter_35(arg0, arg1) {
-wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hf8773dca72b533b9(arg0, arg1);
-}
 
 let stack_pointer = 32;
 
@@ -228,14 +221,18 @@ function addBorrowedObject(obj) {
                 heap[--stack_pointer] = obj;
                 return stack_pointer;
             }
-function __wbg_adapter_38(arg0, arg1, arg2) {
+function __wbg_adapter_32(arg0, arg1, arg2) {
 try {
-wasm._dyn_core__ops__function__FnMut___A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h53585f508593b60d(arg0, arg1, addBorrowedObject(arg2));
+wasm._dyn_core__ops__function__FnMut___A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd9fcefc6bb5eb4be(arg0, arg1, addBorrowedObject(arg2));
 } finally {
 heap[stack_pointer++] = undefined;
 }
 }
 
+function __wbg_adapter_35(arg0, arg1, arg2) {
+wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hecf8e7fbcf7e70f4(arg0, arg1, addHeapObject(arg2));
+}
+
 let cachedUint32Memory0 = new Uint32Array();
 
 function getUint32Memory0() {
@@ -262,8 +259,6 @@ function handleError(f, args) {
                             wasm.__wbindgen_exn_store(addHeapObject(e));
                         }
                     }
-
-function notDefined(what) { return () => { throw new Error(`${what} is not defined`); }; }
 /**
 */
 export function run_app() {
@@ -304,32 +299,10 @@ async function load(module, imports) {
                 function getImports() {
                     const imports = {};
                     imports.wbg = {};
-imports.wbg.__wbg_setonfocus_94eb5e882d17d4c5 = function(arg0, arg1) {
-getObject(arg0).onfocus = getObject(arg1);
-};
-imports.wbg.__wbg_classList_8a97f5e2e1bc3fa9 = function(arg0) {
-const ret = getObject(arg0).classList;
-return addHeapObject(ret);
-};
-imports.wbg.__wbg_key_ad4fc49423a94efa = function(arg0, arg1) {
-const ret = getObject(arg1).key;
-const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-const len0 = WASM_VECTOR_LEN;
-getInt32Memory0()[arg0 / 4 + 1] = len0;
-getInt32Memory0()[arg0 / 4 + 0] = ptr0;
-};
 imports.wbg.__wbg_location_8cc8ccf27e342c0a = function(arg0) {
 const ret = getObject(arg0).location;
 return addHeapObject(ret);
 };
-imports.wbg.__wbg_matchMedia_0b5dc8aaf445df72 = function() { return handleError(function (arg0, arg1, arg2) {
-const ret = getObject(arg0).matchMedia(getStringFromWasm0(arg1, arg2));
-return isLikeNone(ret) ? 0 : addHeapObject(ret);
-}, arguments) };
-imports.wbg.__wbg_matches_0ffc2232d99a6034 = function(arg0) {
-const ret = getObject(arg0).matches;
-return ret;
-};
 imports.wbg.__wbg_history_2a104346a1208269 = function() { return handleError(function (arg0) {
 const ret = getObject(arg0).history;
 return addHeapObject(ret);
@@ -345,18 +318,14 @@ const len0 = WASM_VECTOR_LEN;
 getInt32Memory0()[arg0 / 4 + 1] = len0;
 getInt32Memory0()[arg0 / 4 + 0] = ptr0;
 };
-imports.wbg.__wbindgen_cb_drop = function(arg0) {
-const obj = takeObject(arg0).original;
-if (obj.cnt-- == 1) {
-obj.a = 0;
-return true;
-}
-const ret = false;
+imports.wbg.__wbg_matchMedia_0b5dc8aaf445df72 = function() { return handleError(function (arg0, arg1, arg2) {
+const ret = getObject(arg0).matchMedia(getStringFromWasm0(arg1, arg2));
+return isLikeNone(ret) ? 0 : addHeapObject(ret);
+}, arguments) };
+imports.wbg.__wbg_matches_0ffc2232d99a6034 = function(arg0) {
+const ret = getObject(arg0).matches;
 return ret;
 };
-imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
-takeObject(arg0);
-};
 imports.wbg.__wbg_new_abda76e883ba8a5f = function() {
 const ret = new Error();
 return addHeapObject(ret);
@@ -375,6 +344,9 @@ console.error(getStringFromWasm0(arg0, arg1));
 wasm.__wbindgen_free(arg0, arg1);
 }
 };
+imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
+takeObject(arg0);
+};
 imports.wbg.__wbg_new_0b9bfdd97583284e = function() {
 const ret = new Object();
 return addHeapObject(ret);
@@ -452,13 +424,13 @@ const len0 = WASM_VECTOR_LEN;
 getInt32Memory0()[arg0 / 4 + 1] = len0;
 getInt32Memory0()[arg0 / 4 + 0] = ptr0;
 };
-imports.wbg.__wbg_removeEventListener_b10f1a66647f3aa0 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
-getObject(arg0).removeEventListener(getStringFromWasm0(arg1, arg2), getObject(arg3), arg4 !== 0);
-}, arguments) };
 imports.wbg.__wbindgen_object_clone_ref = function(arg0) {
 const ret = getObject(arg0);
 return addHeapObject(ret);
 };
+imports.wbg.__wbg_removeEventListener_b10f1a66647f3aa0 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
+getObject(arg0).removeEventListener(getStringFromWasm0(arg1, arg2), getObject(arg3), arg4 !== 0);
+}, arguments) };
 imports.wbg.__wbg_instanceof_Error_56b496a10a56de66 = function(arg0) {
 let result;
                     try {
@@ -493,11 +465,6 @@ imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
 const ret = getStringFromWasm0(arg0, arg1);
 return addHeapObject(ret);
 };
-imports.wbg.__wbg_clearTimeout_23ee6db72c0ad922 = typeof clearTimeout == 'function' ? clearTimeout : notDefined('clearTimeout');
-imports.wbg.__wbg_setTimeout_09074a1669d0f224 = function() { return handleError(function (arg0, arg1) {
-const ret = setTimeout(getObject(arg0), arg1);
-return ret;
-}, arguments) };
 imports.wbg.__wbg_document_3ead31dbcad65886 = function(arg0) {
 const ret = getObject(arg0).document;
 return isLikeNone(ret) ? 0 : addHeapObject(ret);
@@ -622,30 +589,23 @@ imports.wbg.__wbg_resolve_99fe17964f31ffc0 = function(arg0) {
 const ret = Promise.resolve(getObject(arg0));
 return addHeapObject(ret);
 };
+imports.wbg.__wbindgen_cb_drop = function(arg0) {
+const obj = takeObject(arg0).original;
+if (obj.cnt-- == 1) {
+obj.a = 0;
+return true;
+}
+const ret = false;
+return ret;
+};
 imports.wbg.__wbg_then_11f7a54d67b4bfad = function(arg0, arg1) {
 const ret = getObject(arg0).then(getObject(arg1));
 return addHeapObject(ret);
 };
-imports.wbg.__wbg_requestAnimationFrame_4181656476a7d86c = function() { return handleError(function (arg0, arg1) {
-const ret = getObject(arg0).requestAnimationFrame(getObject(arg1));
-return ret;
-}, arguments) };
-imports.wbg.__wbg_body_3cb4b4042b9a632b = function(arg0) {
-const ret = getObject(arg0).body;
-return isLikeNone(ret) ? 0 : addHeapObject(ret);
-};
-imports.wbg.__wbg_activeElement_832e9d448ca74309 = function(arg0) {
-const ret = getObject(arg0).activeElement;
-return isLikeNone(ret) ? 0 : addHeapObject(ret);
-};
 imports.wbg.__wbg_createElement_976dbb84fe1661b5 = function() { return handleError(function (arg0, arg1, arg2) {
 const ret = getObject(arg0).createElement(getStringFromWasm0(arg1, arg2));
 return addHeapObject(ret);
 }, arguments) };
-imports.wbg.__wbg_getwithindex_5571ba24207565a4 = function(arg0, arg1) {
-const ret = getObject(arg0)[arg1 >>> 0];
-return isLikeNone(ret) ? 0 : addHeapObject(ret);
-};
 imports.wbg.__wbg_pathname_78a642e573bf8169 = function(arg0, arg1) {
 const ret = getObject(arg1).pathname;
 const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
@@ -667,41 +627,6 @@ return addHeapObject(ret);
 imports.wbg.__wbg_setvalue_df64bc6794c098f2 = function(arg0, arg1, arg2) {
 getObject(arg0).value = getStringFromWasm0(arg1, arg2);
 };
-imports.wbg.__wbg_add_89a4f3b0846cf0aa = function() { return handleError(function (arg0, arg1, arg2) {
-getObject(arg0).add(getStringFromWasm0(arg1, arg2));
-}, arguments) };
-imports.wbg.__wbg_contains_81c1d9522c6b6962 = function(arg0, arg1, arg2) {
-const ret = getObject(arg0).contains(getStringFromWasm0(arg1, arg2));
-return ret;
-};
-imports.wbg.__wbg_remove_1a26eb5d822902ed = function() { return handleError(function (arg0, arg1, arg2) {
-getObject(arg0).remove(getStringFromWasm0(arg1, arg2));
-}, arguments) };
-imports.wbg.__wbg_setchecked_f1e1f3e62cdca8e7 = function(arg0, arg1) {
-getObject(arg0).checked = arg1 !== 0;
-};
-imports.wbg.__wbg_setvalue_e5b519cca37d82a7 = function(arg0, arg1, arg2) {
-getObject(arg0).value = getStringFromWasm0(arg1, arg2);
-};
-imports.wbg.__wbg_instanceof_Element_33bd126d58f2021b = function(arg0) {
-let result;
-                    try {
-                        result = getObject(arg0) instanceof Element;
-                    } catch {
-                        result = false;
-                    }
-                    const ret = result;
-return ret;
-};
-imports.wbg.__wbg_removeAttribute_beaed7727852af78 = function() { return handleError(function (arg0, arg1, arg2) {
-getObject(arg0).removeAttribute(getStringFromWasm0(arg1, arg2));
-}, arguments) };
-imports.wbg.__wbg_setAttribute_d8436c14a59ab1af = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
-getObject(arg0).setAttribute(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
-}, arguments) };
-imports.wbg.__wbg_focus_adfe4cc61e2c09bc = function() { return handleError(function (arg0) {
-getObject(arg0).focus();
-}, arguments) };
 imports.wbg.__wbg_instanceof_Window_acc97ff9f5d2c7b4 = function(arg0) {
 let result;
                     try {
@@ -712,24 +637,25 @@ let result;
                     const ret = result;
 return ret;
 };
+imports.wbg.__wbg_setchecked_f1e1f3e62cdca8e7 = function(arg0, arg1) {
+getObject(arg0).checked = arg1 !== 0;
+};
+imports.wbg.__wbg_setvalue_e5b519cca37d82a7 = function(arg0, arg1, arg2) {
+getObject(arg0).value = getStringFromWasm0(arg1, arg2);
+};
+imports.wbg.__wbg_removeAttribute_beaed7727852af78 = function() { return handleError(function (arg0, arg1, arg2) {
+getObject(arg0).removeAttribute(getStringFromWasm0(arg1, arg2));
+}, arguments) };
+imports.wbg.__wbg_setAttribute_d8436c14a59ab1af = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
+getObject(arg0).setAttribute(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
+}, arguments) };
 imports.wbg.__wbg_addEventListener_1fc744729ac6dc27 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
 getObject(arg0).addEventListener(getStringFromWasm0(arg1, arg2), getObject(arg3), getObject(arg4));
 }, arguments) };
-imports.wbg.__wbg_item_a0fbaf104daa97a1 = function(arg0, arg1) {
-const ret = getObject(arg0).item(arg1 >>> 0);
-return isLikeNone(ret) ? 0 : addHeapObject(ret);
-};
-imports.wbg.__wbg_pushState_38917fb88b4add30 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5) {
-getObject(arg0).pushState(getObject(arg1), getStringFromWasm0(arg2, arg3), arg4 === 0 ? undefined : getStringFromWasm0(arg4, arg5));
-}, arguments) };
 imports.wbg.__wbg_nextSibling_62338ec2a05607b4 = function(arg0) {
 const ret = getObject(arg0).nextSibling;
 return isLikeNone(ret) ? 0 : addHeapObject(ret);
 };
-imports.wbg.__wbg_appendChild_e513ef0e5098dfdd = function() { return handleError(function (arg0, arg1) {
-const ret = getObject(arg0).appendChild(getObject(arg1));
-return addHeapObject(ret);
-}, arguments) };
 imports.wbg.__wbg_insertBefore_9f2d2defb9471006 = function() { return handleError(function (arg0, arg1, arg2) {
 const ret = getObject(arg0).insertBefore(getObject(arg1), getObject(arg2));
 return addHeapObject(ret);
@@ -738,6 +664,9 @@ imports.wbg.__wbg_removeChild_6751e9ca5d9aaf00 = function() { return handleError
 const ret = getObject(arg0).removeChild(getObject(arg1));
 return addHeapObject(ret);
 }, arguments) };
+imports.wbg.__wbg_pushState_38917fb88b4add30 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5) {
+getObject(arg0).pushState(getObject(arg1), getStringFromWasm0(arg2, arg3), arg4 === 0 ? undefined : getStringFromWasm0(arg4, arg5));
+}, arguments) };
 imports.wbg.__wbg_href_bbb11e0e61ea410e = function() { return handleError(function (arg0, arg1) {
 const ret = getObject(arg1).href;
 const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
@@ -829,27 +758,24 @@ imports.wbg.__wbg_from_7ce3cb27cb258569 = function(arg0) {
 const ret = Array.from(getObject(arg0));
 return addHeapObject(ret);
 };
-imports.wbg.__wbg_setlistenerid_3183aae8fa5840fb = function(arg0, arg1) {
-getObject(arg0).__yew_listener_id = arg1 >>> 0;
-};
-imports.wbg.__wbg_textContent_77bd294928962f93 = function(arg0, arg1) {
-const ret = getObject(arg1).textContent;
-var ptr0 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-var len0 = WASM_VECTOR_LEN;
-getInt32Memory0()[arg0 / 4 + 1] = len0;
-getInt32Memory0()[arg0 / 4 + 0] = ptr0;
-};
-imports.wbg.__wbg_outerHTML_bf662bdff92e5910 = function(arg0, arg1) {
-const ret = getObject(arg1).outerHTML;
-const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-const len0 = WASM_VECTOR_LEN;
-getInt32Memory0()[arg0 / 4 + 1] = len0;
-getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+imports.wbg.__wbg_instanceof_Element_33bd126d58f2021b = function(arg0) {
+let result;
+                    try {
+                        result = getObject(arg0) instanceof Element;
+                    } catch {
+                        result = false;
+                    }
+                    const ret = result;
+return ret;
 };
 imports.wbg.__wbg_createTextNode_300f845fab76642f = function(arg0, arg1, arg2) {
 const ret = getObject(arg0).createTextNode(getStringFromWasm0(arg1, arg2));
 return addHeapObject(ret);
 };
+imports.wbg.__wbg_appendChild_e513ef0e5098dfdd = function() { return handleError(function (arg0, arg1) {
+const ret = getObject(arg0).appendChild(getObject(arg1));
+return addHeapObject(ret);
+}, arguments) };
 imports.wbg.__wbg_error_71d6845bf00a930f = function(arg0, arg1) {
 var v0 = getArrayJsValueFromWasm0(arg0, arg1).slice();
 wasm.__wbindgen_free(arg0, arg1 * 4);
@@ -872,48 +798,8 @@ const len0 = WASM_VECTOR_LEN;
 getInt32Memory0()[arg0 / 4 + 1] = len0;
 getInt32Memory0()[arg0 / 4 + 0] = ptr0;
 };
-imports.wbg.__wbg_setclassName_ab2d02663db47af3 = function(arg0, arg1, arg2) {
-getObject(arg0).className = getStringFromWasm0(arg1, arg2);
-};
-imports.wbg.__wbg_clientHeight_1fc8bff4acf145b1 = function(arg0) {
-const ret = getObject(arg0).clientHeight;
-return ret;
-};
-imports.wbg.__wbg_instanceof_HtmlElement_eff00d16af7bd6e7 = function(arg0) {
-let result;
-                    try {
-                        result = getObject(arg0) instanceof HTMLElement;
-                    } catch {
-                        result = false;
-                    }
-                    const ret = result;
-return ret;
-};
-imports.wbg.__wbg_length_4b03cbe342879df8 = function(arg0) {
-const ret = getObject(arg0).length;
-return ret;
-};
-imports.wbg.__wbg_querySelectorAll_1897e4d23d5bf5b5 = function() { return handleError(function (arg0, arg1, arg2) {
-const ret = getObject(arg0).querySelectorAll(getStringFromWasm0(arg1, arg2));
-return addHeapObject(ret);
-}, arguments) };
-imports.wbg.__wbg_contains_e35a6bed906082fb = function(arg0, arg1) {
-const ret = getObject(arg0).contains(getObject(arg1));
-return ret;
-};
-imports.wbg.__wbg_sethash_d35570df091aa47e = function(arg0, arg1, arg2) {
-getObject(arg0).hash = getStringFromWasm0(arg1, arg2);
-};
-imports.wbg.__wbg_href_9b462d09b5f8b378 = function(arg0, arg1) {
-const ret = getObject(arg1).href;
-const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-const len0 = WASM_VECTOR_LEN;
-getInt32Memory0()[arg0 / 4 + 1] = len0;
-getInt32Memory0()[arg0 / 4 + 0] = ptr0;
-};
-imports.wbg.__wbg_lastChild_a2f5ed739809bb31 = function(arg0) {
-const ret = getObject(arg0).lastChild;
-return isLikeNone(ret) ? 0 : addHeapObject(ret);
+imports.wbg.__wbg_setlistenerid_3183aae8fa5840fb = function(arg0, arg1) {
+getObject(arg0).__yew_listener_id = arg1 >>> 0;
 };
 imports.wbg.__wbg_log_4cf38bb073e9467a = function(arg0, arg1) {
 console.log(getStringFromWasm0(arg0, arg1));
@@ -972,28 +858,34 @@ imports.wbg.__wbg_getElementsByTagName_617098e0ae766c3e = function(arg0, arg1, a
 const ret = getObject(arg0).getElementsByTagName(getStringFromWasm0(arg1, arg2));
 return addHeapObject(ret);
 };
-imports.wbg.__wbg_getElementsByTagName_e58b82763e6c309e = function(arg0, arg1, arg2) {
-const ret = getObject(arg0).getElementsByTagName(getStringFromWasm0(arg1, arg2));
+imports.wbg.__wbg_getwithindex_5571ba24207565a4 = function(arg0, arg1) {
+const ret = getObject(arg0)[arg1 >>> 0];
+return isLikeNone(ret) ? 0 : addHeapObject(ret);
+};
+imports.wbg.__wbg_body_3cb4b4042b9a632b = function(arg0) {
+const ret = getObject(arg0).body;
+return isLikeNone(ret) ? 0 : addHeapObject(ret);
+};
+imports.wbg.__wbg_lastChild_a2f5ed739809bb31 = function(arg0) {
+const ret = getObject(arg0).lastChild;
+return isLikeNone(ret) ? 0 : addHeapObject(ret);
+};
+imports.wbg.__wbg_sethash_d35570df091aa47e = function(arg0, arg1, arg2) {
+getObject(arg0).hash = getStringFromWasm0(arg1, arg2);
+};
+imports.wbg.__wbg_href_9b462d09b5f8b378 = function(arg0, arg1) {
+const ret = getObject(arg1).href;
+const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+const len0 = WASM_VECTOR_LEN;
+getInt32Memory0()[arg0 / 4 + 1] = len0;
+getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+};
+imports.wbg.__wbindgen_closure_wrapper397 = function(arg0, arg1, arg2) {
+const ret = makeMutClosure(arg0, arg1, 68, __wbg_adapter_32);
 return addHeapObject(ret);
 };
-imports.wbg.__wbindgen_closure_wrapper213 = function(arg0, arg1, arg2) {
-const ret = makeMutClosure(arg0, arg1, 119, __wbg_adapter_32);
-return addHeapObject(ret);
-};
-imports.wbg.__wbindgen_closure_wrapper295 = function(arg0, arg1, arg2) {
-const ret = makeMutClosure(arg0, arg1, 48, __wbg_adapter_35);
-return addHeapObject(ret);
-};
-imports.wbg.__wbindgen_closure_wrapper496 = function(arg0, arg1, arg2) {
-const ret = makeMutClosure(arg0, arg1, 48, __wbg_adapter_38);
-return addHeapObject(ret);
-};
-imports.wbg.__wbindgen_closure_wrapper1305 = function(arg0, arg1, arg2) {
-const ret = makeMutClosure(arg0, arg1, 48, __wbg_adapter_38);
-return addHeapObject(ret);
-};
-imports.wbg.__wbindgen_closure_wrapper2794 = function(arg0, arg1, arg2) {
-const ret = makeMutClosure(arg0, arg1, 48, __wbg_adapter_32);
+imports.wbg.__wbindgen_closure_wrapper2691 = function(arg0, arg1, arg2) {
+const ret = makeMutClosure(arg0, arg1, 68, __wbg_adapter_35);
 return addHeapObject(ret);
 };
 
diff --git a/app.wasm b/app.wasm
index 77cf60d..b1162c2 100644
Binary files a/app.wasm and b/app.wasm differ
diff --git a/index.html b/index.html
index e252c7f..701b468 100644
--- a/index.html
+++ b/index.html
@@ -1,39 +1,49 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Gabriel Tofvesson</title>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
-        <script type="text/javascript">
-          // Single Page Apps for GitHub Pages
-          // MIT License
-          // https://github.com/rafgraph/spa-github-pages
-          // This script checks to see if a redirect is present in the query string,
-          // converts it back into the correct url and adds it to the
-          // browser's history using window.history.replaceState(...),
-          // which won't cause the browser to attempt to load the new url.
-          // When the single page app is loaded further down in this file,
-          // the correct url will be waiting in the browser's history for
-          // the single page app to route accordingly.
-          (function(l) {
-            if (l.search[1] === '/' ) {
-              var decoded = l.search.slice(1).split('&').map(function(s) { 
-                return s.replace(/~and~/g, '&')
-              }).join('?');
-              window.history.replaceState(null, null,
-                  l.pathname.slice(0, -1) + decoded + l.hash
-              );
-            }
-          }(window.location))
-        </script>
-        <meta charset="utf-8"/>
-        <script type="module">
-            import init from "/app.js";
-            init(new URL('app.wasm', import.meta.url));
-        </script>
-        <link rel="stylesheet" href="/styles.css">
-        <link rel="stylesheet" href="/blueprint.css">
-    </head>
-    <body>
-    </body>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Gabriel Tofvesson</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/style/app.css">
+    <link rel="stylesheet" href="/style/theme.css">
+    <link rel="stylesheet" href="/style/tag.css">
+    <link rel="stylesheet" href="/style/navbar.css">
+    <link rel="stylesheet" href="/style/card.css">
+    <link rel="stylesheet" href="/style/gallery.css">
+    <link rel="stylesheet" href="/style/overlay.css">
+    <link rel="stylesheet" href="/style/overlay-gallery.css">
+    <link rel="stylesheet" href="/style/image-gallery.css">
+    <script src="https://kit.fontawesome.com/d5cf53d9fb.js" crossorigin="anonymous"></script>
+    <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      // MIT License
+      // https://github.com/rafgraph/spa-github-pages
+      // This script checks to see if a redirect is present in the query string,
+      // converts it back into the correct url and adds it to the
+      // browser's history using window.history.replaceState(...),
+      // which won't cause the browser to attempt to load the new url.
+      // When the single page app is loaded further down in this file,
+      // the correct url will be waiting in the browser's history for
+      // the single page app to route accordingly.
+      (function(l) {
+        if (l.search[1] === '/' ) {
+          var decoded = l.search.slice(1).split('&').map(function(s) { 
+            return s.replace(/~and~/g, '&')
+          }).join('?');
+          window.history.replaceState(
+            null,
+            null,
+            l.pathname.slice(0, -1) + decoded + l.hash
+          );
+        }
+      }(window.location))
+    </script>
+    <script type="module"> 
+      import init from "/app.js";
+      init(new URL('app.wasm', import.meta.url));
+    </script>
+  </head>
+  <body>
+  </body>
 </html>
diff --git a/style/app.css b/style/app.css
new file mode 100644
index 0000000..d830fd2
--- /dev/null
+++ b/style/app.css
@@ -0,0 +1,90 @@
+.main {
+    margin-top: 6vh;
+    padding: 20px;
+}
+
+:root {
+    font-size: 100%;
+}
+
+@media only screen and (min-width: 320px) and (orientation: portrait) {
+    :root {
+        font-size: 125%;
+    }
+}
+
+@media only screen and (min-width: 640px) and (orientation: portrait) {
+    :root {
+        font-size: 175%;
+    }
+}
+
+.home-title {
+    text-align: center;
+    width: 100%;
+}
+
+.home-title > h2 {
+    display: inline-block;
+}
+
+.home-content {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto auto auto;
+}
+
+.home-card {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 10px;
+    flex-direction: row;
+    margin: 10px;
+}
+
+.home-tag {
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: min-content;
+}
+
+.home-image {
+    width: 10%;
+    min-width: 100px;
+    height: auto;
+    border-radius: 50%;
+}
+
+.home-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 10px;
+    width: 100%;
+}
+
+.profiletags {
+    display: flex;
+    gap: 5px;
+    flex-wrap: wrap;
+}
+
+@media only screen and (orientation: portrait) {
+    .home-content {
+        display: flex;
+        flex-direction: column;
+    }
+    
+    .home-card {
+        flex-direction: column;
+        align-items: center;
+    }
+    .home-tag {
+        width: fit-content;
+        margin-bottom: 20px;
+    }
+}
\ No newline at end of file
diff --git a/style/card.css b/style/card.css
new file mode 100644
index 0000000..b07409d
--- /dev/null
+++ b/style/card.css
@@ -0,0 +1,17 @@
+:root {
+    --card-shadow: var(--drop-shadow-dark);
+    --card-color: var(--color-primary);
+    --card-elevation: 5px;
+    --card-elevation-hover: 15px;
+}
+
+.card {
+    border-radius: 10px;
+    box-shadow: 0 0 var(--card-elevation) var(--card-shadow);
+    background-color: var(--card-color);
+    padding: 10px;
+}
+
+.card:hover {
+    box-shadow: 0 0 var(--card-elevation-hover) var(--card-shadow);
+}
\ No newline at end of file
diff --git a/style/gallery.css b/style/gallery.css
new file mode 100644
index 0000000..e69de29
diff --git a/style/image-gallery.css b/style/image-gallery.css
new file mode 100644
index 0000000..7935272
--- /dev/null
+++ b/style/image-gallery.css
@@ -0,0 +1,50 @@
+
+.image-gallery {
+    line-height: 0;
+    column-count: 5;
+    column-gap: 5px;
+    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0);
+}
+
+.image-gallery div {
+    width: 100% !important;
+    height: auto !important;
+    margin-bottom: 10px;
+}
+
+.image-gallery div img {
+    width: 98% !important;
+    height: auto !important;
+    filter: grayscale(var(--grayscale,100%)) /*blur(var(--blur,1px))*/;
+    transition: 250ms all;
+    border-radius: 10px;
+}
+
+.image-gallery div:hover {
+    --grayscale: 0%;
+    --blur: 0px;
+}
+
+@media (max-width: 1200px) {
+    .image-gallery {
+        column-count: 4;
+    }
+}
+
+@media (max-width: 1000px) {
+    .image-gallery {
+        column-count: 3;
+    }
+}
+
+@media (max-width: 800px) {
+    .image-gallery {
+        column-count: 2;
+    }
+}
+
+@media (max-width: 400px) {
+    .image-gallery {
+        column-count: 1;
+    }
+}
\ No newline at end of file
diff --git a/style/navbar.css b/style/navbar.css
new file mode 100644
index 0000000..de45395
--- /dev/null
+++ b/style/navbar.css
@@ -0,0 +1,124 @@
+:root {
+  --navbar-color-dropshadow: var(--drop-shadow);
+  --navbar-color: var(--color-primary);
+  --navbar-color-selected: var(--color-accent);
+  --navbar-padding: 2vh;
+}
+
+
+/* Navigation bar */
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.navbar,
+.navbar * {
+    user-select: none;
+}
+
+.navbar > div:nth-child(1) {
+  display: none;
+  padding-top: var(--navbar-padding);
+  padding-bottom: var(--navbar-padding);
+}
+
+.navbar > div:nth-child(2) {
+  display: none;
+}
+
+.navbar > div:nth-child(3) {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.navbar > div:nth-child(3) > div {
+  flex: 1 1 auto;
+  overflow: hidden;
+  transition: box-shadow 250ms, z-index 250ms;
+  background-color: var(--navbar-color);
+  padding-top: var(--navbar-padding);
+  padding-bottom: var(--navbar-padding);
+}
+
+.navbar > div:nth-child(3) > div > div {
+  gap: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navbar > div:nth-child(3) > div:hover {
+  box-shadow: 0 0 11px var(--navbar-color-dropshadow);
+  z-index: 4;
+  cursor: pointer;
+}
+
+.navbar > div:nth-child(3) > div.current {
+  background-color: var(--navbar-color-selected);
+}
+
+@media only screen and (orientation: landscape) {
+  .navbar > div:nth-child(3) > div:nth-child(1) {
+      border-bottom-left-radius: 10px;
+  }
+  
+  .navbar > div:nth-child(3) > div:nth-last-child(1) {
+      border-bottom-right-radius: 10px;
+  }
+
+  .navbar > div:nth-child(3) > div.small {
+    flex-grow: 0;
+    width: 5%;
+  }
+
+  .navbar > div:nth-child(3) > div.small > div {
+    gap: 0;
+  }
+}
+
+@media only screen and (orientation: portrait) {
+  .navbar {
+    display: grid;
+    pointer-events: none;
+  }
+
+  .navbar > div:nth-child(1) {
+    display: flex;
+    width: 100%;
+    height: auto;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    transition: box-shadow 250ms, z-index 250ms;
+    background-color: var(--navbar-color);
+    box-shadow: 0 0 11px var(--navbar-color-dropshadow);
+    z-index: 5;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+
+  .navbar > div:nth-child(3) {
+    position: relative;
+    top: -100%;
+    flex-direction: column;
+    transition: top 0.5s;
+    overflow: hidden;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    pointer-events: none;
+  }
+
+  .navbar > div:nth-child(2).open + div:nth-child(3) {
+    top: 0;
+    pointer-events: auto;
+  }
+}
diff --git a/style/overlay-gallery.css b/style/overlay-gallery.css
new file mode 100644
index 0000000..0c64f4a
--- /dev/null
+++ b/style/overlay-gallery.css
@@ -0,0 +1,98 @@
+:root {
+    --overlay-gallery-scale: 95vmin;
+}
+
+/* Overlay image viewer */
+.overlay-gallery {
+    width: var(--overlay-gallery-scale);
+    height: var(--overlay-gallery-scale);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+}
+
+.overlay-gallery > div:nth-of-type(1) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.overlay-gallery > div:nth-of-type(2) {
+    transform: translate(calc(calc(var(--overlay-gallery-scale) / 2) - 50%), 0);
+    border-radius: 20px;
+    overflow: hidden;
+    position: relative;
+}
+
+.overlay-gallery > div:nth-of-type(2) > img {
+    float: left;
+    max-width: var(--overlay-gallery-scale);
+    max-height: var(--overlay-gallery-scale);
+    position: relative;
+}
+
+.overlay-gallery > div:nth-of-type(2) > div {
+    bottom: 0;
+    padding: 60px 10px 10px 10px;
+    width: 100%;
+    overflow-wrap: break-word;
+    background: linear-gradient(to top, rgba(0, 75, 196, 0.699), rgba(133, 180, 255, 0));
+}
+
+/* Gallery overlay transition properties */
+.overlay-gallery > div:nth-of-type(2) > div,
+.overlay-gallery-next,
+.overlay-gallery-prev {
+    position: absolute;
+    transition: opacity 250ms;
+    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0);
+    opacity: 0;
+}
+
+/* Image viewer overlay button positioning */
+.overlay-gallery-next,
+.overlay-gallery-prev {
+    top: 50%;
+    height: max(100%, 10px);
+    width: 12.5%;
+    display: flex !important;
+    align-items: center;
+}
+
+.overlay-gallery-next {
+    left: 100%;
+    transform: translate(-100%, -50%);
+    padding-right: 2.5%;
+    padding-left: 5%;
+    justify-content: flex-end;
+}
+
+.overlay-gallery-prev {
+    left: 0%;
+    transform: translate(-0%, -50%);
+    padding-left: 2.5%;
+    padding-right: 5%;;
+    justify-content: flex-start;
+}
+
+.overlay-gallery > div:nth-of-type(2):hover > div,
+.overlay-gallery:hover .overlay-gallery-next,
+.overlay-gallery:hover .overlay-gallery-prev {
+    opacity: 1;
+}
+
+@media only screen and (orientation: portrait) {
+    .overlay-gallery > div:nth-of-type(2) > div,
+    .overlay-gallery .overlay-gallery-next,
+    .overlay-gallery .overlay-gallery-prev {
+        opacity: 1;
+    }
+}
+
+.overlay-gallery-next:hover,
+.overlay-gallery-prev:hover {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/style/overlay.css b/style/overlay.css
new file mode 100644
index 0000000..d9012d2
--- /dev/null
+++ b/style/overlay.css
@@ -0,0 +1,29 @@
+/* Pop-up overlay */
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    display: flex;
+    z-index: 25;
+}
+
+.overlay.hidden {
+    display: none;
+}
+
+/* Background */
+.overlay.shade {
+    background-color: rgba(10, 10, 10, 0.75);
+}
+
+/* Content */
+.overlay > div.center {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/styles.css b/style/styles.css
similarity index 89%
rename from styles.css
rename to style/styles.css
index f3ba57e..78c3478 100644
--- a/styles.css
+++ b/style/styles.css
@@ -1,31 +1,4 @@
-:root {
-    --bg-color: #f5f8fa;
-    --gallery-scale: 95vmin;
-}
 
-:root[data-theme='dark'] {
-    --bg-color: #00251a;
-    --color-primary: #004d40;
-    --color-accent: #39796b;
-}
-
-:root[data-theme='mauve'] {
-    --bg-color: #560027;
-    --color-primary: #880e4f;
-    --color-accent: #bc477b;
-}
-
-:root[data-theme='gray'] {
-    --bg-color: #455A64;
-    --color-primary: #607D8B;
-    --color-accent: #212121;
-}
-
-:root[data-theme='purple'] {
-    --bg-color: #512DA8;
-    --color-primary: #673AB7;
-    --color-accent: #009688;
-}
 
 .bp3-card.bp3-dark, .bp3-dark .bp3-card {
     background-color: var(--color-primary) !important;
@@ -53,11 +26,6 @@ body {
     font-family: 'Roboto', sans-serif !important;
 }
 
-.main {
-    margin-top: 41px;
-    padding: 20px;
-}
-
 .actionbar {
     position: fixed;
     top: 0;
@@ -118,6 +86,7 @@ body {
     align-items: center;
     width: min-content;
 }
+/*
 
 @media only screen and (max-width: 1000px) {
     .home-content {
@@ -132,6 +101,7 @@ body {
         align-items: center;
     }
 }
+*/
 
 .home-image {
     width: 10%;
diff --git a/style/tag.css b/style/tag.css
new file mode 100644
index 0000000..fcad6ae
--- /dev/null
+++ b/style/tag.css
@@ -0,0 +1,61 @@
+:root {
+    --tag-color-blue: rgba(19, 124, 189, 0.3);
+    --tag-color-red: rgba(219, 55, 55, 0.25);
+    --tag-color-orange: rgba(217, 130, 43, 0.25);
+    --tag-color-green: rgba(15, 153, 96, 0.25);
+
+    --tag-shadow: var(--drop-shadow);
+    
+    --tag-color-text-blue: #48aff0;
+    --tag-color-text-red: #ff7373;
+    --tag-color-text-orange: #ffb366;
+    --tag-color-text-green: #3dcc91;
+}
+
+:root[data-theme="dark"] {
+    --tag-color-blue: #303f9f4d;
+    --tag-color-red: #7f00004d;
+    --tag-color-orange: #e651004d;
+    --tag-color-green: #33691e4d;
+
+    --tag-color-text-blue: #448aff;
+    --tag-color-text-red: #EF9A9A;
+    --tag-color-text-orange: #FFB74D;
+    --tag-color-text-green: #AED581;
+}
+
+span.tag {
+    border-radius: 20px;
+    padding: 2.5px;
+    user-select: none;
+}
+
+span.tag:hover {
+    box-shadow: 0 0 5px var(--tag-shadow);
+    cursor: pointer;
+}
+
+span.tag > span {
+    padding: 2.5px;
+    user-select: none;
+}
+
+span.tag.blue {
+    background-color: var(--tag-color-blue);
+    color: var(--tag-color-text-blue);
+}
+
+span.tag.red {
+    background-color: var(--tag-color-red);
+    color: var(--tag-color-text-red);
+}
+
+span.tag.orange {
+    background-color: var(--tag-color-orange);
+    color: var(--tag-color-text-orange);
+}
+
+span.tag.green {
+    background-color: var(--tag-color-green);
+    color: var(--tag-color-text-green);
+}
\ No newline at end of file
diff --git a/style/theme.css b/style/theme.css
new file mode 100644
index 0000000..4037c29
--- /dev/null
+++ b/style/theme.css
@@ -0,0 +1,54 @@
+:root {
+    --drop-shadow: rgba(0, 0, 0, 0.61);
+    --drop-shadow-dark: rgba(255, 255, 255, 0.61);
+    --bg-color: #f5f8fa;
+    --color-primary: rgb(210, 210, 210);
+    --color-accent: rgb(160, 200, 160);
+    --color-text: rgb(0, 0, 0);
+}
+
+:root[data-theme='dark'] {
+    --drop-shadow: rgba(255, 255, 255, 0.61);
+    --drop-shadow-dark: rgba(0, 0, 0, 0.61);
+    --bg-color: #00251a;
+    --color-primary: #004d40;
+    --color-accent: #39796b;
+    --color-text: #f5f8fa;
+}
+
+:root[data-theme='mauve'] {
+    --drop-shadow: rgba(255, 255, 255, 0.61);
+    --drop-shadow-dark: rgba(0, 0, 0, 0.61);
+    --bg-color: #560027;
+    --color-primary: #880e4f;
+    --color-accent: #bc477b;
+    --color-text: #f5f8fa;
+}
+
+:root[data-theme='gray'] {
+    --drop-shadow: rgba(0, 0, 0, 0.61);
+    --drop-shadow-dark: rgba(0, 0, 0, 0.61);
+    --bg-color: #455A64;
+    --color-primary: #607D8B;
+    --color-accent: #212121;
+    --color-text: #f5f8fa;
+}
+
+:root[data-theme='purple'] {
+    --drop-shadow: rgba(255, 255, 255, 0.61);
+    --drop-shadow-dark: rgba(0, 0, 0, 0.61);
+    --bg-color: #512DA8;
+    --color-primary: #673AB7;
+    --color-accent: #009688;
+    --color-text: rgb(0, 0, 0);
+}
+
+html {
+    color: var(--color-text);
+    transition: color 100ms;
+}
+
+html[data-theme="dark"] > body {
+    background-color: var(--bg-color);
+    font-family: 'Roboto', sans-serif !important;
+}
\ No newline at end of file