Update styles.css

TMHSDigital · Aug 10, 2024 · 8428d15 · 8428d15
1 parent e9e7d5b
commit 8428d15
Showing 1 changed file with 18 additions and 21 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -9,7 +9,6 @@ body {
     align-items: center;
     min-height: 100vh;
 }
-
 .container {
     background-color: rgba(16, 24, 39, 0.8);
     padding: 2rem;
@@ -18,58 +17,51 @@ body {
     max-width: 600px;
     width: 100%;
 }
-
 .neon-text {
     font-family: 'Orbitron', sans-serif;
     color: #fff;
     text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00fff2, 0 0 35px #00fff2, 0 0 40px #00fff2;
     text-align: center;
     margin-bottom: 2rem;
 }
-
 nav {
     display: flex;
     justify-content: center;
     margin-bottom: 2rem;
 }
-
 nav a {
     color: #00fff2;
     text-decoration: none;
     margin: 0 1rem;
     font-weight: bold;
     transition: color 0.3s ease;
 }
-
 nav a:hover {
     color: #fff;
     text-shadow: 0 0 5px #00fff2;
 }
-
 .content {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }
-
 .input-group {
     display: flex;
     flex-direction: column;
 }
-
 label {
     margin-bottom: 0.5rem;
     color: #00fff2;
 }
-
-input[type="file"], input[type="number"], input[type="text"], textarea {
+input[type="file"], input[type="number"], input[type="text"], textarea, select {
     background-color: #1f2937;
     border: 1px solid #374151;
     color: #fff;
     padding: 0.5rem;
     border-radius: 5px;
+    width: 100%;
+    box-sizing: border-box;
 }
-
 .tech-button {
     background: linear-gradient(45deg, #00a3ff, #00fff2);
     color: #000;
@@ -84,57 +76,62 @@ input[type="file"], input[type="number"], input[type="text"], textarea {
     text-align: center;
     text-decoration: none;
 }
-
 .tech-button:hover {
     background: linear-gradient(45deg, #00fff2, #00a3ff);
     box-shadow: 0 0 10px #00fff2;
 }
-
 .instructions {
     text-align: center;
     color: #9ca3af;
     font-size: 0.9rem;
 }
-
 .welcome-text {
     font-size: 1.2rem;
     text-align: center;
     margin-bottom: 1rem;
 }
-
 .services-list {
     list-style-type: none;
     padding: 0;
 }
-
 .services-list li {
     margin-bottom: 1rem;
 }
-
 .services-list a {
     color: #00fff2;
     text-decoration: none;
     font-weight: bold;
     transition: color 0.3s ease;
 }
-
 .services-list a:hover {
     color: #fff;
     text-shadow: 0 0 5px #00fff2;
 }
-
 .cta-text {
     text-align: center;
     margin-top: 2rem;
 }
-
 .cta-text a {
     color: #00fff2;
     text-decoration: none;
     font-weight: bold;
 }
-
 .cta-text a:hover {
     color: #fff;
     text-shadow: 0 0 5px #00fff2;
 }
+
+/* Text-to-Speech specific styles */
+#text-input {
+    width: 100%;
+    height: 100px;
+    resize: vertical;
+}
+
+#voice-select {
+    margin-bottom: 1rem;
+}
+
+#speak-button {
+    width: 100%;
+}