html body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

body {
  background: #120021;
}

#hub {
  background: rgba(0, 0, 0, .5);
  position: fixed;
  width: 100%;
  height: 100%;
}

.ulinput {
  background: none;
  border: none;
  border-bottom: 1px solid white;
  outline: none;
  padding: 0;
  color: white;
  box-sizing: border-box;
}

.ulinput:focus {
  border-bottom-width: 2px;
}

.ulinput::placeholder {
  font-style: italic;
}

#txtinput {
  width: 10%;
  height: min(3vw, 3vh);
  font-size: min(2vw, 2vh);
  text-align: center;
  position: fixed;
  transform: translate(-100%, -100%);
  top: calc(64% + min(1vw, 1vh));
  left: 33%;
}

#bginput {
  background: none;
  border: none;
  outline: 1px solid white;
  width: 10%;
  height: min(3vw, 3vh);
  padding: 0;
  font-size: min(2vw, 2vh);
  text-align: center;
  color: white;
  text-shadow: 0 0 4px black;
  position: fixed;
  transform: translateX(-100%);
  top: calc(65% + min(1vw, 1vh));
  left: 33%;
}

#bginput:hover {
  outline-width: 3px;
}

#layercounts {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: end;
  width: 5vh;
  height: 31vh;
  position: fixed;
  transform: translate(-100%, -50%);
  top: 45%;
  left: calc(36.6vw - 5.5vh);
}

.layerinput {
  width: 5.5vh;
  height: 3vh;
  font-size: 2vh;
  text-align: end;
}

#layercolors {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: center;
  width: 5vh;
  height: 31vh;
  position: fixed;
  transform: translate(-100%, -50%);
  top: 45%;
  left: 36.6%;
}

.clayer {
  width: 3vh;
  height: 3vh;
  padding: 0;
  border-radius: 50%;
  border: none;
  outline: 0 solid gray;
  opacity: .5;
}

.clayer:hover, .clayer:focus-visible {
  outline-width: 2px;
}

.activelayer {
  opacity: 1;
  border: none;
  outline: .5px solid white;
  transform: scale(1.2);
}

.activelayer:hover, .activelayer:focus-visible {
  outline-width: 2px;
}

.currentlayer {
  transform: scale(1.5);
  outline-width: 2px;
}

table {
  position: fixed;
  transform: translate(-50%, -50%);
  top: 45%;
  left: 55%;
  border-collapse: collapse;
  width: 35%;
  height: 35%;
  outline: 2px solid white;
}

td {
  padding: 0;
  outline: 1px solid white;
}

td:hover {
  outline-width: 4px;
}

td input {
  background: none;
  border: none;
  outline: 0 solid white;
  width: 100%;
  height: 100%;
  color: white;
  font-size: min(1vw, 1vh);
  text-align: center;
  padding: 0;
  margin: 0;
  text-shadow: 0 0 5px black;
}

td input:focus-visible {
  outline-width: 2px;
}

.rowbuttons {
  display: flex;
  justify-content: space-around;
  width: 35%;
  position: fixed;
  transform: translateX(-50%);
  top: 65%;
  left: 55%;
}

.columnbuttons {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: fixed;
  transform: translateY(-50%);
  height: 35%;
  top: 45%;
  left: 74%;
}

.tablebutton {
  color: white;
  font-size: min(5vw, 5vh);
  line-height: 0;
  outline: none;
}

.tablebutton:hover, .tablebutton:focus-visible {
  border-color: white;
}

.addbutton {
  border: 1px solid green;
  background: rgba(0, 128, 0, 0.5);
}

.addbutton:active {
  background: lime;
}

.removebutton {
  border: 1px solid maroon;
  background: rgba(128, 0, 0, 0.5);
}

.removebutton:active {
  background: red;
}

.rowbutton {
  width: 15vw;
  height: min(5vw, 5vh);
}

.columnbutton {
  width: min(5vw, 5vh);
  height: 15vh;
}

