Put navbar on bottom for mobile, carousel takes full width on mobile, double click for next carousel slide, slow project carousel

styles/projects.css

@@ -1,7 +1,7 @@
 .carousel {
    height: 100vh;
    width: 100vw;
-   padding: 0 0;
+   padding: 0;
    overflow: hidden;
 }
 
@@ -34,7 +34,7 @@
    justify-content: center;
    align-items: center;
    text-align: center;
-   transition: 0.6s;
+   transition: 0.8s;
    opacity: 0.1;
 }
 
@@ -128,6 +128,19 @@
 }
 
 
+@media only screen and (max-width: 750px) {
+   .carousel-inner {
+      height: 0;
+   }
+   .carousel-item-inner {
+      width: 100vw;
+      box-sizing: border-box;
+   }
+
+   .carousel-item-inner img {
+      width: 100%;
+   }
+}
 
 @media (prefers-color-scheme: dark) {
    .title {

styles/styles.css

@@ -127,6 +127,32 @@ a {
    margin: 1rem auto;
 }
 
+@media only screen and (max-width: 700px) {
+   .menu {
+      left: 0;
+      bottom: 0;
+      right: 0;
+      top: auto;
+      width: auto;
+      height: 5rem;
+   }
+   .menu div {
+      margin: auto;
+   }
+   .menu:hover {
+      left: 0;
+   }
+   .menu .item {
+      display: inline-flex;
+      margin: auto .5rem;
+      transform: scale(1.3);
+   }
+   .menu .item:hover {
+      margin: auto 1rem;
+      transform: scale(1.5);
+   }
+}
+
 @media (prefers-color-scheme: dark) {
    .menu .item {
       background-color: #333;