:root {
	--mobile-breakpoint: 320px;
	--tablet-breakpoint: 768px;
	--small-screen-breakpoint: 1024px;
}

/* 320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV */

body {
		background-color: #ffffff;
		color: #17191b;
	}
	body.dark-mode {
		background-color: #1d3040;
		color: #fff;
	}

	body.dark-mode a {
		color: rgb(255, 255, 255);
	}

	body.dark-mode a:hover {
		background: #1d3040;
		color: rgb(238, 247, 120);
	}

	article,
	.two-col {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	article {
		padding: 1.5%;
	}

	header {
		padding: 0 3%;
		border-right: 1px solid silver;
		/* margin-right: 3%; */
	}

	.two-col section {
		flex: 1;
	}

  h2 {
		font-size: large
	}

	h3 {
		font-size: medium;
	}

	h1 {
		/* text-transform: uppercase; */
		text-align: center;
	}

	h2 {
		font-weight: bold;
	}

	h3 {
		/* padding-right: 0.5em; */
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
	}

	ol,
	ul {
		list-style-type: none;
		padding: 0;
		line-height: 1.5;
	}

	li {
		margin-bottom: 1em;
	}

	.two-col section:first-child h2 {
		margin-right: 2%;
	}

	.two-col ol strong {
		display: block;
	}

	/* smaller screen stuff */
  @media only screen and (max-width: 768px) {
		article,
		.two-col {
			flex-direction: column;
		}
		header {
			border-right: none;
			margin: 0;
			padding: 0;
		}
	}

	@media only screen and (max-width: 768px) {
		/* A fun CSS hack to convert list of skills to comma separated paragraph.   */
		.two-col ul li {
			display: inline;
		}
		.two-col ul li:after {
			content: ',';
		}
		.two-col ul li:last-child:after {
			content: '.';
		}

		.two-col ol li {
			display: flex;
			justify-content: space-between;
			margin-bottom: 0.2em;
		}

		h1 {
			margin-bottom: 0;
		}
	}

	@media print {
		.noPrint {
			visibility: hidden;
		}
	}
	@media screen {
   .onlyPrint {
       display: none;
   }
	}