/*store theme as class and just call it by $settings = $theme.win type of thing*/
@font-face {
  font-family: JetBrainsMono;
  src: url("../fonts/JetBrainsMono-Light.ttf");
}
body[theme=-std] {
  background-color: black;
  color: black;
}
body[theme=-std] #notice, body[theme=-std] #display {
  background-color: black;
}
body[theme=-std] #notice:before, body[theme=-std] #display:before {
  color: black;
}
body[theme=-std] #pre span {
  display: none;
}
body[theme=-std] .hide {
  visibility: hidden;
}
body[theme=-std] [color=black] {
  color: black;
}
body[theme=-std] [color=red] {
  color: black;
}
body[theme=-std] [color=green] {
  color: black;
}
body[theme=-std] [color=yellow] {
  color: black;
}
body[theme=-std] [color=blue] {
  color: black;
}
body[theme=-std] [color=magenta] {
  color: black;
}
body[theme=-std] [color=cyan] {
  color: black;
}
body[theme=-std] [color=white] {
  color: black;
}
body[theme=-std] [color=bblack] {
  color: black;
}
body[theme=-std] [color=bred] {
  color: black;
}
body[theme=-std] [color=bgreen] {
  color: black;
}
body[theme=-std] [color=byellow] {
  color: black;
}
body[theme=-std] [color=bblue] {
  color: black;
}
body[theme=-std] [color=bmagenta] {
  color: black;
}
body[theme=-std] [color=bcyan] {
  color: black;
}
body[theme=-std] [color=bwhite] {
  color: black;
}

body {
  background-color: black;
  color: black;
}
body #notice, body #display {
  background-color: black;
}
body #notice:before, body #display:before {
  color: black;
}
body #pre span {
  display: none;
}
body .hide {
  visibility: hidden;
}
body [color=black] {
  color: black;
}
body [color=red] {
  color: black;
}
body [color=green] {
  color: black;
}
body [color=yellow] {
  color: black;
}
body [color=blue] {
  color: black;
}
body [color=magenta] {
  color: black;
}
body [color=cyan] {
  color: black;
}
body [color=white] {
  color: black;
}
body [color=bblack] {
  color: black;
}
body [color=bred] {
  color: black;
}
body [color=bgreen] {
  color: black;
}
body [color=byellow] {
  color: black;
}
body [color=bblue] {
  color: black;
}
body [color=bmagenta] {
  color: black;
}
body [color=bcyan] {
  color: black;
}
body [color=bwhite] {
  color: black;
}

body[theme=linux-std] {
  background-color: #010101;
  color: #010101;
}
body[theme=linux-std] #notice, body[theme=linux-std] #display {
  background-color: #010101;
}
body[theme=linux-std] #notice:before, body[theme=linux-std] #display:before {
  color: white;
}
body[theme=linux-std] #pre span {
  display: none;
}
body[theme=linux-std] #pre span.good {
  display: inline-block;
}
body[theme=linux-std] .hide {
  visibility: hidden;
}
body[theme=linux-std] [color=black] {
  color: #010101;
}
body[theme=linux-std] [color=red] {
  color: white;
}
body[theme=linux-std] [color=green] {
  color: white;
}
body[theme=linux-std] [color=yellow] {
  color: white;
}
body[theme=linux-std] [color=blue] {
  color: white;
}
body[theme=linux-std] [color=magenta] {
  color: white;
}
body[theme=linux-std] [color=cyan] {
  color: white;
}
body[theme=linux-std] [color=white] {
  color: white;
}
body[theme=linux-std] [color=bblack] {
  color: white;
}
body[theme=linux-std] [color=bred] {
  color: white;
}
body[theme=linux-std] [color=bgreen] {
  color: white;
}
body[theme=linux-std] [color=byellow] {
  color: white;
}
body[theme=linux-std] [color=bblue] {
  color: white;
}
body[theme=linux-std] [color=bmagenta] {
  color: white;
}
body[theme=linux-std] [color=bcyan] {
  color: white;
}
body[theme=linux-std] [color=bwhite] {
  color: white;
}

