@import "reset.css";
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

* {
	box-sizing: border-box;
	overflow-wrap: break-word;
}

.page__body {
	font-family: Open Sans, Helvetica, Arial, sans-serif;
	line-height: 1.3333;
	color: #eeeeee;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* mobile first */
.page__outer {
	padding: .5rem;
}

@media (min-width: 30rem) {
	.page__outer {
		padding: 2rem;
	}
}

.page__outer--content {
	/* background-color: #253a56; */
	/* background-color: #152a46; */
	/* background-color: #051a36; */
	background-color: rgb(36, 36, 36);
	flex: auto;
}

.page__outer--comments {
	background-color: rgb(26, 26, 26);
}

.page__outer--footer {
	background-color: rgb(16, 16, 16);
}

.page__wrapper {
	max-width: 32rem;
}

.page__h1 {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 3rem;
}

.page__breadcrumbs {
	font-size: .8rem;
	color: #999999;
}

.page__breadcrumb:after {
	content: " » ";
}

.page__h2 {
	font-size: 2rem;
	font-weight: 700;
	border-bottom: .0625rem solid #606060;
}

.page__dateline {
	font-size: .8rem;
	color: #999999;
}

.page__controls {
	margin: 1rem 0;
	display: flex;
	flex-wrap: wrap;
	row-gap: 1rem; /* Firefox only. One day... */
}

.page__control {
	margin-inline-end: 1rem;
}

.page__control:last-child {
	margin-inline-end: 0;
}

.page__button-form {
	display: inline;
	border-width: 0;
	margin: 0;
	padding: 0;
}

.page__control-link {
	display: inline-block;
	padding: .5rem .75rem;
	background-color: #efa200;
	color: white;
	line-height: 1rem;
}

.page__control-link:hover,
.page__control-link:active,
.page__control-link:focus {
	background-color: #ab6f00;
	color: inherit;
}

/* also used on page `re_en` */
.page__button {
	border: 0;
	font-size: 1em; /* avoid shrinkage */
	font-family: inherit;
	padding: .5rem .75rem;
	background-color: rgb(16, 82, 225);
	color: white;
	cursor: pointer;
	line-height: 1rem;
}

.page__button:hover,
.page__button:active,
.page__button:focus {
	background-color: rgb(5, 52, 185);
}

.page__content {
	margin: 2rem 0 0;
}

.page__content > *:first-child {
	margin-top: 0;
}

.page__content > *:last-child {
	margin-bottom: 0;
}

.page__ancestors {
	text-align: right;
	margin: 2rem 0 0;
}

.page__credit {
	font-size: .8rem;
	color: #999999;
}

.page__comments {
	max-width: 32rem;
}

.page__comments > *:first-child {
	margin-top: 0;
}

.page__comments > *:last-child {
	margin-bottom: 0;
}

.page__comment {
	margin: 2rem 0 2rem;
}

.page__comment > *:first-child {
	margin-top: 0;
}

.page__comment > *:last-child {
	margin-bottom: 0;
}

.page__comment--hidden {
	opacity: .5;
}

.page__comment-h4,
.page__content h4 {
	color: #75a7f2;
	font-weight: bold;
	margin: 2rem 0 1rem;
}

.page__comment-h4--admin {
	color: #00dddd;
}

.page__comment-content {
	white-space: pre-wrap;
}

.page__regular-form > *:first-child {
	margin-top: 0;
}

.page__regular-form > *:last-child {
	margin-bottom: 0;
}

.page__comments-closed {
	font-style: italic;
}

.page__comment-input-name,
.page__comment-input-text,
.page__comment-input-sqrt,
.page__search-text {
	border: .0625rem solid #888888;
	font-size: 1rem;
	font-family: inherit;
	font-weight: inherit;
	background-color: transparent;
	color: inherit;
}

.page__comment-input-text {
	width: 100%;
}

.page__comment-submit-button {
	text-align: right;
}

.page__footer {
	display: flex;
	font-size: .8rem;
	flex-wrap: wrap;
	align-items: baseline;
	color: #999999;
}

.page__footer-entry {
	margin-inline-end: 1rem;
}

.page__footer > *:last-child {
	margin-inline-end: 0;
}

.page__search-submit {
	display: none;
}

.page__comments-h3,
.page__content h3 {
	margin: 2rem 0 1rem;
	font-size: 1.25rem;
	font-weight: bold;
	color: #98afd4;
	border-bottom: .0625rem dotted #606060;
}

/* Globals... */

a {
	color: #ffb200; /* orange */
	text-decoration: none;
	cursor: pointer; /* even if no href */
}

a:hover,
a:active,
a:focus {
	color: #ffdC2A; /* yellow */
}

h5 {
	font-weight: bold;
	margin: 1rem 0;
}

p {
	margin: 1rem 0;
}

p.rant {
	font-weight: bold;
	font-size: 2rem;
}

blockquote {
	margin: 1rem 0 1rem 2rem;
}

blockquote > *:first-child {
	margin-top: 0;
}

blockquote > *:last-child {
	margin-bottom: 0;
}

hr {
	height: 0;
	border-width: 0;
	border-top: .0625rem dotted #a0a0a0;
}

big {
	/* can be nested */
	font-size: 1.25em;
}

small {
	/* can be nested */
	font-size: .8em;
}

sup {
	font-size: .8em;
	vertical-align: super;
}

sub {
	font-size: .8em;
	vertical-align: sub;
}

var,
em,
i {
	font-style: italic;
}

i em,
em i {
	font-style: normal;
}

strong {
	font-weight: bold;
}

pre {
	font-size: .8rem;
	margin: 1rem 0 1rem 2rem;
	white-space: pre-wrap;
	font-family: consolas, courier new, monospace;
	color: #ffd980; /* yellow */

	/* for `re_ar` */
	direction: ltr;
}

code,
tt,
kbd {
	font-family: consolas, courier new, monospace;
	color: #ffd980; /* yellow */

	/* for `re_ar` */
	direction: ltr;
}

var {
	color: #78C6B9; /* pale green */
}

table {
	border-collapse: collapse;
	font-size: .8rem;

	/* extra-wide tables, you can just scroll to see */
	display: block;
	overflow: auto;
}

th {
	border: .0625rem solid #555555;
	font-weight: bold;
	color: #75a7f2;
	padding: .5rem;
}

td {
	border: .0625rem solid #555555;
	padding: .5rem;
}

th > *:first-child,
td > *:first-child {
	margin-top: 0;
}

th > *:last-child,
td > *:last-child {
	margin-bottom: 0;
}

ul,
ol {
	margin: 1rem 0;
	padding-inline-start: 1.5rem;
}

ol {
	list-style-type: decimal;
}

ul {
	list-style-type: disc;
}

ul ul {
	list-style-type: circle;
}

ul ul ul {
	list-style-type: square;
}

dl {
	margin: 1rem 0 1rem 2rem;
}

dt {
	margin: 1rem 0;
	font-weight: bold;
}

dd {
	margin: 1rem 0;
}

/* Used in Ra */
.tworld {
	text-align: right;
}
.between {
	text-align: center;
}

/* Used on pages `re__en` */
.re__expr {
	color: #78C6B9; /* pale green */
}

.re__exercise {
	border: 1px solid limegreen;
	margin: 1em 0;
	padding: 1em;
}

.re__warning {
	border: 1px solid red;
	margin: 1em 0;
	padding: 1em;
}

.re__exercise > :first-child,
.re__warning > :first-child {
	margin-top: 0;
}

.re__exercise > :last-child,
.re__warning > :last-child {
	margin-bottom: 0;
}