body {

  background-color: black;

  padding: 0px;

  margin: 0px;

  font-family: Arial, Helvetica, sans-serif;

}



#parameters-how {

  display: none;

  position: absolute;

  z-index: 20;

  padding: 40px;

  width: 800px;

  height: 800px;

  background-color: rgb(40, 40, 40);

  border-radius: 20px;

  color: rgb(160, 160, 160);

  overflow-y: scroll;

  font-size: 14px;

}



  #parameters-guide-title {

    font-size: 30px;

    color:white;

    

  }



  #parameters-how strong {

    color: white;

  }



#canvas-container {

  display: flex;

  height: 100vh;

  overflow: auto;

}



#mainCanvas {

  margin: auto;

  width: fit-content;

  height: fit-content;

}



#saveCanvas {

  display: none;

}



input, select {

  outline: none;

}



#controls-container {

  background-color: rgb(40, 40, 40);

  color: rgb(20, 20, 20);

  float: right;

  width: 320px;

  height: 100vh;

}



  #controls-header {

    text-align: center;

    font-size: 25px;

    font-weight: bold;

    padding: 15px;

    background-color: rgb(80, 80, 80);

  }



  #table-controls {

    margin-top: 10px;

    border-collapse: collapse;

    width: 100%;

    color: rgb(140, 140, 140);

    font-size: 14px;

  }



    #table-controls td {

      margin: 0px;

      padding: 10px;

    }



    #td-label-presets {

      color: rgb(220, 220, 220);

    }



    .table-controls-label {

      width:90px;

      text-align: right;

    }



  #controls {

    color: rgb(140, 140, 140);

    overflow: scroll;

    border-bottom: 1px solid black;

  }



    #checkbox-show-canvas-border {

      margin: 0px;

      padding: 0px; 

    }



    input[type=number], select {

      font-size: 14px;

      border: none;

      padding: 8px;

      background-color: rgb(70, 70, 70);

      color: rgb(200, 200, 200);

      border-radius: 6px;

    }



    #number-image-size,

    #number-size-min, #number-size-max,

    #number-spread-min, #number-spread-max {

      width: 60px;

    }



    #number-brush-width,

    #number-color-range-min, #number-color-range-max {

      width: 40px;

    }



    #button-generate-container {

      position: absolute;

      right: 57px;

      bottom: 25px;

    }



      #button-generate, #button-guide, #button-close-guide {

        cursor: pointer;

        color: rgb(230, 230, 230);

        border: none;

        background-color: rgb(0, 124, 208);

        padding: 12px 45px;

        font-size: 22px;

        font-weight: bold;

        border-radius: 10px;

      }



        #button-generate:hover {

          background-color: rgb(0, 144, 228);

        }



        #button-generate:active {

          background-color: rgb(0, 100, 178);

        }



      #button-guide {

        position: absolute;

        padding: 10px 20px;

        font-size: 30px;

        bottom: 120px;

        right: 20px;

      }



      #button-close-container {

        text-align: center;

      }



        #button-close-guide {

          margin: auto;

          margin-top: 20px;

        }

    

#button-save-image {

  cursor: pointer;

  color: rgb(0, 0, 0);

  border: none;

  background-color: rgb(231, 227, 1);

  padding: 12px 30px;

  font-size: 22px;

  font-weight: bold;

  border-radius: 10px;

  position: absolute;

  right: 350px;

  bottom: 25px;

  z-index: 10;

}



  #button-generate:hover {

    background-color: rgb(0, 144, 228);

  }



  #button-generate:active {

    background-color: rgb(0, 100, 178);

  }