index.css

@font-face {
    font-family: upheaval;
    src: url(fonts/upheaval.ttf);
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #000;  
  color: #E6E6E6;
  font-family: upheaval, monospace;
}

#title {
  position: fixed;
  top: 0;
  left: 0;
  width: 292px;
  text-align: center;
  font-family: upheaval;
  padding: 4px;
  font-size: 30px;
}

#renderingbar {
  position: fixed;
  top: 32px;
  left: 0;
  width: 300px;
  font-family: monospace;
  text-align: center;
}

#helptoggle {
  position: fixed;
  top: 45px;
  left: 0px;
  width: 300px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
  color: #666;
  transition: all 0.2s;
}
#helptoggle:hover {
  color: #E6E6E6;
}
#help {
  display: none;
  position: fixed;
  top: 65px;
  left: 0px;
  width: 300px;
  height: calc( 100vh - 65px - 90px );
  overflow-x: hidden;
  overflow-y: auto;
  font-family: monospace;
  text-align: justify;
}
.indented1 {
  margin-left: 20px;
}
.indented2 {
  margin-left: 40px;
}

#canvas { 
  position: absolute;
}

#rightpanel {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background-color: rgba( 0, 0, 0, 0.7 );
}
#leftpanel {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background-color: rgba( 0, 0, 0, 0.7 );
}

#randomDiv {
  position: fixed;
  top: 0;
  right: 150px;
  text-align: center;
  font-size: 20px;
  width: 142px;
  height: 24px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s;
  color: #666;
}
#randomDiv.active {
  color: #E6E6E6;
}
#customDiv {
  position: fixed;
  top: 0;
  right: 0;
  text-align: center;
  font-size: 20px;
  width: 142px;
  height: 24px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s;
  color: #666
}
#customDiv.active {
  color: #E6E6E6; 
}

#rfunctionsDiv {
  font-family: monospace;
  font-size: 16px;
  position: fixed;
  right: 0;
  top: 34px;
  width: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc( 100vh - 84px - 34px );
  text-align: center;
}

.rfunction {
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s;
  color: #666;
  transition: all 0.2s;
}
.rfunction.active {
  color: #E6E6E6;
  text-shadow:
    -1px -1px 1px #666,
    1px -1px 1px #666,
    -1px 1px 1px #666,
    1px 1px 1px #666;  
}


#functions {
    width: 300px;
    height: calc( 100vh - 106px - 34px );
    position: fixed;
    top: 32px;
    right: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
}
#functionsAdd {
  border: 1px solid #999;
  font-size: 22px;
  text-align: center;
  cursor: pointer;
  font-family: monospace;
}
.functionHeader {
  border-top: 3px solid #999;
  border-left: 1px solid #999;
  font-size: 20px;
  padding: 3px 3px 3px 10px;
}
.functionDelete, .varisDelete {
  font-family: monospace;
  font-size: 20px;
  display: inline;
  margin-left: 6px;
  padding-left: 8px;
  padding-right: 8px;
  cursor: pointer;
}
.functionCof {
  font-size: 16px;
  padding: 3px;
  margin-left: 30px;
}
.functionVaris {
  font-size: 16px;
  padding: 3px;
  margin-left: 30px;
}
.functionAddVaris {
  border-top: 1px solid #777;
  border-left: 1px solid #777;
  border-right: 1px solid #777;
  font-size: 16px;
  padding: 3px;
  margin-left: 30px;
  text-align: center;
  cursor: pointer;
  font-family: monospace;
}

.functionWeight {
  width: 110px;
  margin-left: 10px;
}
.functionColor {
  width: 110px;
  margin-left: 10px;
}
.functionCofs {
  width: 212px;
  margin-left: 10px;
}

.functionVarisNames {
  width: 120px;
  margin-left: 10px;
}
.functionVarisWeight {
  width: 82px;
  margin-left: 10px;
}

input[type=number],
input[type=text] {
  font-family: monospace;
  font-size: 14px;
  -webkit-appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  background-color: transparent;
  text-align: center;
  color: #E6E6E6;
  border: 1px solid grey;
}
input[type=number]:focus,
input[type=text]:focus {
  outline: none;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button,
input[type=text]::-webkit-inner-spin-button, 
input[type=text]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

select {
  font-family: monospace;
  font-size: 14px;
  box-shadow: none;
  border-radius: none;
  border: none;
  background-color: transparent;
  text-align: center;
  color: #E6E6E6;
  border: 1px solid grey;
}
select option {
  font-family: monospace;
  font-size: 14px;
  background-color: #030303;
  color: #E6E6E6;
  border: 1px solid grey;
}
select:focus {
  outline: none;
}

.scrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
 
.scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
 
.scrollbar::-webkit-scrollbar-thumb {
  background: cyan; 
}

#preIterate {
  position: fixed;
  bottom: 78px;
  right: 0px;
  padding: 4px 0 4px 0;
  display: none;
}
#preIterateFunction {
  width: 143px;
}
#preIterateColor {
  width: 143px;
  margin-left: 10px;
}

#beforeNew {
  position: fixed;
  right: 0px;
  bottom: 32px;
  width: 300px;
  text-align: center;
}
#beforeNewCanvW {
  width: 80px
}
#beforeNewCanvH {
  width: 80px;
  margin-left: 12px;
}
#beforeNewZoom {
    width: 80px;
    margin-left: 12px;
}
#beforeNewRot {
  margin-top: 4px;
  width: 80px;
}
#beforeNewMirrorX {
  font-family: monospace;
  text-align: center;
  display: inline-block;
  margin-top: 4px;
  margin-left: 12px;
  width: 86px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}
#beforeNewMirrorX.active {
  color: #E6E6E6;
  text-shadow:
    -1px -1px 1px #666,
    1px -1px 1px #666,
    -1px 1px 1px #666,
    1px 1px 1px #666;  
}
#beforeNewMirrorY {
  font-family: monospace;
  text-align: center;
  display: inline-block;
  margin-top: 4px;
  width: 86px;
  margin-left: 12px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}
#beforeNewMirrorY.active {
  color: #E6E6E6;
  text-shadow:
    -1px -1px 1px #666,
    1px -1px 1px #666,
    -1px 1px 1px #666,
    1px 1px 1px #666;  
}

#iterateButton {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 292px;
  height: 24px;
  text-align: center;
  font-size: 20px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: transparent;
  color: chartreuse;
  transition: all 0.2s;
}
#iterateButton:hover {
  color: #E6E6E6;
}


#renderDiv {
  position: fixed;
  bottom: 32px;
  left: 0px;
  padding: 4px 0 4px 0;
  width: 300px;
}
#renderDiv input {
  margin-top: 4px;
}
#renderHueShift {
  width: 80px;
  margin-left: 12px;
}
#renderSatShift {
  width: 80px;
  margin-left: 12px;
}
#renderLightShift {
  width: 80px;
  margin-left: 12px;
}
#renderFreqThresh {
  width: 129px;
  margin-left: 12px;
}
#renderGamma {
  width: 129px;
  margin-left: 12px;
}


#renderButton {
  width: 142px;
  height: 24px;
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  font-size: 20px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s;
  color: #666;
}
#renderButton:hover {
 color: #E6E6E6;
}

#continueButton {
  width: 142px;
  height: 24px;
  position: fixed;
  bottom: 0;
  left: 150px;
  text-align: center;
  font-size: 20px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s;
  color: #666;
}
#continueButton:hover {
  color: #E6E6E6;
}

#tutorial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 26px;
  text-align: center;
  color: chartreuse;
  border-bottom: 3px solid;
}