* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
button {
  outline: none;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.canvas-wrapper {
  flex-grow: 1;
  padding: 3vh;
  background: rgb(136, 136, 136, 0.3);
}
#canvas {
  display: block;
  background: white;
  box-shadow: 10px 10px 5px 0px rgba(117, 112, 117, 0.36);
}
.buttons {
  display: flex;
  padding-left: 0.5vh;
  padding-top: 0.5vh;
  height: 15vh;
}
.tools {
  border-right: 1px solid rgba(209, 212, 212, 0.3);
  padding: 1vh 2vh;
}
.tools .eraser {
  border: 1px solid white;
  margin-left: 2vh;
}
.tools .pencil {
  border: 1px solid #3f48cc;
}
.tools > .text {
  margin-top: 3vh;
  font-size: 3vh;
  text-align: center;
}
.tools .undo {
  margin: 0 2vh 0 2vh;
  border: 1px solid white;
}
.tools .redo {
  margin: 0 2vh 0 2vh;
  border: 1px solid white;
}
.line {
  display: flex;
  padding: 1vh 2vh;
  border-right: 1px solid rgba(209, 212, 212, 0.3);
  flex-direction: column;
}
.line .section {
  padding: 2vh 0;
}
.linewidth {
  margin-top: 4vh;
  font-size: 3vh;
  padding: 0;
  text-align: center;
}
.input {
  display: flex;
  font-size: 3vh;
}
.color-left {
  display: flex;
  padding: 1vh 2vh;
  border-right: 1px solid rgba(209, 212, 212, 0.3);
  flex-direction: column;
}
.color-left span {
  margin-top: 4vh;
  font-size: 3vh;
}
.color {
  padding: 1vh;
  width: 31vh;
  border-right: 1px solid rgba(209, 212, 212, 0.3);
}
.color div {
  margin: 0;
  display: inline-block;
  border: 0.5px solid black;
  width: 2vh;
  height: 2vh;
}
button {
  background-color: white;
  border: none;
}
.color div:hover {
  box-shadow: inset 5em 1em rgba(82, 110, 109, 0.3);
}
.download svg {
  width: 100px;
}