Improve styles to avoid FOUC

components/Button/styles.tsx

@@ -7,13 +7,14 @@ export const Btn = styled.button<Omit<Props, 'href'>>`
 	cursor: pointer;
 	background: none;
 	color: var(--text);
-	border: ${({ variant }) => (variant === 'outline' ? '2px solid var(--text)' : 'none')};
+	border: ${({ variant }) =>
+		variant === 'outline' ? '2px solid var(--text)' : '2px solid transparent'};
 	font-weight: bold;
 	text-transform: ${({ variant }) => (variant === 'outline' ? 'uppercase' : 'inherit')};
 	padding: ${({ variant }) => (variant === 'outline' ? '.5rem 1rem' : '0rem')};
 	text-align: left;
 	text-decoration: none;
-	transition: color 250ms ease-in-out;
+	transition: color 250ms ease-in-out, border 250ms ease-in-out;
 	z-index: 1;
 
 	@media (max-width: 768px) {
@@ -36,6 +37,7 @@ export const Btn = styled.button<Omit<Props, 'href'>>`
 
 	&:hover {
 		color: ${({ variant }) => (variant === 'outline' ? 'var(--background)' : 'inherit')};
+		border: 2px solid transparent;
 	}
 
 	&:hover::before {

components/Card/styles.tsx

@@ -13,7 +13,10 @@ export const StyledCard = styled.div<{ image: boolean }>`
 	&:hover {
 		& > div {
 			background: ${({ theme }) => theme.colors.blue};
-			color: ${({ theme }) => theme.colors.dark.text};
+
+			* {
+				color: ${({ theme }) => theme.colors.dark.text} !important;
+			}
 		}
 
 		img {

components/GlobalStyles.tsx

@@ -36,7 +36,10 @@ const GlobalStyles = createGlobalStyle`
 		position: relative;
 		min-height: 100%;
 		background: var(--background) !important;
-    color: var(--text) !important;
+	}
+
+	* {
+    color: var(--text);
 	}
 	
 	ul, ol {

components/MobileNav/index.tsx

@@ -37,18 +37,30 @@ const MobileNav: FC<Props> = ({ open, close }) => {
 				/>
 			</div>
 			<div className='mobile-button-wrapper'>
-				<Button href='#' onClick={() => toggle()}>
+				<Button
+					href='#'
+					onClick={() => {
+						toggle();
+						close();
+					}}
+				>
 					{mode === 'dark' ? 'Light Mode' : 'Dark Mode'}
 				</Button>
 			</div>
 			<div className='mobile-button-wrapper'>
-				<Button href='/about'>About</Button>
+				<Button href='/about' onClick={() => close()}>
+					About
+				</Button>
 			</div>
 			<div className='mobile-button-wrapper'>
-				<Button href='/portfolio'>Portfolio</Button>
+				<Button href='/portfolio' onClick={() => close()}>
+					Portfolio
+				</Button>
 			</div>
 			<div className='mobile-button-wrapper'>
-				<Button href='/blog'>Blog</Button>
+				<Button href='/blog' onClick={() => close()}>
+					Blog
+				</Button>
 			</div>
 		</Bar>
 	);

styles/blog/index.tsx

@@ -7,9 +7,12 @@ export const Wrapper = styled.div`
 	.back {
 		cursor: pointer;
 		text-align: left;
-		color: #3f9aee;
 		display: inline-flex;
 		align-items: center;
+
+		span {
+			color: ${({ theme }) => theme.colors.blue} !important;
+		}
 	}
 
 	h1 {

styles/blog/slug.tsx

@@ -11,15 +11,6 @@ export const Wrapper = styled.div`
 		row-gap: 1rem;
 	}
 
-	h1,
-	h2,
-	p,
-	span,
-	ul,
-	ol {
-		color: var(--text);
-	}
-
 	.meta {
 		.back {
 			cursor: pointer;

styles/portfolio/index.tsx

@@ -7,9 +7,12 @@ export const Wrapper = styled.div`
 	.back {
 		cursor: pointer;
 		text-align: left;
-		color: #3f9aee;
 		display: inline-flex;
 		align-items: center;
+
+		span {
+			color: ${({ theme }) => theme.colors.blue} !important;
+		}
 	}
 
 	h1 {

styles/portfolio/slug.tsx

@@ -11,15 +11,6 @@ export const Wrapper = styled.div`
 		row-gap: 1rem;
 	}
 
-	h1,
-	h2,
-	p,
-	span,
-	ul,
-	ol {
-		color: var(--text);
-	}
-
 	.meta {
 		.back {
 			cursor: pointer;