/***********************************************************
 * Re-resets
 */

h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ol, ul,
img, iframe,
form, table, canvas,
figure, section, audio, video {
    margin-bottom: 1rem;
}
img, iframe, audio, video, svg {
    display: block;
}
ol, ul { padding-left: 2rem; }
ol { list-style-type: decimal; }
ul { list-style-type: circle; }
li { margin-bottom: .5rem; }

h1, .h1  { font-size: 2.50em; }
h2, .h2  { font-size: 2.00em; }
h3, .h3  { font-size: 1.75em; }
h4, .h4  { font-size: 1.50em; }
h5, .h5  { font-size: 1.25em; }
h6, .h6  { font-size: 1.12em; }

pre {
    background: #000;
    padding: 1rem;
}
pre, code { font-family: "Roboto Mono", monospace; }
code { font-size: 87.5%; }
strong { font-weight: 700; }
em { font-style: italic; }

/***********************************************************
 * Authored
 */
:root {
  --accent: #79B791;
  --gray: rgba(255,255,255, .24);
}

html, body {height: 100%;}
body {
  background: #1e1e1e;
  color: #fafafa;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-size: 18px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container {
  padding: 2rem 1rem;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.container.middle {
  margin: auto;
}

.lead, .center {
  text-align: center;
}
.btn {
  background: transparent;
  border: 0;
  display: block;
  color: inherit;
  font: inherit;
  font-size: 16px;
  border: 2px solid var(--accent);
  border-radius: .2em;
  padding: .87em 2em;
}
.btn[disabled] {
  border-color: #6A6A6A;
}
.btn:hover:not([disabled]) {
  background: rgba(255,255,255, 0.04)
}
.btn:active:not([disabled]) {
  background: rgba(255,255,255, 0.12)
}
.btn-row { text-align: right; }
.btn-row .btn { display: inline-block; }

input {
  display: block;
  margin-bottom: 1em;
  background: 0;
  border: 0;
  padding: .2em 0;
  color: inherit;
  font: inherit;
  border-bottom: 2px solid var(--gray);
  width: 100%;
}
input:focus {
  border-bottom-color: var(--accent);
}

.right {float: right;}
.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex * {
  flex: 1;
  min-width: 200px;
  margin: .5em;
}
.warn {
  padding: 1rem;
  border: 1px solid red;
  border-radius: .2em;
}