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>
 	);