@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
	font-family: Overpass;
	font-style: normal;
	font-weight: 300;
	src: local("Overpass Light "), local("Overpass-Light"),
		url(/fonts/overpass-latin-300.woff2) format("woff2");
}

@font-face {
	font-family: Overpass;
	font-style: normal;
	font-weight: 600;
	src: local("Overpass Bold "), local("Overpass-Bold"),
		url(/fonts/overpass-latin-600.woff2) format("woff2");
}

@font-face {
	font-family: Fira Mono;
	font-style: normal;
	font-weight: 400;
	src: local("Fira Mono Regular "), local("Fira Mono-Regular"),
		url(/fonts/fira-mono-latin-400.woff2) format("woff2");
}

code {
	font-family: "Fira Mono";
}

:root {
	--font-body: "Overpass", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	--font-mono: "Fira", monospace;
	--color-bg-0: rgb(202, 216, 228);
	--color-bg-1: hsl(209, 36%, 86%);
	--color-bg-2: hsl(224, 44%, 95%);
	--color-primary: #ff3e00;
	--color-theme-2: #4075a6;
	--color-text: rgba(0, 0, 0, 0.7);
	--column-width: 42rem;
	--column-margin-top: 4rem;
	font-family: var(--font-body);
	color: var(--color-text);
	font-weight: 300;
}
