Update Frontend/style.css

Frontend/style.css

@@ -1,49 +1,69 @@
-body {
-  text-align: center;
-  font-family: Arial, sans-serif;
-  background-color: #222;
-  color: #fff;
-}
-
-h1 {
-  margin-top: 30px;
-  font-size: 2em;
-}
-
-#videoElement {
-  width: 400px;
-  border-radius: 10px;
-  margin-top: 20px;
-}
-
-button {
-  margin-top: 20px;
-  padding: 10px 20px;
-  font-size: 18px;
-  border: none;
-  background-color: #f39c12;
-  color: #fff;
-  cursor: pointer;
-  border-radius: 5px;
-}
-
-#emojiDisplay {
-  margin-top: 20px;
-}
-
-#emotionText {
-  font-size: 24px;
-  margin-top: 10px;
-}
-
-#downloadEmoji {
-  display: inline-block;
-  margin-top: 15px;
-  padding: 10px 20px;
-  font-size: 16px;
-  background-color: #3498db;
-  color: white;
-  border-radius: 5px;
-  text-decoration: none;
-}
-
+body {
+  text-align: center;
+  font-family: Arial, sans-serif;
+  background-color: #222;
+  color: #fff;
+  margin: 0;
+  padding: 1rem;
+}
+
+h1 {
+  margin-top: 20px;
+  font-size: 2em;
+  line-height: 1.2;
+}
+
+#videoElement {
+  width: 100%;
+  max-width: 480px;
+  height: auto;
+  border-radius: 12px;
+  border: 2px solid #ccc;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+button {
+  display: block;
+  margin: 12px auto;
+  padding: 12px 20px;
+  font-size: 16px;
+  border: none;
+  background-color: #f39c12;
+  color: #fff;
+  cursor: pointer;
+  border-radius: 6px;
+  width: 90%;
+  max-width: 300px;
+}
+
+button:hover {
+  background-color: #e67e22;
+}
+
+#emojiDisplay {
+  margin-top: 20px;
+}
+
+#emojiDisplay img {
+  width: 150px;
+  height: auto;
+  margin-top: 10px;
+  border-radius: 12px;
+}
+
+#emotionText {
+  font-size: 22px;
+  margin-top: 12px;
+}
+
+#downloadEmoji {
+  display: none;
+  margin-top: 15px;
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #3498db;
+  color: white;
+  border-radius: 6px;
+  text-decoration: none;
+}