/*
███████  ██████  ███    ██
██      ██    ██ ████   ██
█████   ██    ██ ██ ██  ██
██      ██    ██ ██  ██ ██
██       ██████  ██   ████
*/



@font-face { font-family: "alumni";
  src: url("../../_/fon/alumni.ttf");
  font-weight: 400;
}

@font-face { font-family: "ubuntu";
  src: url("../../_/fon/Ubuntu-Regular.ttf");
  font-weight: 400;
}

@font-face { font-family: "mono";
  src: url("../../_/fon/UbuntuSansMono_w.ttf");
  /* font-weight: 400; */
}






/*////////////////////////////////////////*/

html,
body,
#percent > p { font-family: 'alumni'; }

p,
h4,
button,
.subColor { font-family:'ubuntu'; }

h6,
#chosePalet,
#menuColor,
#console,
#legend,
.list-item,
.sub-item { font-family:'mono'; }



/*
████████  █████   ██████  ███████
   ██    ██   ██ ██       ██
   ██    ███████ ██   ███ ███████
   ██    ██   ██ ██    ██      ██
   ██    ██   ██  ██████  ███████
*/



html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* prevents scrollbars */
  height: 100%;
  width: 100%;
  background-color: #000 !important;
}

canvas {
  display: block; /* remove inline-block gaps */
}

h1 {
  color: var(--tt);
  font-weight: 100;
  font-size: 5em;
  position: absolute;
  top: -15px;
  right: 5px;
  margin: 0;
  z-index: 111;
}

h2 {
  color: var(--tt);
  font-weight: 400;
  font-size: 2em;
  position: absolute;
  top: 55px;
  right: 10px;
  margin: 0;
  z-index: 111;
}

h4 {
  color: var(--tt);
  font-weight: 400;
  font-size: 2em;
  margin:15px;
}

h6 {
  margin:0;
  position: absolute;
  bottom:-3px;
  left:1px;
  font-size:18px;
  color: var(--bg);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

p {
  color: var(--tt);
  text-align: center;
  font-size: 1.1em;
  margin:3px;
  text-shadow: 1px 1px 1px var(--bg);
}

button {
  background-color: var(--ofBg);
  color: var(--ofTx);
  width: 55px;
  height: 24px;
  margin:3px;
  cursor: pointer;
  font-weight: 600;
  border-radius: 3px;
  border: 0;
}
button:hover {
  text-shadow: 1px 1px 1px var(--bg);
  color: var(--hv);
}
button.active,
button.activ {
  background: var(--onBg);
  color: var(--onTx);
  text-shadow: 1px 1px 1px var(--bg);
  cursor:default;
}
.hid {
  display:none;
}



/*
██    ██ ██ ███████ ██     ██ ███████ ██████
██    ██ ██ ██      ██     ██ ██      ██   ██
██    ██ ██ █████   ██  █  ██ █████   ██████
 ██  ██  ██ ██      ██ ███ ██ ██      ██   ██
  ████   ██ ███████  ███ ███  ███████ ██   ██
*/



#viewer {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: block; /* ensures full width */
}

#viewer canvas {
  opacity: 0;
  transition: opacity 1s ease;
}



/*
██████  ███████ ██████   ██████ ███████ ███    ██ ████████
██   ██ ██      ██   ██ ██      ██      ████   ██    ██
██████  █████   ██████  ██      █████   ██ ██  ██    ██
██      ██      ██   ██ ██      ██      ██  ██ ██    ██
██      ███████ ██   ██  ██████ ███████ ██   ████    ██
*/



#percent {
  font-size: 7em;
  color:  #4af;
  display: flex;
  justify-content: center;
  background-color: #000;
  height: 100%;
  align-items: center;
  opacity: 1;
  z-index:88;
}

#percent > p {
  margin: 0;
  background-color: #000;
}



/*
 ██████  ██████  ███    ██ ███████  ██████  ██      ███████
██      ██    ██ ████   ██ ██      ██    ██ ██      ██
██      ██    ██ ██ ██  ██ ███████ ██    ██ ██      █████
██      ██    ██ ██  ██ ██      ██ ██    ██ ██      ██
 ██████  ██████  ██   ████ ███████  ██████  ███████ ███████
*/



#console {
  font-size: 1.5em;
  color:  var(--tt);
  position: absolute;
  left:0px;
  top:-10px;
  margin:15px;
  text-shadow: 1px 1px 1px var(--bg);;
}



/*
██      ███████  ██████  ███████ ███    ██ ██████
██      ██      ██       ██      ████   ██ ██   ██
██      █████   ██   ███ █████   ██ ██  ██ ██   ██
██      ██      ██    ██ ██      ██  ██ ██ ██   ██
███████ ███████  ██████  ███████ ██   ████ ██████
*/



#legend {
  font-size: 1em;
  color: var(--onTx);
  position: absolute;
  left:0px;
  top:25px;
  margin:15px;
  text-shadow: 1px 1px 1px var(--bg);;
}

.tt {
  color: var(--tt);
}



