*{
    margin: 0;
    padding: 0;
}
body{
    overflow: hidden;
}
ol>li{
    list-style: none;
}
canvas{
    background: #fff;
    /* position: fixed; */
    /* top:0;
    left: 0; */
}
.actions{
    position: fixed;
    top: 0;
    left: 0;
}
.icon{
    width: 24px; height: 24px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
.actions svg{
    margin: 16px 0px 10px 16px;
    transition: all 0.5s;
}
.actions svg.active{
    fill: red;
    transform: scale(1.4);

}
.colors{
    position: fixed;
    top: 50px;
    left: 10px;
 }
.colors li{
    width: 30px;
    height: 30px;
    border: 1px solid #3c3c3c;
    margin: 16px 0;
    border-radius: 50%;
    transition: all 0.3s;
}
.colors li.black{
    background: black;
}
.colors li.red{
    background: red;
}
.colors li.green{
    background: green;
}
.colors li.blue{
    background: blue;
}
.colors li.yellow{
    background: yellow;
}
.colors li.active{
    width: 30px;
    height: 30px;
    border: 1px solid #3c3c3c;
    margin: 16px 0;
    border-radius: 50%;
    transform: scale(1.2);
}
.sizes{
    position:fixed;
    right:10px;
}
.sizes .thin{
    width:40px;
    height: 0;
    border-top: 3px solid #3c3c3c;
    margin: 12px 0;
}
.sizes .thick{
    width:40px;
    height: 0;
    border-top: 6px solid #3c3c3c;
}
.sizes .thin.active{
    width: 50px;
}
.sizes .thick.active{
    width: 50px;
}