body[theme=linux] {
  background-color: #010101;
  color: #010101;
}
body[theme=linux] #notice, body[theme=linux] #display {
  background-color: #010101;
}
body[theme=linux] #notice:before, body[theme=linux] #display:before {
  color: #cccccc;
}
body[theme=linux] #pre span {
  display: none;
}
body[theme=linux] #pre span.good {
  display: inline-block;
}
body[theme=linux] .hide {
  visibility: hidden;
}
body[theme=linux] [color=black] {
  color: #010101;
}
body[theme=linux] [color=red] {
  color: #de382b;
}
body[theme=linux] [color=green] {
  color: #39b54a;
}
body[theme=linux] [color=yellow] {
  color: #ffc706;
}
body[theme=linux] [color=blue] {
  color: #006fb8;
}
body[theme=linux] [color=magenta] {
  color: #762671;
}
body[theme=linux] [color=cyan] {
  color: #2cb5e9;
}
body[theme=linux] [color=white] {
  color: #cccccc;
}
body[theme=linux] [color=bblack] {
  color: gray;
}
body[theme=linux] [color=bred] {
  color: red;
}
body[theme=linux] [color=bgreen] {
  color: lime;
}
body[theme=linux] [color=byellow] {
  color: yellow;
}
body[theme=linux] [color=bblue] {
  color: blue;
}
body[theme=linux] [color=bmagenta] {
  color: fuchsia;
}
body[theme=linux] [color=bcyan] {
  color: aqua;
}
body[theme=linux] [color=bwhite] {
  color: white;
}

body[theme=mac-std] {
  background-color: black;
  color: black;
}
body[theme=mac-std] #notice, body[theme=mac-std] #display {
  background-color: black;
}
body[theme=mac-std] #notice:before, body[theme=mac-std] #display:before {
  color: #e9ebeb;
}
body[theme=mac-std] #pre span {
  display: none;
}
body[theme=mac-std] #pre span.good {
  display: inline-block;
}
body[theme=mac-std] .hide {
  visibility: hidden;
}
body[theme=mac-std] [color=black] {
  color: black;
}
body[theme=mac-std] [color=red] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=green] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=yellow] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=blue] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=magenta] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=cyan] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=white] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=bblack] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=bred] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=bgreen] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=byellow] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=bblue] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=bmagenta] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=bcyan] {
  color: #e9ebeb;
}
body[theme=mac-std] [color=bwhite] {
  color: #e9ebeb;
}

body[theme=mac] {
  background-color: black;
  color: black;
}
body[theme=mac] #notice, body[theme=mac] #display {
  background-color: black;
}
body[theme=mac] #notice:before, body[theme=mac] #display:before {
  color: #cbcccd;
}
body[theme=mac] #pre span {
  display: none;
}
body[theme=mac] #pre span.good {
  display: inline-block;
}
body[theme=mac] .hide {
  visibility: hidden;
}
body[theme=mac] [color=black] {
  color: black;
}
body[theme=mac] [color=red] {
  color: #c23621;
}
body[theme=mac] [color=green] {
  color: #25bc24;
}
body[theme=mac] [color=yellow] {
  color: #adad27;
}
body[theme=mac] [color=blue] {
  color: #492ee1;
}
body[theme=mac] [color=magenta] {
  color: #d338d3;
}
body[theme=mac] [color=cyan] {
  color: #33bbc8;
}
body[theme=mac] [color=white] {
  color: #cbcccd;
}
body[theme=mac] [color=bblack] {
  color: #818383;
}
body[theme=mac] [color=bred] {
  color: #fc391f;
}
body[theme=mac] [color=bgreen] {
  color: #31e722;
}
body[theme=mac] [color=byellow] {
  color: #eaec23;
}
body[theme=mac] [color=bblue] {
  color: #5833ff;
}
body[theme=mac] [color=bmagenta] {
  color: #f935f8;
}
body[theme=mac] [color=bcyan] {
  color: #14f0f0;
}
body[theme=mac] [color=bwhite] {
  color: #e9ebeb;
}

