move all style to css

MemeGenerator/static/css/style.css

@@ -6,8 +6,8 @@ input-box {
     margin: 10px 0px;
 }
 
-index-card {
-    margin: 20rem;
+.index-card {
+    margin: 1rem 20rem;
 }
 
 card-body {
@@ -17,4 +17,17 @@ card-body {
 .form-center {
     display: block;
     text-align: center;
+}
+
+.meme-card {
+    width: 18rem;
+}
+
+main { 
+    margin: auto;
+}
+
+.setup-card {
+    margin:1rem auto; 
+    max-width:30rem;
 }
\ No newline at end of file

MemeGenerator/templates/base.html

@@ -16,9 +16,9 @@
 
 <footer class="footer">
     <div class="container">
-      <span class="text-muted">Developed by Ruizhe Deng@2022</span>
+        <span class="text-muted">Developed by Ruizhe Deng@2022</span>
     </div>
-  </footer>
+</footer>
 <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
 <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
 </body>

MemeGenerator/templates/index.html

 {% extends "base.html" %}
 
 {% block body %}
-<div class="card index-card mb-3" style="margin: 1rem 20rem;">
+<div class="card index-card mb-3">
     <img class="card-img-top" src="{{ url_for('static', filename ='images/cat.gif') }}" alt="Card image cap">
     <div class="card-header">Your next Viral Meme starts here...</div>
     <div class="card-body">

MemeGenerator/templates/search_res.html

@@ -4,7 +4,7 @@
 <div class="row">
     {% for item in items %}
     <div class='col-md-3'>
-        <div class="card border-dark mb-3" style="width: 18rem;">
+        <div class="card border-dark mb-3 meme-card">
             <img src="{{item.url}}" class="card-img-top" alt="meme">
             <div class="card-body">
                 <div class='form-center'>

MemeGenerator/templates/setup.html

@@ -3,7 +3,7 @@
 {% block body %}
 <div class="row">
     <div class="col-12">
-        <div class="card" style="margin:1rem; max-width:30rem;">
+        <div class="card setup-card" >
             <div class="card-header">
               Let's Customize!
             </div>