fixed style

Script_Speech_recognition/style.css

@@ -16,27 +16,12 @@ h1 {
 
 .container {
     display: flex;
+    flex-wrap: wrap;
+    gap: 5%;
     justify-content: center;
-    margin: 20px;
+    padding: 20px;
 }
 
-textarea {
-    width: 45%;
-    height: 200px;
-    margin: 0 10px;
-    padding: 10px;
-    background-color: #fff;
-    border: 2px solid #ccc;
-    border-radius: 4px;
-    color: #333;
-    font-size: 16px;
-    resize: none;
-}
-
-textarea:focus {
-    border-color: #4285f4;
-    outline: none;
-}
 
 #startBtn, #translateLettersBtn, #translateWordsBtn {
     display: block;
@@ -102,6 +87,19 @@ textarea.dark-mode:focus {
     color: #cf6679;
 }
 
+.video.dark-mode {
+    background-color: #1e1e1e; /* Dark background for video container */
+    border: 2px solid #333; /* Dark border */
+}
+
+.video.dark-mode video {
+    background-color: #1e1e1e; /* Dark background for video */
+}
+
+.video.dark-mode #translationVideo{
+    border: 0px solid #333;
+}
+
 /* Style for the theme toggle button (icon) */
 #themeToggleBtn {
     position: fixed;
@@ -119,31 +117,42 @@ textarea.dark-mode:focus {
     color: #f4b400; /* Add a hover color effect */
 }
 
-
-/*VIDEOPREHRAVAC*/
 .video {
     position: relative;
-    width: 45%; 
-    height: 200px; 
-    max-height: 300px;
-    margin: 0 10px;
+    width: 45%; /* Default width */
+    max-width: 500px;
+    aspect-ratio: 16/9; /* Keep a responsive aspect ratio */
     padding: 10px;
-    background-color: #fff;
-    border: 2px solid #ccc;
-    border-radius: 4px;
+    background-color: #ffffff;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     display: flex;
-    align-items: center;
-    justify-content: center;
+    flex-direction: column; /* Stack items vertically */
+    align-items: center; /* Center content */
+    justify-content: flex-start; /* Align items to the start */
+    transition: transform 0.3s ease;
 }
 
+.video h2 {
+    color: #4285f4; /* Optional: change heading color */
+    font-size: 24px; /* Optional: adjust font size */
+    text-align: center; /* Center align the text */
+}
+
+.video:hover {
+    transform: scale(1.02); /* Slight zoom on hover */
+}
+
+/* Styling for video element inside .video */
 .video video {
-    width: 100%; 
+    width: 100%;
     height: 100%;
     border-radius: 4px;
-    background-color: #fff;
     border: none;
 }
 
+/* Styling for navigation buttons */
 #prevBtn, #nextBtn {
     position: absolute;
     top: 50%;
@@ -159,18 +168,54 @@ textarea.dark-mode:focus {
     display: flex;
     align-items: center;
     justify-content: center;
-}
-
-
-#prevBtn {
-    margin-left: 80px; 
-}
-
-
-#nextBtn {
-    margin-right: 80px; 
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+    transition: background-color 0.3s ease, transform 0.2s;
 }
 
 #prevBtn:hover, #nextBtn:hover {
     background-color: #357ae8;
+    transform: scale(1.1); /* Small zoom on hover */
+}
+
+#prevBtn {
+    left: -20px;
+}
+
+#nextBtn {
+    right: -20px;
+}
+
+/* Styling for textarea */
+textarea {
+    width: 45%; /* Match video width */
+    max-width: 500px;
+    min-height: 200px;
+    padding: 15px;
+    background-color: #f9f9f9;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    color: #333;
+    font-size: 16px;
+    resize: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+textarea:focus {
+    border-color: #4285f4;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    outline: none;
+}
+
+/* Responsive layout */
+@media (max-width: 768px) {
+    .container {
+        align-items: center;
+        gap: 5%;
+    }
+    .video, textarea {
+        width: 90%;
+        max-width: 90%;
+        margin-bottom: 10px;
+    }
 }