/*------------------------------------------------------------------------------
 * Global
 *----------------------------------------------------------------------------*/

* {
 box-sizing: border-box;
}

/* NOTE: this is the footer background color that will extend "below" the page */
html {
  background: #333;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

.inner-wrapper {
  margin: 0 auto;
  max-width: 1200px;
}

.clearfix {
  clear: both;
}

/*------------------------------------------------------------------------------
 * Header
 *----------------------------------------------------------------------------*/

header {
  background: #222;
  padding: 10px;
}

header .inner-wrapper {
  display: flex;
}

header .right {
  margin: 8px 0 0 auto;
}

header .right a {
  color: #bbb;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  margin-left: 16px;
  text-decoration: none;
  text-transform: uppercase;
}

header .right a:hover {
  color: #fff;
}

header h1 {
  color: #eee;
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

header h1 img {
  margin: -5px 0 0 0;
  width: 35px;
  vertical-align: middle;
}

header .tld {
  color: #aaa;
  font-size: 22px;
  font-weight: 300;
}

/*------------------------------------------------------------------------------
 * Main
 *----------------------------------------------------------------------------*/

main {
  background: #fff;
  min-height: 700px;
  min-width: 800px;
  padding: 10px;
}

main .inner-wrapper {
  display: flex;
  justify-content: space-between;
}

main section {
  width: 49%;
}

main section h2 {
  border-bottom: 1px solid #ddd;
  font-size: 28px;
  font-weight: 300;
  margin-top: 5px;
  padding: 5px 0;
}

main section h2 .text {
  display: inline-block;
  margin-right: 6px;
}

#namespace {
  font-family: "Droid Sans Mono", monospace;
  font-size: 14px;
  margin: 0;
  padding: 10px 0;
}

#mainInput {
  font-family: "Droid Sans Mono", monospace;
  font-size: 14px;
  min-height: 750px;
  width: 100%;
}

section h2 button {
  border-radius: 4px;
  border: 0;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  margin-right: 4px;
  padding: 8px 16px;
  text-decoration: none;
  vertical-align: text-bottom;
}

section h2 button .fa {
  font-size: 14px;
  margin-right: 5px;
}

.primary {
  background: #2185d0;
}

.primary:hover {
  background: #1678c2;
}

.secondary {
  background: #e0e1e2;
  color: #5b5b5b;
}

.secondary:hover {
  background: #cacbcd;
  color: #2c2c2c;
}

/* NOTE: this is because the eraser icon is weirdly slanted to the right */
#clearBtn {
  padding-left: 14px;
}

#noInputMsg {
  color: #999;
  font-family: "Georgia", serif;
  font-size: 17px;
  font-style: italic;
  margin-top: 70px;
}

#outputArea {
  padding: 20px;
}

/*------------------------------------------------------------------------------
 * Footer
 *----------------------------------------------------------------------------*/

footer {
  color: #999;
  padding: 10px;
}

footer p {
  font-size: 14px;
  margin: 5px 0;
  padding: 0;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/*------------------------------------------------------------------------------
 * Loading Animation
 *----------------------------------------------------------------------------*/

#loadingContainer h1 {
  color: #fff;
  font-size: 32px;
  font-weight: 300;
  text-align: center;
}

#loadingContainer .outer {
  margin: 0px auto 0 auto;
  overflow: hidden;
  padding-top: 150px;
  width: 700px;
}

#loadingContainer .animation-target {
  margin: 0 auto;
  width: 100px;
}

.animation-target {
  animation: animation 2800ms linear infinite both;
}

