.titolo{
    background: linear-gradient(to right, #2196f3, #26c6da, #43a047, #eeff41, #f9a825);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 6rem !important;
  font-weight: 900 !important;
}

.left-color{
    background: linear-gradient(to right, #2196f3, #26c6da);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.middle-color{
    background: linear-gradient(to right, #2196f3, #26c6da, #43a047);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.right-color{
    background: linear-gradient(to right, #43a047, #eeff41);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.unselectable {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html, body{
  overflow-x: hidden;
}


/* PAINT */

.colorButtons {
  display: block;
  margin: 20px 0;
}

canvas {
  cursor: crosshair;
}

div#sidebar {
  padding: 20px 20px;
}

canvas#canvas {
  left: 150px;
  top: 45px;
}

.btnSp {
  margin-bottom: 10px;
  width: 100%;
}
input {
  width: 100%;
  margin-bottom: 10px;
}

.input-group {
  margin-bottom: 10px;
}

.toolsButtons .btn {
  width: 48%;
}

.sizeButtons .btn {
  width: 48%;
}

.colorpicker {
  background: transparent;
  height: 40px;
}

#saveToImage{
  background: linear-gradient(to right, #2196f3, #26c6da, #43a047, #eeff41, #f9a825);
  border: 1px solid black;
  font-weight: 700;
}

.painterTitle{
  background: linear-gradient(to right, #2196f3, #26c6da, #43a047, #eeff41, #f9a825);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* HALLOWEEN */
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.halloween .head .skull:before,
.halloween .head .skull:after,
.halloween .eyes .eye:before,
.halloween .body:before,
.halloween .body:after,
.halloween .legs:before{
  content:'';
  position:absolute;
}
.halloween{
  top:22%;
  left:50%;
  width:30px;
  height:44px;
  position:relative;
  margin-top:-22px;
  margin-left:-15px;
  animation:move 3s infinite;
}
.halloween .head{
  z-index:1;
  width:25px;
  height:25px;
  background:#444;
  border-radius:50%;
  position:relative;
}
.halloween .head .skull{
  left:2px;
  bottom:2px;
  width:16px;
  height:16px;
  color:#f9f9f9;
  border-radius:50%;
  background:#f9f9f9;
  position:absolute;
  animation:skull 3s infinite;
}
.halloween .head .skull:before{
  top:9px;
  width:0;
  left:50%;
  height:0;
  z-index:1;
  margin-left:-2px;
  border:2px solid transparent;
  border-bottom:2px solid #444;
}
.halloween .head .skull:after{
  top:14px;
  left:50%;
  width:1px;
  height:4px;
  margin-left:-1px;
  background:#f9f9f9;
  box-shadow: 2px 0,-2px 0,4px 0,-4px 0,
        -3px -2px,-1px -2px,1px -2px,3px -2px
}
.halloween .eyes{
  width:inherit;
  height:inherit;
  overflow:hidden;
  border-radius:50%;
  position:relative;
}
.halloween .eyes .eye{
  top:5px;
  width:5px;
  height:5px;
  position:absolute;
  border-radius:50%;
  background:#f8cd22;
  border:1px solid #444;
  border-right:2px solid #444;
}
.halloween .eyes .eye:before{
  top:-1px;
  left:-1px;
  width:5px;
  height:3px;
  background:#f9f9f9;
  border-radius:5px 5px 0 0;
  animation:eyes 3s infinite;
}
.halloween .eyes .eye.eye-left{
  left:1px;
}
.halloween .eyes .eye.eye-right{
  right:1px;
}
.halloween .body{
  top:-3px;
  width:24px;
  height:17px;
  background:#444;
  position:relative;
  border-radius:10px 10px 2px 2px;
}
.halloween .body:before,
.halloween .body:after{
  top:3px;
  width:4px;
  height:12px;
  background:#444;
}
.halloween .body:before{
  left:-1px;
  border-radius:100% 0 0 2px;
  transform:rotate(10deg);
  animation:hand-left 3s infinite;
}
.halloween .body:after{
  right:-1px;
  border-radius:0 100% 2px 0;
  transform:rotate(-10deg);
  animation:hand-right 3s infinite;
}
.halloween .legs{
  top:-3px;
  left:50%;
  width:21px;
  height:10px;
  overflow:hidden;
  margin-left:-13px;
  position:relative;
  border-bottom:1px solid rgba(0,0,0,.2);
}
.halloween .legs:before{
  top:0;
  left:-7px;
  width:60px;
  height:10px;
  background-image:linear-gradient(-495deg, #444 4px,transparent 0), linear-gradient(-45deg, transparent 4px, #444 0);
  background-size:4px 8px;
  background-repeat:repeat-x;
  animation:legs 3s infinite;
}
@keyframes move{
  0%{
    transform:translateX(0)
  }
  50%{
    transform:translateX(15px)
  }
  100%{
    transform:translateX(0)
  }
}
@keyframes skull{
  0%{
    transform:translate(0,0)
  }
  25%{
    transform:translate(2px,1px)
  }
  75%{
    transform:translate(3px,-1px)
  }
  100%{
    transform:translate(0,0)
  }
}
@keyframes eyes{
  0%{
    top:-5px;
    border-radius:50%;
  }
  50%{
    top:-1px;
    border-radius:5px 5px 0 0;
  }
  100%{
    top:-5px;
    border-radius:50%;
  }
}
@keyframes legs{
  0%{
    left:-7px;
  }
  50%{
    left:-25px;
  }
  100%{
    left:-7px;
  }
}
@keyframes hand-left{
  0%{
    left:1px;
  }
  50%{
    left:-2px;
  }
  100%{
    left:1px;
  }
}
@keyframes hand-right{
  0%{
    right:1px;
  }
  50%{
    right:-2px;
  }
  100%{
    right:1px;
  }
}

.blood {
  color:silver !important;
  text-shadow:
  4px 4px 1px #300000,
  4px 6px 1px #400000,
  4px 8px 1px #500000,
  4px 10px 1px #600000,
  4px 12px 1px #700000,
  4px 14px 1px #800000,
  4px 16px 1px #900000,
  4px 18px 1px #A00000;
}