/*GLOBAL*/

body {
    padding: 30px;
    font-family: sans-serif;
    background-color: #ecf0f1;
}

.hide {
    display: none;
}


/*HEADER*/

h1 {
    color: #ef4e42;
}

/*CANVAS*/

canvas
{
    background-color: white;
    border: 3px solid #cacaca;
}


/*TOOLS*/
p {
    padding: 20px 0 0;
    color: #057eb6;
}
ul {
    display: flex;
    padding: 0;
}

li.pen-color {
    margin: 0 5px;
    height: 30px;
    width: 30px;
    list-style-type: none;
    border-radius: 100%;
}

li.pen-color:hover {
    border: 2px solid #057eb6;
}

#black-color {
    background-color: #000;
}

#brown-color {
    background-color: #602222;
}

#red-color {
    background-color: #c01722;
}

#yellow-color {
    background-color: #ffc03b;
}

#green-color {
    background-color: #00ba34;
}

#turquoise-color {
    background-color: #009e9a;
}

#blue-color {
    background-color: #0076a3;
}