/* vw scaling */
.u-large {
  font-size: 4.6875vw;
  line-height: 1.2em;
}
.u-large input {
  font-size: 4.6875vw;
  line-height: 1.3em;
}
.u-large button {
  font-size: 4.6875vw;
  line-height: 1.2em;
}

.u-medium {
  font-size: 3.125vw;
  line-height: 1.2em;
}
.u-medium input {
  font-size: 3.125vw;
  line-height: 1.3em;
}
.u-medium button {
  font-size: 3.125vw;
  line-height: 1.2em;
}

.u-small {
  font-size: 2.0833333333vw;
  line-height: 1.2em;
}
.u-small input {
  font-size: 2.0833333333vw;
  line-height: 1.3em;
}
.u-small button {
  font-size: 2.0833333333vw;
  line-height: 1.2em;
}

/* Not the same as grid horizontal alignment */
.u-left {
  text-align: left;
}

.u-center {
  text-align: center;
}

.u-right {
  text-align: right;
}

.u-mute {
  color: #586e75;
}
.u-mute > * {
  color: #586e75;
}

.u-primary {
  color: #839496;
}
.u-primary > * {
  color: #839496;
}

.u-bright {
  color: #93a1a1;
}
.u-bright > * {
  color: #93a1a1;
}

.u-success {
  color: #859900;
}
.u-success > * {
  color: #859900;
}

.u-failure {
  color: #dc322f;
}
.u-failure > * {
  color: #dc322f;
}

.u-accent {
  color: #268bd2;
}
.u-accent > * {
  color: #268bd2;
}

*::-moz-selection {
  background: #073642;
}
*::selection {
  background: #073642;
}

html, body {
  text-rendering: optimizeLegibility;
  font-family: Consolas, monospace;
  background-color: #002b36;
  color: #839496;
}
html > *, body > * {
  color: #839496;
}

a {
  text-decoration: none;
  outline: none;
  color: inherit;
}

a:hover, a:active, a:focus {
  text-decoration: underline;
  -webkit-text-decoration-color: #268bd2;
          text-decoration-color: #268bd2;
  outline: none;
  color: inherit;
}

fieldset {
  margin: 0.1em;
}

input[type=text], input[type=password], input[type=button] {
  background: #002b36;
  color: #839496;
  font-family: Consolas, monospace;
  border: 2px solid;
  padding: 0 5px;
}
input[type=text]:focus, input[type=text]:hover, input[type=password]:focus, input[type=password]:hover, input[type=button]:focus, input[type=button]:hover {
  border-color: #268bd2;
}
input[type=text]:invalid, input[type=password]:invalid, input[type=button]:invalid {
  box-shadow: none;
  border-color: #dc322f;
}
input[type=text]:-moz-submit-invalid, input[type=password]:-moz-submit-invalid, input[type=button]:-moz-submit-invalid {
  box-shadow: none;
  border-color: #dc322f;
}
input[type=text]:-moz-ui-invalid, input[type=password]:-moz-ui-invalid, input[type=button]:-moz-ui-invalid {
  box-shadow: none;
  border-color: #dc322f;
}

button {
  background: #002b36;
  color: #839496;
  border: 2px solid;
  padding: 3px;
}
button:focus, button:hover {
  border-color: #268bd2;
  color: #268bd2;
  outline: none;
}
button::-moz-focus-inner {
  border: 0;
}

.grid {
  display: flex;
  flex: 1;
  flex-direction: inherit;
}

.grid-h {
  flex-direction: row;
}
.grid-h > .g-left {
  justify-content: flex-start;
}
.grid-h > .g-center-h {
  justify-content: center;
}
.grid-h > .g-right {
  justify-content: flex-end;
}
.grid-h > .g-top {
  align-items: flex-start;
}
.grid-h > .g-center-v {
  align-items: center;
}
.grid-h > .g-bottom {
  align-items: flex-end;
}

.grid-v {
  flex-direction: column;
}
.grid-v > .g-left {
  align-items: flex-start;
}
.grid-v > .g-center-h {
  align-items: center;
}
.grid-v > .g-right {
  align-items: flex-end;
}
.grid-v > .g-top {
  justify-content: flex-start;
}
.grid-v > .g-center-v {
  justify-content: center;
}
.grid-v > .g-bottom {
  justify-content: flex-end;
}

.container {
  height: 98vh;
  width: 98vw;
  padding: 1vh 1vw;
}

#checkSecret {
  padding: 0;
  width: 100%;
  /* Drop all hint of an input */
  cursor: default;
  outline: none;
  border: none;
  background: transparent;
  /* text-shadow gives us the original text without a cursor */
}
#checkSecret.u-primary {
  color: transparent;
  text-shadow: 0 0 0 #839496;
}
#checkSecret.u-mute {
  color: transparent;
  text-shadow: 0 0 0 #586e75;
}

.byline > a:hover, .byline > a:active, .byline > a:focus {
  text-decoration: none;
  outline: none;
  color: #268bd2;
}