diff --git a/assests/images/background-pattern.svg b/assests/images/background-pattern.svg
new file mode 100644
index 0000000..8f08f21
--- /dev/null
+++ b/assests/images/background-pattern.svg
@@ -0,0 +1 @@
+<svg width="2048" height="2048" xmlns="http://www.w3.org/2000/svg" id="coloreous-93" meta="Q3JlYXRlZCBieSBjb2xvcmVvdXMuY29t"><defs><pattern id="a" patternUnits="userSpaceOnUse" width="273" height="260" patternTransform="scale(2.2292349981810737) rotate(345.71197437380926)"><g _pc_stk="1" style="stroke-width: 8.07847;"><rect id="NT_1" width="273" height="260" style="fill: rgb(255, 255, 255); fill-opacity: 1; stroke-opacity: 0;"></rect><path id="NT_2" d="M191.524 155.224 c8.17711,-10.967 21.248,-18.074 35.977,-18.074 14.734,0 27.807,7.111 35.984,18.084 0.459,0.561 0.736,1.278 0.736,2.059 0,1.795 -1.455,3.25 -3.25,3.25 -1.072,0 -2.023,-0.52 -2.615,-1.32 l-0.00226772 0.002 c-6.98599,-9.447 -18.204,-15.575 -30.853,-15.575 -12.649,0 -23.867,6.128 -30.853,15.575 l-0.00311811 -0.002 c-0.591875,0.801 -1.542,1.32 -2.614,1.32 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.786 0.279,-1.507 0.744,-2.069 z m10.6997 3.376 c6.29292,-6.794 15.288,-11.049 25.277,-11.049 9.993,0 18.991,4.259 25.285,11.058 0.585,0.588 0.946,1.397 0.946,2.292 0,1.795 -1.455,3.25 -3.25,3.25 -0.947,0 -1.8,-0.406 -2.394,-1.052 l-0.00141732 0.001 c-5.10889,-5.561 -12.44,-9.049 -20.586,-9.049 -8.145,0 -15.477,3.487 -20.586,9.049 l-0.00170079 -0.001 c-0.593859,0.647 -1.446,1.053 -2.394,1.053 -1.795,0 -3.25,-1.456 -3.25,-3.25 0,-0.899 0.365,-1.712 0.954,-2.3 z m9.42578 5.318 c4.23298,-3.714 9.779,-5.967 15.851,-5.967 6.074,0 11.621,2.255 15.855,5.971 0.726,0.596 1.189,1.501 1.189,2.513 0,1.795 -1.455,3.25 -3.25,3.25 -0.827,0 -1.581,-0.31 -2.155,-0.818 l-0.000850395 0.001 c-3.09799,-2.747 -7.173,-4.417 -11.639,-4.417 -4.465,0 -8.541,1.67 -11.639,4.418 l-0.00141732 -0.002 c-0.573733,0.509 -1.328,0.818 -2.155,0.818 -1.795,0 -3.25,-1.456 -3.25,-3.25 0,-1.015 0.465,-1.921 1.194,-2.517 z m23.7442 6.948 c-2.2286,-1.583 -4.952,-2.515 -7.893,-2.515 -2.943,0 -5.667,0.933 -7.896,2.517 -0.866,0.584 -1.436,1.574 -1.436,2.697 0,1.795 1.455,3.25 3.25,3.25 0.71,0 1.367,-0.228 1.901,-0.614 l0.00056693 0.001 c1.17581,-0.849 2.619,-1.35 4.181,-1.35 1.561,0 3.004,0.501 4.18,1.35 l0.000850395 -0.001 c0.534898,0.387 1.191,0.615 1.901,0.615 1.795,0 3.25,-1.455 3.25,-3.25 0,-1.124 -0.571,-2.115 -1.439,-2.699 z m-7.89308 14.385 c-1.7949,0 -3.25,-1.455 -3.25,-3.25 0,-1.795 1.455,-3.25 3.25,-3.25 1.795,0 3.25,1.455 3.25,3.25 0,1.795 -1.455,3.25 -3.25,3.25 z m-35.9765 -82.026 c8.17711,-10.967 21.248,-18.074 35.977,-18.074 14.734,0 27.807,7.111 35.984,18.084 0.459,0.56 0.736,1.277 0.736,2.059 0,1.795 -1.455,3.25 -3.25,3.25 -1.072,0 -2.023,-0.52 -2.615,-1.32 l-0.00226772 0.001 c-6.98599,-9.446 -18.204,-15.574 -30.853,-15.574 -12.649,0 -23.867,6.128 -30.853,15.575 l-0.00311811 -0.002 c-0.591875,0.801 -1.542,1.32 -2.614,1.32 -1.795,0 -3.25,-1.456 -3.25,-3.25 0,-0.786 0.279,-1.507 0.744,-2.069 z m10.6997 3.376 c6.29292,-6.794 15.288,-11.049 25.277,-11.049 9.993,0 18.991,4.258 25.285,11.058 0.585,0.587 0.946,1.397 0.946,2.292 0,1.795 -1.455,3.25 -3.25,3.25 -0.947,0 -1.8,-0.406 -2.394,-1.052 l-0.00141732 0.001 c-5.10889,-5.561 -12.44,-9.049 -20.586,-9.049 -8.145,0 -15.477,3.487 -20.586,9.049 l-0.00170079 -0.002 c-0.593859,0.647 -1.446,1.053 -2.394,1.053 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.899 0.365,-1.712 0.954,-2.301 z m9.42578 5.318 c4.23298,-3.714 9.779,-5.967 15.851,-5.967 6.074,0 11.621,2.255 15.855,5.971 0.726,0.596 1.189,1.501 1.189,2.513 0,1.795 -1.455,3.25 -3.25,3.25 -0.827,0 -1.581,-0.309 -2.155,-0.818 l-0.000850395 0.001 c-3.09799,-2.748 -7.173,-4.417 -11.639,-4.417 -4.465,0 -8.541,1.67 -11.639,4.418 l-0.00141732 -0.002 c-0.573733,0.509 -1.328,0.818 -2.155,0.818 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-1.015 0.465,-1.921 1.194,-2.517 z m23.7442 6.948 c-2.2286,-1.583 -4.952,-2.515 -7.893,-2.515 -2.943,0 -5.667,0.933 -7.896,2.517 -0.866,0.584 -1.436,1.574 -1.436,2.697 0,1.795 1.455,3.25 3.25,3.25 0.71,0 1.367,-0.228 1.901,-0.615 l0.00056693 0.001 c1.17581,-0.849 2.619,-1.35 4.181,-1.35 1.561,0 3.004,0.501 4.18,1.35 l0.000850395 -0.001 c0.534898,0.386 1.191,0.615 1.901,0.615 1.795,0 3.25,-1.455 3.25,-3.25 0,-1.124 -0.571,-2.115 -1.439,-2.699 z m-7.89308 14.385 c-1.7949,0 -3.25,-1.455 -3.25,-3.25 0,-1.795 1.455,-3.25 3.25,-3.25 1.795,0 3.25,1.455 3.25,3.25 0,1.795 -1.455,3.25 -3.25,3.25 z m-126.977 21.974 c8.17711,-10.967 21.248,-18.074 35.977,-18.074 14.734,0 27.807,7.111 35.984,18.084 0.459,0.561 0.736,1.278 0.736,2.059 0,1.795 -1.455,3.25 -3.25,3.25 -1.072,0 -2.023,-0.52 -2.615,-1.32 l-0.00226772 0.002 c-6.98599,-9.447 -18.204,-15.575 -30.853,-15.575 -12.649,0 -23.867,6.128 -30.853,15.575 l-0.00311811 -0.002 c-0.591875,0.801 -1.542,1.32 -2.614,1.32 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.786 0.279,-1.507 0.744,-2.069 z m10.6997 3.376 c6.29292,-6.794 15.288,-11.049 25.277,-11.049 9.993,0 18.991,4.259 25.285,11.058 0.585,0.588 0.946,1.397 0.946,2.292 0,1.795 -1.455,3.25 -3.25,3.25 -0.947,0 -1.8,-0.406 -2.394,-1.052 l-0.00141732 0.001 c-5.10889,-5.561 -12.44,-9.049 -20.586,-9.049 -8.145,0 -15.477,3.487 -20.586,9.049 l-0.00170079 -0.001 c-0.593859,0.647 -1.446,1.053 -2.393,1.053 -1.795,0 -3.25,-1.456 -3.25,-3.25 0,-0.899 0.365,-1.712 0.954,-2.3 z m9.42578 5.318 c4.23298,-3.714 9.779,-5.967 15.851,-5.967 6.074,0 11.621,2.255 15.855,5.971 0.726,0.596 1.189,1.501 1.189,2.513 0,1.795 -1.455,3.25 -3.25,3.25 -0.827,0 -1.581,-0.31 -2.155,-0.818 l-0.000850395 0.001 c-3.09799,-2.747 -7.173,-4.417 -11.639,-4.417 -4.465,0 -8.541,1.67 -11.639,4.418 l-0.00141732 -0.002 c-0.573733,0.509 -1.328,0.818 -2.155,0.818 -1.795,0 -3.25,-1.456 -3.25,-3.25 0,-1.015 0.465,-1.921 1.194,-2.517 z m23.7442 6.948 c-2.2286,-1.583 -4.952,-2.515 -7.893,-2.515 -2.943,0 -5.667,0.933 -7.896,2.517 -0.866,0.584 -1.436,1.574 -1.436,2.697 0,1.795 1.455,3.25 3.25,3.25 0.71,0 1.367,-0.228 1.901,-0.615 l0.00056693 0.001 c1.17581,-0.849 2.619,-1.35 4.181,-1.35 1.561,0 3.004,0.501 4.18,1.35 l0.000850395 -0.001 c0.534898,0.386 1.191,0.615 1.901,0.615 1.795,0 3.25,-1.455 3.25,-3.25 0,-1.124 -0.571,-2.115 -1.439,-2.699 z m-7.89308 14.385 c-1.7949,0 -3.25,-1.455 -3.25,-3.25 0,-1.795 1.455,-3.25 3.25,-3.25 1.795,0 3.25,1.455 3.25,3.25 0,1.795 -1.455,3.25 -3.25,3.25 z m55.0237 -134.026 c8.17711,-10.967 21.248,-18.074 35.977,-18.074 14.734,0 27.807,7.111 35.984,18.084 0.459,0.561 0.736,1.278 0.736,2.059 0,1.795 -1.455,3.25 -3.25,3.25 -1.072,0 -2.023,-0.52 -2.615,-1.32 l-0.00226772 0.002 c-6.98599,-9.447 -18.204,-15.575 -30.853,-15.575 -12.649,0 -23.867,6.128 -30.853,15.575 l-0.00311811 -0.002 c-0.591875,0.801 -1.542,1.32 -2.614,1.32 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.786 0.279,-1.507 0.744,-2.069 z m10.6997 3.376 c6.29292,-6.794 15.288,-11.049 25.277,-11.049 9.993,0 18.991,4.259 25.285,11.058 0.585,0.588 0.946,1.398 0.946,2.292 0,1.795 -1.455,3.25 -3.25,3.25 -0.947,0 -1.8,-0.406 -2.394,-1.052 l-0.00141732 0.001 c-5.10889,-5.561 -12.44,-9.048 -20.586,-9.048 -8.145,0 -15.477,3.487 -20.586,9.048 l-0.00170079 -0.001 c-0.593859,0.647 -1.446,1.053 -2.394,1.053 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.898 0.365,-1.712 0.954,-2.3 z m9.42578 5.318 c4.23298,-3.714 9.779,-5.967 15.851,-5.967 6.074,0 11.621,2.255 15.855,5.971 0.726,0.596 1.189,1.501 1.189,2.513 0,1.795 -1.455,3.25 -3.25,3.25 -0.827,0 -1.581,-0.31 -2.155,-0.818 l-0.000850395 0.001 c-3.09799,-2.747 -7.173,-4.417 -11.639,-4.417 -4.465,0 -8.541,1.67 -11.639,4.417 l-0.00141732 -0.002 c-0.573733,0.509 -1.328,0.818 -2.155,0.818 -1.795,0 -3.25,-1.456 -3.25,-3.25 0,-1.015 0.465,-1.921 1.194,-2.517 z m23.7442 6.948 c-2.2286,-1.583 -4.952,-2.515 -7.893,-2.515 -2.943,0 -5.667,0.933 -7.896,2.517 -0.866,0.584 -1.436,1.574 -1.436,2.697 0,1.795 1.455,3.25 3.25,3.25 0.71,0 1.367,-0.228 1.901,-0.615 l0.00056693 0.001 c1.17581,-0.849 2.619,-1.35 4.181,-1.35 1.561,0 3.004,0.501 4.18,1.35 l0.000850395 -0.001 c0.534898,0.386 1.191,0.615 1.901,0.615 1.795,0 3.25,-1.455 3.25,-3.25 0,-1.124 -0.571,-2.115 -1.439,-2.699 z m-7.89308 14.385 c-1.7949,0 -3.25,-1.455 -3.25,-3.25 0,-1.795 1.455,-3.25 3.25,-3.25 1.795,0 3.25,1.455 3.25,3.25 0,1.795 -1.455,3.25 -3.25,3.25 z" style="fill: rgb(255, 195, 207); fill-opacity: 1; stroke-opacity: 0;"></path><path id="NT_3" d="M273 3.25 c-1.79462,0 -3.25,-1.455 -3.25,-3.25 l3.24964 0 0 3.25 z m0 52 c-1.79462,0 -3.25,-1.455 -3.25,-3.25 0,-1.795 1.455,-3.25 3.25,-3.25 l0 6.5 z m0 -16.9 c-2.94265,0 -5.667,0.933 -7.896,2.517 -0.866,0.584 -1.436,1.574 -1.436,2.697 0,1.795 1.455,3.25 3.25,3.25 0.71,0 -1.367,-0.228 1.901,-0.614 l0.00056693 0.001 c1.17581,-0.849 2.619,-1.35 4.18,-1.35 l0 -6.5 z m-15.8508 -4.433 c4.23298,-3.714 9.779,-5.967 15.851,-5.967 l0 6.5 c-4.46514,0 -8.541,1.67 -11.639,4.418 l-0.00141732 -0.002 c-0.573733,0.509 -1.328,0.818 -2.155,0.818 -1.795,0 -3.25,-1.456 -3.25,-3.25 0,-1.015 0.465,-1.921 1.194,-2.517 z m-9.42578 -5.318 c6.29292,-6.794 15.288,-11.049 25.277,-11.049 l0 6.5 c-8.14537,0 -15.477,3.487 -20.586,9.048 l-0.00170079 -0.001 c-0.593859,0.647 -1.446,1.053 -2.394,1.053 -1.795,0 -3.25,-1.456 -3.25,-3.25 0,-0.899 0.365,-1.712 0.954,-2.3 z m-10.6997 -3.376 c8.17711,-10.967 21.247,-18.074 35.976,-18.074 l0 6.5 c-12.6482,0 -23.867,6.128 -30.853,15.575 l-0.00311811 -0.002 c-0.591875,0.801 -1.542,1.32 -2.614,1.32 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.786 0.279,-1.507 0.744,-2.069 z m35.9762 186.026 c-1.79462,0 -3.25,-1.455 -3.25,-3.25 0,-1.795 1.455,-3.25 3.25,-3.25 l0 6.5 z m0 -16.9 c-2.94265,0 -5.667,0.933 -7.896,2.517 -0.866,0.584 -1.436,1.574 -1.436,2.697 0,1.795 1.455,3.25 3.25,3.25 0.71,0 -1.367,-0.228 1.901,-0.615 l0.00056693 0.001 c1.17581,-0.849 2.619,-1.35 4.18,-1.35 l0 -6.5 z m-15.8508 -4.433 c4.23298,-3.714 9.779,-5.967 15.851,-5.967 l0 6.5 c-4.46514,0 -8.541,1.67 -11.639,4.417 l-0.00141732 -0.002 c-0.573733,0.509 -1.328,0.818 -2.155,0.818 -1.795,0 -3.25,-1.456 -3.25,-3.25 0,-1.015 0.465,-1.921 1.194,-2.517 z m-9.42578 -5.318 c6.29292,-6.794 15.288,-11.049 25.277,-11.049 l0 6.5 c-8.14537,0 -15.477,3.487 -20.586,9.048 l-0.00170079 -0.001 c-0.593859,0.647 -1.446,1.053 -2.394,1.053 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.898 0.365,-1.712 0.954,-2.3 z m-10.6997 -3.376 c8.17711,-10.967 21.247,-18.074 35.976,-18.074 l0 6.5 c-12.6482,0 -23.867,6.128 -30.853,15.575 l-0.00311811 -0.002 c-0.591875,0.801 -1.542,1.32 -2.614,1.32 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.786 0.279,-1.507 0.744,-2.069 z m32.7266 78.776 c0,-1.795 1.455,-3.25 3.25,-3.25 l0 3.25 -3.25 0 z m3.24964 -13.65 c-2.94265,0 -5.667,0.933 -7.896,2.517 -0.866,0.584 -1.436,1.574 -1.436,2.697 0,1.795 1.455,3.25 3.25,3.25 0.71,0 -1.367,-0.228 1.901,-0.615 l0.00056693 0.001 c1.17581,-0.849 2.619,-1.35 4.18,-1.35 l0 -6.5 z m-15.8508 -4.433 c4.23298,-3.714 9.779,-5.967 15.851,-5.967 l0 6.5 c-4.46514,0 -8.541,1.67 -11.639,4.418 l-0.00141732 -0.002 c-0.573733,0.509 -1.328,0.818 -2.155,0.818 -1.795,0 -3.25,-1.456 -3.25,-3.25 0,-1.015 0.465,-1.921 1.194,-2.517 z m-9.42578 -5.318 c6.29292,-6.794 15.288,-11.049 25.277,-11.049 l0 6.5 c-8.14537,0 -15.477,3.487 -20.586,9.049 l-0.00170079 -0.002 c-0.593859,0.647 -1.446,1.053 -2.394,1.053 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.899 0.365,-1.712 0.954,-2.301 z m-10.6997 -3.376 c8.17711,-10.967 21.247,-18.073 35.976,-18.074 l0 6.5 c-12.6482,0 -23.867,6.128 -30.853,15.575 l-0.00311811 -0.002 c-0.591875,0.801 -1.542,1.32 -2.614,1.32 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.786 0.279,-1.507 0.744,-2.069 z m35.9762 -125.974 c-1.79462,0 -3.25,-1.455 -3.25,-3.25 0,-1.795 1.455,-3.25 3.25,-3.25 l0 6.5 z m0 -16.9 c-2.94265,0 -5.667,0.933 -7.896,2.517 -0.866,0.584 -1.436,1.574 -1.436,2.697 0,1.795 1.455,3.25 3.25,3.25 0.71,0 -1.367,-0.228 1.901,-0.615 l0.00056693 0.001 c1.17581,-0.849 2.619,-1.35 4.18,-1.35 l0 -6.5 z m-15.8508 -4.433 c4.23298,-3.714 9.779,-5.967 15.851,-5.967 l0 6.5 c-4.46514,0 -8.541,1.67 -11.639,4.417 l-0.00141732 -0.002 c-0.573733,0.509 -1.328,0.818 -2.155,0.818 -1.795,0 -3.25,-1.456 -3.25,-3.25 0,-1.015 0.465,-1.921 1.194,-2.517 z m-9.42578 -5.318 c6.29292,-6.794 15.288,-11.049 25.277,-11.049 l0 6.5 c-8.14537,0 -15.477,3.487 -20.586,9.049 l-0.00170079 -0.002 c-0.593859,0.647 -1.446,1.053 -2.394,1.053 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.899 0.365,-1.712 0.954,-2.301 z m-10.6997 -3.376 c8.17711,-10.967 21.247,-18.074 35.976,-18.074 l0 6.5 c-12.6482,0 -23.867,6.128 -30.853,15.575 l-0.00311811 -0.002 c-0.591875,0.801 -1.542,1.32 -2.614,1.32 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.786 0.279,-1.507 0.744,-2.069 z m35.9762 82.026 c-1.79462,0 -3.25,-1.455 -3.25,-3.25 0,-1.795 1.455,-3.25 3.25,-3.25 l0 6.5 z m0 -16.9 c-2.94265,0 -5.667,0.933 -7.896,2.517 -0.866,0.584 -1.436,1.574 -1.436,2.697 0,1.795 1.455,3.25 3.25,3.25 0.71,0 -1.367,-0.228 1.901,-0.615 l0.00056693 0.001 c1.17581,-0.849 2.619,-1.35 4.18,-1.35 l0 -6.5 z m-15.8508 -4.433 c4.23298,-3.714 9.779,-5.967 15.851,-5.967 l0 6.5 c-4.46514,0 -8.541,1.67 -11.639,4.418 l-0.00141732 -0.002 c-0.573733,0.509 -1.328,0.818 -2.155,0.818 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-1.015 0.465,-1.921 1.194,-2.517 z m-9.42578 -5.318 c6.29292,-6.794 15.288,-11.049 25.277,-11.049 l0 6.5 c-8.14537,0 -15.477,3.487 -20.586,9.049 l-0.00170079 -0.002 c-0.593859,0.647 -1.446,1.053 -2.394,1.053 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.899 0.365,-1.712 0.954,-2.301 z m-10.6997 -3.375 c8.17711,-10.968 21.247,-18.074 35.976,-18.074 l0 6.5 c-12.6482,0 -23.867,6.128 -30.853,15.575 l-0.00311811 -0.002 c-0.591875,0.801 -1.542,1.32 -2.614,1.32 -1.795,0 -3.25,-1.455 -3.25,-3.25 0,-0.786 0.279,-1.507 0.744,-2.069 z m-55.0237 -125.974 c-1.7949,0 -3.25,-1.455 -3.25,-3.25 l6.49985 0 c0,1.795 -1.455,3.25 -3.25,3.25 z" style="fill: rgb(220, 134, 195); fill-opacity: 1; stroke-opacity: 0;"></path></g></pattern></defs><rect width="100%" height="100%" fill="url(#a)" stroke-width=""></rect></svg>
\ No newline at end of file
diff --git a/css/theme.css b/css/theme.css
index 860f088..e33e82d 100644
--- a/css/theme.css
+++ b/css/theme.css
@@ -1 +1,253 @@
-@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";html{--theme-light-background: #979898;--theme-dark-background: #272829;--theme-light-secondary-background: #adaeae;--theme-dark-secondary-background: #515253;--theme-light-background-3: #a2a3a3;--theme-dark-background-3: #3b3c3d;--theme-light-text: black;--theme-dark-text: white;--theme-light-secondary-text: #d0d0d0;--theme-dark-secondary-text: #979898;--theme-light-brand: #f0bf6c;--theme-dark-brand: #f0bf6c;--theme-light-brand-text: #f0bf6c;--theme-dark-brand-text: #f0bf6c;height:100%}body{font-family:"Josefin Sans",sans-serif}.light body{background:#adaeae;background:var(--theme-light-secondary-background, #adaeae)}.dark body{background:#515253;background:var(--theme-dark-secondary-background, #515253)}.light body{color:black;color:var(--theme-light-text, black)}.dark body{color:white;color:var(--theme-dark-text, white)}.light a{color:black;color:var(--theme-light-text, black)}.dark a{color:white;color:var(--theme-dark-text, white)}.light .container{background-color:#979898;background-color:var(--theme-light-background, #979898)}.dark .container{background-color:#272829;background-color:var(--theme-dark-background, #272829)}input[type=text]{border:none;box-shadow:none;border-radius:7px;width:200px;height:40px;padding:10px 20px}.light input[type=text]{background:#a2a3a3;background:var(--theme-light-background-3, #a2a3a3)}.dark input[type=text]{background:#3b3c3d;background:var(--theme-dark-background-3, #3b3c3d)}.light input[type=text]{color:black;color:var(--theme-light-text, black)}.dark input[type=text]{color:white;color:var(--theme-dark-text, white)}input[type=text]:hover,input[type=text]:focus{outline:none}.light .highlight{color:#f0bf6c;color:var(--theme-light-brand-text, #f0bf6c)}.dark .highlight{color:#f0bf6c;color:var(--theme-dark-brand-text, #f0bf6c)}.light .highlight.btn{border:1px solid #f0bf6c !important;border:1px solid var(--theme-light-brand-text, #f0bf6c) !important}.dark .highlight.btn{border:1px solid #f0bf6c !important;border:1px solid var(--theme-dark-brand-text, #f0bf6c) !important}.highlight.btn:hover{transform:scale(0.95)}.light .highlight.btn:hover{background:#f0bf6c !important;background:var(--theme-light-brand-text, #f0bf6c) !important}.dark .highlight.btn:hover{background:#f0bf6c !important;background:var(--theme-dark-brand-text, #f0bf6c) !important}.light .highlight.btn:hover{color:black;color:var(--theme-light-text, black)}.dark .highlight.btn:hover{color:white;color:var(--theme-dark-text, white)}.highlight.btn:active{opacity:.8;transform:scale(0.9)}/*# sourceMappingURL=theme.css.map */
\ No newline at end of file
+/*
+  @mixin theme($property, $key, $inlineExtra:null, $postExtra:null)
+  Assigns a property a theme value for each defined theme.
+
+  Example usage:
+    .mySelector {
+      padding: 6px;
+      @include theme(background-color, backgroundLight);
+      @include theme(border, borderDark, 1px solid);
+    }
+
+  sass generated equivalent:
+    .mySelector {
+      padding: 6px;
+
+      :global(.light) & {
+        border: 1px solid color(woodsmoke);
+        border: 1px solid var(--theme-light-borderDark, color(woodsmoke));
+      }
+      :global(.light) & {
+        background-color: color(alabaster);
+        background-color: var(--theme-light-backgroundLight, color(alabaster));
+      }
+
+      :global(.dark) & {
+        border: 1px solid color(alabaster);
+        border: 1px solid var(--theme-dark-borderDark, color(alabaster));
+      }
+      :global(.dark) & {
+        background-color: color(woodsmoke);
+        background-color: var(--theme-dark-backgroundLight, color(woodsmoke));
+      }
+    }
+
+  browser output:
+    .mySelector {
+      padding: 6px;
+    }
+    .light .mySelector {
+      border: 1px solid #141519;
+      border: 1px solid var(--theme-light-borderDark, #141519);
+    }
+    .light .mySelector {
+      background-color: #FCFCFC;
+      background-color: var(--theme-light-backgroundLight, #FCFCFC);
+    }
+
+    .dark .mySelector {
+      border: 1px solid #FCFCFC;
+      border: 1px solid var(--theme-dark-borderDark, #FCFCFC);
+    }
+    .dark .mySelector {
+      background-color: #141519;
+      background-color: var(--theme-dark-backgroundLight, #141519);
+    }
+*/
+/*
+  @mixin generateThemeMappings(themeName: string, themeMap: map)
+  helper function for generating list of theme variables and adding to existing map.
+  This will add a new theme to the themes array and the theme color list.
+*/
+/*
+  @mixin generateThemeVariables
+  Auto-generates the entire list of theme variables for use in var() statements.
+  Really should only be called in the html selector at the app root.
+*/
+/** this section generates a theme map for each theme **/
+/** end theme generation **/
+@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");
+html {
+  --theme-light-background: #ece6df;
+  --theme-dark-background: #0d1117;
+  --theme-light-secondary-background: #e2d7cf;
+  --theme-dark-secondary-background: #21262d;
+  --theme-light-background-3: #f2ece6;
+  --theme-dark-background-3: #161b22;
+  --theme-light-text: #1f2322;
+  --theme-dark-text: #f0f6fc;
+  --theme-light-secondary-text: #5f5a55;
+  --theme-dark-secondary-text: #8b949e;
+  --theme-light-brand: #ff6b35;
+  --theme-dark-brand: #ff6b35;
+  --theme-light-brand-text: #ff6b35;
+  --theme-dark-brand-text: #ff6b35;
+  --theme-light-background-pattern: url("/assests/images/background-pattern.svg");
+  --theme-dark-background-pattern: url("/assests/images/background-pattern.svg");
+  --theme-light-background-pattern-opacity: 0.08;
+  --theme-dark-background-pattern-opacity: 0.15;
+  height: 100%;
+}
+
+.light body {
+  background: #e2d7cf;
+  background: var(--theme-light-secondary-background, #e2d7cf);
+}
+
+.dark body {
+  background: #21262d;
+  background: var(--theme-dark-secondary-background, #21262d);
+}
+
+.light body {
+  color: #1f2322;
+  color: var(--theme-light-text, #1f2322);
+}
+
+.dark body {
+  color: #f0f6fc;
+  color: var(--theme-dark-text, #f0f6fc);
+}
+
+body {
+  font-family: "Josefin Sans", sans-serif;
+  position: relative;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-repeat: repeat;
+  background-size: 512px 512px;
+  background-position: center;
+}
+.light body::before {
+  background-image: url("/assests/images/background-pattern.svg");
+  background-image: var(--theme-light-background-pattern, url("/assests/images/background-pattern.svg"));
+}
+
+.dark body::before {
+  background-image: url("/assests/images/background-pattern.svg");
+  background-image: var(--theme-dark-background-pattern, url("/assests/images/background-pattern.svg"));
+}
+
+.light body::before {
+  opacity: 0.08;
+  opacity: var(--theme-light-background-pattern-opacity, 0.08);
+}
+
+.dark body::before {
+  opacity: 0.15;
+  opacity: var(--theme-dark-background-pattern-opacity, 0.15);
+}
+
+body::before {
+  mix-blend-mode: overlay;
+}
+
+.light a {
+  color: #1f2322;
+  color: var(--theme-light-text, #1f2322);
+}
+
+.dark a {
+  color: #f0f6fc;
+  color: var(--theme-dark-text, #f0f6fc);
+}
+
+.light .container {
+  background-color: #ece6df;
+  background-color: var(--theme-light-background, #ece6df);
+}
+
+.dark .container {
+  background-color: #0d1117;
+  background-color: var(--theme-dark-background, #0d1117);
+}
+
+.light input[type=text] {
+  background: #f2ece6;
+  background: var(--theme-light-background-3, #f2ece6);
+}
+
+.dark input[type=text] {
+  background: #161b22;
+  background: var(--theme-dark-background-3, #161b22);
+}
+
+.light input[type=text] {
+  color: #1f2322;
+  color: var(--theme-light-text, #1f2322);
+}
+
+.dark input[type=text] {
+  color: #f0f6fc;
+  color: var(--theme-dark-text, #f0f6fc);
+}
+
+input[type=text] {
+  border: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  border-radius: 7px;
+  width: 200px;
+  height: 40px;
+  padding: 10px 20px;
+}
+input[type=text]:hover, input[type=text]:focus {
+  outline: none;
+}
+
+.light .highlight {
+  color: #ff6b35;
+  color: var(--theme-light-brand-text, #ff6b35);
+}
+
+.dark .highlight {
+  color: #ff6b35;
+  color: var(--theme-dark-brand-text, #ff6b35);
+}
+
+.light .highlight.btn {
+  border: 1px solid #ff6b35 !important;
+  border: 1px solid var(--theme-light-brand-text, #ff6b35) !important;
+}
+
+.dark .highlight.btn {
+  border: 1px solid #ff6b35 !important;
+  border: 1px solid var(--theme-dark-brand-text, #ff6b35) !important;
+}
+
+.light .highlight.btn:hover {
+  background: #ff6b35 !important;
+  background: var(--theme-light-brand-text, #ff6b35) !important;
+}
+
+.dark .highlight.btn:hover {
+  background: #ff6b35 !important;
+  background: var(--theme-dark-brand-text, #ff6b35) !important;
+}
+
+.light .highlight.btn:hover {
+  color: #1f2322;
+  color: var(--theme-light-text, #1f2322);
+}
+
+.dark .highlight.btn:hover {
+  color: #f0f6fc;
+  color: var(--theme-dark-text, #f0f6fc);
+}
+
+.highlight.btn:hover {
+  transform: scale(0.95);
+}
+.highlight.btn:active {
+  opacity: 0.8;
+  transform: scale(0.9);
+}
+
+/*# sourceMappingURL=theme.css.map */
diff --git a/css/theme.css.map b/css/theme.css.map
index 78f3523..3b4eff7 100644
--- a/css/theme.css.map
+++ b/css/theme.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../scss/theme.scss","../scss/theming/mixins.scss"],"names":[],"mappings":"AACQ,2GAAA,CAER,KCkIQ,iCAAA,CAAA,gCAAA,CAAA,2CAAA,CAAA,0CAAA,CAAA,mCAAA,CAAA,kCAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,qCAAA,CAAA,oCAAA,CAAA,4BAAA,CAAA,2BAAA,CAAA,iCAAA,CAAA,gCAAA,CDhIJ,WAAA,CAGJ,KAGI,qCAAA,CC0Da,YACP,kBAAA,CACA,2DAAA,CAFO,WACP,kBAAA,CACA,0DAAA,CAFO,YACP,WAAA,CACA,oCAAA,CAFO,WACP,WAAA,CACA,mCAAA,CAFO,SACP,WAAA,CACA,oCAAA,CAFO,QACP,WAAA,CACA,mCAAA,CAFO,kBACP,wBAAA,CACA,uDAAA,CAFO,iBACP,wBAAA,CACA,sDAAA,CDjDV,iBAGI,WAAA,CAGA,eAAA,CACA,iBAAA,CACA,WAAA,CACA,WAAA,CACA,iBAAA,CCqCa,wBACP,kBAAA,CACA,mDAAA,CAFO,uBACP,kBAAA,CACA,kDAAA,CAFO,wBACP,WAAA,CACA,oCAAA,CAFO,uBACP,WAAA,CACA,mCAAA,CDtCN,8CAEI,YAAA,CCkCS,kBACP,aAAA,CACA,4CAAA,CAFO,iBACP,aAAA,CACA,2CAAA,CAFO,sBACP,mCAAA,CACA,kEAAA,CAFO,qBACP,mCAAA,CACA,iEAAA,CDzBN,qBAGI,qBAAA,CCoBS,4BACP,6BAAA,CACA,4DAAA,CAFO,2BACP,6BAAA,CACA,2DAAA,CAFO,4BACP,WAAA,CACA,oCAAA,CAFO,2BACP,WAAA,CACA,mCAAA,CDnBN,sBACI,UAAA,CACA,oBAAA","file":"theme.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/theming/mixins.scss","../scss/colors.scss","../scss/theme.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EA;AAAA;AAAA;AAAA;AAAA;AA2CA;AAAA;AAAA;AAAA;AAAA;AC1HA;AASA;ACVQ;AAER;EFkIQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EEhIJ;;;AFgEa;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AE/DV;EAGI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF8Ca;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AExDV;EAWI;;;AF2Ca;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AElCV;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEI;;;AFmBS;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEVN;EAGI;;AAGJ;EACI;EACA","file":"theme.css"}
\ No newline at end of file
diff --git a/css/ui.css b/css/ui.css
index 3421c22..8c89d8d 100644
--- a/css/ui.css
+++ b/css/ui.css
@@ -1 +1,579 @@
-a{text-decoration:none}*{transition:all .5s}body{min-height:100%}body>.container{padding:0}.light body>.container{box-shadow:0 0 20px -10px rgba(240, 191, 108, 0.5)}.dark body>.container{box-shadow:0 0 20px -10px rgba(240, 191, 108, 0.5)}body>.container>header{margin:0 80px !important}body>.container>footer{padding-left:80px !important;padding-right:80px !important}body>.container>.main>*{padding:0 80px}header{display:grid;align-items:center;padding:30px 0;height:110px}header>.nav{justify-self:center}header>.nav *{padding:0 10px;text-decoration:none;line-height:1.5}.light header>.nav *{color:#d0d0d0 !important;color:var(--theme-light-secondary-text, #d0d0d0) !important}.dark header>.nav *{color:#979898 !important;color:var(--theme-dark-secondary-text, #979898) !important}header>.nav *:hover,header>.nav *.active{cursor:pointer}.light header>.nav *:hover,header>.nav *.active{color:#f0bf6c !important;color:var(--theme-light-brand-text, #f0bf6c) !important}.dark header>.nav *:hover,header>.nav *.active{color:#f0bf6c !important;color:var(--theme-dark-brand-text, #f0bf6c) !important}header>.search{justify-self:end;position:relative}header>.search input{padding:10px 40px 10px 20px}header>.search input:focus{width:300px}header>.search svg{position:absolute;height:15px;width:15px;padding:12.5px;right:0;opacity:.5;border-radius:7px}header>.search:focus-within>svg{opacity:1;cursor:pointer}.light header>.search:focus-within>svg{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark header>.search:focus-within>svg{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}div.main .banner{margin-right:80px;height:calc(100vh - 110px);display:grid;grid-template-columns:minmax(auto, 50%) 1fr;align-items:center;position:relative}div.main .banner img{height:inherit;width:auto;filter:grayscale(100%);opacity:.7;margin:-80px}div.main .banner .social{position:absolute;right:0;bottom:50px;display:flex;flex-flow:column;align-items:center}div.main .banner .social *{margin:10px}.light div.main .banner .social *{color:#f0bf6c;color:var(--theme-light-brand-text, #f0bf6c)}.dark div.main .banner .social *{color:#f0bf6c;color:var(--theme-dark-brand-text, #f0bf6c)}div.main .banner .social .line{display:block;height:100px;width:3px}.light div.main .banner .social .line{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark div.main .banner .social .line{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}div.main .banner .social svg{width:20px;height:auto}div.main .banner .social svg:hover{cursor:pointer;transform:scale(1.2)}.hr-line{display:block;width:50px;height:3px}.light .hr-line{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark .hr-line{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}.light .topic h1{text-shadow:0 0 20px rgba(240, 191, 108, 0.3)}.dark .topic h1{text-shadow:0 0 20px rgba(240, 191, 108, 0.3)}.topic.about>div{display:grid;grid-auto-flow:column;grid-template-columns:1fr auto;-moz-column-gap:1em;column-gap:1em;font-size:20px;font-weight:200}.topic.skills{display:flex;flex-direction:column}.topic.skills div.filter{text-align:right}.topic.skills div.items{display:flex;flex-wrap:wrap;justify-content:center}.topic.skills div.items>div{margin:40px;cursor:pointer;display:grid;grid-auto-flow:row;align-content:space-evenly;justify-content:center;justify-items:center;text-align:center;align-self:center;width:200px;height:200px;border-radius:10px;box-sizing:border-box;transition:all .2s}.light .topic.skills div.items>div{background:#adaeae;background:var(--theme-light-secondary-background, #adaeae)}.dark .topic.skills div.items>div{background:#515253;background:var(--theme-dark-secondary-background, #515253)}.light .topic.skills div.items>div:hover{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark .topic.skills div.items>div:hover{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}.light .topic.skills div.items>div:hover{box-shadow:0 0 10px 1px #f0bf6c;box-shadow:0 0 10px 1px var(--theme-light-brand, #f0bf6c)}.dark .topic.skills div.items>div:hover{box-shadow:0 0 10px 1px #f0bf6c;box-shadow:0 0 10px 1px var(--theme-dark-brand, #f0bf6c)}.topic.skills div.items>div.hide{scale:0;opacity:0;visibility:hidden;height:0;width:0;padding:0;margin:0}.topic.experience{margin:0 !important;padding:0 80px !important}.light .topic.experience{background:#adaeae;background:var(--theme-light-secondary-background, #adaeae)}.dark .topic.experience{background:#515253;background:var(--theme-dark-secondary-background, #515253)}.topic.experience>h1{margin:50px 0;position:relative;top:-25px}.topic.experience>div.items{display:grid;grid-auto-flow:row;-moz-column-gap:1em;column-gap:1em;font-size:20px;font-weight:200;margin:0 200px}.topic.experience>div.items>div{padding-left:50px;position:relative;margin:25px 0}.light .topic.experience>div.items>div{border-left:3px solid rgba(0, 0, 0, 0.75)}.dark .topic.experience>div.items>div{border-left:3px solid rgba(255, 255, 255, 0.75)}.topic.experience>div.items>div::before{content:"";position:absolute;width:15px;height:15px;margin:5px;border-radius:50%;left:-14px;z-index:1}.light .topic.experience>div.items>div::before{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark .topic.experience>div.items>div::before{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}.light .topic.experience>div.items>div::before{box-shadow:0 0 5px 5px #f0bf6c;box-shadow:0 0 5px 5px var(--theme-light-brand, #f0bf6c)}.dark .topic.experience>div.items>div::before{box-shadow:0 0 5px 5px #f0bf6c;box-shadow:0 0 5px 5px var(--theme-dark-brand, #f0bf6c)}.topic.experience>div.items>div::after{content:"";position:absolute;width:56px;height:56px;left:-29.5px;top:-2.5px}.light .topic.experience>div.items>div::after{background:#adaeae;background:var(--theme-light-secondary-background, #adaeae)}.dark .topic.experience>div.items>div::after{background:#515253;background:var(--theme-dark-secondary-background, #515253)}.topic.experience>div.items>div>span{align-content:center;text-align:center;font-style:italic}.light .topic.experience>div.items>div>span{color:#f0bf6c;color:var(--theme-light-brand-text, #f0bf6c)}.dark .topic.experience>div.items>div>span{color:#f0bf6c;color:var(--theme-dark-brand-text, #f0bf6c)}.topic.experience>div.items>div>span::before{content:"("}.topic.experience>div.items>div>span::after{content:")"}.topic.contact{padding-left:0 !important;padding-right:0 !important}.topic.contact>.top-title,.topic.contact>.bottom-title{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.topic.contact>.top-title>:first-child,.topic.contact>.top-title>:last-child,.topic.contact>.bottom-title>:first-child,.topic.contact>.bottom-title>:last-child{height:3px}.light .topic.contact>.top-title>:first-child,.topic.contact>.top-title>:last-child,.topic.contact>.bottom-title>:first-child,.topic.contact>.bottom-title>:last-child{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark .topic.contact>.top-title>:first-child,.topic.contact>.top-title>:last-child,.topic.contact>.bottom-title>:first-child,.topic.contact>.bottom-title>:last-child{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}.topic.contact>.top-title>h1,.topic.contact>.bottom-title>h1{padding:0 20px}.topic.contact>.top-title{top:-28px;position:relative;z-index:0}.topic.contact>.bottom-title{bottom:-15px;position:relative;z-index:0}.topic.contact>.bottom-title>div>a:hover{scale:.9}.light .topic.contact>.bottom-title>div>a:hover{color:#f0bf6c;color:var(--theme-light-brand, #f0bf6c)}.dark .topic.contact>.bottom-title>div>a:hover{color:#f0bf6c;color:var(--theme-dark-brand, #f0bf6c)}.topic.contact>.items{display:flex;flex-wrap:wrap;justify-content:center;-moz-column-gap:10px;column-gap:10px;row-gap:10px;padding:0 450px}.topic.contact>.items>*{padding:10px;border-radius:4px}.light .topic.contact>.items>*{background:#adaeae;background:var(--theme-light-secondary-background, #adaeae)}.dark .topic.contact>.items>*{background:#515253;background:var(--theme-dark-secondary-background, #515253)}.light .topic.contact>.items>*{color:#f0bf6c;color:var(--theme-light-brand, #f0bf6c)}.dark .topic.contact>.items>*{color:#f0bf6c;color:var(--theme-dark-brand, #f0bf6c)}.topic.contact>.items>*:hover{scale:.9}.light .topic.contact>.items>*:hover{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark .topic.contact>.items>*:hover{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}.light .topic.contact>.items>*:hover{color:black;color:var(--theme-light-text, black)}.dark .topic.contact>.items>*:hover{color:white;color:var(--theme-dark-text, white)}footer{margin:0 !important}.light footer{background:#adaeae;background:var(--theme-light-secondary-background, #adaeae)}.dark footer{background:#515253;background:var(--theme-dark-secondary-background, #515253)}/*# sourceMappingURL=ui.css.map */
\ No newline at end of file
+/*
+  @mixin theme($property, $key, $inlineExtra:null, $postExtra:null)
+  Assigns a property a theme value for each defined theme.
+
+  Example usage:
+    .mySelector {
+      padding: 6px;
+      @include theme(background-color, backgroundLight);
+      @include theme(border, borderDark, 1px solid);
+    }
+
+  sass generated equivalent:
+    .mySelector {
+      padding: 6px;
+
+      :global(.light) & {
+        border: 1px solid color(woodsmoke);
+        border: 1px solid var(--theme-light-borderDark, color(woodsmoke));
+      }
+      :global(.light) & {
+        background-color: color(alabaster);
+        background-color: var(--theme-light-backgroundLight, color(alabaster));
+      }
+
+      :global(.dark) & {
+        border: 1px solid color(alabaster);
+        border: 1px solid var(--theme-dark-borderDark, color(alabaster));
+      }
+      :global(.dark) & {
+        background-color: color(woodsmoke);
+        background-color: var(--theme-dark-backgroundLight, color(woodsmoke));
+      }
+    }
+
+  browser output:
+    .mySelector {
+      padding: 6px;
+    }
+    .light .mySelector {
+      border: 1px solid #141519;
+      border: 1px solid var(--theme-light-borderDark, #141519);
+    }
+    .light .mySelector {
+      background-color: #FCFCFC;
+      background-color: var(--theme-light-backgroundLight, #FCFCFC);
+    }
+
+    .dark .mySelector {
+      border: 1px solid #FCFCFC;
+      border: 1px solid var(--theme-dark-borderDark, #FCFCFC);
+    }
+    .dark .mySelector {
+      background-color: #141519;
+      background-color: var(--theme-dark-backgroundLight, #141519);
+    }
+*/
+/*
+  @mixin generateThemeMappings(themeName: string, themeMap: map)
+  helper function for generating list of theme variables and adding to existing map.
+  This will add a new theme to the themes array and the theme color list.
+*/
+/*
+  @mixin generateThemeVariables
+  Auto-generates the entire list of theme variables for use in var() statements.
+  Really should only be called in the html selector at the app root.
+*/
+/** this section generates a theme map for each theme **/
+/** end theme generation **/
+a {
+  text-decoration: none;
+}
+
+* {
+  transition: all 0.5s;
+}
+
+body {
+  min-height: 100%;
+}
+
+.light body > .container {
+  box-shadow: 0 0 20px -10px rgba(255, 107, 53, 0.5);
+}
+
+.dark body > .container {
+  box-shadow: 0 0 20px -10px rgba(255, 107, 53, 0.5);
+}
+
+body > .container {
+  position: relative;
+  z-index: 1;
+  padding: 0;
+}
+body > .container > header {
+  margin: 0 80px !important;
+}
+body > .container > footer {
+  padding-left: 80px !important;
+  padding-right: 80px !important;
+}
+body > .container > .main > * {
+  padding: 0 80px;
+}
+
+header {
+  display: grid;
+  align-items: center;
+  padding: 30px 0;
+  height: 110px;
+}
+header > .nav {
+  justify-self: center;
+}
+header > .nav * {
+  padding: 0 10px;
+}
+.light header > .nav * {
+  color: #5f5a55 !important;
+  color: var(--theme-light-secondary-text, #5f5a55) !important;
+}
+
+.dark header > .nav * {
+  color: #8b949e !important;
+  color: var(--theme-dark-secondary-text, #8b949e) !important;
+}
+
+header > .nav * {
+  text-decoration: none;
+  line-height: 1.5;
+}
+.light header > .nav *:hover, header > .nav *.active {
+  color: #ff6b35 !important;
+  color: var(--theme-light-brand-text, #ff6b35) !important;
+}
+
+.dark header > .nav *:hover, header > .nav *.active {
+  color: #ff6b35 !important;
+  color: var(--theme-dark-brand-text, #ff6b35) !important;
+}
+
+header > .nav *:hover, header > .nav *.active {
+  cursor: pointer;
+}
+header > .search {
+  justify-self: end;
+  position: relative;
+}
+header > .search input {
+  padding: 10px 40px 10px 20px;
+}
+header > .search input:focus {
+  width: 300px;
+}
+header > .search svg {
+  position: absolute;
+  height: 15px;
+  width: 15px;
+  padding: 12.5px;
+  right: 0;
+  opacity: 0.5;
+  border-radius: 7px;
+}
+header > .search:focus-within > svg {
+  opacity: 1;
+}
+.light header > .search:focus-within > svg {
+  background: #ff6b35;
+  background: var(--theme-light-brand, #ff6b35);
+}
+
+.dark header > .search:focus-within > svg {
+  background: #ff6b35;
+  background: var(--theme-dark-brand, #ff6b35);
+}
+
+header > .search:focus-within > svg {
+  cursor: pointer;
+}
+
+div.main .banner {
+  margin-right: 80px;
+  height: calc(100vh - 110px);
+  display: grid;
+  grid-template-columns: minmax(auto, 50%) 1fr;
+  align-items: center;
+}
+div.main .banner img {
+  height: inherit;
+  width: auto;
+  filter: grayscale(100%);
+  opacity: 0.7;
+  margin: -80px;
+}
+div.main .banner {
+  position: relative;
+}
+div.main .banner .social {
+  position: absolute;
+  right: 0;
+  bottom: 50px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+div.main .banner .social * {
+  margin: 10px;
+}
+.light div.main .banner .social * {
+  color: #ff6b35;
+  color: var(--theme-light-brand-text, #ff6b35);
+}
+
+.dark div.main .banner .social * {
+  color: #ff6b35;
+  color: var(--theme-dark-brand-text, #ff6b35);
+}
+
+div.main .banner .social .line {
+  display: block;
+  height: 100px;
+  width: 3px;
+}
+.light div.main .banner .social .line {
+  background: #ff6b35;
+  background: var(--theme-light-brand, #ff6b35);
+}
+
+.dark div.main .banner .social .line {
+  background: #ff6b35;
+  background: var(--theme-dark-brand, #ff6b35);
+}
+
+div.main .banner .social svg {
+  width: 20px;
+  height: auto;
+}
+div.main .banner .social svg:hover {
+  cursor: pointer;
+  transform: scale(1.2);
+}
+
+.hr-line {
+  display: block;
+  width: 50px;
+  height: 3px;
+}
+.light .hr-line {
+  background: #ff6b35;
+  background: var(--theme-light-brand, #ff6b35);
+}
+
+.dark .hr-line {
+  background: #ff6b35;
+  background: var(--theme-dark-brand, #ff6b35);
+}
+
+.light .topic h1 {
+  text-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
+}
+
+.dark .topic h1 {
+  text-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
+}
+
+.topic.about > div {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr auto;
+  column-gap: 1em;
+  font-size: 20px;
+  font-weight: 200;
+}
+.topic.skills {
+  display: flex;
+  flex-direction: column;
+}
+.topic.skills div.filter {
+  text-align: right;
+}
+.topic.skills div.items {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.topic.skills div.items > div {
+  margin: 40px;
+  cursor: pointer;
+  display: grid;
+  grid-auto-flow: row;
+  align-content: space-evenly;
+  justify-content: center;
+  justify-items: center;
+  text-align: center;
+  align-self: center;
+}
+.light .topic.skills div.items > div {
+  background: #e2d7cf;
+  background: var(--theme-light-secondary-background, #e2d7cf);
+}
+
+.dark .topic.skills div.items > div {
+  background: #21262d;
+  background: var(--theme-dark-secondary-background, #21262d);
+}
+
+.topic.skills div.items > div {
+  width: 200px;
+  height: 200px;
+  border-radius: 10px;
+  box-sizing: border-box;
+}
+.light .topic.skills div.items > div:hover {
+  background: #ff6b35;
+  background: var(--theme-light-brand, #ff6b35);
+}
+
+.dark .topic.skills div.items > div:hover {
+  background: #ff6b35;
+  background: var(--theme-dark-brand, #ff6b35);
+}
+
+.light .topic.skills div.items > div:hover {
+  box-shadow: 0 0 10px 1px #ff6b35;
+  box-shadow: 0 0 10px 1px var(--theme-light-brand, #ff6b35);
+}
+
+.dark .topic.skills div.items > div:hover {
+  box-shadow: 0 0 10px 1px #ff6b35;
+  box-shadow: 0 0 10px 1px var(--theme-dark-brand, #ff6b35);
+}
+
+.topic.skills div.items > div {
+  transition: all 0.2s;
+}
+.topic.skills div.items > div.hide {
+  scale: 0;
+  opacity: 0;
+  visibility: hidden;
+  height: 0;
+  width: 0;
+  padding: 0;
+  margin: 0;
+}
+.topic.experience {
+  margin: 0 !important;
+  padding: 0 80px !important;
+}
+.light .topic.experience {
+  background: #e2d7cf;
+  background: var(--theme-light-secondary-background, #e2d7cf);
+}
+
+.dark .topic.experience {
+  background: #21262d;
+  background: var(--theme-dark-secondary-background, #21262d);
+}
+
+.topic.experience > h1 {
+  margin: 50px 0;
+  position: relative;
+  top: -25px;
+}
+.topic.experience > div.items {
+  display: grid;
+  grid-auto-flow: row;
+  column-gap: 1em;
+  font-size: 20px;
+  font-weight: 200;
+  margin: 0 200px;
+}
+.light .topic.experience > div.items > div {
+  border-left: 3px solid rgba(31, 35, 34, 0.75);
+}
+
+.dark .topic.experience > div.items > div {
+  border-left: 3px solid rgba(240, 246, 252, 0.75);
+}
+
+.topic.experience > div.items > div {
+  padding-left: 50px;
+  position: relative;
+  margin: 25px 0;
+}
+.topic.experience > div.items > div::before {
+  content: "";
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  margin: 5px;
+}
+.light .topic.experience > div.items > div::before {
+  background: #ff6b35;
+  background: var(--theme-light-brand, #ff6b35);
+}
+
+.dark .topic.experience > div.items > div::before {
+  background: #ff6b35;
+  background: var(--theme-dark-brand, #ff6b35);
+}
+
+.light .topic.experience > div.items > div::before {
+  box-shadow: 0 0 5px 5px #ff6b35;
+  box-shadow: 0 0 5px 5px var(--theme-light-brand, #ff6b35);
+}
+
+.dark .topic.experience > div.items > div::before {
+  box-shadow: 0 0 5px 5px #ff6b35;
+  box-shadow: 0 0 5px 5px var(--theme-dark-brand, #ff6b35);
+}
+
+.topic.experience > div.items > div::before {
+  border-radius: 50%;
+  left: -14px;
+  z-index: 1;
+}
+.topic.experience > div.items > div::after {
+  content: "";
+  position: absolute;
+  width: 56px;
+  height: 56px;
+}
+.light .topic.experience > div.items > div::after {
+  background: #e2d7cf;
+  background: var(--theme-light-secondary-background, #e2d7cf);
+}
+
+.dark .topic.experience > div.items > div::after {
+  background: #21262d;
+  background: var(--theme-dark-secondary-background, #21262d);
+}
+
+.topic.experience > div.items > div::after {
+  left: -29.5px;
+  top: -2.5px;
+}
+.topic.experience > div.items > div > span {
+  align-content: center;
+  text-align: center;
+  font-style: italic;
+}
+.light .topic.experience > div.items > div > span {
+  color: #ff6b35;
+  color: var(--theme-light-brand-text, #ff6b35);
+}
+
+.dark .topic.experience > div.items > div > span {
+  color: #ff6b35;
+  color: var(--theme-dark-brand-text, #ff6b35);
+}
+
+.topic.experience > div.items > div > span::before {
+  content: "(";
+}
+.topic.experience > div.items > div > span::after {
+  content: ")";
+}
+.topic.contact {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+.topic.contact > .top-title,
+.topic.contact > .bottom-title {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+}
+.light .topic.contact > .top-title > :first-child, .topic.contact > .top-title > :last-child, .topic.contact > .bottom-title > :first-child, .topic.contact > .bottom-title > :last-child {
+  background: #ff6b35;
+  background: var(--theme-light-brand, #ff6b35);
+}
+
+.dark .topic.contact > .top-title > :first-child, .topic.contact > .top-title > :last-child, .topic.contact > .bottom-title > :first-child, .topic.contact > .bottom-title > :last-child {
+  background: #ff6b35;
+  background: var(--theme-dark-brand, #ff6b35);
+}
+
+.topic.contact > .top-title > :first-child,
+.topic.contact > .top-title > :last-child,
+.topic.contact > .bottom-title > :first-child,
+.topic.contact > .bottom-title > :last-child {
+  height: 3px;
+}
+.topic.contact > .top-title > h1,
+.topic.contact > .bottom-title > h1 {
+  padding: 0 20px;
+}
+.topic.contact > .top-title {
+  top: -28px;
+  position: relative;
+  z-index: 0;
+}
+.topic.contact > .bottom-title {
+  bottom: -15px;
+  position: relative;
+  z-index: 0;
+}
+.light .topic.contact > .bottom-title > div > a:hover {
+  color: #ff6b35;
+  color: var(--theme-light-brand, #ff6b35);
+}
+
+.dark .topic.contact > .bottom-title > div > a:hover {
+  color: #ff6b35;
+  color: var(--theme-dark-brand, #ff6b35);
+}
+
+.topic.contact > .bottom-title > div > a:hover {
+  scale: 0.9;
+}
+.topic.contact > .items {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  column-gap: 10px;
+  row-gap: 10px;
+  padding: 0 450px;
+}
+.topic.contact > .items > * {
+  padding: 10px;
+  border-radius: 4px;
+}
+.light .topic.contact > .items > * {
+  background: #e2d7cf;
+  background: var(--theme-light-secondary-background, #e2d7cf);
+}
+
+.dark .topic.contact > .items > * {
+  background: #21262d;
+  background: var(--theme-dark-secondary-background, #21262d);
+}
+
+.light .topic.contact > .items > * {
+  color: #ff6b35;
+  color: var(--theme-light-brand, #ff6b35);
+}
+
+.dark .topic.contact > .items > * {
+  color: #ff6b35;
+  color: var(--theme-dark-brand, #ff6b35);
+}
+
+.light .topic.contact > .items > *:hover {
+  background: #ff6b35;
+  background: var(--theme-light-brand, #ff6b35);
+}
+
+.dark .topic.contact > .items > *:hover {
+  background: #ff6b35;
+  background: var(--theme-dark-brand, #ff6b35);
+}
+
+.light .topic.contact > .items > *:hover {
+  color: #1f2322;
+  color: var(--theme-light-text, #1f2322);
+}
+
+.dark .topic.contact > .items > *:hover {
+  color: #f0f6fc;
+  color: var(--theme-dark-text, #f0f6fc);
+}
+
+.topic.contact > .items > *:hover {
+  scale: 0.9;
+}
+
+footer {
+  margin: 0 !important;
+}
+.light footer {
+  background: #e2d7cf;
+  background: var(--theme-light-secondary-background, #e2d7cf);
+}
+
+.dark footer {
+  background: #21262d;
+  background: var(--theme-dark-secondary-background, #21262d);
+}
+
+/*# sourceMappingURL=ui.css.map */
diff --git a/css/ui.css.map b/css/ui.css.map
index b21f0d9..97c0d9e 100644
--- a/css/ui.css.map
+++ b/css/ui.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../scss/ui.scss","../scss/theming/mixins.scss"],"names":[],"mappings":"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","file":"ui.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/theming/mixins.scss","../scss/colors.scss","../scss/ui.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EA;AAAA;AAAA;AAAA;AAAA;AA2CA;AAAA;AAAA;AAAA;AAAA;AC1HA;AASA;ACTA;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AFsDa;EACP;;;AADO;EACP;;;AElDV;EAEI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;;AAIR;EACI;EAEA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AFwBK;EACP;EACA;;;AAFO;EACP;EACA;;;AE3BF;EAGI;EACA;;AFqBK;EACP;EACA;;;AAFO;EACP;EACA;;;AEtBE;EAGI;;AAIZ;EACI;EACA;;AACA;EACI;;AACA;EACI;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AFPK;EACP;EACA;;;AAFO;EACP;EACA;;;AEIF;EAGI;;;AAMR;EACI,cAvEuB;EAyEvB;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAZR;EAcI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AFtCC;EACP;EACA;;;AAFO;EACP;EACA;;;AEuCE;EACI;EACA;EACA;;AF5CC;EACP;EACA;;;AAFO;EACP;EACA;;;AE6CE;EACI;EACA;;AAEA;EACI;EACA;;;AAOpB;EACI;EACA;EACA;;AF/Da;EACP;EACA;;;AAFO;EACP;EACA;;;AANO;EACP;;;AADO;EACP;;;AE2EN;EACI;EACA;EACA;EACA;EACA;EACA;;AAMJ;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AF3GC;EACP;EACA;;;AAFO;EACP;EACA;;;AE+FE;EAcI;EACA;EACA;EACA;;AFlHC;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AE+FE;EAwBI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AF1IS;EACP;EACA;;;AAFO;EACP;EACA;;;AE0IF;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;;AF7JK;EACP;;;AADO;EACP;;;AE8JE;EAGI;EACA;EAEA;;AASA;EACI;EACA;EACA,OATG;EAUH,QAVG;EAWH;;AF/KH;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEwKM;EAQI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AF3LH;EACP;EACA;;;AAFO;EACP;EACA;;;AEqLM;EAOI;EACA;;AAGJ;EAGI;EACA;EACA;;AFvMH;EACP;EACA;;;AAFO;EACP;EACA;;;AE6MU;EACI;;AAEJ;EACI;;AAqBpB;EACI;EACA;;AAGA;AAAA;EAEI;EACA;EACA;;AFjPK;EACP;EACA;;;AAFO;EACP;EACA;;;AEiPE;AAAA;AAAA;AAAA;EAGI;;AAGJ;AAAA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AFvQK;EACP;EACA;;;AAFO;EACP;EACA;;;AEsQE;EAEI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AFxRC;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AE0RM;EAGI;;;AAOpB;EACI;;AFvSa;EACP;EACA;;;AAFO;EACP;EACA","file":"ui.css"}
\ No newline at end of file
diff --git a/js/skills.json b/js/skills.json
index a12e2af..9bb4c4e 100644
--- a/js/skills.json
+++ b/js/skills.json
@@ -56,7 +56,7 @@
   },
   {
     "label": "Quarkus (Java & Kotlin)",
-    "svg-url": "https://quarkus.io/assets/images/brand/quarkus_icon_default.svg",
+    "svg-url": "https://raw.githubusercontent.com/commonhaus/artwork/refs/heads/main/projects/quarkus/icon/quarkus_icon_default.svg",
     "tag": ["framework-library"]
   },
   {
diff --git a/scss/theme.scss b/scss/theme.scss
index 94a3f9d..e1a9f72 100644
--- a/scss/theme.scss
+++ b/scss/theme.scss
@@ -10,6 +10,21 @@ body {
     @include theme(background, secondary-background);
     @include theme(color, text);
     font-family: "Josefin Sans", sans-serif;
+    position: relative;
+}
+
+body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background-repeat: repeat;
+    background-size: 512px 512px;
+    background-position: center;
+    @include theme(background-image, background-pattern);
+    @include theme(opacity, background-pattern-opacity);
+    mix-blend-mode: overlay;
 }
 
 a {
diff --git a/scss/theming/colorDefinitions.scss b/scss/theming/colorDefinitions.scss
index da21281..25839ac 100644
--- a/scss/theming/colorDefinitions.scss
+++ b/scss/theming/colorDefinitions.scss
@@ -1,23 +1,25 @@
 $colors: (
-  light-100: #979898,
-  light-200: #a2a3a3,
-  light-300: #adaeae,
-  light-400: #b9b9b9,
-  light-500: #c4c5c5,
-  light-600: #d0d0d0,
-  light-text: black,
-  light-brand: #f0bf6c,
-  light-brand-text: #f0bf6c,
+  // Light theme - Clean and modern with soft backgrounds
+  light-100: #ece6df,
+  light-200: #f2ece6,
+  light-300: #e2d7cf,
+  light-400: #d5c7bd,
+  light-500: #b4a99f,
+  light-600: #5f5a55,
+  light-text: #1f2322,
+  light-brand: #ff6b35,
+  light-brand-text: #ff6b35,
   
-  dark-100: #272829,
-  dark-200: #3b3c3d,
-  dark-300: #515253,
-  dark-400: #676869,
-  dark-500: #7f8080,
-  dark-600: #979898,
-  dark-text: white,
-  dark-brand: #f0bf6c,
-  dark-brand-text: #f0bf6c,
+  // Dark theme - Rich blue-gray with excellent contrast
+  dark-100: #0d1117,
+  dark-200: #161b22,
+  dark-300: #21262d,
+  dark-400: #30363d,
+  dark-500: #484f58,
+  dark-600: #8b949e,
+  dark-text: #f0f6fc,
+  dark-brand: #ff6b35,
+  dark-brand-text: #ff6b35,
 
   mixed-100: #5c5d5e,
   mixed-200: #6d6d6e,
diff --git a/scss/theming/dark.scss b/scss/theming/dark.scss
index 3651a21..9bb4baf 100644
--- a/scss/theming/dark.scss
+++ b/scss/theming/dark.scss
@@ -7,5 +7,7 @@ $dark: (
   text: color(dark-text),
   secondary-text: color(dark-600),
   brand: color(dark-brand),
-  brand-text: color(dark-brand-text)
+  brand-text: color(dark-brand-text),
+  background-pattern: url("/assests/images/background-pattern.svg"),
+  background-pattern-opacity: 0.15
 );
diff --git a/scss/theming/light.scss b/scss/theming/light.scss
index 84f2ca4..c3c4727 100644
--- a/scss/theming/light.scss
+++ b/scss/theming/light.scss
@@ -7,5 +7,7 @@ $light: (
   text: color(light-text),
   secondary-text: color(light-600),
   brand: color(light-brand),
-  brand-text: color(light-brand-text)
+  brand-text: color(light-brand-text),
+  background-pattern: url("/assests/images/background-pattern.svg"),
+  background-pattern-opacity: 0.08
 );
diff --git a/scss/ui.scss b/scss/ui.scss
index 69c961e..b24092c 100644
--- a/scss/ui.scss
+++ b/scss/ui.scss
@@ -16,6 +16,8 @@ $container-padding-horizontal: 80px;
 
 body > .container {
     @include theme(box-shadow, brand, 0 0 20px -10px, null, 0.5);
+    position: relative;
+    z-index: 1;
     padding: 0;
 
     > header {