Smoother transition for add review link

src/App.css

@@ -125,6 +125,14 @@
     height: 18em;
 }
 
+.reviewsection {
+	display: flex;
+	flex-direction: column;
+	padding: 0.1em;
+	/* overflow: hidden; */
+	max-height: 100%;
+}
+
 .cardchild:hover + .actualreviewdiv {
     transition: 1s;
     transform: rotateY(100);
@@ -142,12 +150,14 @@
     text-align: center;
 }
 
+
 .reviewheadertext {
     margin-bottom: -0.2em;
 }
 
 .cardchild p {
-    margin-bottom: -1.5em;
+    margin: 0;
+    padding: 0.1em;
 }
 
 .cardchild a {
@@ -156,9 +166,7 @@
     color: pink;
     text-decoration: underline;
     margin-bottom: 0%;
-    .fadein {
+    transition: opacity 1s ease;
-        animation: spawntop 1s;
-    }
 }
 
 .cardchild span {
@@ -386,17 +394,6 @@
     }
 }
 
-@keyframes spawntop {
-    0% {
-        opacity: 0%;
-        transform: translateY(1em);
-    }
-
-    100% {
-        opacity: 100%;
-        transform: translateY(0);
-    }
-}
 
 @keyframes shake {
     0% {

src/components/api.tsx

@@ -41,16 +41,17 @@ export default function Reviews() {
   });
 
   return (
-    <>
+    <div class="reviewsection">
+      <h1 class="reviewheadertext">Reviews</h1>
       <a
         style={{
-          display: ishover() ? "inline" : "none",
+          opacity: ishover() ? '100%': '0%',
+//          visibility: !ishover() ? 'hidden' : 'visible',
         }}
         href="https://discord.com/oauth2/authorize?client_id=1208380910525743134&response_type=token&redirect_uri=https%3A%2F%2Famy.rip%2Freview%2F&scope=identify"
       >
         <p class="fadein">add your reviews here</p>
       </a>
-      <h1 class="reviewheadertext">Reviews</h1>
       <div class="actualreviewdiv">
         {reviews().length > 0 ? (
           reviews()
@@ -64,7 +65,7 @@ export default function Reviews() {
           <div>Loading reviews...</div>
         )}
       </div>
-    </>
+    </div>
   );
 }