diff --git a/src/assets/scss/animation.scss b/src/assets/scss/animation.scss
new file mode 100644
index 0000000..dbba237
--- /dev/null
+++ b/src/assets/scss/animation.scss
@@ -0,0 +1,48 @@
+.fade-in {
+  margin-top: 25px;
+  font-size: 21px;
+  text-align: center;
+  animation: fadein 1s;
+  -moz-animation: fadein 1s; /* Firefox */
+  -webkit-animation: fadein 1s; /* Safari and Chrome */
+  -o-animation: fadein 1s; /* Opera */
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes fadein {
+  /* Firefox */
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadein {
+  /* Safari and Chrome */
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-o-keyframes fadein {
+  /* Opera */
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 591fe23..5b3cc17 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,3 +1,5 @@
+@import './assets/scss/animation.scss';
+
 .blur {
   filter: blur(10px);
   -webkit-filter: blur(10px);
@@ -17,3 +19,14 @@
 .rounded {
   border-radius: 1.5rem !important;
 }
+
+.card-effect {
+  &:active{
+    background-color: #c9c9c9b3 !important;
+    transition: background-color 0.5s;
+  }
+  &:focus{
+    background-color: #c9c9c9b3 !important;
+    transition: background-color 0.5s;
+  }
+}