im crazy as fuck

css/style_menu.css

@@ -1,69 +1,81 @@
-#carousel-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 80%;
-    margin: auto;
-    overflow: hidden;
-    position: relative;
-    perspective: 1000px;
-  }
-  
-  #carousel {
-    display: flex;
-    transition: transform 0.5s ease;
-    transform-style: preserve-3d;
-  }
-  
-  .project {
-    min-width: 90%;
-    box-sizing: border-box;
-    padding: 20px;
-    background-color: #f8f9fa;
-    text-align: center;
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    margin: 0 10px;
-    backface-visibility: hidden;
-  }
-  
-  .nav-button {
-    background-color: #182b3f;
-    z-index: 15;
-    color: white;
-    border: none;
-    padding: 10px;
-    cursor: pointer;
-    border-radius: 5px;
-    font-size: 18px;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  
-  #prev-button {
-    left: 10px;
-  }
-  
-  #next-button {
-    right: 10px;
-  }
-  
-  .nav-button:hover {
-    background-color: #12457d;
-  }
-  
-  .project_buttons {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-  
- #global_title {
+.project {
+  width: 90%;
+  height: 40vh;
+  box-sizing: border-box;
+  padding: 20px;
+  background-color: #f8f9fa;
+  text-align: center;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  margin: 0 10px;
+  backface-visibility: hidden;
+}
+
+#global_title {
   animation: glitch 3s steps(100) infinite;
   color: #151515;
-  font-size: 13vh;
+  font-size: 10vh;
   text-align: center;
   text-transform: uppercase;
-  }
+}
+
+#carousel-dots {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dot {
+  z-index: 30;
+  width: 12px;
+  height: 12px;
+  margin: 0 5px;
+  background-color: #bbb;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.dot.active {
+  background-color: #717171;
+} 
+
+.container {
+  margin: 0 auto;
+  width: 250px;
+  height: 47vh;
+  position: relative;
+  perspective: 1000px;
+}
+
+.carousel {
+  width: 100%;
+  position: absolute;
+  transform-style: preserve-3d;
+  transition: transform 1s;
+}
+
+.item {
+  display: block;
+  position: absolute;
+  text-align: center;
+}
+
+.next, .prev {
+  position: absolute;
+  cursor: pointer;
+  background-color: transparent;
+  font-size: 90px;
+  color: white;
+  border: none;
+  bottom: 2.5em;
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+.next:hover, .prev:hover {
+  box-shadow: 0 0 15px 0 rgba(253, 252, 252, 0.2);
+  transform: translateY(-4px);
+}
+.next { right: 2em; }
+.prev { left: 2em; }