Move page styles to the main styles folder

pages/404.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { useRouter } from 'next/router';
 import Head from 'next/head';
 import IconButton from '../components/IconButton';
-import { Wrapper } from './styles/404';
+import { Wrapper } from '../styles/404';
 
 const NotFound: FC = () => {
 	const router = useRouter();

pages/about.tsx

@@ -2,7 +2,7 @@ import React, { FC, useContext, useState } from 'react';
 import { DarkModeContext } from '../components/DarkMode';
 import { useForm, ValidationError } from '@formspree/react';
 import Head from 'next/head';
-import { Wrapper } from './styles/about';
+import { Wrapper } from '../styles/about';
 import Image from 'next/image';
 import Input from '../components/Input';
 import MDXButton from '../components/MDXButton';

pages/blog/[slug].tsx

@@ -7,7 +7,7 @@ import { MDXEmbedProvider } from 'mdx-embed';
 import { GetStaticPaths, GetStaticProps } from 'next';
 import renderToString from 'next-mdx-remote/render-to-string';
 import hydrate from 'next-mdx-remote/hydrate';
-import { Wrapper } from '../styles/blog/slug';
+import { Wrapper } from '../../styles/blog/slug';
 import matter from 'gray-matter';
 import components from '../../components';
 import Head from 'next/head';

pages/blog/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { useRouter } from 'next/router';
 import { getBlogPosts } from '../../utils/blog';
-import { Wrapper } from '../styles/blog';
+import { Wrapper } from '../../styles/blog';
 import Card from '../../components/Card';
 import IconButton from '../../components/IconButton';
 import Head from 'next/head';

pages/index.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { getPortfolioProjects } from '../utils/portfolio';
 import { getBlogPosts } from '../utils/blog';
 import { GetStaticProps } from 'next';
-import { Wrapper } from './styles/home';
+import { Wrapper } from '../styles/home';
 import Hero from '../components/Hero';
 import Button from '../components/Button';
 import Card from '../components/Card';

pages/portfolio/[slug].tsx

@@ -9,7 +9,7 @@ import renderToString from 'next-mdx-remote/render-to-string';
 import hydrate from 'next-mdx-remote/hydrate';
 import matter from 'gray-matter';
 import components from '../../components';
-import { Wrapper } from '../styles/portfolio/slug';
+import { Wrapper } from '../../styles/portfolio/slug';
 import Head from 'next/head';
 import IconButton from '../../components/IconButton';
 import CodeBlock from '../../components/CodeBlock';

pages/portfolio/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { getPortfolioProjects } from '../../utils/portfolio';
 import { useRouter } from 'next/router';
-import { Wrapper } from '../styles/portfolio';
+import { Wrapper } from '../../styles/portfolio';
 import Card from '../../components/Card';
 import IconButton from '../../components/IconButton';
 import Head from 'next/head';