* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-color: #232323;
}
body:hover .buttons-wrapper {
  opacity: 1;
  top: 10px;
}
body:hover .button-like-wrapper {
  opacity: 1;
  top: 10px;
}
#canvas {
    cursor: url("https://tablet.skdg.tech/pencil.svg") 3 15, auto;
}
.buttons-wrapper {
  position: absolute;
  top: 0px;
  left: 50%;
  opacity: 0;
  background-color: #292929;
  border-radius: 164.356px;
  box-shadow: 0px 2.9883px 74.70738px 0px rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  gap: 15px;
  cursor:pointer;
  transform: translateX(-50%);
  transition: all .4s ease;
}

.button-like-wrapper {
  position: absolute;
  top: 0px;
  right: 10px;
  opacity: 0;
  background-color: #292929;
  border-radius: 164.356px;
  box-shadow: 0px 2.9883px 74.70738px 0px rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  cursor:pointer;
  transition: all .4s ease;
}
.btn {
background-color: #3E3E3E;
border: 1px solid #555555;
border-radius: 50%;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
transition: all .2s ease;
}
.btn:hover {
scale:1.07;
}

.btn-like {
background-color: #3E3E3E;
border: 1px solid #555555;
border-radius: 50%;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
transition: all .2s ease;
}
.btn-like:hover {
scale:1.07;
}

.btn .undo {
width: 20px;
}
.btn .trash {
width: 13px;
}
.btn .easer {
width: 18px;
}
.btn-like .heart {
width: 20px;
}
.stroke-color {
border-radius: 50%;
width: 15px;
height: 15px;
}