* {
  box-sizing:border-box;
}
body,
html {
  position: fixed;
  width:100%;
  height:100vh;
  /*overflow:hidden;*/
  top:0;
  left:0;
}
body {
  user-select: none;
  margin:0;
}
.paint { 
  border: 1px solid #ccc;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
}
.tools {
  position:absolute;
  top:10px;
  left:10px;
}

.flex-parent {
  display:flex;
}
.flex-none {
  flex:none;
}
.flex-child {
  flex:1 1 auto;
}

.sample,
[data-color] {
  border:1px solid #ddd;;
  display:inline-block;
  width:1.5em;
  height:1.5em;
  padding:0;
  margin:0;
  outline:0;
  background-color:transparent;
}
.sample,
[data-size] {
  border-radius:50%;
}



#color-picker {
/*   display:none; */
  position:absolute;
  opacity:0;
}
[data-color]:nth-child(1)  { background-color:#f00; }
[data-color]:nth-child(2)  { background-color:#ff0; }
[data-color]:nth-child(3)  { background-color:#0f0; }
[data-color]:nth-child(4)  { background-color:#0ff; }
[data-color]:nth-child(5)  { background-color:#00f; }
[data-color]:nth-child(6)  { background-color:#f0f; }
[data-color]:nth-child(7)  { background-color:#fff; }
[data-color]:nth-child(8)  { background-color:#000; }