Update static/style.css

static/style.css

@@ -14,17 +14,19 @@ body {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  height: auto;
+  width: 100%;
   margin-top: 3.5rem;
-  width: 100%
+  position: relative;
+
 }
 
+
 .iframe-container {
   display: flex;
-  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  margin: 20px auto;
+  margin: 20px;
   max-width: 1200px;
 }
 
@@ -43,7 +45,8 @@ p {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-top: 1.5rem;
+  margin-top: 2.5rem;
+  margin-bottom: 3.5rem;
   width: 100%;
   max-width: 600px;
 }
@@ -88,9 +91,15 @@ button {
   max-height: 20rem;
 }
 
+#outputSummary {
+  display: block;
+  margin: 0 auto;
+  width: 100%;
+  height: 400px;
+}
+
 #inner {
   text-align: center;
-  position: absolute;
   float: center;
   top: 50%;
   left: 50%;
@@ -100,14 +109,18 @@ button {
 #outer {
   width: 100%;
   height: 100px;
+  text-align: center;
   display: table-cell;
-  position: flex;
   justify-content: center;
   vertical-align: middle;
-  margin-top: 100px;
-  margin-bottom: 100px;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
+#tweets {
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
 
 
 #outer h2 {
@@ -121,6 +134,13 @@ button {
   cursor: pointer;
 }
 
+#generate-summary {
+  background-color: #1da1f2;
+  color: white;
+  font-weight: bold;
+  cursor: pointer;
+}
+
 #output {
   margin-top: 1rem;
 }