html, body {
  margin: 0;
  padding: 0;
    font-family: sans-variable;
}
canvas {
  display: block;
}

.title {
  z-index: 30;
  color: black;
  position: absolute;
  font-family: sans-variable, "Helvetica Neue", Helvetica, Arial, sans-serif;
  top: 20px;
  left: 40px;
	font-variation-settings: 'wght' 900;
    font-size: 20px;
    letter-spacing: -0.019em;
}

.nav-menu {
	background-color: rgba(255,255,255,0);
	z-index: 10;
}

 /* Style for the action buttons */
.action-btn {
    font-family: sans-variable;
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  background-color: white;
  opacity: 0.8;
  color: black;
  border-radius: 15px;
  margin-right: 10px;
  z-index: 20;

}

.action-btn:hover {
  opacity: 1;
  z-index: 20;

}

/* Style for the color picker buttons */
.color-picker-btn {
  width: 32px;
  height: 32px;
  border: 0px solid black;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 20px;
  z-index: 20;
-webkit-box-shadow: inset 3px 3px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 3px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 1px 1px 2px 0px rgba(0,0,0,0.5);

}

.color-picker-btn.selected {
	opacity: 1;
-webkit-box-shadow: inset 3px 3px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 3px 3px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 3px 3px 5px 0px rgba(0,0,0,0.5);
  z-index: 21;
}

.color-picker-btn.selected:before {
    content: "✕";
    position: absolute;
    top: 9px;
    left: 11px;
}

.color-picker-btn-2 {
  width: 32px;
  height: 32px;
  border: 0px solid black;
  cursor: pointer;
  margin-right: 20px;
  z-index: 40;
	border-radius: 0px !important;
	background: none;

}

.color-picker-title {
 position: absolute;
    left: 887px;
    top: 23px;
    font-size: 14px;
    color: rgb(0 0 0);
    z-index: 40;
    opacity: 0.2;
}

input {

    overflow: visible !important;
    border-width: 0px !important;
    padding: 0px !important;
	margin: 0px !important;
    position: absolute !important;
    width: 33px !important;
	height: 33px !important;
border-radius: 25px;

}

input[type="color"]::-moz-color-swatch {
  border: 0px white solid;
  border-radius: 20px;

}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;


}

input[type="color"]::-webkit-color-swatch {
  border: 0px white solid;
  border-radius: 20px;
		-webkit-box-shadow: inset 3px 3px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 3px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 1px 1px 2px 0px rgba(0,0,0,0.5);
}