complete website rework beginning

src/css/nav/toggle.css

@@ -0,0 +1,87 @@
+.nav-container {
+    height: 13vh;
+    width: 13vh;
+    right: 0;
+    top: 0;
+    z-index: 9;
+    position: fixed;
+    transition: all 2s ease-in-out;
+    cursor: pointer;
+}
+
+.nav-toggle-container {
+    background-color: rgb(21, 21, 73);
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    justify-content: flex-start;
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    flex-direction: column;
+    border-bottom-left-radius: 100%;
+}
+
+.nav-container:hover {
+    height: 20vh;
+    width: 20vh;
+    transition: all 0.5s ease-in-out;
+}
+
+.nav-toggle-positioner {
+    width: 75%;
+    height: 75%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.nav-toggle {
+    text-decoration: none;
+    color: rgb(168, 212, 253);
+    font-size: 5vh;
+    cursor: pointer;
+    width: 35px;
+    height: 27px;
+    z-index: 11;
+    transition: 0.8s;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+/* Nav-Hide-Show button idea from here: https://codepen.io/alvarotrigo/pen/wvrzPWL*/
+
+.line {
+    display: block;
+    width: 100%;
+    height: 3px;
+    background-color: rgb(49, 142, 230);
+}
+
+#line1 {
+    transform-origin: 0% 0%;
+    transition: transform 0.4s ease-in-out;
+}
+
+#line2 {
+    transition: transform 0.2s ease-in-out;
+}
+
+#line3 {
+    transform-origin: 0% 100%;
+    transition: transform 0.4s ease-in-out;
+}
+
+.nav-toggle.active #line1 {
+    transform: rotate( 45deg );
+}
+
+.nav-toggle.active #line2 {
+    transform: scaleY(0);
+}
+
+.nav-toggle.active #line3 {
+    transform: rotate( -45deg );
+}