ul,ol{list-style:none;}
*{margin: 0;padding: 0px;}
#canvasDemo{
    display:block;
    background: white;
    position:fixed;
    top: 0;
    left: 0;
  }
  
  body{
    overflow: hidden;
  }

  .actions{
    position:fixed;
    top:0;
    left:0;
    padding: 20px;
  }
  .actions svg{
    width: 1.5em;
    height:1.5em;  
  }

 .icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    transition:all 0.3s;
    padding:0 10px;
 }

 .actions svg.active{
   fill:red;
   transform: scale(1.2);
   transition:all 0.3s;
 }

 .colors{
   position:fixed;
   top: 60px;
   left: 16px; 
 }

 .colors > li{
   margin: 20px;
   padding: 20px;
   margin: 10px 0px;
   border-radius:50%;  
   box-shadow:0 0 3px rgba(0,0,0,0.25); 
   transition: all 0.3s; 
  }

.colors > li.red{
   background: red;  
 }

.colors > li.green{
  background: green; 
}

.colors > li.blue{
  background: blue; 
}

.colors > li.black{
  background: black; 
}
 

.colors > li.active{
 box-shadow: 0 0 3px rgba(0,0,0,0.95); 
 transform: scale(1.2);
 }

.sizes{
   position: fixed;
   right: 0px;
   top: 18px;
}

.sizes > li{
  margin: 20px 0;
}

.sizes > .thin{
  width: 20px;
  height: 0;
  border-top:3px solid black;
} 

.sizes > .thick{
  width: 20px;
  height:0;
  border-top:6px solid black;
} 

.sizes > li{
  transform: scale(1.4);
  transition:all 0.3s;
}