@keyframes animation {
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -500, 0, 0, 1); }
  1.14% { transform: matrix3d(1, 0, 0, 0, 0.621, 1, 0, 0, 0, 0, 1, 0, -282.728, 0, 0, 1); }
  2.29% { transform: matrix3d(1, 0, 0, 0, 0.829, 1, 0, 0, 0, 0, 1, 0, -149.309, 0, 0, 1); }
  3.43% { transform: matrix3d(1, 0, 0, 0, 0.695, 1, 0, 0, 0, 0, 1, 0, -72.484, 0, 0, 1); }
  4.54% { transform: matrix3d(1, 0, 0, 0, 0.477, 1, 0, 0, 0, 0, 1, 0, -31.997, 0, 0, 1); }
  4.58% { transform: matrix3d(1, 0, 0, 0, 0.47, 1, 0, 0, 0, 0, 1, 0, -31.079, 0, 0, 1); }
  6.76% { transform: matrix3d(1, 0, 0, 0, 0.146, 1, 0, 0, 0, 0, 1, 0, -1.766, 0, 0, 1); }
  6.86% { transform: matrix3d(1, 0, 0, 0, 0.135, 1, 0, 0, 0, 0, 1, 0, -1.214, 0, 0, 1); }
  9.01% { transform: matrix3d(1, 0, 0, 0, -0.003, 1, 0, 0, 0, 0, 1, 0, 2.88, 0, 0, 1); }
  9.15% { transform: matrix3d(1, 0, 0, 0, -0.007, 1, 0, 0, 0, 0, 1, 0, 2.886, 0, 0, 1); }
  11.23% { transform: matrix3d(1, 0, 0, 0, -0.033, 1, 0, 0, 0, 0, 1, 0, 1.99, 0, 0, 1); }
  20.16% { transform: matrix3d(1, 0, 0, 0, 0.002, 1, 0, 0, 0, 0, 1, 0, 0.01, 0, 0, 1); }
  23.45% { transform: matrix3d(1, 0, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, -0.003, 0, 0, 1); }
  28.47% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1); }
  28.57% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1); }
  29.1% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.001, -19.181, 0, 1); }
  29.86% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.002, -36.749, 0, 1); }
  31.15% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.002, -46.259, 0, 1); }
  32.75% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.001, -37.454, 0, 1); }
  34.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -21.867, 0, 1); }
  35.71% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.739, 0, 1); }
  35.94% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -8.148, 0, 1); }
  37.51% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.032, 0, 1); }
  40.08% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.893, 0, 1); }
  46.45% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.005, 0, 1); }
  49.02% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.328, 0, 1); }
  55.38% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.001, 0, 1); }
  57.96% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.028, 0, 1); }
  62.4% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.006, 0, 1); }
  62.5% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.006, 0, 1); }
  64.04% { transform: matrix3d(1, 0, 0, 0, 0.375, 1, 0, 0, 0, 0, 1, 0, 0, -0.001, 0, 1); }
  64.19% { transform: matrix3d(1, 0, 0, 0, 0.41, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  64.29% { transform: matrix3d(1, 0, 0, 0, 0.434, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  64.29% { transform: matrix3d(1, 0, 0, 0, 0.434, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  65.57% { transform: matrix3d(1, 0, 0, 0, 0.704, 1, 0, 0, 0, 0, 1, 0, 218.852, 0, 0, 1); }
  65.82% { transform: matrix3d(1, 0, 0, 0, 0.747, 1, 0, 0, 0, 0, 1, 0, 257.135, 0, 0, 1); }
  67.11% { transform: matrix3d(1, 0, 0, 0, 0.903, 1, 0, 0, 0, 0, 1, 0, 416.676, 0, 0, 1); }
  67.36% { transform: matrix3d(1, 0, 0, 0, 0.921, 1, 0, 0, 0, 0, 1, 0, 439.293, 0, 0, 1); }
  68.65% { transform: matrix3d(1, 0, 0, 0, 0.957, 1, 0, 0, 0, 0, 1, 0, 517.583, 0, 0, 1); }
  68.9% { transform: matrix3d(1, 0, 0, 0, 0.956, 1, 0, 0, 0, 0, 1, 0, 526.138, 0, 0, 1); }
  70.43% { transform: matrix3d(1, 0, 0, 0, 0.922, 1, 0, 0, 0, 0, 1, 0, 546.667, 0, 0, 1); }
  72.62% { transform: matrix3d(1, 0, 0, 0, 0.864, 1, 0, 0, 0, 0, 1, 0, 528.816, 0, 0, 1); }
  74.4% { transform: matrix3d(1, 0, 0, 0, 0.839, 1, 0, 0, 0, 0, 1, 0, 510.313, 0, 0, 1); }
  76.59% { transform: matrix3d(1, 0, 0, 0, 0.832, 1, 0, 0, 0, 0, 1, 0, 498.826, 0, 0, 1); }
  78.37% { transform: matrix3d(1, 0, 0, 0, 0.834, 1, 0, 0, 0, 0, 1, 0, 496.885, 0, 0, 1); }
  84.52% { transform: matrix3d(1, 0, 0, 0, 0.84, 1, 0, 0, 0, 0, 1, 0, 500.078, 0, 0, 1); }
  86.31% { transform: matrix3d(1, 0, 0, 0, 0.839, 1, 0, 0, 0, 0, 1, 0, 500.208, 0, 0, 1); }
  92.49% { transform: matrix3d(1, 0, 0, 0, 0.839, 1, 0, 0, 0, 0, 1, 0, 499.994, 0, 0, 1); }
  94.28% { transform: matrix3d(1, 0, 0, 0, 0.839, 1, 0, 0, 0, 0, 1, 0, 499.986, 0, 0, 1); }
  98.21% { transform: matrix3d(1, 0, 0, 0, 0.839, 1, 0, 0, 0, 0, 1, 0, 499.997, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0.839, 1, 0, 0, 0, 0, 1, 0, 500, 0, 0, 1); }
}