body,
html,
input,
textarea {
  margin           : 0;
  padding          : 0;
  color            : white;
  font-family      : 'Segoe UI',
                     'Tahoma',
                     'Arial',
                     'Sans';
  line-height      : 0.9;
}

html {   background-color : black; }

body {
  display: flex;
  flex-flow: column;
  align-content: stretch;
}

::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track  {
  background: hsla(220,10%,30%,0.10);
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: hsla(220,10%,30%,0.60);
}
::-webkit-scrollbar-corner {
  background: hsl(220,10%,3%);
}


.header {
  display          : flex;
  background-color : hsla(240, 10%, 10%, 1);
  align-items      : center;
  flex-direction   : row;
  z-index: 2;
}

.row {
  padding : 0.8rem 1.5rem;
}

.col:not(:last-child) {
  margin-right : 1rem;
}

.right {
  float: right;
  position: absolute;
  right: 1.5rem;
}

#user-input {
  display: flex;
  align-self: stretch;
  xpadding      : 0.6rem 1rem;
  border-color : hsla(240, 20%, 0%, 1);
  flex         : 1 1 auto;
  width: 100%;
  font-weight: 600;
  text-align: center;
  background-color: transparent;
}

button {
  background: hsl(240, 0%, 20%);
  color: white;
  border: none;
  font-size: 1.5rem;
  border-radius: 0.2rem;
  min-width: 1.7rem;
  cursor: pointer;
  box-shadow: 0 0 13px black;
  text-align: center;
  white-space: nowrap;
  height: 1.7rem;
}

button:hover {
  background: hsl(240, 20%, 40%);
}

#hint {
  z-index: -2;
  position: absolute;
  top: 4rem;
  width: 100%;
  content: '[Type here]';
  text-align: center;
  color: hsl(0, 0%, 20%);
}

.title {
  font-size   : 1.5rem;
  font-style  : italic;
  font-weight : 700;
  opacity: 0.2;
}

.subtle {
  opacity : 0.7;
}