@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Cutive+Mono&family=Domine:wght@400..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Vollkorn+SC:wght@400;600;700;900&display=swap');

@font-face {
    font-family: 'CommitMono400';
    src: url('../assets/fonts/CommitMono-400-Regular.woff2') format('woff2');
  	font-display: swap;
    font-weight: 400;
    font-style: normal;
}

:root {
	--color-black: 			#111111;
	--color-black-2: 		#222222;
	--color-black-3: 		#333333;
	--color-black-4: 		#444444;
	--color-black-5: 		#555555;
	--color-black-6: 		#666666;
	--color-black-7: 		#777777;
	--color-black-8: 		#888888;
	--color-black-9: 		#999999;
	--color-grey-dk: 		#B1B1B1;
	--color-grey-lt: 		#E0DEDC;
	--color-grey-md: 		#CCCCCC;
	--color-pink: 			#DA5556;
	--color-pink-md: 		#DB9388;
	--color-white: 			#FFFFFF; /* #FFFDFB */
	--color-off-white: 		#c7c7c9;
	--font-courier: 		'Courier Prime', monospace;
	--font-crimson: 		'Crimson Text', serif;
	--font-cutive: 			'Cutive Mono', monospace;
	--font-domine:			'Domine', serif; /* magazine font */
	--font-garamond: 		'EB Garamond', serif;
	--font-lato: 			'Lato', sans-serif;
	--font-opens: 			'Open Sans', sans-serif;
	--font-spectral:		'Spectral', serif; /* palatino copy */
	--font-times: 			'Times New Roman', serif;
	--font-vollkorn: 		'Vollkorn SC', serif;
  	--font-commitmono400: 	'CommitMono400', monospace;
	--weight-thin: 			100;
	--weight-extra-light:	200;
	--weight-light: 		300;
	--weight-regular: 		400;
	--weight-medium: 		500;
	--weight-semi-bold: 	600;
	--weight-bold: 			700;
	--weight-extra-bold: 	800;
	--weight-black: 		900;
}

/* Core Base & Typography */
body {
    background-color: var(--color-white);
    color: var(--color-black);
    /* font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */
  	font-family: "CommitMono400", monospace;
    font-size: 12px;
    line-height: 1.9;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5 {
  	font-size: 12px;
  	line-height: 0.9;
  	margin: 3px 0;
}
::selection { 
  	background: var(--color-black-2); 
  	color: var(--color-white);
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
li {
    padding: 4px 0;
	margin: 0 15px;
}
.hide {
	display: none !important;
}
.strong {
	font-weight: bold;
}