/*@import url(http://www.fontsquirrel.com/fonts/fira-sans);*/
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
    font-family: 'Muli',sans-serif;
}

body{
	margin: 0;
	padding: 0;
	/*background-color: rgb(133,133,133);*/
     /*background-color: pink;*/
	background-color: rgb(217,160,238);
    

   /* background-image: url("art-g8ae949d3c_1920.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    */

	/*border-top: 5px double rebeccapurple;
    border-left: 5px double rebeccapurple;
    border-right: 5px double rebeccapurple;*/
	/*box-shadow: 8px 8px 10px rebeccapurple; inset;*/
    
}

.header{
	width: 100%;
	height: 80px;
	/*background-color:lightgoldenrodyellow;*/
    /*background-color: lightgoldenrodyellow;*/
    background-color: rgb(153,25,200);
    border: 1px solid transparent;
    /*border-top: 5px solid rebeccapurple ;*/
	box-shadow: 5px 10px 10px rebeccapurple;
}

.header img{
	float: left;
	width: 75px;
	height: 75px;
    margin-top: 0px;
	margin-left: 35px;
}

.header h1{
	/*color: #663399;*/
    color: white;
	font-size: 27px;
    font-family: cursive;
	font-weight: bold;
	text-align: left;
	margin-top: 0px;
	margin-left: 15px;
	float: left;
	line-height: 50px;
	padding: 17px 10px;
}

#myCanvas{
	box-shadow:8px 10px 15px gray ;
	background-color:white;
	/*border:3px double rebeccapurple;*/
    border: none;
	margin-top: 20px;
	margin-left: 40px;
    margin-bottom: 80px;
   /* position: fixed;
    top: 100px;
    right: 20px;*/
    
}


button{
    background-color: none;
    transition: .3s;
     }

.wrapper .icon button:focus{
    border-radius: 48%;
    box-shadow: 2px 6px 10px rebeccapurple;
    animation: anime-shadow .3s forwards;
}

@keyframes anime-shadow{
    180%{
         box-shadow: 2px 6px 10px rebeccapurple;
    }
}

#saveArea{
        margin-top: 0px;
        margin-bottom:50px ;
      }

.tooltip h4{
        margin-top: 10px;
    }

#btnSave{
    border: none;
    border-radius: 48%;
    float: right;
    margin-top: 15px;
    padding: 17px 10px;
    margin-right: 5px;
}
            
#btnBack{
     border: none;
     border-radius: 30%;
     float: left;
     margin-top: 15px;
     padding: 17px 10px;
     /*margin-right: 5px;*/
   }

#btnBack:active{
    border: 5px solid blueviolet;
    color: rebeccapurple;
}
#canvasImg{
      width: 75%;
      height: 75%;
}

.wrapper{
	margin-top: 15px;
	margin-left: 25px;
	float: left;
	border: none;
	height: 100%;
	width: 100px;
    /*position: fixed;
    left: 20px;
    overflow-y: scroll;*/
}

.wrapper .icon{
    margin: 0 20px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: left;
    justify-content: left;
    flex-direction: column;
    position: relative;
    z-index: 2;
    transition: 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
    /*changes*/
    margin-top: 20px;
}

.wrapper .icon button{
    border: none;
    border-radius: 48%;
}
/*Icon*/
.wrapper .icon span{
    display: block;
    height: 60px;
    width: 60px;
    background: #fff;
    text-align: center;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    transition: 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}

.wrapper .icon span i{
    font-size: 25px;
    line-height: 60px;
}

.wrapper .icon:hover span {
    color: #fff;
}

/*Text after hovering*/
.wrapper .icon .tooltip{
    position: absolute;
    top:10px;
    z-index: 1;
    background: #fff;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    padding: 5px 15px;
    border-radius: 25px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: 0.2s cubic-bezier(0.68,-0.55,0.265,1.55);
}

.wrapper .icon:hover .tooltip{
    /*top: -70px;*/
    right:-100px;
    opacity: 1;
    pointer-events: auto;

}

/*Small Pointer*/
/*.wrapper .icon .tooltip:before{*/
    /*position:absolute;*/
    /*content: "";*/
    /*height: 15px;
    width: 15px;*/
    /*background: #fff;*/
    /*top: -1px;
    left: 50%;*/
    /*transform: translateX(-270%) rotate(20deg);*/
    /*transition: 0.02s cubic-bezier(0.68,-0.55,0.265,1.55);*/
/*}*/

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip{
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}

.wrapper .color:hover span,
.wrapper .color:hover .tooltip,
.wrapper .color:hover .tooltip:before{
    background: darkgrey;
}

.wrapper .Pencil:hover span,
.wrapper .Pencil:hover .tooltip,
.wrapper .Pencil:hover .tooltip:before{
    background: black;
}

/*.wrapper .Brush:hover span,
.wrapper .Brush:hover .tooltip,
.wrapper .Brush:hover .tooltip:before{
    background: saddlebrown;
}
*/
.wrapper .Text:hover span,
.wrapper .Text:hover .tooltip,
.wrapper .Text:hover .tooltip:before{
    background: gray;
}

.wrapper .Bucket:hover span,
.wrapper .Bucket:hover .tooltip,
.wrapper .Bucket:hover .tooltip:before{
    background: firebrick;
}

.wrapper .Eraser:hover span,
.wrapper .Eraser:hover .tooltip,
.wrapper .Eraser:hover .tooltip:before{
    background: teal;
}

.wrapper .Shapes:hover span,
.wrapper .Shapes:hover .tooltip,
.wrapper .Shapes:hover .tooltip:before{
    background: blueviolet;
}

.wrapper .Clear:hover span,
.wrapper .Clear:hover .tooltip,
.wrapper .Clear:hover .tooltip:before{
    background: olive;
}

.wrapper .Undo:hover span,
.wrapper .Undo:hover .tooltip,
.wrapper .Undo:hover .tooltip:before{
    background: green;
}

/*.wrapper .Zoom:hover span,
.wrapper .Zoom:hover .tooltip,
.wrapper .Zoom:hover .tooltip:before{
    background: lightseagreen;
}*/


@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
}