responsive

css/style_menu.css

@@ -1,14 +1,14 @@
 .project {
-  width: 90%;
   height: 40vh;
+  width: 80%;
   box-sizing: border-box;
-  padding: 20px;
   background-color: #f8f9fa;
   text-align: center;
   border: 1px solid #ddd;
   border-radius: 10px;
-  margin: 0 10px;
+  margin: 0 1vw;
   backface-visibility: hidden;
+  display: flex;
 }
 
 #global_title {
@@ -29,9 +29,9 @@
 
 .dot {
   z-index: 30;
-  width: 12px;
-  height: 12px;
-  margin: 0 5px;
+  width: 0.8vw;
+  height: 1.8vh;
+  margin: 0 0.3vw;
   background-color: #bbb;
   border-radius: 50%;
   cursor: pointer;
@@ -44,10 +44,10 @@
 
 .container {
   margin: 0 auto;
-  width: 250px;
+  width: 25vw;
   height: 47vh;
   position: relative;
-  perspective: 1000px;
+  perspective: 100vw;
 }
 
 .carousel {
@@ -63,19 +63,39 @@
   text-align: center;
 }
 
+.item h2 {
+  font-size: 4vh;
+  color: #151515;
+}
+
+.item p {
+  font-size: 2.4vh;
+  color: #151515;
+}
+
+.item button {
+  font-size: 2.8vh;
+}
+
 .next, .prev {
   position: absolute;
   cursor: pointer;
   background-color: transparent;
-  font-size: 90px;
+  font-size: 20vh;
   color: white;
   border: none;
-  bottom: 2.5em;
+  bottom: 25vh;
   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; }
+.next { right: 10vw; }
+.prev { left: 10vw; }
+
+.project_buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}