diff --git a/Script_Speech_recognition/stranka.html b/Script_Speech_recognition/stranka.html
index 2d00b54..fc3354e 100644
--- a/Script_Speech_recognition/stranka.html
+++ b/Script_Speech_recognition/stranka.html
@@ -48,7 +48,6 @@
 <script type="module" src="videoplayer.js"></script>
 <script src="kontrola_api.js"></script>
 <script src="speech_recognition.js"></script>
-<script src="videoplayer.js"></script>
 
 
 
diff --git a/Script_Speech_recognition/style.css b/Script_Speech_recognition/style.css
index 6aa9793..88607f8 100644
--- a/Script_Speech_recognition/style.css
+++ b/Script_Speech_recognition/style.css
@@ -1,45 +1,56 @@
 /* Default Light Theme */
-body {
+html, body {
+    height: 100%; /* Ensure that the HTML and body elements span the full height of the viewport */
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden; /* Prevent horizontal scrolling but allow vertical scrolling */
     font-family: Arial, sans-serif;
     background-color: #f5f5f5;
     color: #333;
-    margin: 0;
-    padding: 0;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box; /* Make sure padding and borders are included in width/height */
 }
 
 h1 {
     text-align: center;
     color: #4285f4;
     font-size: 28px;
-    margin-top: 20px;
+    margin: 20px 0;
 }
 
+/* Full-width container taking half the height of the page */
 .container {
     display: flex;
     justify-content: center; /* Center the elements horizontally */
-    align-items: flex-start; /* Align items to the top */
-    padding: 20px;
+    align-items: center; /* Center items vertically */
+    width: 100%; /* Full width of the page */
+    padding: 20px; /* Add some padding for spacing */
     gap: 20px; /* Maintain a comfortable space between elements */
     flex-wrap: wrap; /* Allow wrapping for responsive layouts */
-    max-width: 1200px; /* Set max-width to keep layout centered and compact */
-    margin: 0 auto; /* Center the container itself */
+    box-sizing: border-box; /* Include padding in width calculation */
 }
 
-.textarea-container,
-.video {
+.textarea-container {
+    position: relative; /* Needed for absolute positioning of child elements */
     width: 45%;
-    max-width: 500px;
-    min-width: 300px; /* Minimum width for smaller screens */
+    max-width: 600px;
+    min-width: 350px;
+	    box-sizing: border-box; /* Include padding and borders in the element’s dimensions */
 }
 
+/* Styling for the buttons above the textarea */
 .translation-buttons {
     display: flex;
-    justify-content: center; /* Center buttons */
-    gap: 10px;
-    margin-bottom: 20px;
+    justify-content: center; /* Center the buttons horizontally */
+    gap: 10px; /* Space between the buttons */
+    margin-bottom: 15px; /* Space between buttons and textarea */
 }
 
-.translation-buttons button {
+#translateWordsBtn, #translateLettersBtn {
     padding: 10px 20px;
     font-size: 16px;
     background-color: #4285f4;
@@ -48,6 +59,49 @@ h1 {
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s ease;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Added shadow for consistency */
+}
+
+#translateWordsBtn:hover, #translateLettersBtn:hover {
+    background-color: #357ae8;
+}
+
+/* Active button style */
+.translation-buttons .active {
+    background-color: #357ae8;
+    font-weight: bold;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+#inputText {
+    width: 100%;
+    height: 200px;
+    padding: 15px;
+    font-size: 16px;
+    background-color: #f9f9f9;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    color: #333;
+    resize: none; /* Disable resizing */
+    box-sizing: border-box; /* Ensure padding doesn't affect the width */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    position: relative; /* Needed for buttons inside the textarea container */
+}
+
+/* Microphone button inside textarea, positioned bottom-left */
+#startBtn {
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    padding: 8px;
+    font-size: 20px;
+    background-color: #4285f4;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    z-index: 5;
 }
 
 .translation-buttons button:hover {
@@ -79,89 +133,34 @@ h1 {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-#timerDisplay, #statusText {
-    text-align: center;
-    font-size: 18px;
-    color: #555;
-}
-
-#statusText {
-    color: #f44336;
-}
-
-/* Style for buttons */
-button {
-    padding: 10px 20px;
-    font-size: 16px;
+/* Translate button inside textarea, positioned bottom-right, increased size by half */
+#translateBtn {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    padding: 12px 25px; /* Increased padding to make button larger */
+    font-size: 18px; /* Increased font size */
     background-color: #4285f4;
     color: white;
     border: none;
+    border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s ease;
-    border-radius: 5px;
+    z-index: 5;
 }
 
-button:hover {
+#translateBtn:hover {
     background-color: #357ae8;
 }
 
-button.dark-mode {
-    background-color: #333;
-    color: #fff;
-}
-
-/* Dark Mode */
-body.dark-mode {
-    background-color: #121212;
-    color: #e0e0e0;
-}
-
-h1.dark-mode {
-    color: #8ab4f8;
-}
-
-textarea.dark-mode {
-    background-color: #1e1e1e;
-    border-color: #333;
-    color: #e0e0e0;
-}
-
-textarea.dark-mode:focus {
-    border-color: #8ab4f8;
-}
-
-#startBtn.dark-mode {
-    background-color: #8ab4f8;
-    color: #121212;
-}
-
-#startBtn.dark-mode:hover {
-    background-color: #76a7f3;
-}
-
-#timerDisplay.dark-mode, #statusText.dark-mode {
-    color: #b0b0b0;
-}
-
-#statusText.dark-mode {
-    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 {
     position: relative;
-    max-height: 400px; /* Set a reasonable maximum height */
+    width: 45%;
+    max-width: 600px;
+    min-width: 350px;
     aspect-ratio: 16/9; /* Keep a responsive aspect ratio for the video */
     background-color: #ffffff;
-    border: 14px solid #d4d4d4;
+    border: 12px solid #d4d4d4;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     display: flex;
@@ -169,12 +168,13 @@ textarea.dark-mode:focus {
     align-items: center;
     justify-content: flex-start;
     transition: transform 0.3s ease;
+    box-sizing: border-box;
 }
 
 /* Styling for video element inside .video */
 .video video {
     width: 100%;
-    max-height: 100%; /* Ensure the video fits within the container */
+    max-height: 150%; /* Ensure the video fits within the container */
     border-radius: 4px;
     object-fit: cover; /* Ensure the video fits its container */
 }
@@ -189,68 +189,27 @@ textarea.dark-mode:focus {
     color: white;
     border: none;
     border-radius: 50%;
-    width: 40px;
-    height: 40px;
+    width: 50px; /* Increase button size */
+    height: 50px; /* Increase button size */
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
-    transition: background-color 0.3s ease, transform 0.2s;
+    transition: background-color 0.3s ease;
     z-index: 10; /* Ensure buttons are above other elements */
 }
 
 #prevBtn:hover, #nextBtn:hover {
     background-color: #357ae8;
-    transform: scale(1.1);
 }
 
 #prevBtn {
