*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100vh;
    background:rgb(45, 194, 235);
}
.container{
    width:800px;
    height:500px;
    background:#fff;
    border-radius:10px;
    box-shadow:0px 2px 8px 0px rgba(99,99,99,0.2);
}
.container .tools-area{
    height:50px;
    display: flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid gray;
     padding:0 15px;
    }
    .container .tools-area .tools{
        display:flex;
        width:70%;
        justify-content:space-between;
        align-items:center;
    }
    .tools .color{
        display: flex;
        align-items: center;
    }
    input[type="color"]{
        border:none;
       width:30px;
       height: 20px;
       background-color:transparent;
       cursor:pointer;

    }
    label,i{
      cursor:pointer;
      margin:0 3px  
    }
    .buttons button{
        border:none;
        padding:5px 10px;
        font-size:1.2em;
        border-radius: 5px;
        cursor: pointer;
    }
    .buttons .save{
        background:rgb(45, 194, 235);
        color:#fff;
    }
    .buttons .clear:hover{
        background:lightgray;
    }
    .draw-area canvas{
    width:100%;
    height:450px;
    }
    .active{
        color:rgb(45, 194, 235);
    }