* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.toolbar {
  display: flex;
  align-items: center;
  padding: 0.5em;
  background-color: #eee;
  justify-content: center;
  width: 100%;
}

#color-picker-LN {
  width: 3em;
  transform: translate(2%, 11%);
  /* margin-top: 0.2em; */
}

#submitLN {
  margin-top: 0.5em;
  border-radius: 0.25em;
  background-color: #eee;
  cursor: pointer;
  /* transform: translate(-7%, -19%); */
}

#color-picker {
  width: 3em;
  cursor: pointer;
  /* margin-left: 0.5em;
  margin-right: 2em; */
}

#color-BG {
  width: 3em;
  cursor: pointer;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

#random-color-button {
  background: linear-gradient(to right,
      #bcbcbc 25%,
      #ffcd02 25%,
      #ffcd02 50%,
      #e84f47 50%,
      #e84f47 75%,
      #65c1ac 75%);
}

#draw-button {
  background-image: url("../assets/8hAI6.png");
  background-blend-mode: normal, difference, normal;
  background-size: cover;
}


#myFileInput {
  border: dotted;
  cursor: pointer;
  margin-right: 0.5em;

  margin-left: 0.5em;
}

#quantityPixel {
  width: 3em;
  height: 2em;
  border: none;
  border-radius: 0.25em;
}

#text-input {
  cursor: pointer;
  height: 2em;
  border: none;
  border-radius: 0.25em;

  font-size: 1em;

  cursor: pointer;
}

.boxLN {
  margin-left: 0.5em;
  font-size: 1em;
  background-color: #eee;
  cursor: pointer;
}

.boxBG {
  display: flex;
  align-items: center;
  background-color: #ddd5d5;
  border-radius: 0.25em;
}

.boxAutoDraw {
  margin-left: 0.5em;
  margin-right: 0.5em;
  background-color: #ddd5d5;
  border-radius: 0.25em;
}

#submitLN {
  font-size: 1em;
  border-radius: 0.25em;
  background-color: #eee;
  cursor: pointer;
  border: none;
  transform: translate(-5%, 6%);

}

#label-color-picker,
#draw-button,
#random-color-button,
#save-button,
#eraser-button,
#clear-button {
  margin-left: 0.5em;
  font-size: 1em;
  padding: 0.5em 1em;
  border: none;
  border-radius: 0.25em;
  background-color: #eee;
  cursor: pointer;
}

#changeBGcolor,
#stop-draw-button {

  font-size: 1em;

  border: none;
  border-radius: 0.25em;
  cursor: pointer;
  background-color: #ddd5d5;
}

#eraser-button {
  background-color: red;
}

#changeBGcolor {
  margin-top: 0.5em;
  border-radius: 0.25em;

  cursor: pointer;
  transform: translate(-7%, -14%);
}

#label-color-picker:hover,
#submitLN:hover,
/* #stop-draw-button:hover, */
#draw-button:hover,
#random-color-button:hover,
#save-button:hover,
#clear-button:hover {
  background-color: #ddd;
}

#canvas {
  background-color: #dbf0dc;
  /* background-image: linear-gradient(to right, rgb(255 255 255 / 85%), rgb(255 255 255 / 85%)), linear-gradient(to right, #000000 50%, white 50%), linear-gradient(to bottom, #000000 50%, white 50%); */
  background-blend-mode: normal, difference, normal;
  background-size: 20px 20px;
}


/* popup */
.popup .overlay {
  position:fixed;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.8);
  z-index:1;
  display:none;
}

.popup .content {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  background: rgb(255 255 255 / 8%) ;
  color: white ;
  width:530px;
  height: 120px;
  z-index:2;
  text-align:center;
  padding:20px;
  box-sizing:border-box;
  font-family:"Open Sans",sans-serif;
}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 20px;
  height: 20px;
  background: #222;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
}

.popup.active .overlay {
  display:block;
}

.popup.active .content {
  transition:all 300ms ease-in-out;
  transform:translate(-50%,-50%) scale(1);
}