make it mobile responsive

www/css/styles.css

@@ -76,6 +76,18 @@ a:hover {
   transform: translate(-50%, -50%);
 }
 
+.input-box {
+  margin-top: 1em;
+  padding: 0.5em;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+}
+
+.input-submit {
+  margin-top: 1em;
+  padding: 0.5em;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+}
+
 #footer {
   text-align: center;
   margin-top: 1em;
@@ -116,3 +128,14 @@ a:hover {
 .main-heading h1 {
   font-size: 2em;
 }
+
+@media only screen and (max-width: 800px) {
+  .input-div {
+    width: 100%;
+    top: 25%;
+  }
+
+  .input-box, .input-submit {
+    padding: 1em;
+  }
+}

www/index.html

@@ -18,10 +18,10 @@
       <div class="input-div">
         <form class="dna-input" action="app.html" method="get">
           <label>
-            <h1>Please enter the DNA strand in the space below:</h1>
-            <input type="text" name="strand">
+            <h1>Please enter the DNA strand in the space below:</h1><br />
+            <input type="text" name="strand" placeholder="DNA Strand" class="input-box">
           </label>
-          <input type="submit" value="Submit">
+          <input type="submit" value="Submit" class="input-submit">
         </form>
       </div>
     </div>