import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle({
	':root': {
		'--color-bg': 'white',
		'--color-fg': 'black',
		color: 'var(--color-fg, black)',
		backgroundColor: 'var(--color-bg, white)',
		fontFamily: 'system-ui, sans-serif',
	},
	'body': {
		margin: 0,
	},
	'a': {
		color: 'inherit',
	},
	'@media (prefers-color-scheme: dark)': {
		':root': {
			'--color-bg': 'black',
			'--color-fg': 'white',
			color: 'var(--color-fg, white)',
			backgroundColor: 'var(--color-bg, black)',
		},
	},
})

const MyApp = ({Component, pageProps}) => {
  return (
  	<>
			<GlobalStyle/>
			<Component {...pageProps} />
		</>
	)
}

export default MyApp;