:star:

17 files changed, 5906 insertions, 0 deletions

diff --git a/assets/styles/DarkReader.css b/assets/styles/DarkReader.css
new file mode 100644
index 0000000..8b83862
--- /dev/null
+++ b/assets/styles/DarkReader.css
@@ -0,0 +1,2531 @@
+/*
+                        _______
+                       /       \
+                      .==.    .==.
+                     ((  ))==((  ))
+                    / "=="    "=="\
+                   /____|| || ||___\
+       ________     ____    ________  ___    ___
+       |  ___  \   /    \   |  ___  \ |  |  /  /
+       |  |  \  \ /  /\  \  |  |  \  \|  |_/  /
+       |  |   )  /  /__\  \ |  |__/  /|  ___  \
+       |  |__/  /  ______  \|  ____  \|  |  \  \
+_______|_______/__/ ____ \__\__|___\__\__|___\__\____
+|  ___  \ |  ____/ /    \   |  ___  \ |  ____|  ___  \
+|  |  \  \|  |___ /  /\  \  |  |  \  \|  |___|  |  \  \
+|  |__/  /|  ____/  /__\  \ |  |   )  |  ____|  |__/  /
+|  ____  \|  |__/  ______  \|  |__/  /|  |___|  ____  \
+|__|   \__\____/__/      \__\_______/ |______|__|   \__\
+                https://darkreader.org
+*/
+/* User-Agent Style */
+html {
+    background-color: #1b1b1a !important;
+}
+html, body, input, textarea, select, button {
+    background-color: #1b1b1a;
+}
+html, body, input, textarea, select, button {
+    border-color: #7c7260;
+    color: #fff4e0;
+}
+a {
+    color: #5a96d8;
+}
+table {
+    border-color: #5f605b;
+}
+::placeholder {
+    color: #c2b6a1;
+}
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+    background-color: #5b5b16 !important;
+    color: #fff4e0 !important;
+}
+::-webkit-scrollbar {
+    background-color: #242523;
+    color: #baae99;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #4e4e4a;
+}
+::-webkit-scrollbar-thumb:hover {
+    background-color: #62635f;
+}
+::-webkit-scrollbar-thumb:active {
+    background-color: #51524e;
+}
+::-webkit-scrollbar-corner {
+    background-color: #1b1b1a;
+}
+* {
+    scrollbar-color: #242523 #4e4e4a;
+}
+::selection {
+    background-color: #1b4e8a !important;
+    color: #fff4e0 !important;
+}
+::-moz-selection {
+    background-color: #1b4e8a !important;
+    color: #fff4e0 !important;
+}
+
+/* Invert Style */
+.jfk-bubble.gtx-bubble, .captcheck_answer_label > input + img, embed[type="application/pdf"] {
+    filter: invert(100%) hue-rotate(180deg) contrast(90%) sepia(30%) !important;
+}
+
+/* Variables Style */
+:root {
+   --darkreader-neutral-background: #161615;
+   --darkreader-neutral-text: #ede1cd;
+   --darkreader-selection-background: #1b4e8a;
+   --darkreader-selection-text: #fff4e0;
+}
+
+/* Modified CSS */
+html {
+    -webkit-tap-highlight-color: transparent;
+}
+body {
+    color: rgb(230, 218, 197);
+    background-color: rgb(27, 27, 26);
+}
+[tabindex="-1"]:focus {
+    outline-color: initial !important;
+}
+abbr[data-original-title],
+abbr[title] {
+    text-decoration-color: initial;
+    border-bottom-color: initial;
+}
+a {
+    color: rgb(94, 165, 219);
+    text-decoration-color: initial;
+    background-color: transparent;
+}
+a:hover {
+    color: rgb(136, 189, 226);
+    text-decoration-color: initial;
+}
+a:not([href]):not([tabindex]) {
+    color: inherit;
+    text-decoration-color: initial;
+}
+a:not([href]):not([tabindex]):focus,
+a:not([href]):not([tabindex]):hover {
+    color: inherit;
+    text-decoration-color: initial;
+}
+a:not([href]):not([tabindex]):focus {
+    outline-color: initial;
+}
+caption {
+    color: rgb(172, 159, 138);
+}
+button:focus {
+    outline-color: rgb(181, 131, 35);
+}
+fieldset {
+    border-color: initial;
+}
+legend {
+    color: inherit;
+}
+hr {
+    border-right-color: initial;
+    border-bottom-color: initial;
+    border-left-color: initial;
+    border-top-color: rgba(151, 138, 117, 0.1);
+}
+.mark,
+mark {
+    background-color: rgb(64, 56, 19);
+}
+.list-unstyled {
+    list-style-image: initial;
+}
+.list-inline {
+    list-style-image: initial;
+}
+.blockquote-footer {
+    color: rgb(172, 159, 138);
+}
+.img-thumbnail {
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(63, 64, 61);
+}
+.figure-caption {
+    color: rgb(172, 159, 138);
+}
+code {
+    color: rgb(216, 99, 140);
+}
+a > code {
+    color: inherit;
+}
+kbd {
+    color: rgb(255, 244, 224);
+    background-color: rgb(32, 32, 30);
+}
+pre {
+    color: rgb(230, 218, 197);
+}
+pre code {
+    color: inherit;
+}
+.table {
+    color: rgb(230, 218, 197);
+}
+.table td,
+.table th {
+    border-top-color: rgb(63, 64, 61);
+}
+.table thead th {
+    border-bottom-color: rgb(63, 64, 61);
+}
+.table tbody + tbody {
+    border-top-color: rgb(63, 64, 61);
+}
+.table-bordered {
+    border-color: rgb(63, 64, 61);
+}
+.table-bordered td,
+.table-bordered th {
+    border-color: rgb(63, 64, 61);
+}
+.table-borderless tbody + tbody,
+.table-borderless td,
+.table-borderless th,
+.table-borderless thead th {
+    border-color: initial;
+}
+.table-striped tbody tr:nth-of-type(2n+1) {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+.table-hover tbody tr:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgba(0, 0, 0, 0.07);
+}
+.table-primary,
+.table-primary > td,
+.table-primary > th {
+    background-color: rgb(50, 51, 48);
+}
+.table-primary tbody + tbody,
+.table-primary td,
+.table-primary th,
+.table-primary thead th {
+    border-color: rgb(24, 69, 116);
+}
+.table-hover .table-primary:hover {
+    background-color: rgb(58, 58, 55);
+}
+.table-hover .table-primary:hover > td,
+.table-hover .table-primary:hover > th {
+    background-color: rgb(58, 58, 55);
+}
+.table-secondary,
+.table-secondary > td,
+.table-secondary > th {
+    background-color: rgb(52, 53, 49);
+}
+.table-secondary tbody + tbody,
+.table-secondary td,
+.table-secondary th,
+.table-secondary thead th {
+    border-color: rgb(77, 78, 74);
+}
+.table-hover .table-secondary:hover {
+    background-color: rgb(60, 61, 58);
+}
+.table-hover .table-secondary:hover > td,
+.table-hover .table-secondary:hover > th {
+    background-color: rgb(60, 61, 58);
+}
+.table-success,
+.table-success > td,
+.table-success > th {
+    background-color: rgb(44, 71, 49);
+}
+.table-success tbody + tbody,
+.table-success td,
+.table-success th,
+.table-success thead th {
+    border-color: rgb(63, 103, 63);
+}
+.table-hover .table-success:hover {
+    background-color: rgb(50, 81, 56);
+}
+.table-hover .table-success:hover > td,
+.table-hover .table-success:hover > th {
+    background-color: rgb(50, 81, 56);
+}
+.table-info,
+.table-info > td,
+.table-info > th {
+    background-color: rgb(40, 71, 71);
+}
+.table-info tbody + tbody,
+.table-info td,
+.table-info th,
+.table-info thead th {
+    border-color: rgb(59, 104, 104);
+}
+.table-hover .table-info:hover {
+    background-color: rgb(47, 81, 81);
+}
+.table-hover .table-info:hover > td,
+.table-hover .table-info:hover > th {
+    background-color: rgb(47, 81, 81);
+}
+.table-warning,
+.table-warning > td,
+.table-warning > th {
+    background-color: rgb(91, 73, 19);
+}
+.table-warning tbody + tbody,
+.table-warning td,
+.table-warning th,
+.table-warning thead th {
+    border-color: rgb(140, 111, 28);
+}
+.table-hover .table-warning:hover {
+    background-color: rgb(106, 85, 22);
+}
+.table-hover .table-warning:hover > td,
+.table-hover .table-warning:hover > th {
+    background-color: rgb(106, 85, 22);
+}
+.table-danger,
+.table-danger > td,
+.table-danger > th {
+    background-color: rgb(68, 22, 23);
+}
+.table-danger tbody + tbody,
+.table-danger td,
+.table-danger th,
+.table-danger thead th {
+    border-color: rgb(104, 32, 34);
+}
+.table-hover .table-danger:hover {
+    background-color: rgb(79, 25, 28);
+}
+.table-hover .table-danger:hover > td,
+.table-hover .table-danger:hover > th {
+    background-color: rgb(79, 25, 28);
+}
+.table-light,
+.table-light > td,
+.table-light > th {
+    background-color: rgb(28, 28, 27);
+}
+.table-light tbody + tbody,
+.table-light td,
+.table-light th,
+.table-light thead th {
+    border-color: rgb(55, 56, 53);
+}
+.table-hover .table-light:hover {
+    background-color: rgb(36, 37, 35);
+}
+.table-hover .table-light:hover > td,
+.table-hover .table-light:hover > th {
+    background-color: rgb(36, 37, 35);
+}
+.table-dark,
+.table-dark > td,
+.table-dark > th {
+    background-color: rgb(62, 63, 60);
+}
+.table-dark tbody + tbody,
+.table-dark td,
+.table-dark th,
+.table-dark thead th {
+    border-color: rgb(87, 88, 84);
+}
+.table-hover .table-dark:hover {
+    background-color: rgb(70, 71, 68);
+}
+.table-hover .table-dark:hover > td,
+.table-hover .table-dark:hover > th {
+    background-color: rgb(70, 71, 68);
+}
+.table-active,
+.table-active > td,
+.table-active > th {
+    background-color: rgba(0, 0, 0, 0.07);
+}
+.table-hover .table-active:hover {
+    background-color: rgba(0, 0, 0, 0.07);
+}
+.table-hover .table-active:hover > td,
+.table-hover .table-active:hover > th {
+    background-color: rgba(0, 0, 0, 0.07);
+}
+.table .thead-dark th {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+    border-color: rgb(124, 113, 96);
+}
+.table .thead-light th {
+    color: rgb(198, 186, 166);
+    background-color: rgb(40, 40, 38);
+    border-color: rgb(63, 64, 61);
+}
+.table-dark {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+}
+.table-dark td,
+.table-dark th,
+.table-dark thead th {
+    border-color: rgb(124, 113, 96);
+}
+.table-dark.table-bordered {
+    border-color: initial;
+}
+.table-dark.table-striped tbody tr:nth-of-type(2n+1) {
+    background-color: rgba(27, 27, 26, 0.05);
+}
+.table-dark.table-hover tbody tr:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgba(27, 27, 26, 0.07);
+}
+@media (max-width: 575.98px) {
+    .table-responsive-sm > .table-bordered {
+        border-color: initial;
+    }
+}
+@media (max-width: 767.98px) {
+    .table-responsive-md > .table-bordered {
+        border-color: initial;
+    }
+}
+@media (max-width: 991.98px) {
+    .table-responsive-lg > .table-bordered {
+        border-color: initial;
+    }
+}
+@media (max-width: 1199.98px) {
+    .table-responsive-xl > .table-bordered {
+        border-color: initial;
+    }
+}
+.table-responsive > .table-bordered {
+    border-color: initial;
+}
+.form-control {
+    color: rgb(198, 186, 166);
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(68, 69, 66);
+}
+.form-control:focus {
+    color: rgb(198, 186, 166);
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(23, 68, 114);
+    outline-color: initial;
+    box-shadow: rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.form-control::-webkit-input-placeholder {
+    color: rgb(172, 159, 138);
+}
+.form-control::placeholder {
+    color: rgb(172, 159, 138);
+}
+.form-control:disabled,
+.form-control[readonly] {
+    background-color: rgb(40, 40, 38);
+}
+.form-control-plaintext {
+    color: rgb(230, 218, 197);
+    background-color: transparent;
+    border-color: transparent;
+}
+.form-check-input:disabled ~ .form-check-label {
+    color: rgb(172, 159, 138);
+}
+.valid-feedback {
+    color: rgb(136, 213, 134);
+}
+.valid-tooltip {
+    color: rgb(255, 244, 224);
+    background-color: rgba(60, 127, 65, 0.9);
+}
+.form-control.is-valid,
+.was-validated .form-control:valid {
+    border-color: rgb(70, 148, 75);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+}
+.form-control.is-valid:focus,
+.was-validated .form-control:valid:focus {
+    border-color: rgb(70, 148, 75);
+    box-shadow: rgba(60, 127, 65, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-select.is-valid,
+.was-validated .custom-select:valid {
+    border-color: rgb(70, 148, 75);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"),
+    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+    background-color: rgb(27, 27, 26);
+}
+.custom-select.is-valid:focus,
+.was-validated .custom-select:valid:focus {
+    border-color: rgb(70, 148, 75);
+    box-shadow: rgba(60, 127, 65, 0.25) 0px 0px 0px 0.2rem;
+}
+.form-check-input.is-valid ~ .form-check-label,
+.was-validated .form-check-input:valid ~ .form-check-label {
+    color: rgb(136, 213, 134);
+}
+.custom-control-input.is-valid ~ .custom-control-label,
+.was-validated .custom-control-input:valid ~ .custom-control-label {
+    color: rgb(136, 213, 134);
+}
+.custom-control-input.is-valid ~ .custom-control-label::before,
+.was-validated .custom-control-input:valid ~ .custom-control-label::before {
+    border-color: rgb(70, 148, 75);
+}
+.custom-control-input.is-valid:checked ~ .custom-control-label::before,
+.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before {
+    border-color: rgb(65, 136, 69);
+    background-color: rgb(75, 156, 97);
+}
+.custom-control-input.is-valid:focus ~ .custom-control-label::before,
+.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before {
+    box-shadow: rgba(60, 127, 65, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before,
+.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: rgb(70, 148, 75);
+}
+.custom-file-input.is-valid ~ .custom-file-label,
+.was-validated .custom-file-input:valid ~ .custom-file-label {
+    border-color: rgb(70, 148, 75);
+}
+.custom-file-input.is-valid:focus ~ .custom-file-label,
+.was-validated .custom-file-input:valid:focus ~ .custom-file-label {
+    border-color: rgb(70, 148, 75);
+    box-shadow: rgba(60, 127, 65, 0.25) 0px 0px 0px 0.2rem;
+}
+.invalid-feedback {
+    color: rgb(203, 91, 92);
+}
+.invalid-tooltip {
+    color: rgb(255, 244, 224);
+    background-color: rgba(144, 46, 49, 0.9);
+}
+.form-control.is-invalid,
+.was-validated .form-control:invalid {
+    border-color: rgb(129, 41, 44);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
+}
+.form-control.is-invalid:focus,
+.was-validated .form-control:invalid:focus {
+    border-color: rgb(129, 41, 44);
+    box-shadow: rgba(144, 46, 49, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-select.is-invalid,
+.was-validated .custom-select:invalid {
+    border-color: rgb(129, 41, 44);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"),
+    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
+    background-color: rgb(27, 27, 26);
+}
+.custom-select.is-invalid:focus,
+.was-validated .custom-select:invalid:focus {
+    border-color: rgb(129, 41, 44);
+    box-shadow: rgba(144, 46, 49, 0.25) 0px 0px 0px 0.2rem;
+}
+.form-check-input.is-invalid ~ .form-check-label,
+.was-validated .form-check-input:invalid ~ .form-check-label {
+    color: rgb(203, 91, 92);
+}
+.custom-control-input.is-invalid ~ .custom-control-label,
+.was-validated .custom-control-input:invalid ~ .custom-control-label {
+    color: rgb(203, 91, 92);
+}
+.custom-control-input.is-invalid ~ .custom-control-label::before,
+.was-validated .custom-control-input:invalid ~ .custom-control-label::before {
+    border-color: rgb(129, 41, 44);
+}
+.custom-control-input.is-invalid:checked ~ .custom-control-label::before,
+.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before {
+    border-color: rgb(118, 37, 40);
+    background-color: rgb(121, 38, 41);
+}
+.custom-control-input.is-invalid:focus ~ .custom-control-label::before,
+.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before {
+    box-shadow: rgba(144, 46, 49, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before,
+.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: rgb(129, 41, 44);
+}
+.custom-file-input.is-invalid ~ .custom-file-label,
+.was-validated .custom-file-input:invalid ~ .custom-file-label {
+    border-color: rgb(129, 41, 44);
+}
+.custom-file-input.is-invalid:focus ~ .custom-file-label,
+.was-validated .custom-file-input:invalid:focus ~ .custom-file-label {
+    border-color: rgb(129, 41, 44);
+    box-shadow: rgba(144, 46, 49, 0.25) 0px 0px 0px 0.2rem;
+}
+.btn {
+    color: rgb(230, 218, 197);
+    background-color: transparent;
+    border-color: transparent;
+}
+.btn:hover {
+    color: rgb(230, 218, 197);
+    text-decoration-color: initial;
+}
+.btn.focus,
+.btn:focus {
+    outline-color: initial;
+    box-shadow: rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.btn-primary {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+    border-color: rgb(30, 87, 146);
+}
+.btn-primary:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(29, 85, 142);
+    border-color: rgb(32, 94, 158);
+}
+.btn-primary.focus,
+.btn-primary:focus {
+    box-shadow: rgba(31, 89, 148, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-primary.disabled,
+.btn-primary:disabled {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+    border-color: rgb(30, 87, 146);
+}
+.btn-primary:not(:disabled):not(.disabled).active,
+.btn-primary:not(:disabled):not(.disabled):active,
+.show > .btn-primary.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(27, 79, 133);
+    border-color: rgb(33, 96, 162);
+}
+.btn-primary:not(:disabled):not(.disabled).active:focus,
+.btn-primary:not(:disabled):not(.disabled):active:focus,
+.show > .btn-primary.dropdown-toggle:focus {
+    box-shadow: rgba(31, 89, 148, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-secondary {
+    color: rgb(255, 244, 224);
+    background-color: rgb(100, 100, 96);
+    border-color: rgb(110, 100, 85);
+}
+.btn-secondary:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(83, 83, 79);
+    border-color: rgb(119, 108, 92);
+}
+.btn-secondary.focus,
+.btn-secondary:focus {
+    box-shadow: rgba(102, 103, 98, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-secondary.disabled,
+.btn-secondary:disabled {
+    color: rgb(255, 244, 224);
+    background-color: rgb(100, 100, 96);
+    border-color: rgb(110, 100, 85);
+}
+.btn-secondary:not(:disabled):not(.disabled).active,
+.btn-secondary:not(:disabled):not(.disabled):active,
+.show > .btn-secondary.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(78, 78, 74);
+    border-color: rgb(121, 111, 94);
+}
+.btn-secondary:not(:disabled):not(.disabled).active:focus,
+.btn-secondary:not(:disabled):not(.disabled):active:focus,
+.show > .btn-secondary.dropdown-toggle:focus {
+    box-shadow: rgba(102, 103, 98, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-success {
+    color: rgb(255, 244, 224);
+    background-color: rgb(60, 127, 65);
+    border-color: rgb(70, 148, 75);
+}
+.btn-success:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(49, 104, 53);
+    border-color: rgb(75, 160, 81);
+}
+.btn-success.focus,
+.btn-success:focus {
+    box-shadow: rgba(85, 140, 85, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-success.disabled,
+.btn-success:disabled {
+    color: rgb(255, 244, 224);
+    background-color: rgb(60, 127, 65);
+    border-color: rgb(70, 148, 75);
+}
+.btn-success:not(:disabled):not(.disabled).active,
+.btn-success:not(:disabled):not(.disabled):active,
+.show > .btn-success.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(45, 96, 49);
+    border-color: rgb(77, 163, 83);
+}
+.btn-success:not(:disabled):not(.disabled).active:focus,
+.btn-success:not(:disabled):not(.disabled):active:focus,
+.show > .btn-success.dropdown-toggle:focus {
+    box-shadow: rgba(85, 140, 85, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-info {
+    color: rgb(255, 244, 224);
+    background-color: rgb(53, 127, 131);
+    border-color: rgb(62, 148, 152);
+}
+.btn-info:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(44, 104, 107);
+    border-color: rgb(67, 159, 165);
+}
+.btn-info.focus,
+.btn-info:focus {
+    box-shadow: rgba(79, 140, 142, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-info.disabled,
+.btn-info:disabled {
+    color: rgb(255, 244, 224);
+    background-color: rgb(53, 127, 131);
+    border-color: rgb(62, 148, 152);
+}
+.btn-info:not(:disabled):not(.disabled).active,
+.btn-info:not(:disabled):not(.disabled):active,
+.show > .btn-info.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(40, 96, 99);
+    border-color: rgb(69, 162, 168);
+}
+.btn-info:not(:disabled):not(.disabled).active:focus,
+.btn-info:not(:disabled):not(.disabled):active:focus,
+.show > .btn-info.dropdown-toggle:focus {
+    box-shadow: rgba(79, 140, 142, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-warning {
+    color: rgb(230, 218, 197);
+    background-color: rgb(198, 157, 40);
+    border-color: rgb(174, 138, 36);
+}
+.btn-warning:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgb(177, 140, 36);
+    border-color: rgb(190, 151, 39);
+}
+.btn-warning.focus,
+.btn-warning:focus {
+    box-shadow: rgba(178, 142, 44, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-warning.disabled,
+.btn-warning:disabled {
+    color: rgb(230, 218, 197);
+    background-color: rgb(198, 157, 40);
+    border-color: rgb(174, 138, 36);
+}
+.btn-warning:not(:disabled):not(.disabled).active,
+.btn-warning:not(:disabled):not(.disabled):active,
+.show > .btn-warning.dropdown-toggle {
+    color: rgb(230, 218, 197);
+    background-color: rgb(167, 132, 34);
+    border-color: rgb(194, 154, 40);
+}
+.btn-warning:not(:disabled):not(.disabled).active:focus,
+.btn-warning:not(:disabled):not(.disabled):active:focus,
+.show > .btn-warning.dropdown-toggle:focus {
+    box-shadow: rgba(178, 142, 44, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-danger {
+    color: rgb(255, 244, 224);
+    background-color: rgb(144, 46, 49);
+    border-color: rgb(129, 41, 44);
+}
+.btn-danger:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(140, 44, 48);
+    border-color: rgb(140, 44, 48);
+}
+.btn-danger.focus,
+.btn-danger:focus {
+    box-shadow: rgba(128, 41, 44, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-danger.disabled,
+.btn-danger:disabled {
+    color: rgb(255, 244, 224);
+    background-color: rgb(144, 46, 49);
+    border-color: rgb(129, 41, 44);
+}
+.btn-danger:not(:disabled):not(.disabled).active,
+.btn-danger:not(:disabled):not(.disabled):active,
+.show > .btn-danger.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(132, 41, 45);
+    border-color: rgb(143, 46, 48);
+}
+.btn-danger:not(:disabled):not(.disabled).active:focus,
+.btn-danger:not(:disabled):not(.disabled):active:focus,
+.show > .btn-danger.dropdown-toggle:focus {
+    box-shadow: rgba(128, 41, 44, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-light {
+    color: rgb(230, 218, 197);
+    background-color: rgb(31, 32, 30);
+    border-color: rgb(57, 57, 54);
+}
+.btn-light:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgb(43, 43, 41);
+    border-color: rgb(65, 65, 62);
+}
+.btn-light.focus,
+.btn-light:focus {
+    box-shadow: rgba(51, 52, 49, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-light.disabled,
+.btn-light:disabled {
+    color: rgb(230, 218, 197);
+    background-color: rgb(31, 32, 30);
+    border-color: rgb(57, 57, 54);
+}
+.btn-light:not(:disabled):not(.disabled).active,
+.btn-light:not(:disabled):not(.disabled):active,
+.show > .btn-light.dropdown-toggle {
+    color: rgb(230, 218, 197);
+    background-color: rgb(47, 48, 45);
+    border-color: rgb(67, 67, 64);
+}
+.btn-light:not(:disabled):not(.disabled).active:focus,
+.btn-light:not(:disabled):not(.disabled):active:focus,
+.show > .btn-light.dropdown-toggle:focus {
+    box-shadow: rgba(51, 52, 49, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-dark {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+    border-color: rgb(130, 119, 101);
+}
+.btn-dark:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(33, 34, 32);
+    border-color: rgb(139, 128, 108);
+}
+.btn-dark.focus,
+.btn-dark:focus {
+    box-shadow: rgba(75, 75, 71, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-dark.disabled,
+.btn-dark:disabled {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+    border-color: rgb(130, 119, 101);
+}
+.btn-dark:not(:disabled):not(.disabled).active,
+.btn-dark:not(:disabled):not(.disabled):active,
+.show > .btn-dark.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(27, 28, 27);
+    border-color: rgb(141, 130, 110);
+}
+.btn-dark:not(:disabled):not(.disabled).active:focus,
+.btn-dark:not(:disabled):not(.disabled):active:focus,
+.show > .btn-dark.dropdown-toggle:focus {
+    box-shadow: rgba(75, 75, 71, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-primary {
+    color: rgb(94, 165, 219);
+    border-color: rgb(30, 87, 146);
+}
+.btn-outline-primary:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+    border-color: rgb(30, 87, 146);
+}
+.btn-outline-primary.focus,
+.btn-outline-primary:focus {
+    box-shadow: rgba(34, 99, 167, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-primary.disabled,
+.btn-outline-primary:disabled {
+    color: rgb(94, 165, 219);
+    background-color: transparent;
+}
+.btn-outline-primary:not(:disabled):not(.disabled).active,
+.btn-outline-primary:not(:disabled):not(.disabled):active,
+.show > .btn-outline-primary.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+    border-color: rgb(30, 87, 146);
+}
+.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
+.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-primary.dropdown-toggle:focus {
+    box-shadow: rgba(34, 99, 167, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-secondary {
+    color: rgb(172, 159, 138);
+    border-color: rgb(110, 100, 85);
+}
+.btn-outline-secondary:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(100, 100, 96);
+    border-color: rgb(110, 100, 85);
+}
+.btn-outline-secondary.focus,
+.btn-outline-secondary:focus {
+    box-shadow: rgba(100, 100, 96, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-secondary.disabled,
+.btn-outline-secondary:disabled {
+    color: rgb(172, 159, 138);
+    background-color: transparent;
+}
+.btn-outline-secondary:not(:disabled):not(.disabled).active,
+.btn-outline-secondary:not(:disabled):not(.disabled):active,
+.show > .btn-outline-secondary.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(100, 100, 96);
+    border-color: rgb(110, 100, 85);
+}
+.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
+.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-secondary.dropdown-toggle:focus {
+    box-shadow: rgba(100, 100, 96, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-success {
+    color: rgb(136, 213, 134);
+    border-color: rgb(70, 148, 75);
+}
+.btn-outline-success:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(60, 127, 65);
+    border-color: rgb(70, 148, 75);
+}
+.btn-outline-success.focus,
+.btn-outline-success:focus {
+    box-shadow: rgba(60, 127, 65, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-success.disabled,
+.btn-outline-success:disabled {
+    color: rgb(136, 213, 134);
+    background-color: transparent;
+}
+.btn-outline-success:not(:disabled):not(.disabled).active,
+.btn-outline-success:not(:disabled):not(.disabled):active,
+.show > .btn-outline-success.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(60, 127, 65);
+    border-color: rgb(70, 148, 75);
+}
+.btn-outline-success:not(:disabled):not(.disabled).active:focus,
+.btn-outline-success:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-success.dropdown-toggle:focus {
+    box-shadow: rgba(60, 127, 65, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-info {
+    color: rgb(128, 212, 213);
+    border-color: rgb(62, 148, 152);
+}
+.btn-outline-info:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(53, 127, 131);
+    border-color: rgb(62, 148, 152);
+}
+.btn-outline-info.focus,
+.btn-outline-info:focus {
+    box-shadow: rgba(53, 127, 131, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-info.disabled,
+.btn-outline-info:disabled {
+    color: rgb(128, 212, 213);
+    background-color: transparent;
+}
+.btn-outline-info:not(:disabled):not(.disabled).active,
+.btn-outline-info:not(:disabled):not(.disabled):active,
+.show > .btn-outline-info.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(53, 127, 131);
+    border-color: rgb(62, 148, 152);
+}
+.btn-outline-info:not(:disabled):not(.disabled).active:focus,
+.btn-outline-info:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-info.dropdown-toggle:focus {
+    box-shadow: rgba(53, 127, 131, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-warning {
+    color: rgb(255, 208, 75);
+    border-color: rgb(174, 138, 36);
+}
+.btn-outline-warning:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgb(198, 157, 40);
+    border-color: rgb(174, 138, 36);
+}
+.btn-outline-warning.focus,
+.btn-outline-warning:focus {
+    box-shadow: rgba(198, 157, 40, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-warning.disabled,
+.btn-outline-warning:disabled {
+    color: rgb(255, 208, 75);
+    background-color: transparent;
+}
+.btn-outline-warning:not(:disabled):not(.disabled).active,
+.btn-outline-warning:not(:disabled):not(.disabled):active,
+.show > .btn-outline-warning.dropdown-toggle {
+    color: rgb(230, 218, 197);
+    background-color: rgb(198, 157, 40);
+    border-color: rgb(174, 138, 36);
+}
+.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
+.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-warning.dropdown-toggle:focus {
+    box-shadow: rgba(198, 157, 40, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-danger {
+    color: rgb(203, 91, 92);
+    border-color: rgb(129, 41, 44);
+}
+.btn-outline-danger:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(144, 46, 49);
+    border-color: rgb(129, 41, 44);
+}
+.btn-outline-danger.focus,
+.btn-outline-danger:focus {
+    box-shadow: rgba(144, 46, 49, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-danger.disabled,
+.btn-outline-danger:disabled {
+    color: rgb(203, 91, 92);
+    background-color: transparent;
+}
+.btn-outline-danger:not(:disabled):not(.disabled).active,
+.btn-outline-danger:not(:disabled):not(.disabled):active,
+.show > .btn-outline-danger.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(144, 46, 49);
+    border-color: rgb(129, 41, 44);
+}
+.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
+.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-danger.dropdown-toggle:focus {
+    box-shadow: rgba(144, 46, 49, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-light {
+    color: rgb(251, 240, 219);
+    border-color: rgb(57, 57, 54);
+}
+.btn-outline-light:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgb(31, 32, 30);
+    border-color: rgb(57, 57, 54);
+}
+.btn-outline-light.focus,
+.btn-outline-light:focus {
+    box-shadow: rgba(31, 32, 30, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-light.disabled,
+.btn-outline-light:disabled {
+    color: rgb(251, 240, 219);
+    background-color: transparent;
+}
+.btn-outline-light:not(:disabled):not(.disabled).active,
+.btn-outline-light:not(:disabled):not(.disabled):active,
+.show > .btn-outline-light.dropdown-toggle {
+    color: rgb(230, 218, 197);
+    background-color: rgb(31, 32, 30);
+    border-color: rgb(57, 57, 54);
+}
+.btn-outline-light:not(:disabled):not(.disabled).active:focus,
+.btn-outline-light:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-light.dropdown-toggle:focus {
+    box-shadow: rgba(31, 32, 30, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-dark {
+    color: rgb(214, 202, 181);
+    border-color: rgb(130, 119, 101);
+}
+.btn-outline-dark:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+    border-color: rgb(130, 119, 101);
+}
+.btn-outline-dark.focus,
+.btn-outline-dark:focus {
+    box-shadow: rgba(50, 50, 47, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-dark.disabled,
+.btn-outline-dark:disabled {
+    color: rgb(214, 202, 181);
+    background-color: transparent;
+}
+.btn-outline-dark:not(:disabled):not(.disabled).active,
+.btn-outline-dark:not(:disabled):not(.disabled):active,
+.show > .btn-outline-dark.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+    border-color: rgb(130, 119, 101);
+}
+.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
+.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-dark.dropdown-toggle:focus {
+    box-shadow: rgba(50, 50, 47, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-link {
+    color: rgb(94, 165, 219);
+    text-decoration-color: initial;
+}
+.btn-link:hover {
+    color: rgb(136, 189, 226);
+    text-decoration-color: initial;
+}
+.btn-link.focus,
+.btn-link:focus {
+    text-decoration-color: initial;
+    box-shadow: none;
+}
+.btn-link.disabled,
+.btn-link:disabled {
+    color: rgb(172, 159, 138);
+}
+.dropdown-toggle::after {
+    border-top-color: initial;
+    border-right-color: transparent;
+    border-bottom-color: initial;
+    border-left-color: transparent;
+}
+.dropdown-menu {
+    color: rgb(230, 218, 197);
+    list-style-image: initial;
+    background-color: rgb(27, 27, 26);
+    border-color: rgba(151, 138, 117, 0.15);
+}
+.dropup .dropdown-toggle::after {
+    border-top-color: initial;
+    border-right-color: transparent;
+    border-bottom-color: initial;
+    border-left-color: transparent;
+}
+.dropright .dropdown-toggle::after {
+    border-top-color: transparent;
+    border-right-color: initial;
+    border-bottom-color: transparent;
+    border-left-color: initial;
+}
+.dropleft .dropdown-toggle::before {
+    border-top-color: transparent;
+    border-right-color: initial;
+    border-bottom-color: transparent;
+}
+.dropdown-divider {
+    border-top-color: rgb(60, 61, 58);
+}
+.dropdown-item {
+    color: rgb(230, 218, 197);
+    background-color: transparent;
+    border-color: initial;
+}
+.dropdown-item:focus,
+.dropdown-item:hover {
+    color: rgb(238, 226, 206);
+    text-decoration-color: initial;
+    background-color: rgb(31, 32, 30);
+}
+.dropdown-item.active,
+.dropdown-item:active {
+    color: rgb(255, 244, 224);
+    text-decoration-color: initial;
+    background-color: rgb(34, 99, 167);
+}
+.dropdown-item.disabled,
+.dropdown-item:disabled {
+    color: rgb(172, 159, 138);
+    background-color: transparent;
+}
+.dropdown-header {
+    color: rgb(172, 159, 138);
+}
+.dropdown-item-text {
+    color: rgb(230, 218, 197);
+}
+.input-group-text {
+    color: rgb(198, 186, 166);
+    background-color: rgb(40, 40, 38);
+    border-color: rgb(68, 69, 66);
+}
+.custom-control-input:checked ~ .custom-control-label::before {
+    color: rgb(255, 244, 224);
+    border-color: rgb(30, 87, 146);
+    background-color: rgb(34, 99, 167);
+}
+.custom-control-input:focus ~ .custom-control-label::before {
+    box-shadow: rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: rgb(23, 68, 114);
+}
+.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+    color: rgb(255, 244, 224);
+    background-color: rgb(51, 52, 49);
+    border-color: rgb(21, 60, 102);
+}
+.custom-control-input:disabled ~ .custom-control-label {
+    color: rgb(172, 159, 138);
+}
+.custom-control-input:disabled ~ .custom-control-label::before {
+    background-color: rgb(40, 40, 38);
+}
+.custom-control-label::before {
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(78, 79, 75);
+}
+.custom-control-label::after {
+    background-image: initial;
+    background-color: initial;
+}
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
+}
+.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
+    border-color: rgb(30, 87, 146);
+    background-color: rgb(34, 99, 167);
+}
+.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
+}
+.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
+    background-color: rgba(34, 99, 167, 0.5);
+}
+.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
+    background-color: rgba(34, 99, 167, 0.5);
+}
+.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+}
+.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
+    background-color: rgba(34, 99, 167, 0.5);
+}
+.custom-switch .custom-control-label::after {
+    background-color: rgb(75, 75, 71);
+}
+.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
+    background-color: rgb(27, 27, 26);
+}
+.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
+    background-color: rgba(34, 99, 167, 0.5);
+}
+.custom-select {
+    color: rgb(198, 186, 166);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(68, 69, 66);
+}
+.custom-select:focus {
+    border-color: rgb(23, 68, 114);
+    outline-color: initial;
+    box-shadow: rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-select[multiple],
+.custom-select[size]:not([size="1"]) {
+    background-image: none;
+}
+.custom-select:disabled {
+    color: rgb(172, 159, 138);
+    background-color: rgb(40, 40, 38);
+}
+.custom-file-input:focus ~ .custom-file-label {
+    border-color: rgb(23, 68, 114);
+    box-shadow: rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-file-input:disabled ~ .custom-file-label {
+    background-color: rgb(40, 40, 38);
+}
+.custom-file-label {
+    color: rgb(198, 186, 166);
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(68, 69, 66);
+}
+.custom-file-label::after {
+    color: rgb(198, 186, 166);
+    background-color: rgb(40, 40, 38);
+    border-left-color: inherit;
+}
+.custom-range {
+    background-color: transparent;
+}
+.custom-range:focus {
+    outline-color: initial;
+}
+.custom-range:focus::-webkit-slider-thumb {
+    box-shadow: rgb(27, 27, 26) 0px 0px 0px 1px,
+    rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-range::-webkit-slider-thumb {
+    background-color: rgb(34, 99, 167);
+    border-color: initial;
+}
+.custom-range::-webkit-slider-thumb:active {
+    background-color: rgb(51, 52, 49);
+}
+.custom-range::-webkit-slider-runnable-track {
+    color: transparent;
+    background-color: rgb(45, 46, 44);
+    border-color: transparent;
+}
+.custom-range:disabled::-webkit-slider-thumb {
+    background-color: rgb(75, 75, 71);
+}
+.nav {
+    list-style-image: initial;
+}
+.nav-link:focus,
+.nav-link:hover {
+    text-decoration-color: initial;
+}
+.nav-link.disabled {
+    color: rgb(172, 159, 138);
+}
+.nav-tabs {
+    border-bottom-color: rgb(63, 64, 61);
+}
+.nav-tabs .nav-link {
+    border-color: transparent;
+}
+.nav-tabs .nav-link:focus,
+.nav-tabs .nav-link:hover {
+    border-color: rgb(60, 61, 58) rgb(60, 61, 58) rgb(63, 64, 61);
+}
+.nav-tabs .nav-link.disabled {
+    color: rgb(172, 159, 138);
+    background-color: transparent;
+    border-color: transparent;
+}
+.nav-tabs .nav-item.show .nav-link,
+.nav-tabs .nav-link.active {
+    color: rgb(198, 186, 166);
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(63, 64, 61) rgb(63, 64, 61) rgb(54, 55, 52);
+}
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+}
+.navbar-brand:focus,
+.navbar-brand:hover {
+    text-decoration-color: initial;
+}
+.navbar-nav {
+    list-style-image: initial;
+}
+.navbar-toggler {
+    background-color: transparent;
+    border-color: transparent;
+}
+.navbar-toggler:focus,
+.navbar-toggler:hover {
+    text-decoration-color: initial;
+}
+.navbar-toggler-icon {
+    background-image: initial;
+    background-color: initial;
+}
+.navbar-light .navbar-brand {
+    color: rgba(255, 244, 224, 0.9);
+}
+.navbar-light .navbar-brand:focus,
+.navbar-light .navbar-brand:hover {
+    color: rgba(255, 244, 224, 0.9);
+}
+.navbar-light .navbar-nav .nav-link {
+    color: rgba(255, 244, 224, 0.5);
+}
+.navbar-light .navbar-nav .nav-link:focus,
+.navbar-light .navbar-nav .nav-link:hover {
+    color: rgba(255, 244, 224, 0.7);
+}
+.navbar-light .navbar-nav .nav-link.disabled {
+    color: rgba(255, 244, 224, 0.3);
+}
+.navbar-light .navbar-nav .active > .nav-link,
+.navbar-light .navbar-nav .nav-link.active,
+.navbar-light .navbar-nav .nav-link.show,
+.navbar-light .navbar-nav .show > .nav-link {
+    color: rgba(255, 244, 224, 0.9);
+}
+.navbar-light .navbar-toggler {
+    color: rgba(255, 244, 224, 0.5);
+    border-color: rgba(151, 138, 117, 0.1);
+}
+.navbar-light .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml, %3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+.navbar-light .navbar-text {
+    color: rgba(255, 244, 224, 0.5);
+}
+.navbar-light .navbar-text a {
+    color: rgba(255, 244, 224, 0.9);
+}
+.navbar-light .navbar-text a:focus,
+.navbar-light .navbar-text a:hover {
+    color: rgba(255, 244, 224, 0.9);
+}
+.navbar-dark .navbar-brand {
+    color: rgb(255, 244, 224);
+}
+.navbar-dark .navbar-brand:focus,
+.navbar-dark .navbar-brand:hover {
+    color: rgb(255, 244, 224);
+}
+.navbar-dark .navbar-nav .nav-link {
+    color: rgba(255, 244, 224, 0.5);
+}
+.navbar-dark .navbar-nav .nav-link:focus,
+.navbar-dark .navbar-nav .nav-link:hover {
+    color: rgba(255, 244, 224, 0.75);
+}
+.navbar-dark .navbar-nav .nav-link.disabled {
+    color: rgba(255, 244, 224, 0.25);
+}
+.navbar-dark .navbar-nav .active > .nav-link,
+.navbar-dark .navbar-nav .nav-link.active,
+.navbar-dark .navbar-nav .nav-link.show,
+.navbar-dark .navbar-nav .show > .nav-link {
+    color: rgb(255, 244, 224);
+}
+.navbar-dark .navbar-toggler {
+    color: rgba(255, 244, 224, 0.5);
+    border-color: rgba(54, 55, 52, 0.1);
+}
+.navbar-dark .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml, %3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+.navbar-dark .navbar-text {
+    color: rgba(255, 244, 224, 0.5);
+}
+.navbar-dark .navbar-text a {
+    color: rgb(255, 244, 224);
+}
+.navbar-dark .navbar-text a:focus,
+.navbar-dark .navbar-text a:hover {
+    color: rgb(255, 244, 224);
+}
+.card {
+    background-color: rgb(27, 27, 26);
+    border-color: rgba(151, 138, 117, 0.13);
+}
+.card-link:hover {
+    text-decoration-color: initial;
+}
+.card-header {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-bottom-color: rgba(151, 138, 117, 0.13);
+}
+.card-header + .list-group .list-group-item:first-child {
+    border-top-color: initial;
+}
+.card-footer {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-top-color: rgba(151, 138, 117, 0.13);
+}
+.card-header-tabs {
+    border-bottom-color: initial;
+}
+@media (min-width: 576px) {
+    .card-group > .card + .card {
+        border-left-color: initial;
+    }
+}
+.accordion > .card:not(:first-of-type):not(:last-of-type) {
+    border-bottom-color: initial;
+}
+.accordion > .card:first-of-type {
+    border-bottom-color: initial;
+}
+.breadcrumb {
+    list-style-image: initial;
+    background-color: rgb(40, 40, 38);
+}
+.breadcrumb-item + .breadcrumb-item::before {
+    color: rgb(172, 159, 138);
+}
+.breadcrumb-item + .breadcrumb-item:hover::before {
+    text-decoration-color: initial;
+}
+.breadcrumb-item + .breadcrumb-item:hover::before {
+    text-decoration-color: initial;
+}
+.breadcrumb-item.active {
+    color: rgb(172, 159, 138);
+}
+.pagination {
+    list-style-image: initial;
+}
+.page-link {
+    color: rgb(94, 165, 219);
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(63, 64, 61);
+}
+.page-link:hover {
+    color: rgb(136, 189, 226);
+    text-decoration-color: initial;
+    background-color: rgb(40, 40, 38);
+    border-color: rgb(63, 64, 61);
+}
+.page-link:focus {
+    outline-color: initial;
+    box-shadow: rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.page-item.active .page-link {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+    border-color: rgb(30, 87, 146);
+}
+.page-item.disabled .page-link {
+    color: rgb(172, 159, 138);
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(63, 64, 61);
+}
+a.badge:focus,
+a.badge:hover {
+    text-decoration-color: initial;
+}
+.badge-primary {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+}
+a.badge-primary:focus,
+a.badge-primary:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(27, 79, 133);
+}
+a.badge-primary.focus,
+a.badge-primary:focus {
+    outline-color: initial;
+    box-shadow: rgba(34, 99, 167, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-secondary {
+    color: rgb(255, 244, 224);
+    background-color: rgb(100, 100, 96);
+}
+a.badge-secondary:focus,
+a.badge-secondary:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(78, 78, 74);
+}
+a.badge-secondary.focus,
+a.badge-secondary:focus {
+    outline-color: initial;
+    box-shadow: rgba(100, 100, 96, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-success {
+    color: rgb(255, 244, 224);
+    background-color: rgb(60, 127, 65);
+}
+a.badge-success:focus,
+a.badge-success:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(45, 96, 49);
+}
+a.badge-success.focus,
+a.badge-success:focus {
+    outline-color: initial;
+    box-shadow: rgba(60, 127, 65, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-info {
+    color: rgb(255, 244, 224);
+    background-color: rgb(53, 127, 131);
+}
+a.badge-info:focus,
+a.badge-info:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(40, 96, 99);
+}
+a.badge-info.focus,
+a.badge-info:focus {
+    outline-color: initial;
+    box-shadow: rgba(53, 127, 131, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-warning {
+    color: rgb(230, 218, 197);
+    background-color: rgb(198, 157, 40);
+}
+a.badge-warning:focus,
+a.badge-warning:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgb(167, 132, 34);
+}
+a.badge-warning.focus,
+a.badge-warning:focus {
+    outline-color: initial;
+    box-shadow: rgba(198, 157, 40, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-danger {
+    color: rgb(255, 244, 224);
+    background-color: rgb(144, 46, 49);
+}
+a.badge-danger:focus,
+a.badge-danger:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(132, 41, 45);
+}
+a.badge-danger.focus,
+a.badge-danger:focus {
+    outline-color: initial;
+    box-shadow: rgba(144, 46, 49, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-light {
+    color: rgb(230, 218, 197);
+    background-color: rgb(31, 32, 30);
+}
+a.badge-light:focus,
+a.badge-light:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgb(47, 48, 45);
+}
+a.badge-light.focus,
+a.badge-light:focus {
+    outline-color: initial;
+    box-shadow: rgba(31, 32, 30, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-dark {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+}
+a.badge-dark:focus,
+a.badge-dark:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(27, 28, 27);
+}
+a.badge-dark.focus,
+a.badge-dark:focus {
+    outline-color: initial;
+    box-shadow: rgba(50, 50, 47, 0.5) 0px 0px 0px 0.2rem;
+}
+.jumbotron {
+    background-color: rgb(40, 40, 38);
+}
+.alert {
+    border-color: transparent;
+}
+.alert-heading {
+    color: inherit;
+}
+.alert-dismissible .close {
+    color: inherit;
+}
+.alert-primary {
+    color: rgb(161, 202, 230);
+    background-color: rgb(43, 44, 42);
+    border-color: rgb(21, 60, 100);
+}
+.alert-primary hr {
+    border-top-color: rgb(22, 64, 107);
+}
+.alert-primary .alert-link {
+    color: rgb(226, 214, 193);
+}
+.alert-secondary {
+    color: rgb(212, 200, 179);
+    background-color: rgb(45, 45, 43);
+    border-color: rgb(67, 67, 64);
+}
+.alert-secondary hr {
+    border-top-color: rgb(71, 72, 68);
+}
+.alert-secondary .alert-link {
+    color: rgb(231, 219, 198);
+}
+.alert-success {
+    color: rgb(188, 233, 176);
+    background-color: rgb(38, 61, 42);
+    border-color: rgb(54, 88, 54);
+}
+.alert-success hr {
+    border-top-color: rgb(57, 94, 57);
+}
+.alert-success .alert-link {
+    color: rgb(235, 223, 203);
+}
+.alert-info {
+    color: rgb(182, 233, 226);
+    background-color: rgb(34, 59, 61);
+    border-color: rgb(51, 89, 88);
+}
+.alert-info hr {
+    border-top-color: rgb(53, 93, 94);
+}
+.alert-info .alert-link {
+    color: rgb(235, 223, 203);
+}
+.alert-warning {
+    color: rgb(255, 227, 138);
+    background-color: rgb(81, 65, 17);
+    border-color: rgb(122, 96, 25);
+}
+.alert-warning hr {
+    border-top-color: rgb(129, 102, 26);
+}
+.alert-warning .alert-link {
+    color: rgb(225, 212, 192);
+}
+.alert-danger {
+    color: rgb(223, 152, 146);
+    background-color: rgb(59, 19, 20);
+    border-color: rgb(91, 29, 31);
+}
+.alert-danger hr {
+    border-top-color: rgb(96, 31, 34);
+}
+.alert-danger .alert-link {
+    color: rgb(223, 211, 190);
+}
+.alert-light {
+    color: rgb(166, 153, 132);
+    background-color: rgb(28, 28, 27);
+    border-color: rgb(40, 38, 59);
+}
+.alert-light hr {
+    border-top-color: rgb(41, 39, 64);
+}
+.alert-light .alert-link {
+    color: rgb(181, 169, 148);
+}
+.alert-dark {
+    color: rgb(234, 222, 202);
+    background-color: rgb(52, 53, 50);
+    border-color: rgb(72, 73, 69);
+}
+.alert-dark hr {
+    border-top-color: rgb(76, 77, 73);
+}
+.alert-dark .alert-link {
+    color: rgb(252, 241, 221);
+}
+.progress {
+    background-color: rgb(40, 40, 38);
+}
+.progress-bar {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+}
+.progress-bar-striped {
+    background-image: linear-gradient(45deg,
+    rgba(27, 27, 26, 0.15) 25%,
+    rgba(0, 0, 0, 0) 25%,
+    rgba(0, 0, 0, 0) 50%,
+    rgba(27, 27, 26, 0.15) 50%,
+    rgba(27, 27, 26, 0.15) 75%,
+    rgba(0, 0, 0, 0) 75%,
+    rgba(0, 0, 0, 0));
+}
+.list-group-item-action {
+    color: rgb(198, 186, 166);
+}
+.list-group-item-action:focus,
+.list-group-item-action:hover {
+    color: rgb(198, 186, 166);
+    text-decoration-color: initial;
+    background-color: rgb(31, 32, 30);
+}
+.list-group-item-action:active {
+    color: rgb(230, 218, 197);
+    background-color: rgb(40, 40, 38);
+}
+.list-group-item {
+    background-color: rgb(27, 27, 26);
+    border-color: rgba(151, 138, 117, 0.13);
+}
+.list-group-item.disabled,
+.list-group-item:disabled {
+    color: rgb(172, 159, 138);
+    background-color: rgb(27, 27, 26);
+}
+.list-group-item.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+    border-color: rgb(30, 87, 146);
+}
+.list-group-flush .list-group-item {
+    border-right-color: initial;
+    border-left-color: initial;
+}
+.list-group-flush:first-child .list-group-item:first-child {
+    border-top-color: initial;
+}
+.list-group-flush:last-child .list-group-item:last-child {
+    border-bottom-color: initial;
+}
+.list-group-item-primary {
+    color: rgb(161, 202, 230);
+    background-color: rgb(50, 51, 48);
+}
+.list-group-item-primary.list-group-item-action:focus,
+.list-group-item-primary.list-group-item-action:hover {
+    color: rgb(161, 202, 230);
+    background-color: rgb(58, 58, 55);
+}
+.list-group-item-primary.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(18, 52, 87);
+    border-color: rgb(36, 105, 176);
+}
+.list-group-item-secondary {
+    color: rgb(212, 200, 179);
+    background-color: rgb(52, 53, 49);
+}
+.list-group-item-secondary.list-group-item-action:focus,
+.list-group-item-secondary.list-group-item-action:hover {
+    color: rgb(212, 200, 179);
+    background-color: rgb(60, 61, 58);
+}
+.list-group-item-secondary.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(52, 52, 49);
+    border-color: rgb(129, 118, 101);
+}
+.list-group-item-success {
+    color: rgb(188, 233, 176);
+    background-color: rgb(44, 71, 49);
+}
+.list-group-item-success.list-group-item-action:focus,
+.list-group-item-success.list-group-item-action:hover {
+    color: rgb(188, 233, 176);
+    background-color: rgb(50, 81, 56);
+}
+.list-group-item-success.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(32, 67, 34);
+    border-color: rgb(81, 170, 87);
+}
+.list-group-item-info {
+    color: rgb(182, 233, 226);
+    background-color: rgb(40, 71, 71);
+}
+.list-group-item-info.list-group-item-action:focus,
+.list-group-item-info.list-group-item-action:hover {
+    color: rgb(182, 233, 226);
+    background-color: rgb(47, 81, 81);
+}
+.list-group-item-info.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(28, 66, 68);
+    border-color: rgb(72, 169, 176);
+}
+.list-group-item-warning {
+    color: rgb(255, 227, 138);
+    background-color: rgb(91, 73, 19);
+}
+.list-group-item-warning.list-group-item-action:focus,
+.list-group-item-warning.list-group-item-action:hover {
+    color: rgb(255, 227, 138);
+    background-color: rgb(106, 85, 22);
+}
+.list-group-item-warning.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(105, 84, 24);
+    border-color: rgb(206, 163, 46);
+}
+.list-group-item-danger {
+    color: rgb(223, 152, 146);
+    background-color: rgb(68, 22, 23);
+}
+.list-group-item-danger.list-group-item-action:focus,
+.list-group-item-danger.list-group-item-action:hover {
+    color: rgb(223, 152, 146);
+    background-color: rgb(79, 25, 28);
+}
+.list-group-item-danger.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(81, 31, 32);
+    border-color: rgb(153, 59, 61);
+}
+.list-group-item-light {
+    color: rgb(166, 153, 132);
+    background-color: rgb(28, 28, 27);
+}
+.list-group-item-light.list-group-item-action:focus,
+.list-group-item-light.list-group-item-action:hover {
+    color: rgb(166, 153, 132);
+    background-color: rgb(36, 37, 35);
+}
+.list-group-item-light.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(108, 109, 103);
+    border-color: rgb(94, 95, 91);
+}
+.list-group-item-dark {
+    color: rgb(234, 222, 202);
+    background-color: rgb(62, 63, 60);
+}
+.list-group-item-dark.list-group-item-action:focus,
+.list-group-item-dark.list-group-item-action:hover {
+    color: rgb(234, 222, 202);
+    background-color: rgb(70, 71, 68);
+}
+.list-group-item-dark.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(26, 25, 24);
+    border-color: rgb(140, 129, 109);
+}
+.close {
+    color: rgb(255, 244, 224);
+    text-shadow: rgb(27, 27, 26) 0px 1px 0px;
+}
+.close:hover {
+    color: rgb(255, 244, 224);
+    text-decoration-color: initial;
+}
+button.close {
+    background-color: transparent;
+    border-color: initial;
+}
+.toast {
+    background-color: rgba(27, 27, 26, 0.85);
+    border-color: rgba(151, 138, 117, 0.1);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25rem 0.75rem;
+}
+.toast-header {
+    color: rgb(172, 159, 138);
+    background-color: rgba(27, 27, 26, 0.85);
+    border-bottom-color: rgba(151, 138, 117, 0.05);
+}
+.modal {
+    outline-color: initial;
+}
+.modal-content {
+    background-color: rgb(27, 27, 26);
+    border-color: rgba(151, 138, 117, 0.2);
+    outline-color: initial;
+}
+.modal-backdrop {
+    background-color: rgb(0, 0, 0);
+}
+.modal-header {
+    border-bottom-color: rgb(63, 64, 61);
+}
+.modal-footer {
+    border-top-color: rgb(63, 64, 61);
+}
+.tooltip {
+    text-decoration-color: initial; text-shadow: none;
+}
+.tooltip .arrow::before {
+    border-color: transparent;
+}
+.bs-tooltip-auto[x-placement^="top"] .arrow::before,
+.bs-tooltip-top .arrow::before {
+    border-top-color: rgb(151, 138, 117);
+}
+.bs-tooltip-auto[x-placement^="right"] .arrow::before,
+.bs-tooltip-right .arrow::before {
+    border-right-color: rgb(151, 138, 117);
+}
+.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
+.bs-tooltip-bottom .arrow::before {
+    border-bottom-color: rgb(151, 138, 117);
+}
+.bs-tooltip-auto[x-placement^="left"] .arrow::before,
+.bs-tooltip-left .arrow::before {
+    border-left-color: rgb(151, 138, 117);
+}
+.tooltip-inner {
+    color: rgb(255, 244, 224);
+    background-color: rgb(0, 0, 0);
+}
+.popover {
+    text-decoration-color: initial;
+    text-shadow: none;
+    background-color: rgb(27, 27, 26);
+    border-color: rgba(151, 138, 117, 0.2);
+}
+.popover .arrow::after, .popover .arrow::before {
+    border-color: transparent;
+}
+.bs-popover-auto[x-placement^="top"] > .arrow::before,
+.bs-popover-top > .arrow::before {
+    border-top-color: rgba(151, 138, 117, 0.25);
+}
+.bs-popover-auto[x-placement^="top"] > .arrow::after,
+.bs-popover-top > .arrow::after {
+    border-top-color: rgb(54, 55, 52);
+}
+.bs-popover-auto[x-placement^="right"] > .arrow::before,
+.bs-popover-right > .arrow::before {
+    border-right-color: rgba(151, 138, 117, 0.25);
+}
+.bs-popover-auto[x-placement^="right"] > .arrow::after,
+.bs-popover-right > .arrow::after {
+    border-right-color: rgb(54, 55, 52);
+}
+.bs-popover-auto[x-placement^="bottom"] > .arrow::before,
+.bs-popover-bottom > .arrow::before {
+    border-bottom-color: rgba(151, 138, 117, 0.25);
+}
+.bs-popover-auto[x-placement^="bottom"] > .arrow::after,
+.bs-popover-bottom > .arrow::after {
+    border-bottom-color: rgb(54, 55, 52);
+}
+.bs-popover-auto[x-placement^="bottom"] .popover-header::before,
+.bs-popover-bottom .popover-header::before {
+    border-bottom-color: rgb(57, 57, 55);
+}
+.bs-popover-auto[x-placement^="left"] > .arrow::before,
+.bs-popover-left > .arrow::before {
+    border-left-color: rgba(151, 138, 117, 0.25);
+}
+.bs-popover-auto[x-placement^="left"] > .arrow::after,
+.bs-popover-left > .arrow::after {
+    border-left-color: rgb(54, 55, 52);
+}
+.popover-header {
+    background-color: rgb(33, 33, 31);
+    border-bottom-color: rgb(61, 61, 58);
+}
+.popover-body {
+    color: rgb(230, 218, 197);
+}
+.carousel-control-next,
+.carousel-control-prev {
+    color: rgb(255, 244, 224);
+}
+.carousel-control-next:focus,
+.carousel-control-next:hover,
+.carousel-control-prev:focus,
+.carousel-control-prev:hover {
+    color: rgb(255, 244, 224);
+    text-decoration-color: initial;
+    outline-color: initial;
+}
+.carousel-control-next-icon,
+.carousel-control-prev-icon {
+    background-image: initial;
+    background-color: initial;
+}
+.carousel-control-prev-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
+}
+.carousel-control-next-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
+}
+.carousel-indicators {
+    list-style-image: initial;
+}
+.carousel-indicators li {
+    background-color: rgb(27, 27, 26);
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+}
+.carousel-caption {
+    color: rgb(255, 244, 224);
+}
+.spinner-border {
+    border-color: currentcolor transparent currentcolor currentcolor;
+}
+.spinner-grow {
+    background-color: currentcolor;
+}
+.bg-primary {
+    background-color: rgb(34, 99, 167) !important;
+}
+a.bg-primary:focus,
+a.bg-primary:hover,
+button.bg-primary:focus,
+button.bg-primary:hover {
+    background-color: rgb(27, 79, 133) !important;
+}
+.bg-secondary {
+    background-color: rgb(100, 100, 96) !important;
+}
+a.bg-secondary:focus,
+a.bg-secondary:hover,
+button.bg-secondary:focus,
+button.bg-secondary:hover {
+    background-color: rgb(78, 78, 74) !important;
+}
+.bg-success {
+    background-color: rgb(60, 127, 65) !important;
+}
+a.bg-success:focus,
+a.bg-success:hover,
+button.bg-success:focus,
+button.bg-success:hover {
+    background-color: rgb(45, 96, 49) !important;
+}
+.bg-info {
+    background-color: rgb(53, 127, 131) !important;
+}
+a.bg-info:focus,
+a.bg-info:hover,
+button.bg-info:focus,
+button.bg-info:hover {
+    background-color: rgb(40, 96, 99) !important;
+}
+.bg-warning {
+    background-color: rgb(198, 157, 40) !important;
+}
+a.bg-warning:focus,
+a.bg-warning:hover,
+button.bg-warning:focus,
+button.bg-warning:hover {
+    background-color: rgb(167, 132, 34) !important;
+}
+.bg-danger {
+    background-color: rgb(144, 46, 49) !important;
+}
+a.bg-danger:focus,
+a.bg-danger:hover,
+button.bg-danger:focus,
+button.bg-danger:hover {
+    background-color: rgb(132, 41, 45) !important;
+}
+.bg-light {
+    background-color: rgb(31, 32, 30) !important;
+}
+a.bg-light:focus,
+a.bg-light:hover,
+button.bg-light:focus,
+button.bg-light:hover {
+    background-color: rgb(47, 48, 45) !important;
+}
+.bg-dark {
+    background-color: rgb(50, 50, 47) !important;
+}
+a.bg-dark:focus,
+a.bg-dark:hover,
+button.bg-dark:focus,
+button.bg-dark:hover {
+    background-color: rgb(27, 28, 27) !important;
+}
+.bg-white {
+    background-color: rgb(27, 27, 26) !important;
+}
+.bg-transparent {
+    background-color: transparent !important;
+}
+.border {
+    border-color: rgb(63, 64, 61) !important;
+}
+.border-top {
+    border-top-color: rgb(63, 64, 61) !important;
+}
+.border-right {
+    border-right-color: rgb(63, 64, 61) !important;
+}
+.border-bottom {
+    border-bottom-color: rgb(63, 64, 61) !important;
+}
+.border-left {
+    border-left-color: rgb(63, 64, 61) !important;
+}
+.border-0 {
+    border-color: initial !important;
+}
+.border-top-0 {
+    border-top-color: initial !important;
+}
+.border-right-0 {
+    border-right-color: initial !important;
+}
+.border-bottom-0 {
+    border-bottom-color: initial !important;
+}
+.border-left-0 {
+    border-left-color: initial !important;
+}
+.border-primary {
+    border-color: rgb(30, 87, 146) !important;
+}
+.border-secondary {
+    border-color: rgb(110, 100, 85) !important;
+}
+.border-success {
+    border-color: rgb(70, 148, 75) !important;
+}
+.border-info {
+    border-color: rgb(62, 148, 152) !important;
+}
+.border-warning {
+    border-color: rgb(174, 138, 36) !important;
+}
+.border-danger {
+    border-color: rgb(129, 41, 44) !important;
+}
+.border-light {
+    border-color: rgb(57, 57, 54) !important;
+}
+.border-dark {
+    border-color: rgb(130, 119, 101) !important;
+}
+.border-white {
+    border-color: rgb(54, 55, 52) !important;
+}
+.embed-responsive .embed-responsive-item,
+.embed-responsive embed,
+.embed-responsive iframe,
+.embed-responsive object,
+.embed-responsive video {
+    border-color: initial;
+}
+.sr-only {
+    border-color: initial;
+}
+.shadow-sm {
+    box-shadow: rgba(0, 0, 0, 0.07) 0px 0.125rem 0.25rem !important;
+}
+.shadow {
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 0.5rem 1rem !important;
+}
+.shadow-lg {
+    box-shadow: rgba(0, 0, 0, 0.18) 0px 1rem 3rem !important;
+}
+.shadow-none {
+    box-shadow: none !important;
+}
+.stretched-link::after {
+    background-color: rgba(0, 0, 0, 0);
+}
+.text-white {
+    color: rgb(255, 244, 224) !important;
+}
+.text-primary {
+    color: rgb(94, 165, 219) !important;
+}
+a.text-primary:focus,
+a.text-primary:hover {
+    color: rgb(136, 189, 226) !important;
+}
+.text-secondary {
+    color: rgb(172, 159, 138) !important;
+}
+a.text-secondary:focus,
+a.text-secondary:hover {
+    color: rgb(199, 187, 167) !important;
+}
+.text-success {
+    color: rgb(136, 213, 134) !important;
+}
+a.text-success:focus,
+a.text-success:hover {
+    color: rgb(176, 229, 167) !important;
+}
+.text-info {
+    color: rgb(128, 212, 213) !important;
+}
+a.text-info:focus,
+a.text-info:hover {
+    color: rgb(171, 228, 223) !important;
+}
+.text-warning {
+    color: rgb(255, 208, 75) !important;
+}
+a.text-warning:focus,
+a.text-warning:hover {
+    color: rgb(255, 220, 109) !important;
+}
+.text-danger {
+    color: rgb(203, 91, 92) !important;
+}
+a.text-danger:focus,
+a.text-danger:hover {
+    color: rgb(214, 115, 113) !important;
+}
+.text-light {
+    color: rgb(251, 240, 219) !important;
+}
+a.text-light:focus,
+a.text-light:hover {
+    color: rgb(224, 211, 191) !important;
+}
+.text-dark {
+    color: rgb(214, 202, 181) !important;
+}
+a.text-dark:focus,
+a.text-dark:hover {
+    color: rgb(241, 229, 209) !important;
+}
+.text-body {
+    color: rgb(230, 218, 197) !important;
+}
+.text-muted {
+    color: rgb(172, 159, 138) !important;
+}
+.text-black-50 {
+    color: rgba(255, 244, 224, 0.5) !important;
+}
+.text-white-50 {
+    color: rgba(255, 244, 224, 0.5) !important;
+}
+.text-hide {
+    color: transparent; text-shadow: none; background-color: transparent; border-color: initial;
+}
+.text-decoration-none {
+    text-decoration-color: initial !important;
+}
+.text-reset {
+    color: inherit !important;
+}
+code[class*="language-"], pre[class*="language-"] {
+    color: rgb(255, 244, 224);
+    background-image: none;
+    background-color: initial;
+    text-shadow: rgb(27, 27, 26) 0px 1px;
+}
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    text-shadow: none;
+    background-image: initial;
+    background-color: rgb(52, 53, 50);
+}
+:not(pre) > code[class*="language-"], pre[class*="language-"] {
+    background-image: initial;
+    background-color: rgb(42, 34, 28);
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: rgb(165, 152, 131);
+}
+.token.punctuation {
+    color: rgb(183, 170, 149);
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+    color: rgb(241, 124, 173);
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+    color: rgb(230, 255, 129);
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+    color: rgb(206, 171, 123);
+    background-image: initial;
+    background-color: rgba(27, 27, 26, 0.5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+    color: rgb(131, 207, 228);
+}
+.token.function,
+.token.class-name {
+    color: rgb(208, 106, 115);
+}
+.token.regex,
+.token.important,
+.token.variable {
+    color: rgb(251, 189, 77);
+}
+.nuxt-progress {
+    background-color: rgb(0, 0, 0);
+}
+.nuxt-progress-failed {
+    background-color: rgb(167, 21, 17);
+}
+.nuxt__build_indicator[data-v-71e9e103] {
+    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px 0px;
+}
+.hr {
+    background-image: initial;
+    background-color: rgba(27, 27, 26, 0.2);
+}
+.info p {
+    color: rgb(165, 152, 131);
+}
+.info li {
+    color: rgb(255, 244, 224);
+}
+#fb::before {
+    background-image: initial;
+    background-color: rgb(62, 75, 105);
+}
+#ig::before {
+    background-image: initial;
+    background-color: rgb(155, 103, 31);
+}
+#tw::before {
+    background-image: initial;
+    background-color: rgb(42, 91, 125);
+}
+#yt::before {
+    background-image: initial;
+    background-color: rgb(139, 53, 44);
+}
+#gh::before {
+    background-image: initial;
+    background-color: rgb(33, 35, 35);
+}
+#media ul {
+    list-style-image: initial;
+}
+div #no-h,
+#personal a,
+a:hover,
+#media a,
+a:hover,
+#address a,
+a:hover {
+    color: inherit;
+    text-decoration-color: initial;
+}
+nav {
+    background-image: initial;
+    background-color: rgb(13, 13, 12);
+}
+nav #brand a {
+    color: rgb(255, 244, 224);
+}
+nav #brand a:hover {
+    text-decoration-color: initial;
+}
+nav #menu li a {
+    color: rgb(255, 244, 224);
+}
+nav #menu li a:hover {
+    text-decoration-color: initial;
+}
+#menu-item-4:hover {
+    text-decoration-color: initial !important;
+}
+#resize {
+    background-image: initial;
+    background-color: rgb(13, 13, 12);
+}
+#resize #menu li a {
+    color: rgb(255, 244, 224);
+}
+#resize #menu li a:hover {
+    text-decoration-color: initial;
+}
+.vertical {
+    border-left-color: rgb(54, 55, 52);
+}
+#contact-form ul {
+    list-style-image: initial;
+}
+#contact-form li:last-of-type {
+    border-bottom-color: initial;
+}
+#contact-form label {
+    color: rgb(183, 170, 149);
+}
+#contact-form input,
+#contact-form textarea {
+    border-color: initial;
+    background-image: initial;
+    background-color: transparent;
+    color: rgb(255, 244, 224);
+}
+input:focus {
+    outline-color: initial;
+    border-color: initial;
+}
+textarea:focus {
+    outline-color: initial;
+    border-color: initial;
+}
+.textarea {
+    border-bottom-color: rgb(65, 65, 62);
+}
+.send {
+    background-image: initial;
+    background-color: transparent;
+    color: rgb(233, 221, 200);
+}
+.send:hover {
+    background-image: initial;
+    background-color: rgb(48, 48, 46);
+    color: rgb(244, 232, 212);
+}
+.mobile-txt2 {
+    color: rgb(255, 244, 224);
+}
+.line {
+    border-right-color: rgba(54, 55, 52, 0.75);
+}
+.scroll-down {
+    text-decoration-color: initial;
+    border-bottom-color: rgb(54, 55, 52);
+    border-right-color: rgb(54, 55, 52);
+}
+.prev,
+.next p {
+    color: rgb(165, 152, 131);
+}
+.image {
+    background-image: url("https://images.unsplash.com/photo-1540885762261-a2ca01f290f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2468&q=80");
+    background-color: initial;
+}
+.hero-content p {
+    color: rgb(165, 152, 131);
+}
+html,
+body {
+    background-image: initial !important;
+    background-color: rgb(13, 13, 12) !important;
+    color: rgb(255, 244, 224) !important;
+}
+.logo[data-v-51704dc2] {
+    color: rgb(255, 244, 224);
+}
+.logo a[data-v-51704dc2] {
+    color: rgb(255, 244, 224);
+    text-decoration-color: initial;
+}
+nav ul li a[data-v-51704dc2] {
+    outline-color: initial;
+    color: rgb(255, 244, 224);
+    text-decoration-color: initial;
+}
+@media screen and (max-width: 864px) {
+    .nav-wrapper[data-v-51704dc2] {
+        background-image: initial;
+        background-color: rgb(13, 13, 12);
+    }
+    .nav-wrapper ul li a[data-v-51704dc2] {
+        color: rgb(255, 244, 224);
+    }
+    .nav-btn i[data-v-51704dc2] {
+        background-image: initial;
+        background-color: rgb(27, 27, 26);
+    }
+}
+#nav:checked + .nav-btn i[data-v-51704dc2] {
+    background-image: initial;
+    background-color: rgb(27, 27, 26);
+}
+
+/* Override Style */
+.vimvixen-hint {
+    background-color: #775707 !important;
+    border-color: #dab73c !important;
+    color: #fff6cd !important;
+}
+::placeholder {
+    opacity: 0.5 !important;
+}
diff --git a/assets/styles/components/category-section.scss b/assets/styles/components/category-section.scss
new file mode 100644
index 0000000..893a91b
--- /dev/null
+++ b/assets/styles/components/category-section.scss
@@ -0,0 +1,17 @@
+@media(max-width: 768px) {
+  .project {
+    width: 90% !important;
+    margin: 14px auto;
+  }
+
+  .vertical {
+    display: none;
+  }
+
+  .project1::after, .project2::after, .project3::after, .project4::after,
+  .graphic1::after, .graphic2::after, .graphic3::after, .graphic4::after,
+  .render1::after, .render2::after, .render3::after, .render4::after,
+  .category1::after, .category2::after, .category3::after, .category4::after {
+    display: none;
+  }
+}
diff --git a/assets/styles/components/contact-form.scss b/assets/styles/components/contact-form.scss
new file mode 100644
index 0000000..ef48d1c
--- /dev/null
+++ b/assets/styles/components/contact-form.scss
@@ -0,0 +1,70 @@
+#contact-form {
+  margin: 5% 1.4%;
+}
+
+#contact-form ul {
+  list-style: none;
+  border-radius: 5px;
+  margin-bottom: 40px;
+}
+
+#contact-form li {
+  padding: 10px;
+}
+
+#contact-form li:last-of-type {
+  border-bottom: none;
+}
+
+#contact-form label {
+  display: block;
+  font-size: .8em;
+  color: #999;
+  padding-left: 5px;
+}
+
+#contact-form input, #contact-form textarea {
+  width: 100%;
+  padding: 5px;
+  border: none;
+  resize: vertical;
+  background: transparent;
+  color: #fff;
+  font-weight: bolder;
+}
+
+input:focus {
+  outline: none;
+  border: none;
+}
+
+textarea:focus {
+  outline: none;
+  border: none;
+}
+
+.textarea {
+  border-bottom: 1px solid #dfdfdf;
+}
+
+.send {
+  margin-left: 50px;
+  text-transform: uppercase;
+  padding: 20px 30px;
+  background: transparent;
+  color: #dfdfdf;
+  font-size: 14px;
+  letter-spacing: 2px;
+}
+
+.send:hover {
+  background: #dfdfdf;
+  color: #101010;
+}
+
+@media(max-width: 768px) {
+  #contact-form {
+    margin: 5% -8%;
+    width: 98%;
+  }
+}
diff --git a/assets/styles/components/footer.scss b/assets/styles/components/footer.scss
new file mode 100644
index 0000000..e0df638
--- /dev/null
+++ b/assets/styles/components/footer.scss
@@ -0,0 +1,115 @@
+.collab {
+  text-align: right;
+}
+
+.collab p {
+  font-weight: lighter !important;
+  margin-bottom: 20px;
+}
+
+.hr {
+  background: rgba(255, 255, 255, 0.2);
+  height: 1px;
+}
+
+.info h4 {
+  font-size: 18px;
+  font-weight: lighter;
+}
+
+.info p {
+  color: grey;
+  font-weight: lighter;
+}
+
+.info li {
+  font-weight: lighter;
+  color: #fff;
+  font-size: 18px;
+  padding-left: 20px;
+}
+
+#fb::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #3b5998;
+}
+
+
+#ig::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #fcaf45;
+}
+
+
+#tw::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #55acee;
+}
+
+
+#yt::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #c4302b;
+}
+
+#gh::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #24292e;
+}
+
+#media, #address {
+  text-align: right;
+}
+
+#media ul {
+  list-style: none;
+}
+
+#media ul li {
+  display: inline-block;
+}
+
+@media(max-width: 768px) {
+  .collab, #personal, #media, #address {
+    text-align: center;
+  }
+
+  .info ul {
+    margin: 0 0 0 -22px;
+    padding: 0;
+  }
+}
+
+/* Honestly, this took way longer to figure out than it should've. I scoured the internet for so long, at one point, I think
+// I had around 20+ tabs open, no idea how I really figured it out, just tried as many solutions until it was solved. - 17:27, 10/20/2018
+*/
+div #no-h, #personal a, a:hover, #media a, a:hover, #address a, a:hover {
+  color: inherit;
+  text-decoration: none;
+  transition: 0.5s;
+}
diff --git a/assets/styles/components/hero.scss b/assets/styles/components/hero.scss
new file mode 100644
index 0000000..db99439
--- /dev/null
+++ b/assets/styles/components/hero.scss
@@ -0,0 +1,19 @@
+.hero {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero h1 {
+  font-weight: lighter;
+  text-align: center;
+  letter-spacing: -2px;
+  line-height: 58px;
+}
+
+@media(max-width: 768px) {
+  .header h1 {
+    font-size: 26px;
+  }
+}
diff --git a/assets/styles/components/navgiation.scss b/assets/styles/components/navgiation.scss
new file mode 100644
index 0000000..53ff6b8
--- /dev/null
+++ b/assets/styles/components/navgiation.scss
@@ -0,0 +1,178 @@
+nav {
+  width: 100%;
+  background: #0f0f0f;
+  height: 80px;
+  position: fixed;
+  z-index: 1;
+}
+
+nav #brand {
+  float: left;
+  display: block;
+  margin-left: 82px;
+  line-height: 80px;
+  font-weight: bold;
+}
+
+nav #brand a {
+  color: #fff;
+  transition: all 0.3s ease-out;
+}
+
+nav #brand a:hover {
+  text-decoration: none;
+}
+
+nav #menu {
+  float: left;
+  right: 80px;
+  position: fixed;
+}
+
+nav #menu li {
+  padding-left: 30px; /* 40px */
+  display: inline-block;
+  cursor: pointer;
+  font-weight: 300;
+  line-height: 80px;
+  position: relative;
+  transition: all 0.3s ease-out;
+}
+
+nav #menu li span {
+  font-weight: 700;
+}
+
+nav #menu li a {
+  color: #fff;
+  transition: 0.5s;
+}
+
+nav #menu li a:hover {
+  text-decoration: none;
+  transition: 0.5s;
+}
+
+#menu-item-1:hover { letter-spacing: 1px; font-family: cursive; }
+#menu-item-2:hover { font-weight: bold; font-family: monospace; }
+#menu-item-3:hover { font-style: italic; font-family: Arial, Helvetica, sans-serif; }
+#menu-item-4:hover { text-decoration: underline !important; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; }
+#menu-item-5:hover { font-style: bold; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; }
+
+#toggle {
+  position: absolute;
+  right: 30px;
+  top: 20px;
+  font-weight: 300;
+  z-index: 2;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  float: right;
+  transition: all 0.3s ease-out;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.close-btn {
+  position: absolute;
+  right: 16px;
+  font-weight: 300;
+  z-index: 2;
+  cursor: pointer;
+  top: -2px;
+  line-height: 80px;
+}
+
+#resize {
+  z-index: 1;
+  top: 0; // px
+  position: fixed;
+  background: #0f0f0f;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  opacity: 0;
+  transition: all 1s ease-out;
+}
+
+#resize #menu {
+  height: 90px;
+  position: absolute;
+  left: 43%;
+  transform: translateX(-40%);
+  text-align: center;
+  display: table-cell;
+  vertical-align: center;
+}
+
+#resize #menu li {
+  display: block;
+  text-align: center;
+  padding: 10px 0;
+  font-size: 50px;
+  min-height: 50px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease-out;
+}
+
+#resize li:nth-child(1) {
+  margin-top: 100px; /* 140px */
+}
+
+#resize #menu li a {
+  color: #fff;
+}
+
+#resize #menu li a:hover {
+  text-decoration: none;
+}
+
+#resize.active {
+  visibility: visible;
+  opacity: 1;
+}
+
+@media(max-width: 768px) {
+  #toggle {
+    visibility: visible;
+    opacity: 1;
+    margin-top: 6px;
+    margin-right: 4px;
+  }
+
+  nav #brand {
+    margin-left: 24px;
+  }
+
+  #menu a {
+    font-size: 20px;
+    font-weight: 300;
+  }
+
+  #resize li span {
+    font-weight: bolder;
+  }
+
+  nav #menu {
+    display: none;
+  }
+}
+
+@media(min-width: 768px) {
+  #resize {
+    visibility: hidden !important;
+  }
+}
+
+/* .blur {
+	position: fixed;
+	top: 0;
+	width: 100%;
+	min-height: 50px;
+	margin-bottom: 20px;
+	background: rgba(15, 15, 15, 1);
+	z-index: 1010;
+	filter: blur(20px);
+} */
diff --git a/assets/styles/components/project-section.scss b/assets/styles/components/project-section.scss
new file mode 100644
index 0000000..7ba669a
--- /dev/null
+++ b/assets/styles/components/project-section.scss
@@ -0,0 +1,15 @@
+h6 {
+  text-align: center;
+}
+
+.vertical {
+  margin-top: 40px;
+  border-left: 1px solid #fff;
+  height: 80px;
+  position: absolute;
+  left: 50%;
+}
+
+.project {
+  height: 500px;
+}
diff --git a/assets/styles/extra/animate.scss b/assets/styles/extra/animate.scss
new file mode 100644
index 0000000..60f0c96
--- /dev/null
+++ b/assets/styles/extra/animate.scss
@@ -0,0 +1,2744 @@
+@charset "UTF-8";
+
+
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license
+
+Copyright (c) 2013 Daniel Eden
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+@-webkit-keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  40% {
+    -webkit-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  60% {
+    -webkit-transform: translateY(-15px);
+    transform: translateY(-15px);
+  }
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  40% {
+    -webkit-transform: translateY(-30px);
+    -ms-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  60% {
+    -webkit-transform: translateY(-15px);
+    -ms-transform: translateY(-15px);
+    transform: translateY(-15px);
+  }
+}
+
+.bounce {
+  -webkit-animation-name: bounce;
+  animation-name: bounce;
+}
+
+@-webkit-keyframes flash {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+@keyframes flash {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+.flash {
+  -webkit-animation-name: flash;
+  animation-name: flash;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  50% {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  50% {
+    -webkit-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.pulse {
+  -webkit-animation-name: pulse;
+  animation-name: pulse;
+}
+
+@-webkit-keyframes shake {
+  0%, 100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+}
+
+@keyframes shake {
+  0%, 100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+}
+
+.shake {
+  -webkit-animation-name: shake;
+  animation-name: shake;
+}
+
+@-webkit-keyframes swing {
+  20% {
+    -webkit-transform: rotate(15deg);
+    transform: rotate(15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate(5deg);
+    transform: rotate(5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate(-5deg);
+    transform: rotate(-5deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes swing {
+  20% {
+    -webkit-transform: rotate(15deg);
+    -ms-transform: rotate(15deg);
+    transform: rotate(15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate(-10deg);
+    -ms-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate(5deg);
+    -ms-transform: rotate(5deg);
+    transform: rotate(5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate(-5deg);
+    -ms-transform: rotate(-5deg);
+    transform: rotate(-5deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}
+
+.swing {
+  -webkit-transform-origin: top center;
+  -ms-transform-origin: top center;
+  transform-origin: top center;
+  -webkit-animation-name: swing;
+  animation-name: swing;
+}
+
+@-webkit-keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-3deg);
+    transform: scale(0.9) rotate(-3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale(1.1) rotate(3deg);
+    transform: scale(1.1) rotate(3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale(1.1) rotate(-3deg);
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  100% {
+    -webkit-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+@keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-3deg);
+    -ms-transform: scale(0.9) rotate(-3deg);
+    transform: scale(0.9) rotate(-3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale(1.1) rotate(3deg);
+    -ms-transform: scale(1.1) rotate(3deg);
+    transform: scale(1.1) rotate(3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale(1.1) rotate(-3deg);
+    -ms-transform: scale(1.1) rotate(-3deg);
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  100% {
+    -webkit-transform: scale(1) rotate(0);
+    -ms-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+.tada {
+  -webkit-animation-name: tada;
+  animation-name: tada;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes wobble {
+  0% {
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  15% {
+    -webkit-transform: translateX(-25%) rotate(-5deg);
+    transform: translateX(-25%) rotate(-5deg);
+  }
+
+  30% {
+    -webkit-transform: translateX(20%) rotate(3deg);
+    transform: translateX(20%) rotate(3deg);
+  }
+
+  45% {
+    -webkit-transform: translateX(-15%) rotate(-3deg);
+    transform: translateX(-15%) rotate(-3deg);
+  }
+
+  60% {
+    -webkit-transform: translateX(10%) rotate(2deg);
+    transform: translateX(10%) rotate(2deg);
+  }
+
+  75% {
+    -webkit-transform: translateX(-5%) rotate(-1deg);
+    transform: translateX(-5%) rotate(-1deg);
+  }
+
+  100% {
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+}
+
+@keyframes wobble {
+  0% {
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  15% {
+    -webkit-transform: translateX(-25%) rotate(-5deg);
+    -ms-transform: translateX(-25%) rotate(-5deg);
+    transform: translateX(-25%) rotate(-5deg);
+  }
+
+  30% {
+    -webkit-transform: translateX(20%) rotate(3deg);
+    -ms-transform: translateX(20%) rotate(3deg);
+    transform: translateX(20%) rotate(3deg);
+  }
+
+  45% {
+    -webkit-transform: translateX(-15%) rotate(-3deg);
+    -ms-transform: translateX(-15%) rotate(-3deg);
+    transform: translateX(-15%) rotate(-3deg);
+  }
+
+  60% {
+    -webkit-transform: translateX(10%) rotate(2deg);
+    -ms-transform: translateX(10%) rotate(2deg);
+    transform: translateX(10%) rotate(2deg);
+  }
+
+  75% {
+    -webkit-transform: translateX(-5%) rotate(-1deg);
+    -ms-transform: translateX(-5%) rotate(-1deg);
+    transform: translateX(-5%) rotate(-1deg);
+  }
+
+  100% {
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+}
+
+.wobble {
+  -webkit-animation-name: wobble;
+  animation-name: wobble;
+}
+
+@-webkit-keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.05);
+    transform: scale(1.05);
+  }
+
+  70% {
+    -webkit-transform: scale(.9);
+    transform: scale(.9);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    -ms-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.05);
+    -ms-transform: scale(1.05);
+    transform: scale(1.05);
+  }
+
+  70% {
+    -webkit-transform: scale(.9);
+    -ms-transform: scale(.9);
+    transform: scale(.9);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.bounceIn {
+  -webkit-animation-name: bounceIn;
+  animation-name: bounceIn;
+}
+
+@-webkit-keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(30px);
+    -ms-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(-10px);
+    -ms-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.bounceInDown {
+  -webkit-animation-name: bounceInDown;
+  animation-name: bounceInDown;
+}
+
+@-webkit-keyframes bounceInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(30px);
+    transform: translateX(30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes bounceInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(30px);
+    -ms-transform: translateX(30px);
+    transform: translateX(30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.bounceInLeft {
+  -webkit-animation-name: bounceInLeft;
+  animation-name: bounceInLeft;
+}
+
+@-webkit-keyframes bounceInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(-30px);
+    transform: translateX(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes bounceInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(-30px);
+    -ms-transform: translateX(-30px);
+    transform: translateX(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.bounceInRight {
+  -webkit-animation-name: bounceInRight;
+  animation-name: bounceInRight;
+}
+
+@-webkit-keyframes bounceInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(10px);
+    transform: translateY(10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounceInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(-30px);
+    -ms-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(10px);
+    -ms-transform: translateY(10px);
+    transform: translateY(10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.bounceInUp {
+  -webkit-animation-name: bounceInUp;
+  animation-name: bounceInUp;
+}
+
+@-webkit-keyframes bounceOut {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  25% {
+    -webkit-transform: scale(.95);
+    transform: scale(.95);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    transform: scale(.3);
+  }
+}
+
+@keyframes bounceOut {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  25% {
+    -webkit-transform: scale(.95);
+    -ms-transform: scale(.95);
+    transform: scale(.95);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    -ms-transform: scale(.3);
+    transform: scale(.3);
+  }
+}
+
+.bounceOut {
+  -webkit-animation-name: bounceOut;
+  animation-name: bounceOut;
+}
+
+@-webkit-keyframes bounceOutDown {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+@keyframes bounceOutDown {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+.bounceOutDown {
+  -webkit-animation-name: bounceOutDown;
+  animation-name: bounceOutDown;
+}
+
+@-webkit-keyframes bounceOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+@keyframes bounceOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+.bounceOutLeft {
+  -webkit-animation-name: bounceOutLeft;
+  animation-name: bounceOutLeft;
+}
+
+@-webkit-keyframes bounceOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes bounceOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(-20px);
+    -ms-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+.bounceOutRight {
+  -webkit-animation-name: bounceOutRight;
+  animation-name: bounceOutRight;
+}
+
+@-webkit-keyframes bounceOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes bounceOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+.bounceOutUp {
+  -webkit-animation-name: bounceOutUp;
+  animation-name: bounceOutUp;
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+
+@-webkit-keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInDownBig {
+  -webkit-animation-name: fadeInDownBig;
+  animation-name: fadeInDownBig;
+}
+
+@-webkit-keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    -ms-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+  animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInLeftBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInLeftBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInLeftBig {
+  -webkit-animation-name: fadeInLeftBig;
+  animation-name: fadeInLeftBig;
+}
+
+@-webkit-keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInRight {
+  -webkit-animation-name: fadeInRight;
+  animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInRightBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRightBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInRightBig {
+  -webkit-animation-name: fadeInRightBig;
+  animation-name: fadeInRightBig;
+}
+
+@-webkit-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}
+
+@-webkit-keyframes fadeInUpBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUpBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInUpBig {
+  -webkit-animation-name: fadeInUpBig;
+  animation-name: fadeInUpBig;
+}
+
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+}
+
+@keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+}
+
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+  animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutDownBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+@keyframes fadeOutDownBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+.fadeOutDownBig {
+  -webkit-animation-name: fadeOutDownBig;
+  animation-name: fadeOutDownBig;
+}
+
+@-webkit-keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+}
+
+@keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    -ms-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+}
+
+.fadeOutLeft {
+  -webkit-animation-name: fadeOutLeft;
+  animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutLeftBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+@keyframes fadeOutLeftBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+.fadeOutLeftBig {
+  -webkit-animation-name: fadeOutLeftBig;
+  animation-name: fadeOutLeftBig;
+}
+
+@-webkit-keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+}
+
+@keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+}
+
+.fadeOutRight {
+  -webkit-animation-name: fadeOutRight;
+  animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutRightBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes fadeOutRightBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+.fadeOutRightBig {
+  -webkit-animation-name: fadeOutRightBig;
+  animation-name: fadeOutRightBig;
+}
+
+@-webkit-keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+}
+
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+  animation-name: fadeOutUp;
+}
+
+@-webkit-keyframes fadeOutUpBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes fadeOutUpBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+.fadeOutUpBig {
+  -webkit-animation-name: fadeOutUpBig;
+  animation-name: fadeOutUpBig;
+}
+
+@-webkit-keyframes flip {
+  0% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+@keyframes flip {
+  0% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+.animated.flip {
+  -webkit-backface-visibility: visible;
+  -ms-backface-visibility: visible;
+  backface-visibility: visible;
+  -webkit-animation-name: flip;
+  animation-name: flip;
+}
+
+@-webkit-keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateX(-10deg);
+    transform: perspective(400px) rotateX(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateX(10deg);
+    transform: perspective(400px) rotateX(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    -ms-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateX(-10deg);
+    -ms-transform: perspective(400px) rotateX(-10deg);
+    transform: perspective(400px) rotateX(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateX(10deg);
+    -ms-transform: perspective(400px) rotateX(10deg);
+    transform: perspective(400px) rotateX(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    -ms-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+.flipInX {
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInX;
+  animation-name: flipInX;
+}
+
+@-webkit-keyframes flipInY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateY(-10deg);
+    transform: perspective(400px) rotateY(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateY(10deg);
+    transform: perspective(400px) rotateY(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes flipInY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    -ms-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateY(-10deg);
+    -ms-transform: perspective(400px) rotateY(-10deg);
+    transform: perspective(400px) rotateY(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateY(10deg);
+    -ms-transform: perspective(400px) rotateY(10deg);
+    transform: perspective(400px) rotateY(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    -ms-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+.flipInY {
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInY;
+  animation-name: flipInY;
+}
+
+@-webkit-keyframes flipOutX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    -ms-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    -ms-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutX {
+  -webkit-animation-name: flipOutX;
+  animation-name: flipOutX;
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+}
+
+@-webkit-keyframes flipOutY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    -ms-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    -ms-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutY {
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipOutY;
+  animation-name: flipOutY;
+}
+
+@-webkit-keyframes lightSpeedIn {
+  0% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: translateX(-20%) skewX(30deg);
+    transform: translateX(-20%) skewX(30deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: translateX(0%) skewX(-15deg);
+    transform: translateX(0%) skewX(-15deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes lightSpeedIn {
+  0% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    -ms-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: translateX(-20%) skewX(30deg);
+    -ms-transform: translateX(-20%) skewX(30deg);
+    transform: translateX(-20%) skewX(30deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: translateX(0%) skewX(-15deg);
+    -ms-transform: translateX(0%) skewX(-15deg);
+    transform: translateX(0%) skewX(-15deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    -ms-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+}
+
+.lightSpeedIn {
+  -webkit-animation-name: lightSpeedIn;
+  animation-name: lightSpeedIn;
+  -webkit-animation-timing-function: ease-out;
+  animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes lightSpeedOut {
+  0% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+}
+
+@keyframes lightSpeedOut {
+  0% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    -ms-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    -ms-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+}
+
+.lightSpeedOut {
+  -webkit-animation-name: lightSpeedOut;
+  animation-name: lightSpeedOut;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes rotateIn {
+  0% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(-200deg);
+    transform: rotate(-200deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateIn {
+  0% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(-200deg);
+    -ms-transform: rotate(-200deg);
+    transform: rotate(-200deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateIn {
+  -webkit-animation-name: rotateIn;
+  animation-name: rotateIn;
+}
+
+@-webkit-keyframes rotateInDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInDownLeft {
+  -webkit-animation-name: rotateInDownLeft;
+  animation-name: rotateInDownLeft;
+}
+
+@-webkit-keyframes rotateInDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInDownRight {
+  -webkit-animation-name: rotateInDownRight;
+  animation-name: rotateInDownRight;
+}
+
+@-webkit-keyframes rotateInUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInUpLeft {
+  -webkit-animation-name: rotateInUpLeft;
+  animation-name: rotateInUpLeft;
+}
+
+@-webkit-keyframes rotateInUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInUpRight {
+  -webkit-animation-name: rotateInUpRight;
+  animation-name: rotateInUpRight;
+}
+
+@-webkit-keyframes rotateOut {
+  0% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(200deg);
+    transform: rotate(200deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOut {
+  0% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(200deg);
+    -ms-transform: rotate(200deg);
+    transform: rotate(200deg);
+    opacity: 0;
+  }
+}
+
+.rotateOut {
+  -webkit-animation-name: rotateOut;
+  animation-name: rotateOut;
+}
+
+@-webkit-keyframes rotateOutDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownLeft {
+  -webkit-animation-name: rotateOutDownLeft;
+  animation-name: rotateOutDownLeft;
+}
+
+@-webkit-keyframes rotateOutDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownRight {
+  -webkit-animation-name: rotateOutDownRight;
+  animation-name: rotateOutDownRight;
+}
+
+@-webkit-keyframes rotateOutUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpLeft {
+  -webkit-animation-name: rotateOutUpLeft;
+  animation-name: rotateOutUpLeft;
+}
+
+@-webkit-keyframes rotateOutUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpRight {
+  -webkit-animation-name: rotateOutUpRight;
+  animation-name: rotateOutUpRight;
+}
+
+@-webkit-keyframes slideInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.slideInDown {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+
+@-webkit-keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.slideInLeft {
+  -webkit-animation-name: slideInLeft;
+  animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.slideInRight {
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+@keyframes slideOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+.slideOutLeft {
+  -webkit-animation-name: slideOutLeft;
+  animation-name: slideOutLeft;
+}
+
+@-webkit-keyframes slideOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes slideOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+.slideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+}
+
+@-webkit-keyframes slideOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes slideOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+.slideOutUp {
+  -webkit-animation-name: slideOutUp;
+  animation-name: slideOutUp;
+}
+
+@-webkit-keyframes hinge {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate(80deg);
+    transform: rotate(80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40% {
+    -webkit-transform: rotate(60deg);
+    transform: rotate(60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  80% {
+    -webkit-transform: rotate(60deg) translateY(0);
+    transform: rotate(60deg) translateY(0);
+    opacity: 1;
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  100% {
+    -webkit-transform: translateY(700px);
+    transform: translateY(700px);
+    opacity: 0;
+  }
+}
+
+@keyframes hinge {
+  0% {
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate(80deg);
+    -ms-transform: rotate(80deg);
+    transform: rotate(80deg);
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40% {
+    -webkit-transform: rotate(60deg);
+    -ms-transform: rotate(60deg);
+    transform: rotate(60deg);
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  80% {
+    -webkit-transform: rotate(60deg) translateY(0);
+    -ms-transform: rotate(60deg) translateY(0);
+    transform: rotate(60deg) translateY(0);
+    opacity: 1;
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  100% {
+    -webkit-transform: translateY(700px);
+    -ms-transform: translateY(700px);
+    transform: translateY(700px);
+    opacity: 0;
+  }
+}
+
+.hinge {
+  -webkit-animation-name: hinge;
+  animation-name: hinge;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-100%) rotate(-120deg);
+    transform: translateX(-100%) rotate(-120deg);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+}
+
+@keyframes rollIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-100%) rotate(-120deg);
+    -ms-transform: translateX(-100%) rotate(-120deg);
+    transform: translateX(-100%) rotate(-120deg);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    -ms-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+}
+
+.rollIn {
+  -webkit-animation-name: rollIn;
+  animation-name: rollIn;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollOut {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(100%) rotate(120deg);
+    transform: translateX(100%) rotate(120deg);
+  }
+}
+
+@keyframes rollOut {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    -ms-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(100%) rotate(120deg);
+    -ms-transform: translateX(100%) rotate(120deg);
+    transform: translateX(100%) rotate(120deg);
+  }
+}
+
+.rollOut {
+  -webkit-animation-name: rollOut;
+  animation-name: rollOut;
+}
diff --git a/assets/styles/extra/components/footer-effects.scss b/assets/styles/extra/components/footer-effects.scss
new file mode 100644
index 0000000..882573d
--- /dev/null
+++ b/assets/styles/extra/components/footer-effects.scss
@@ -0,0 +1,5 @@
+#info-item-1:hover { font-weight: bold; font-family: monospace; }
+#media-item-1:hover { text-decoration: underline !important; font-family: Arial, Helvetica, sans-serif; }
+#media-item-2:hover { font-style: italic; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; }
+#media-item-3:hover { letter-spacing: 1px; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; }
+#address-item-1:hover {font-style: italic; font-family: cursive; }
diff --git a/assets/styles/extra/mobile.scss b/assets/styles/extra/mobile.scss
new file mode 100644
index 0000000..6da0ac4
--- /dev/null
+++ b/assets/styles/extra/mobile.scss
@@ -0,0 +1,18 @@
+@media(min-width: 768px) {
+  .mobile-txt2 {
+    display: none;
+  }
+}
+
+@media(max-width: 768px) {
+  .mobile-txt3 {
+    display: none;
+  }
+}
+
+.mobile-txt2 {
+  content: "absence.";
+  font-family: "Roboto Mono", serif;
+  font-size: 16px;
+  color: #fff;
+}
diff --git a/assets/styles/extra/scroll-down-icon-animation.scss b/assets/styles/extra/scroll-down-icon-animation.scss
new file mode 100644
index 0000000..0a8ec5c
--- /dev/null
+++ b/assets/styles/extra/scroll-down-icon-animation.scss
@@ -0,0 +1,32 @@
+.scroll-down {
+  position: absolute;
+  left: 50%;
+  bottom: 100px;
+  display: block;
+  text-align: center;
+  font-size: 20px;
+  z-index: 0;
+  text-decoration: none;
+  text-shadow: 0;
+  width: 13px;
+  height: 13px;
+  border-bottom: 2px solid #fff;
+  border-right: 2px solid #fff;
+  -webkit-transform: translate(-50%, 0) rotate(45deg);
+  transform: translate(-50%, 0) rotate(45deg);
+  animation: fade_move_down 3s cubic-bezier(0.19, 1, 0.22, 1) infinite;
+}
+
+@keyframes fade_move_down {
+  0% {
+    transform: translate(0, -20px) rotate(45deg);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0, 20px) rotate(45deg);
+    opacity: 0;
+  }
+}
diff --git a/assets/styles/extra/scroll-indicator.scss b/assets/styles/extra/scroll-indicator.scss
new file mode 100644
index 0000000..e35abd9
--- /dev/null
+++ b/assets/styles/extra/scroll-indicator.scss
@@ -0,0 +1,32 @@
+.percent {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.2);
+  height: 140px;
+  width: 1px;
+  margin: -60px 0 0 40px;
+}
+
+/*---
+.percent {
+    position: fixed;
+    display: flex;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 100px;
+    flex-direction: column;
+    background: rgba(255, 255, 255, 0.2);
+    height: 140px;
+    width: 1px;
+}
+--*/
+
+.fill {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  transition: background 0.15s ease;
+}
diff --git a/assets/styles/extra/typewriter-effect.scss b/assets/styles/extra/typewriter-effect.scss
new file mode 100644
index 0000000..e96af76
--- /dev/null
+++ b/assets/styles/extra/typewriter-effect.scss
@@ -0,0 +1,41 @@
+.line {
+  width: 24em;
+  top: 50%;
+  margin: auto;
+  border-right: 2px solid rgba(255, 255, 255, 0.75);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  transform: translateY(-50%);
+}
+
+.anim-typewriter {
+  animation: typewriter 4s steps(46) 1s 1 normal both,
+  blinkTextCursor 500ms steps(46) infinite normal;
+}
+
+@keyframes typewriter {
+  from {
+    width: 0;
+  } to {
+      width: 11.5em; /* 11.5em */
+    }
+}
+
+@media(max-width: 768px) {
+  @keyframes typewriter {
+    from {
+      width: 0;
+    } to {
+        width: 10.5em; /* 10.5em */
+      }
+  }
+}
+
+@keyframes blinkTextCursor {
+  from {
+    border-right-color: rgba(255, 255, 255, 0.75);
+  } to {
+      border-right-color: transparent;
+    }
+}
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
new file mode 100644
index 0000000..b5b543d
--- /dev/null
+++ b/assets/styles/global.scss
@@ -0,0 +1,49 @@
+/* ---- Includes ---- */
+// --- Components
+@import "components/footer";
+@import "components/navgiation";
+@import "components/project-section";
+@import "components/hero";
+@import "components/category-section";
+@import "components/contact-form";
+
+// --- Extras
+@import "extra/mobile";
+@import "extra/typewriter-effect";
+@import "extra/scroll-down-icon-animation";
+@import "extra/animate";
+
+// --- Pages
+@import "pages/project-page";
+@import "pages/about-page";
+@import "pages/work-page";
+
+/* ---- Global Styling ---- */
+* {
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: -moz-none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-family: 'Roboto Mono', serif !important;
+  background: #0f0f0f !important;
+  color: #fff !important;
+}
+
+.whitespace {
+  width: 100%;
+  height: 100px;
+}
+
+@media(max-width: 768px) {
+  .whitespace {
+    display: none;
+  }
+}
diff --git a/assets/styles/pages/about-page.scss b/assets/styles/pages/about-page.scss
new file mode 100644
index 0000000..557a381
--- /dev/null
+++ b/assets/styles/pages/about-page.scss
@@ -0,0 +1,8 @@
+.about {
+  height: 500px;
+  margin-top: 120px;
+}
+
+.image {
+  background: url(https://images.unsplash.com/photo-1540885762261-a2ca01f290f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2468&q=80) no-repeat 50% 70%;
+}
diff --git a/assets/styles/pages/project-page.scss b/assets/styles/pages/project-page.scss
new file mode 100644
index 0000000..4674ec7
--- /dev/null
+++ b/assets/styles/pages/project-page.scss
@@ -0,0 +1,11 @@
+.prev, .next p {
+  color: grey;
+}
+
+.prev p {
+  text-align: left;
+}
+
+.next p {
+  text-align: right;
+}
diff --git a/assets/styles/pages/work-page.scss b/assets/styles/pages/work-page.scss
new file mode 100644
index 0000000..a976664
--- /dev/null
+++ b/assets/styles/pages/work-page.scss
@@ -0,0 +1,21 @@
+.hero-content {
+  margin-left: 0%;
+}
+
+.hero-content p {
+  font-weight: 300;
+  line-height: 36px;
+  color: grey;
+}
+
+.hero-content h6 {
+  text-align: left;
+}
+
+@media(max-width: 768px) {
+  .hero-content {
+    padding-top: 50px;
+    width: 96%;
+    margin: 0 auto;
+  }
+}