mobile styling attempt 1

static/hello.css

@@ -0,0 +1,8 @@
+
+
+@media screen and (min-width:770px) {
+    .cardclass{
+        width: 100vh
+    }
+  
+}

templates/hello.html

@@ -18,6 +18,7 @@
       </meta>
       <meta property="og:image" content="https://palondomus-revisionbankcard.hf.space/notecardimage?h={{hashvalue}}&u={{username}}">
       </meta>
+      <script src="https://cdn.tailwindcss.com"></script>
       
       <meta property="twitter:card" content="summary_large_image">
       </meta>
@@ -42,11 +43,11 @@
       <div>
                 <div style="display:flex;flex-direction:column;align-items:center;width:100%;margin-top:50px">
                 <div>
-                <h1 style="color:white;margin-bottom:20px">Revision Cards</h1>
+                <h1 style="color:white;margin-bottom:20px;font-size:27px;">RevisionBank Notecard</h1>
                 </div>
                 
         
-                <div style="position:relative;border:3px white solid;border-radius:10px;background-color:white;width: 100vh;overflow: hidden;">
+                <div class="cardclass" style="position:relative;border:3px white solid;border-radius:10px;background-color:white;width: 70vh;overflow: hidden;">
                     <div style="display: flex;">
                     <div style="position:relative;left:10%;top:5%;width:80%;border-radius:5px;margin:10px;">
                         <div style="margin-bottom:10px;margin-right:10px;margin-left:10px;">
@@ -74,16 +75,26 @@
                                         <img key=ind style="width:100%;height:100%;border-bottom-left-radius: 3px;border-bottom-right-radius:3px;" src={{revisioncardimage[ind]}}></img>
 
                                     </div>
+                                    
                                     {%endfor%}
 
                                 </div>
-                                <a href="https://revisionbank.org/signin?h={{hashvalue}}&u={{username}}" target="_blank" rel="noopener noreferrer">
-                                <button>Save</button>
-                                </a>
-                        </div>
+     
+                            </div>
+
                     </div>
                 </div>
             </div>
+            <div style="display:flex;gap:10px;margin-top:10px;justify-content: flex-end;">
+                <div style="position: relative;right: 7px;border:1px solid #0b57d0;background-color: #0b57d0;border-radius: 10px;">
+                    <div style="margin:3px;">
+                        <a style="color: white;" href="https://revisionbank.org/signin?h={{hashvalue}}&u={{username}}" target="_blank" rel="noopener noreferrer">
+                            <button>Save</button>
+                            </a>
+                    </div>
+
+                </div>
+        </div>
             </div>
 
       </div>