/* css reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    /* 阻止移动端chrome的下拉刷新 */
    overflow: hidden;
    /* 禁止触摸手势 */
    touch-action:none;
}

ol,
ul {
    list-style: none;
}

/*common css */

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.active {
    fill: deepskyblue;
    transform: scale(1.2);
}

/* canvas */
.wrapping {
    width: 100vw;
    height: 100vh;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.wrapping .tools {
    left: 10px;
    top: 10px;
    position: absolute;
}
.wrapping .tools .icon{
    font-size: 36px;
    margin-bottom: 4px;
}

.wrapping .color{
    position: absolute;
    display: inline-block;
    left: 10px;
    text-align: center;
    align-items: center;
    top: 50%;
    transform:translateY(-50%);
}

.color span:not(:last-child){
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-bottom: 8px;
}
.pen-earse{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 36px;
}
.pen-earse .icon{
    display: block;
    margin-bottom: 8px;
}


.wrapping #canvas {
    width: 100vw;
    height: 100vh;
}