body[theme=win-std] {
  background-color: #0c0c0c;
  color: #0c0c0c;
}
body[theme=win-std] #notice, body[theme=win-std] #display {
  background-color: #0c0c0c;
}
body[theme=win-std] #notice:before, body[theme=win-std] #display:before {
  color: #f2f2f2;
}
body[theme=win-std] #pre span {
  display: none;
}
body[theme=win-std] #pre span.bad {
  display: inline-block;
}
body[theme=win-std] .hide {
  visibility: hidden;
}
body[theme=win-std] [color=black] {
  color: #0c0c0c;
}
body[theme=win-std] [color=red] {
  color: #f2f2f2;
}
body[theme=win-std] [color=green] {
  color: #f2f2f2;
}
body[theme=win-std] [color=yellow] {
  color: #f2f2f2;
}
body[theme=win-std] [color=blue] {
  color: #f2f2f2;
}
body[theme=win-std] [color=magenta] {
  color: #f2f2f2;
}
body[theme=win-std] [color=cyan] {
  color: #f2f2f2;
}
body[theme=win-std] [color=white] {
  color: #f2f2f2;
}
body[theme=win-std] [color=bblack] {
  color: #f2f2f2;
}
body[theme=win-std] [color=bred] {
  color: #f2f2f2;
}
body[theme=win-std] [color=bgreen] {
  color: #f2f2f2;
}
body[theme=win-std] [color=byellow] {
  color: #f2f2f2;
}
body[theme=win-std] [color=bblue] {
  color: #f2f2f2;
}
body[theme=win-std] [color=bmagenta] {
  color: #f2f2f2;
}
body[theme=win-std] [color=bcyan] {
  color: #f2f2f2;
}
body[theme=win-std] [color=bwhite] {
  color: #f2f2f2;
}

body[theme=win] {
  background-color: #0c0c0c;
  color: #0c0c0c;
}
body[theme=win] #notice, body[theme=win] #display {
  background-color: #0c0c0c;
}
body[theme=win] #notice:before, body[theme=win] #display:before {
  color: #cccccc;
}
body[theme=win] #pre span {
  display: none;
}
body[theme=win] #pre span.bad {
  display: inline-block;
}
body[theme=win] .hide {
  visibility: hidden;
}
body[theme=win] [color=black] {
  color: #0c0c0c;
}
body[theme=win] [color=red] {
  color: #7a6c6e;
}
body[theme=win] [color=green] {
  color: #13a10e;
}
body[theme=win] [color=yellow] {
  color: #c19c00;
}
body[theme=win] [color=blue] {
  color: #0037da;
}
body[theme=win] [color=magenta] {
  color: #881798;
}
body[theme=win] [color=cyan] {
  color: #3a96dd;
}
body[theme=win] [color=white] {
  color: #cccccc;
}
body[theme=win] [color=bblack] {
  color: #767676;
}
body[theme=win] [color=bred] {
  color: #e74856;
}
body[theme=win] [color=bgreen] {
  color: #16c60c;
}
body[theme=win] [color=byellow] {
  color: #f9f1a5;
}
body[theme=win] [color=bblue] {
  color: #3b78ff;
}
body[theme=win] [color=bmagenta] {
  color: #b4009e;
}
body[theme=win] [color=bcyan] {
  color: #61d6d6;
}
body[theme=win] [color=bwhite] {
  color: #f2f2f2;
}

body[theme=win-ps-std] {
  background-color: #012456;
  color: #012456;
}
body[theme=win-ps-std] #notice, body[theme=win-ps-std] #display {
  background-color: #012456;
}
body[theme=win-ps-std] #notice:before, body[theme=win-ps-std] #display:before {
  color: white;
}
body[theme=win-ps-std] #pre span {
  display: none;
}
body[theme=win-ps-std] #pre span.bad {
  display: inline-block;
}
body[theme=win-ps-std] .hide {
  visibility: hidden;
}
body[theme=win-ps-std] [color=black] {
  color: #012456;
}
body[theme=win-ps-std] [color=red] {
  color: white;
}
body[theme=win-ps-std] [color=green] {
  color: white;
}
body[theme=win-ps-std] [color=yellow] {
  color: white;
}
body[theme=win-ps-std] [color=blue] {
  color: white;
}
body[theme=win-ps-std] [color=magenta] {
  color: white;
}
body[theme=win-ps-std] [color=cyan] {
  color: white;
}
body[theme=win-ps-std] [color=white] {
  color: white;
}
body[theme=win-ps-std] [color=bblack] {
  color: white;
}
body[theme=win-ps-std] [color=bred] {
  color: white;
}
body[theme=win-ps-std] [color=bgreen] {
  color: white;
}
body[theme=win-ps-std] [color=byellow] {
  color: white;
}
body[theme=win-ps-std] [color=bblue] {
  color: white;
}
body[theme=win-ps-std] [color=bmagenta] {
  color: white;
}
body[theme=win-ps-std] [color=bcyan] {
  color: white;
}
body[theme=win-ps-std] [color=bwhite] {
  color: white;
}

