finished styling

assets/css/stylesheet.css

@@ -142,27 +142,45 @@ body {
     width: 100%;
     height: 160%;
     text-align: center;
-     border-radius: 30px;
+    border-radius: 30px;
     border: 1.7px solid black;
     transition: transform 0.6s;
     transform-style: preserve-3d;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
 }
 
-.tendrils {
+.flip-card-front {
     display: flex;
-    padding-top: 15px;
+    flex-direction: column;
+    background-color: #d4d1d0;
+    color: black;
+    border-radius: 30px;
+    align-items: center;
+    text-align: center;
+}
+
+.tendrils {
     padding-left: 10px;
     padding-right: 10px;
-    width: 100%;   
+    padding-top: 15px;
+    width: 90%; 
+}
+
+h1 {
+    position: absolute;
+    top: 40%;
 }
 
 .tendril-top {
+    display: flex;
     align-items: flex-start;
 }
 
 .tendril-bottom {
+    display: flex;
     align-items: flex-end;
+    position: absolute;
+    bottom: 15px;
 }
 
 .flip-card:hover .flip-card-inner {