-    left: -20px;
+    left: -30px; /* Adjust button position for better appearance */
 }
 
 #nextBtn {
-    right: -20px;
-}
-
-/* Style for the start button */
-#startBtn {
-    position: absolute;
-    left: 10px; /* Position it to the left inside the container */
-    bottom: 10px; /* Place it at the bottom */
-    padding: 10px;
-    font-size: 24px;
-    background-color: #4285f4;
-    color: white;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-/* Hover effect for start button */
-#startBtn:hover {
-    background-color: #357ae8;
-}
-
-/* Style for the translate button */
-#translateBtn {
-    position: absolute;
-    right: 10px; /* Position it to the right inside the container */
-    bottom: 10px; /* Place it at the bottom */
-    padding: 10px 20px;
-    font-size: 16px;
-    background-color: #4285f4;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-/* Hover effect for translate button */
-#translateBtn:hover {
-    background-color: #357ae8;
+    right: -30px; /* Adjust button position for better appearance */
 }
 
 /* Style for the theme toggle button (icon) */
@@ -274,6 +233,55 @@ textarea.dark-mode:focus {
     color: #4285f4; /* Heading color */
     font-size: 24px; /* Font size for the heading */
     text-align: center; /* Center align the text */
+    margin: 0;
+}
+
+/* Dark Mode */
+body.dark-mode {
+    background-color: #121212;
+    color: #e0e0e0;
+}
+
+h1.dark-mode {
+    color: #8ab4f8;
+}
+
+textarea.dark-mode {
+    background-color: #1e1e1e;
+    border-color: #333;
+    color: #e0e0e0;
+}
+
+textarea.dark-mode:focus {
+    border-color: #8ab4f8;
+}
+
+#startBtn.dark-mode,
+#translateBtn.dark-mode,
+#translateWordsBtn.dark-mode,
+#translateLettersBtn.dark-mode,
+#prevBtn.dark-mode,
+#nextBtn.dark-mode {
+    background-color: #333;
+    color: #fff;
+}
+
+#startBtn.dark-mode:hover,
+#translateBtn.dark-mode:hover,
+#translateWordsBtn.dark-mode:hover,
+#translateLettersBtn.dark-mode:hover,
+#prevBtn.dark-mode:hover,
+#nextBtn.dark-mode:hover {
+    background-color: #555;
+}
+
+.video.dark-mode {
+    background-color: #1e1e1e;
+    border-color: #333;
+}
+
+#themeToggleBtn.dark-mode {
+    color: #e0e0e0;
 }
 
 /* Responsive layout adjustments */
@@ -281,11 +289,49 @@ textarea.dark-mode:focus {
     .container {
         flex-direction: column;
         align-items: center;
+        padding: 20px; /* Add padding for spacing on smaller screens */
+        gap: 15px; /* Reduce gap for smaller screens */
+        height: auto; /* Allow the height to adjust for mobile screens */
     }
 
     .textarea-container,
     .video {
-        width: 90%; /* Expand to take more space on smaller screens */
+        width: 100%; /* Full width for smaller screens */
         max-width: none;
     }
+
+    #translateWordsBtn, #translateLettersBtn {
+        font-size: 14px; /* Reduce button font size for smaller screens */
+        padding: 8px 15px; /* Reduce button padding for smaller screens */
+    }
+
+    #inputText {
+        height: 150px; /* Reduce height for the text area */
+    }
+
+    #startBtn, #translateBtn {
+        font-size: 16px; /* Reduce button font size for smaller screens */
+        padding: 10px; /* Reduce button padding */
+    }
+
+    #prevBtn, #nextBtn {
+        width: 40px; /* Reduce button size for smaller screens */
+        height: 40px; /* Reduce button size for smaller screens */
+    }
+
+    #prevBtn {
+        left: -20px; /* Adjust button position for smaller screens */
+    }
+
+    #nextBtn {
+        right: -20px; /* Adjust button position for smaller screens */
+    }
+
+    h1 {
+        font-size: 24px; /* Decrease heading font size for mobile devices */
+    }
+
+    #themeToggleBtn {
+        font-size: 20px; /* Decrease theme toggle button size for mobile */
+    }
 }
\ No newline at end of file