--opening-controls-animation-duration: 0.7s;

  --text-color: rgb(230 230 230);

  --text-size: 15.3px;

}

​

@font-face {

  font-family: "Pressura";

  src: url("GT-Pressura-Standard-Black.otf");

}

​

html {

  background: black;

}

​

html,

body {

  color: var(--text-color);

  font-family: Arial;

  font-family: "Pressura";

  font-size: var(--text-size);

  margin: 0;

  padding: 0;

}

canvas {

  font-family: "Pressura";

  right: 0px;

}

​

p {

  display: block;

  margin-bottom: 2px;

}

​

textarea,

input,

button {

  font-family: "Pressura";

  resize: vertical;

  font-size: var(--text-size);

  line-height: 90%;

  background: var(--text-color);

  border:none;

}

​

textarea:focus, input:focus {

  outline: none;

  border: none;

  border-color: white;

}

​

input[type="file"] {

  display: none;

}

​

.custom-file-upload {

  background: var(--text-color);

  color: black;

  top:20px;

  padding: 3px

}

.custom-file-upload:hover {

  background: black;

  color: var(--text-color);

}

​

.custom-file-upload:active {

  background: var(--text-color);

  color: white;

}

​

​

.main-cointainer {

  margin: 0;

  padding: 0;

  /*   display:flex;

  flex-wrap: nowrap; */

  resize: both;

}

​

.p5Container-default {

  position: absolute;

  top: 0;

  padding-left: 360px;

  z-index: -1;

}

​

.p5Container-open {

  position: absolute;

  top: 0;

  padding-left: 360px;

  z-index: -1;

  animation: opening-p5container

    var(--opening-controls-animation-duration) steps(12);

  animation-timing-function: ease-in-out;

}

​

.p5Container-close {

  position: absolute;

  top: 0;

  padding-left: 0px;

  z-index: -1;

  animation: closing-p5container

    var(--opening-controls-animation-duration) steps(12);

  animation-timing-function: ease-in-out;

}

​

@keyframes closing-p5container {

  0% {

    padding-left: 360px;

  }

  100% {

    padding-left: 0px;

  }

}

​

@keyframes opening-p5container {

  0% {

    padding-left: 0;

  }

  100% {

    padding-left: 360px;

  }

}

​

.controls-default {

  width: 350px;

  padding-left: 10px;

  padding-bottom: 0;

  margin-top: -6px;

  /*   flex: 0 0 400px; */

  background: black;

  z-index: 10;

}

.controls-open {

  position: static;

  width: 350px;

  padding-left: 10px;

  padding-bottom: 0;

  margin-top: -6px;

  /*   flex: 0 0 400px; */

  background: black;

  z-index: 999;

  margin-left: 0px;

  animation: opening-controls

    var(--opening-controls-animation-duration) steps(12);

  animation-timing-function: ease-in-out;

}

​

.controls-close {

  position: static;

  width: 350px;

  padding-left: 10px;

  padding-bottom: 0;

  margin-top: -6px;

  background: black;

  z-index: 999;

  margin-left: -360px;

​

  animation: closing-controls

    var(--opening-controls-animation-duration) steps(12);

  animation-timing-function: ease-in-out;

}

​

@keyframes closing-controls {

  0% {

    margin-left: 0px;

  }

  100% {

    margin-left: -360px;

  }

}

​

@keyframes opening-controls {

  0% {

    margin-left: -360px;

  }

  100% {

    margin-left: 0px;

  }

}

​

.hideButton {

  display: flex;

  position: fixed;

  bottom: 0;

  padding-left: 10px;

  padding-bottom: 20px;

  z-index: 1;

}

​

.title {

  margin-bottom: -3px;

  display: flex;

}

​

.panel {

  display: flex;

  flex-wrap: wrap;

}

​

.field {

  padding-top: 0px;

  margin-bottom: -5px;

  padding-right: 40px;

  resize: both;

}

​

.subfield {

  display: flex;

  flex-wrap: wrap;

  margin-top:8px;

}

​

.fieldGroup {

  display: flex;

  flex-wrap: wrap;

  margin-bottom: 0px;

  padding-bottom: 15px;

}

​

.subsection {

  padding-top: 0px;

  padding-left: 5px;

}

​

.slider {

  -webkit-appearance: none;

  background: var(--text-color);

  height: 4px;

  width: 60px;

}

​

.slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 20px;

  height: 20px;

  background: var(--text-color);

  border-radius: 100%;

  border: solid;

  border-width: 3px;

  border-color: black;

  cursor: crosshair;

}

​

.slider::-webkit-slider-thumb:hover {

  width: 22px;

  height: 22px;

  border-width: 3px;

}

​

.slider::-webkit-slider-thumb:active {

  background-color: black;

}

​

.button {

  -webkit-appearance: none;

  margin-top: 2px;

  width: 20px;

  height: 20px;

  border: solid;

  border-width: 2px;

  border-radius: 100%;

  border-color: black;

}

​

.button:hover {

  border-width: 0px;

}

​

.button:active {

  border-width: 2px;

  border-color:  var(--text-color);

  background-color: black;

}

​

.inputRes {

  width: 50px;

}

​