:root {
  --user:     #fff;
  --base:     #0f0;
  --back:     #111;
  --shadow1:  rgba(0,30,255,0.1);
  --shadow2:  rgba(0,255,0,0.2);
}

html.contrast {
  --user:     #000;
  --base:     #008;
  --back:     #eee;
  --shadow1:  rgba(0,0,0,0.5);
  --shadow2:  rgba(0,255,0,0.4);
}


* {outline: none; box-sizing: border-box;}

html {background-color: var(--back); min-height: 100%; font-size: 12px}
html.debug{font-size: 16px}
html.debug pre {white-space: pre-wrap; z-index: 99999;}


html.size-medium,
html.size-med {font-size: 16px}
html.size-large,
html.size-big {font-size: 20px}


body {padding: 0; margin: 0; min-height: 100%; font-family: 'Courier New'; padding: 0.8333rem; line-height: 1.4;}
html,
body {color: var(--base)}

em {font-style: normal; background-color: var(--base); color: var(--back); display: inline-block; padding: 0 0.1666rem; border-bottom: 1px solid var(--back); border-top: 1px solid var(--back)}

#terminal-container {}
  #terminal-container .output {}
    #terminal-container .output ul {margin: 0; padding: 0}
    #terminal-container .output li {list-style: none; margin: 0; padding: 0}
    #terminal-container .label {width: 9.5833rem; color: var(--user); display: inline-block; line-height: 1.4166rem;}
  #terminal-container .input {overflow: hidden;}
  #terminal-container .input * {}
    #terminal-container .input label {float: left; width: 9.5833rem; line-height: 1.4166rem; color: var(--user)}
    #terminal-container .input input {float: left; width: calc(100% - 13.3333rem); color: var(--base); display: block; background: transparent; padding: 0; margin: 0; border: none; height: 1.4166rem; padding-left: 0.5833rem;}


li.loading {display: none;}
body.loading .loading {display: block;}

li.loading span {display: none; text-align: center; width: 0.8333rem}
li.loading.active-1 span:nth-child(1) {display: inline-block;}
li.loading.active-2 span:nth-child(2) {display: inline-block;}
li.loading.active-3 span:nth-child(3) {display: inline-block;}
li.loading.active-4 span:nth-child(4) {display: inline-block;}



/* EXPERIMENTAL */
.glow,
.glow input {color: var(--base); text-shadow: 0 0 5px var(--base);}

@keyframes flicker {
  0%  {opacity: 0.27861;}
  5%  {opacity: 0.34769;}
  10% {opacity: 0.23604;}
  15% {opacity: 0.90626;}
  20% {opacity: 0.18128;}
  25% {opacity: 0.83891;}
  30% {opacity: 0.65583;}
  35% {opacity: 0.67807;}
  40% {opacity: 0.26559;}
  45% {opacity: 0.84693;}
  50% {opacity: 0.96019;}
  55% {opacity: 0.08594;}
  60% {opacity: 0.20313;}
  65% {opacity: 0.71988;}
  70% {opacity: 0.53455;}
  75% {opacity: 0.37288;}
  80% {opacity: 0.71428;}
  85% {opacity: 0.70419;}
  90% {opacity: 0.7003;}
  95% {opacity: 0.36108;}
  100% {opacity: 0.24387;}
}

@keyframes textShadow {
  0%    {text-shadow: 0.4389924193300864px    0 1px var(--shadow1),   -0.4389924193300864px   0 1px var(--shadow2),   0 0 3px;}
  5%    {text-shadow: 2.7928974010788217px    0 1px var(--shadow1),   -2.7928974010788217px   0 1px var(--shadow2),   0 0 3px;}
  10%   {text-shadow: 0.02956275843481219px   0 1px var(--shadow1),   -0.02956275843481219px  0 1px var(--shadow2),   0 0 3px;}
  15%   {text-shadow: 0.40218538552878136px   0 1px var(--shadow1),   -0.40218538552878136px  0 1px var(--shadow2),   0 0 3px;}
  20%   {text-shadow: 3.4794037899852017px    0 1px var(--shadow1),   -3.4794037899852017px   0 1px var(--shadow2),   0 0 3px;}
  25%   {text-shadow: 1.6125630401149584px    0 1px var(--shadow1),   -1.6125630401149584px   0 1px var(--shadow2),   0 0 3px;}
  30%   {text-shadow: 0.7015590085143956px    0 1px var(--shadow1),   -0.7015590085143956px   0 1px var(--shadow2),   0 0 3px;}
  35%   {text-shadow: 3.896914047650351px     0 1px var(--shadow1),   -3.896914047650351px    0 1px var(--shadow2),   0 0 3px;}
  40%   {text-shadow: 3.870905614848819px     0 1px var(--shadow1),   -3.870905614848819px    0 1px var(--shadow2),   0 0 3px;}
  45%   {text-shadow: 2.231056963361899px     0 1px var(--shadow1),   -2.231056963361899px    0 1px var(--shadow2),   0 0 3px;}
  50%   {text-shadow: 0.08084290417898504px   0 1px var(--shadow1),   -0.08084290417898504px  0 1px var(--shadow2),   0 0 3px;}
  55%   {text-shadow: 2.3758461067427543px    0 1px var(--shadow1),   -2.3758461067427543px   0 1px var(--shadow2),   0 0 3px;}
  60%   {text-shadow: 2.202193051050636px     0 1px var(--shadow1),   -2.202193051050636px    0 1px var(--shadow2),   0 0 3px;}
  65%   {text-shadow: 2.8638780614874975px    0 1px var(--shadow1),   -2.8638780614874975px   0 1px var(--shadow2),   0 0 3px;}
  70%   {text-shadow: 0.48874025155497314px   0 1px var(--shadow1),   -0.48874025155497314px  0 1px var(--shadow2),   0 0 3px;}
  75%   {text-shadow: 1.8948491305757957px    0 1px var(--shadow1),   -1.8948491305757957px   0 1px var(--shadow2),   0 0 3px;}
  80%   {text-shadow: 0.0833037308038857px    0 1px var(--shadow1),   -0.0833037308038857px   0 1px var(--shadow2),   0 0 3px;}
  85%   {text-shadow: 0.09769827255241735px   0 1px var(--shadow1),   -0.09769827255241735px  0 1px var(--shadow2),   0 0 3px;}
  90%   {text-shadow: 3.443339761481782px     0 1px var(--shadow1),   -3.443339761481782px    0 1px var(--shadow2),   0 0 3px;}
  95%   {text-shadow: 2.1841838852799786px    0 1px var(--shadow1),   -2.1841838852799786px   0 1px var(--shadow2),   0 0 3px;}
  100%  {text-shadow: 2.6208764473832513px    0 1px var(--shadow1),   -2.6208764473832513px   0 1px var(--shadow2),   0 0 3px;}
}

.crt::before {content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); z-index: 2; background-size: 100% 4px, 3px 100%; pointer-events: none;}
.crt::after {content: " ";display: block;position: fixed;top: 0;left: 0;bottom: 0;right: 0;background: rgba(18, 16, 16, 0.1);opacity: 0;z-index: 2;pointer-events: none;animation: flicker 0.15s infinite;}

.crt {animation: textShadow 1.5s infinite;}