html,
body,
* {
     box-sizing: content-box;
     clear: none;
     padding: 0;
     margin: 0;
     border-collapse: collapse;
}

html,
body {
     height: 100%;
     font-style: normal;
     font-size: 16px;
     border-spacing: 0;
     display: flex;
     flex-direction: column;
}

body>* {
     flex-shrink: 0;
}

nav {
     line-height: 36px;
     padding: 0 2px;
     border-bottom: solid 1px #888;
}

h1 {
     font-size: 20px;
     margin: 12px 0;
}

.pane {
     align-self: center;
     margin: 0 6px;
     max-width: 800px;
     width: calc(100% - 12px);
}

.container {
     display: flex;
     flex-direction: column;
     border-bottom: solid 1px #888;
}

body {
     font-family: 'open sans', sans-serif;
}

.bg-0 {
     background-color: #fcf4f8;
}

.bg-1 {
     background-color: #fcf8f4;
}

.bg-2 {
     background-color: #f8fcf4;
}

.bg-3 {
     background-color: #f4fcf8;
}
.bg-3a {
     background-color: #e8f8f0;
}
.bg-3b {
     background-color: #d0f0e0;
}

.bg-4 {
     background-color: #f4f8fc;
}
.bg-4a {
     background-color: #e8f0f8;
}
.bg-4b {
     background-color: #d0e0f0;
}

.bg-5 {
     background-color: #f8f4fc;
}
.bg-5a {
     background-color: #f0e8f8;
}
.bg-5b {
     background-color: #e0d0f0;
}

.red {
     color: #C00;
}

.blue {
     color: #00C;
}

a {
     text-decoration: none;
     color: #666;
}

a:hover {
     color: #000;
}

.box {
     display: flex;
}

.fill {
     flex-grow: 1;
}

#logo {
     font-size: 32px;
     color: #000;
}

.input-group {
     display: flex;
     align-items: stretch;
}

.input-group > :first-child {
     margin-left: 0;
}

.input-group > :last-child {
     margin-right: 0;
}

.b-a {
     border: solid 1px #888;
     border-radius: 4px;
}

.button {
     border: solid 1px #888;
     border-radius: 4px;
     padding: 2px 4px;
     color: #000;
     box-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.2);
     margin: 0 4px;
}

.button.disabled {
     opacity: 0.5;
     cursor: no-drop;
}

p, .p {
     line-height: 1.5;
     margin-bottom: 12px;
}

input {
     line-height: 1.5;
}

.np {
     margin-bottom: 0;
}

.b {
     font-weight: bold;
}

#debug > p {
     font-family: 'Source Code Pro', monospace;
     font-size: 12px;
     margin-bottom: 4px;
}

#history {
     overflow-y: scroll;
     height: 9em;
     padding: 0;
}

#history > a {
     display: block;
     padding: 0 4px;
}

#history > a:hover {
     background-color: #ccc;
}