#startbutton {
  width: min(7vw, 7vh);
  height: min(5vw, 5vh);
  font-size: min(2vw, 2vh);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid gray;
  outline: none;
  color: white;
  position: fixed;
  transform: translate(-50%, -50%);
  top: 80%;
  left: 50%;
}

#startbutton:hover, #startbutton:focus-visible {
  border-color: white;
}

#startbutton:active {
  background-color: yellowgreen;
  color: black;
}

#instantdraw {
  background: none;
  border: none;
  outline: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: fixed;
  transform: translateY(-50%);
  top: 80%;
  left: calc(50vw + min(6vw, 6vh));
}

#instantbutton {
  width: min(.75vw, .75vh);
  height: min(.75vw, .75vh);
  min-width: min(.75vw, .75vh);
  min-height: min(.75vw, .75vh);
  font-size: 0;
  background: black;
  border: min(.6vw, .6vh) solid black;
  outline: 1px solid white;
}

#instantdraw:hover > #instantbutton, #instantdraw:focus-visible > #instantbutton {
  outline-width: 3px;
}

#instantdraw:active > #instantbutton {
  background-color: white !important;
  border-color: white;
}

#instantdraw p {
  margin: 0;
  margin-left: min(1vw, 1vh);
  font-size: min(2vw, 2vh);
  color: white;
}



#samples {
  opacity: 0;
}

.particle {
  position: fixed;
  will-change: opacity;
}

.detail, .dwrap {
  position: absolute;
}

.sampletext {
  width: 100vw;
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  text-shadow: 0 0 2px black;
}

.square0 {
  width: 5px;
  height: 5px;
}

.outer1 {
  width: 16px;
  height: 16px;
}

.inner1 {
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%) rotate(45deg);
  top: 8px;
  left: 8px;
}

.outer2 {
  width: 20px;
  height: 20px;
}

.inner2 {
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(30deg);
  top: 10px;
  left: 10px;
}

.innerer2 {
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(30deg);
  top: 5px;
  left: 5px;
}

.innermost2 {
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%) rotate(30deg);
  top: 4px;
  left: 4px;
}

.outer3 {
  width: 32px;
  height: 32px;
}

.inner3 {
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%) rotate(20deg);
  top: 16px;
  left: 16px;
}

.innerer3 {
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%) rotate(20deg);
  top: 12px;
  left: 12px;
}

.innermost3 {
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(20deg);
  top: 8px;
  left: 8px;
}

.outermost4 {
  width: 36px;
  height: 36px;
}

.outer4 {
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%) rotate(20deg);
  top: 18px;
  left: 18px;
}

.inner4 {
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%) rotate(20deg);
  top: 16px;
  left: 16px;
}

.innermost4 {
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%) rotate(20deg);
  top: 12px;
  left: 12px;
}

.dwrapper4 {
  transform: translate(-50%, -50%) rotate(30deg);
  top: 8px;
  left: 8px;
}

.distortionx4 {
  width: 30px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.distortiony4 {
  width: 2px;
  height: 25px;
  transform: translate(-50%, -50%);
}

.core4 {
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%) rotate(20deg);
  top: 8px;
  left: 8px;
}

.outercloud5 {
  width: 50px;
  height: 50px;
}

.innercloud5 {
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%) rotate(15deg);
  top: 25px;
  left: 25px;
}

.outerwhirl5 {
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%) rotate(15deg);
  top: 22px;
  left: 22px;
}

.innerwhirl5 {
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%) rotate(15deg);
  top: 17px;
  left: 17px;
}

.outerstar5 {
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%) rotate(15deg);
  top: 14px;
  left: 14px;
}

.innerstar5 {
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(30deg);
  top: 8px;
  left: 8px;
}

.distortionx5 {
  width: 150px;
  height: 2.5px;
  transform: translate(-50%, -50%);
  top: 5px;
  left: 5px;
}

.distortiony5 {
  width: 2.5px;
  height: 75px;
  transform: translate(-50%, -50%);
  top: 5px;
  left: 5px;
}

.core5 {
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%) rotate(30deg);
  top: 5px;
  left: 5px;
}