goodnight goobers

src/app/global.scss

@@ -15,4 +15,10 @@
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-}
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+}

src/app/layout.tsx

@@ -5,14 +5,19 @@ import "@/app/global.scss";
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="container">
-      <Navbar></Navbar>
+      <Navbar />
-      <main style={{
+      <main
-        backgroundColor: "red",
+        style={{
-        width: "100%",
+          backgroundColor: "red",
-        height: "auto",
+          width: "100%",
-        position: "relative",
+          height: "auto",
-        marginTop: "70px",
+          position: "relative",
-      }}>{children}</main>
+          marginTop: "70px",
+          animation: "fade 0.9s ease-in"
+        }}
+      >
+        {children}
+      </main>
       <Footer></Footer>
     </div>
   );

src/components/Navbar.tsx

@@ -4,7 +4,6 @@ import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import Modal from "react-modal";
 import "@/stylesheets/navbar.scss";
-import index from "@/pages";
 
 const Navbar = () => {
   const [modal, setModal] = useState(false);