@font-face {
  font-family: 'AtkinsonHyperlegibleNext';
  font-style: normal;
  font-weight: normal;
  src: url('./fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'AtkinsonHyperlegibleNext';
  font-style: normal;
  font-weight: bold;
  src: url('./fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
}

/* Theme colors */
:root {
	--color-gray-20: #e0e0e0;
	--color-gray-50: #C0C0C0;
	--color-gray-90: #333;

	--background-color: #fff;

	--text-color: var(--color-gray-90);
	--text-color-link: #082840;
	--text-color-link-active: #5f2b48;
	--text-color-link-visited: #17050F;

	--syntax-tab-size: 2;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-gray-20: #e0e0e0;
		--color-gray-50: #C0C0C0;
		--color-gray-90: #dad8d8;

		/* --text-color is assigned to --color-gray-_ above */
		--text-color-link: #1493fb;
		--text-color-link-active: #6969f7;
		--text-color-link-visited: #a6a6f8;

		--background-color: #15202b;
	}
}

html,body {
  font-family: 'AtkinsonHyperlegibleNext', sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
	color: var(--text-color);
	background-color: var(--background-color);
}

p, li {
  font-size: 1rem;
}

a[href] {
	color: var(--text-color-link);
}
a[href]:visited {
	color: var(--text-color-link-visited);
}
a[href]:hover,
a[href]:active {
	color: var(--text-color-link-active);
}

.tab-headers {
  flex-basis: 30%;
  background-color: var(--background-color);
}

.tab-contents {
  flex-basis: 70%;
  background-color: var(--background-color);
}

.tabs {
  display: flex;
  flex-direction: column;
}

.tabs * {
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .tabs {
    flex-direction: row;
  }

  .tabs>* {
    min-height: 20rem;
  }
}

/* Inner and Outer Layout */

.tab-headers {
  flex-basis: 30%;
}

.tab-headers div {
  padding: 1rem;
  height:  4rem;
  display: flex;
  align-items: center;
}

.tab-contents {
  flex-basis: 70%;
}

.tab-contents div {
  padding: 1rem;
  height:  100%;
}

/* Border helper to distinct element */

.tabs div {
  border: 1px dashed grey;
  background-color: var(--background-color);
}

.tabs div div {
  background-color: var(--background-color);
}