Enhanced overall responsive design

Author: hoangsonww

src/css/discussions.css

@@ -654,7 +654,7 @@ main {
 
 #movie-match-btn2 {
     position: fixed;
-    bottom: 180px;
+    bottom: 140px;
     right: 30px;
     background-color: #7378c5;
     font: inherit;

src/css/style.css

@@ -1862,6 +1862,7 @@ textarea {
     margin-top: 60px;
     padding: 20px;
     width: 100%;
+    margin-bottom: 300px;
 }
 
 body {

src/html/discussions.html

@@ -81,14 +81,11 @@ <h4 id="alt-title">Here, you can ask the chatbot about any movie-related topics
 
     </main>
 
-    <button id="settings-btn" style="position: fixed; bottom: 220px">Settings</button>
+    <button id="settings-btn" style="position: fixed; bottom: 180px">Settings</button>
     <button id="movie-match-btn2" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>
     <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 100px">Movie Timeline</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 140px">Movie of the Day</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="margin-bottom: -40px">MovieVerse Trivia</button>
-
-    <!-- Create a button to go back to the main page -->
-    <button id="back-to-top-btn" style="cursor: pointer" onclick="window.location.href='../../index.html'">Back To Main Page</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 60px">Movie of the Day</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="margin-bottom: -80px">MovieVerse Trivia</button>
 
     <!-- Link to the external JavaScript file -->
     <script src="../js/app.js"></script>