body[theme=win-ps] {
  background-color: #012456;
  color: #012456;
}
body[theme=win-ps] #notice, body[theme=win-ps] #display {
  background-color: #012456;
}
body[theme=win-ps] #notice:before, body[theme=win-ps] #display:before {
  color: silver;
}
body[theme=win-ps] #pre span {
  display: none;
}
body[theme=win-ps] #pre span.bad {
  display: inline-block;
}
body[theme=win-ps] .hide {
  visibility: hidden;
}
body[theme=win-ps] [color=black] {
  color: #012456;
}
body[theme=win-ps] [color=red] {
  color: maroon;
}
body[theme=win-ps] [color=green] {
  color: green;
}
body[theme=win-ps] [color=yellow] {
  color: olive;
}
body[theme=win-ps] [color=blue] {
  color: navy;
}
body[theme=win-ps] [color=magenta] {
  color: purple;
}
body[theme=win-ps] [color=cyan] {
  color: teal;
}
body[theme=win-ps] [color=white] {
  color: silver;
}
body[theme=win-ps] [color=bblack] {
  color: gray;
}
body[theme=win-ps] [color=bred] {
  color: red;
}
body[theme=win-ps] [color=bgreen] {
  color: lime;
}
body[theme=win-ps] [color=byellow] {
  color: yellow;
}
body[theme=win-ps] [color=bblue] {
  color: blue;
}
body[theme=win-ps] [color=bmagenta] {
  color: fuchsia;
}
body[theme=win-ps] [color=bcyan] {
  color: aqua;
}
body[theme=win-ps] [color=bwhite] {
  color: white;
}

body {
  margin: 0;
  font-family: JetBrainsMono, monospace;
  font-size: 2vmin;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

textarea:focus, input:focus {
  outline: none;
}

#main {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
#main #contain {
  display: flex;
  white-space: nowrap;
  height: 2vmin;
}
#main #contain .section {
  display: inline-block;
  height: 2vmin;
  margin-left: 2vmin;
  opacity: 0;
}
#main #contain .section:not(.main) {
  margin-top: 2.1vmin;
}
#main #contain .section.load {
  opacity: 1;
}
#main #contain .section.main {
  opacity: 1;
  position: relative;
  margin-left: 0;
}
#main #contain .section.main > span {
  opacity: 0;
}
#main #contain .section.main > span.load {
  opacity: 1;
}
#main #contain .spc {
  display: inline-block;
  padding-right: 1vmin;
}

@keyframes unload {
  from {
    opacity: 1;
    width: 100%;
  }
  to {
    opacity: 0;
    width: 0%;
  }
}
#menu {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-size: 2vmin;
}
#menu > * {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
#menu input {
  opacity: 0;
}
#menu #display span:not(:first-child) {
  margin-left: 1vmin;
}
#menu #display:before {
  content: ":";
}

/*animations*/
body:not(.noanimate) {
  transition: background 0.15s ease-in-out;
}
body:not(.noanimate) #center {
  transition: margin 0.15s ease-in-out;
}
body:not(.noanimate) #center #contain .section {
  transition: color 0.15s ease-in-out, margin 0.15s ease-out;
}
body:not(.noanimate) #center #contain .section:not(.main) {
  transition: color 0.15s ease-in-out, margin 0.15s ease-out, opacity 0.15s ease-in-out;
}
body:not(.noanimate) #center #contain .section.unload {
  animation: unload 0.15s ease-in-out forwards;
}
body:not(.noanimate) #center #contain .section.main > span.load {
  transition: opacity 0.15s ease-in-out;
}
body:not(.noanimate) #notice, body:not(.noanimate) #display {
  transition: background 0.15s ease-in-out;
}

/*# sourceMappingURL=index.css.map */