files

src/index.css

@@ -0,0 +1,61 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html{
+  scroll-behavior: smooth;
+}
+
+*{
+  transition: all .3s;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+@layer components {
+  .change-text::after{
+    content: '';
+    animation: text-change 5s linear 0s infinite;
+  }
+  .text-slide-in{
+    position: relative;
+    animation: slide-text-in .5s linear 0s forwards;
+  }
+
+  .pop-modal{
+    animation: pop-modal .1s linear 0s forwards;
+  }
+
+
+  /* ANIMATIONS */
+  @keyframes text-change {
+    0%{content: 'Boundaries';}
+    100%{content: 'Limitations';}
+  }
+
+  @keyframes slide-text-in {
+    /* 0%{left: -200%;}
+    100%{left: 0%;} */
+    0%{transform: scale(0); opacity: 0;}
+    100%{transform: scale(1); opacity: 1;}
+  }
+
+  @keyframes pop-modal {
+    /* 0%{left: -200%;}
+    100%{left: 0%;} */
+    0%{margin-top: 20px; opacity: 0;}
+    100%{margin-top: 0; opacity: 1;}
+  }
+}