added animation over "flip-card"

assets/css/stylesheet.css

@@ -114,20 +114,59 @@ body {
     text-align: right;
 }
 
-.column-right {
+.flip-card {
     width: 30%;
     align-items: center;
     text-align: center;
-    border-radius: 30px;
-    border: 1.7px solid black;
     margin-left: 30px;
 }
 
 .tendrils {
-    width: 100%;
+    padding-top: 15px;
+    width: 100%;   
 }
 
 .info-layer {
     padding-top: 15px;
     padding-bottom: 20px;
+}
+
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 170%;
+  text-align: center;
+  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);
+}
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg);
+}
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-card-front {
+  background-color: #bbb;
+  border-radius: 30px;
+  border: 1.7px solid rgb(46, 46, 46);
+  color: black;
+}
+
+.flip-card-back {
+  background-color: #bbb;
+  color: black;
+  border-radius: 30px;
+  border: 1.7px solid rgb(46, 46, 46);
+  transform: rotateY(180deg);
 }