html {
	font-family: "PT Sans", Verdana, Helvetica, Arial, sans-serif;
	font-size: 16px;
}

pre {
	tab-size: 2;
}

@media (min-width: 40em) {
	html {
		font-size: 18px;
	}
	
	pre {
		tab-size: 4;
	}
}

@media (min-width: 80em) {
	html {
		font-size: 20px;
	}
	
	pre {
		tab-size: 4;
	}
}

html {
	--main-color: #111;
	--main-background-color: #fff;
	
	--header-color: #bed1f0;
	--underlay-color: #ddd;
	
	--accent-color: #1a73e8;
	--accent-hover-color: #33a3ff;
	
	--overlay-color: rgba(255, 255, 255, 0.9);
	--underlay-color: rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
	html {
		--main-color: #e1e1e1;
		--main-background-color: #111;
		
		--header-color: #222;
		--overlay-color: #333;
		
		--accent-color: #01b9ff;
		--accent-hover-color: #80dcff;
		
		--overlay-color: rgba(0, 0, 0, 0.8);
		--underlay-color: rgba(255, 255, 255, 0.9);
		
		background-color: black;
	}
}

body {
	margin: 0 0;
	padding: 0;
	
	/* Force the element to contain margins */
	display: flow-root;
	min-height: 100vh;
	
	color: var(--main-color);
	background-color: var(--main-background-color);
}

body.show {
	max-width: 48rem;
	margin: 0 auto;
}

h1, h2, h3, h4, h5, h6, p, ul, dl, ol {
	margin: 1rem;
}

nav {
	margin: 1rem;
	font-size: 0.8rem;
	color: #aaa;
}

li {
	margin: 0.2rem;
}

ul {
	margin-bottom: 1rem;
}

li > ul, li > ol {
	margin: 0;
}

h1 {
	margin-bottom: 4rem;
	color: #4E8DD9;
}

h2 {
	margin-top: 6rem;
}

h3 {
	margin-top: 4rem;
}

h4, h5, h6 {
	margin-top: 2rem;
}

img {
	border: none;
}

a {
	color: var(--accent-color);
	text-decoration: none;
}

a:hover {
	color: var(--accent-hover-color);
}

pre {
	overflow: auto;
	padding: 1rem 2rem;
}

footer {
	text-align: right;
	font-size: 0.65rem;
	
	margin: 1rem;
}

/* Editor */

.editor form {
	position: absolute;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	
	width: 100%;
	height: 100%;
}

.editor .header {
	flex-grow: 0;
	width: 100%;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	z-index: 10;
	
	border-bottom: 0.2rem solid var(--accent-color);
	background-color: var(--header-color);
}

.editor .header * {
	margin: 0.5rem;
}

.editor textarea {
	flex-grow: 1;
	width: 100%;

	resize: none;
	outline: none;
	
	box-sizing: border-box;
	margin: 0; padding: 0.5rem;
	
	border: none;
	background: none;
}

textarea {
	color: var(--main-color);
}