Update static/style.css

static/style.css

@@ -18,7 +18,22 @@ body {
   width: 100%
 }
 
-h1,h2, p {
+.iframe-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin: 20px auto;
+  max-width: 1200px;
+}
+
+.iframe-container iframe {
+  margin: 10px;
+}
+
+h1,
+h2,
+p {
   text-align: center;
 }
 
@@ -40,7 +55,9 @@ label {
   font-weight: bold;
 }
 
-select, textarea, button {
+select,
+textarea,
+button {
   margin-top: 0.5rem;
   padding: 0.5rem;
   font-size: 1rem;
@@ -63,40 +80,38 @@ select, textarea, button {
 }
 
 
-#input, #output {
+#input,
+#output {
   resize: vertical;
   height: 10rem;
   max-height: 20rem;
 }
 
-#inner {  
+#inner {
   text-align: center;
+  position: absolute;
+  float: center;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 #outer {
-  width:100%;
+  width: 100%;
   height: 100px;
   display: table-cell;
   position: flex;
   justify-content: center;
-  vertical-align:middle;
+  vertical-align: middle;
   margin-top: 100px;
   margin-bottom: 100px;
 }
 
-/* {
-  display: table-cell;
-  position: relative;
-  width:100%;
-  height: 100px;
-  background-color: rgba(89,144,222,.6);
-  vertical-align:middle;
-} */
 
 
-#outer h2{
+#outer h2 {
   text-align: center;
-} 
+}
 
 #generate {
   background-color: #1da1f2;