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

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

.page__html {
  /* this becomes visible below the footer if the page is very short */
  background-color: rgb(16, 16, 16);
}

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

/* a page__outer is full width and provides a background */
/* mobile first */
.page__outer {
  padding: .5rem;
}

blockquote {
  margin: 1rem .5rem;
}

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

  blockquote {
    margin: 1rem 2rem;
  }
}

.page__outer--header {
  background-color: rgb(46, 46, 46);
}

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

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

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

/* this narrows the actual content but not the background colour */
.page__wrapper {
  max-width: 32rem;
}

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

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

.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;
}

.page__dateline {
  border-top: .0625rem solid #606060;
  font-size: .8rem;
  color: #999999;
}

.page__controls {
  margin: 2rem 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;
  display: inline-block;
}

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

.page__content {
  margin: 2rem 0;
}

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

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

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

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

input[type=checkbox]:checked ~ .page--when-unchecked {
  display: none;
}

input[type=checkbox]:not(:checked) ~ .page--when-checked {
  display: none;
}

.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-no-more {
  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 > *: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;
}