/*
██████  ██    ██ ████████  ██████  ███    ██ ███████
██   ██ ██    ██    ██    ██    ██ ████   ██    ███
██████  ██    ██    ██    ██    ██ ██ ██  ██   ███
██   ██ ██    ██    ██    ██    ██ ██  ██ ██  ███
██████   ██████     ██     ██████  ██   ████ ███████
*/



#butonz {
  position: fixed;
  left:10px;
  bottom:10px;
  display: flex;
  flex-direction: row;
  z-index:111;
  width: 212px;
}

.ei.activ,
.ei.activ:hover {
  background: var(--onBg);
  color:  var(--onTx);
  cursor:default;
  text-shadow: 1px 1px 2px var(--bg);;
}

.do {
  background-color: var(--onBg);
  color: var(--onTx);
  cursor:pointer;
  text-shadow: 1px 1px 2px var(--bg);
}
.do:hover {
  color: var(--ofBg);
  text-shadow: 0px 0px 0px var(--bg);;
}
.do:disabled {
  background-color: var(--ofBg);
  color: var(--ofTx);
  cursor:default;
}
#group.active {
  cursor:pointer;
}



/*
██      ██ ███████ ████████
██      ██ ██         ██
██      ██ ███████    ██
██      ██      ██    ██
███████ ██ ███████    ██
*/



#list {
  position:fixed;
  top:60px;
  left:15px;
  z-index:44444;
}
#sublist {
  position:fixed;
  top:-10px;
  left:15px;
  z-index:33333;
  padding-left:45px;
  border-top: 1px solid var(--tt);
}


.list-item,
.sub-item {
  cursor:pointer;
  text-shadow: 1px 1px 1px var(--bg);
}

.list-item {
  color:  var(--tt);
  font-size:90%;
}
.list-item:hover,
.list-item.active {
  color:  var(--onTx);
}
.list-item.dim {
  color:  var(--dim);
}
.list-item.dim.active {
  color:  var(--ttt)!important;
}

.sub-item {
  color:  var(--tt);
  font-size:80%;
}
.sub-item:hover,
.sub-item.active {
  color:  var(--onTx);
}
.sub-item.dim {
  color: var(--dim);
}
.sub-item.dim.active {
  color: var(--ttt)!important;
}




/*
 ██████  ██████  ██       ██████  ██████
██      ██    ██ ██      ██    ██ ██   ██
██      ██    ██ ██      ██    ██ ██████
██      ██    ██ ██      ██    ██ ██   ██
 ██████  ██████  ███████  ██████  ██   ██
*/







#menuColor {
    font-size: 1.1em;
    position: absolute;
    bottom:10px;
    right:10px;
    /* width:114px; */
    text-align: center;
    font-weight: 900;
    display:flex;
    align-items: flex-end;
    flex-direction: column;
}
#knobs {
  right:0;
  z-index:8888888;
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
}

.knoob {
  display: inline-block;
  width:48px;
  height:48px;
  image-rendering: pixelated; /* For crisp pixel art */
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  border-radius:3px;
  margin:3px;
  position:relative;
}

#activeColor { display:none; }

#copyColor,
#pastColor {
  color:var(--bg);
  height:24px;
  width:104px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  margin:3px;
  border-radius:3px;
}
#copyColor {
  margin-bottom:6px;
}
#copyColor:hover,
#pastColor:hover{ text-shadow: 1px 1px 1px #000; }

#generativePalet,
#newPalet,
#resetPalet,
#exportPalet,
#importPalet,
#deletePalet,
#savePalet {
  width:104px;
  height:24px;
  border:0;
}
#resetPalet:hover {
  text-shadow: 1px 1px 1px #000;
  color:var(--tt);
}

#chosePalet {
  display: flex;
  flex-direction: column;
}
.choicePalet {
  width:104px;
  height:12px;
  margin:1px;
  border-radius: 3px;
  border:1px solid var(--bg);
  display: flex;
  cursor: pointer;
  overflow: hidden;
}
.choicePalet.activ::before {
  content:'::';
  position:absolute;
  left:-13px;
  color: var(--tt);
  margin-top:-6px;
  letter-spacing:-4px;
}
.paletStrip {
    height: 100%;
    flex-shrink: 0;
}
#col_1 {
  width:108px;
  margin-right:6px;
}

#deleteSplash button {
  width : 88px;
}
#deleteSplash h2 {
  position:relative;
}

#generativePalet.activ {
  background: var(--onBg);
  color:  var(--onTx);
  text-shadow: 1px 1px 2px var(--bg);;
}


/*
 █████  ██████   ██████  ██     ██
██   ██ ██   ██ ██    ██ ██     ██
███████ ██████  ██    ██ ██  █  ██
██   ██ ██   ██ ██    ██ ██ ███ ██
██   ██ ██   ██  ██████   ███ ███
*/

#arowz {
    display: flex;
    flex-direction: row;
}


#arow {
  display: flex;
  flex-direction: column;
  widh:65px;
  justify-content: flex-end;
}


#tweak {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}