:root {
	--theme-color: #4781bb;
	--default-line-height: 1.2em;
}

body {
	padding: 0;
	margin: 0;
	font-family: "Segoe UI", "Open Sans", sans-serif;
}

/* ==== Layout ========================================= */

.center {
	max-width: 45rem;
	margin: 0 auto;
}

/* ==== Header ========================================= */

.header {
	padding: 2em;
	background-color: #e0efff;
}

.header-title {
	margin: 2em 0;
}

.links {
	color: gray;
}

.header h1 {
	color: var(--theme-color);
	font-size: 2.5em;
	margin: 1rem 0;
}

.header-title code {
	margin: 0;
	padding: 0;
	background-color: transparent;
}

/* ==== Content ========================================= */

.content {
	padding: 2em;
	background-color: #fff;
}

article {
	position: relative;
}

#editor .ProseMirror:focus {
	outline: none;
}

/* ==== Basic Styles ==================================== */

p {
	text-align: justify;
	word-break: break-word;
	white-space: break-spaces;
	line-height: var(--default-line-height);
}

li {
	margin: 1em;
	line-height: var(--default-line-height);
}

a, a:visited {
	color: var(--theme-color);
}

/* -- Keyboard Shortcuts  / Code -- */

kbd, code {
	padding: 0.1em 0.3em;
	border-radius: 2px;
}

kbd {
	color: #f2f8ff;
	background-color: var(--theme-color);
}

code {
	color: var(--theme-color);
	background-color: #f2f8ff;
}