*{
	box-sizing: border-box;
	margin: 0;
	padding:0;
}



body{
	background: url(Pattern3.jpg);
}

/*---------------------colors---------------------*/



@font-face{
	font-family: "QanelasBlack";
	src: url("QanelasBlack.woff2");
}


@font-face{
	font-family: "Finches";
	src: url("Finches.otf");
}




.wrapper{
	padding-top: 4vh;
	height:100vh;
	width:50vw;
	margin: 0 auto;
	}

.row{
	width:100%;
	height:10%;

}

.box{
	width:10%;
	float:left;
	height:100%;
	background-color: rgba(150,150,150,0.1);
	border-radius: 10px;
	border: 6px solid white;
	
}


/*----------------mode----------------*/



.head{
	display: inline-block;
	/*background-color: yellow;*/
	float: left;
	font-size: 3rem;
	margin-left: 15vw;
	margin-top:1.5vh;
	font-family: "Finches";
	letter-spacing: .7rem
}

.head span{
	/*font-family: "Coves Bold";*/
}

.mode{
	width:100vw;
	/*height:10vh;*/
	margin: 0 auto;
	background: rgba(255,255,255,1);
	padding-top: 4vh;
	padding-bottom: 4vh;
	box-shadow: 0 0px 20px -10px black;
	/*margin-bottom: -10vh;*/
	/*background: red;*/
	text-align: center;
	font-family: "Higher";

}

.mode ul{
	margin-top:3vh;
	/*background-color: green;*/
	display: inline-block;
	margin-left:;
}



.erase{
	height:10vh;
	width:50vw;
	text-align: center;
	/*background: green;*/
	margin: 0 auto;
}


/*-------------buttons-------------*/


button{
	font-size:1.2rem;
	font-style: bold;
	margin-right: 1rem;
	padding: 0.3rem 3rem;
	background: transparent;
	color: white;
	box-shadow: none;
	/*border-radius: 5px;*/
	border: 2px solid black;
	font-family: "QanelasBlack";
	text-transform: uppercase;
}

#solid{
	border: 2px solid #B4A83C;
	color: #B4A83C;
	transition: background 0.5s,color 0.5s;
}

#jazz{
border: 2px solid #D47DB2;
color: #D47DB2;
transition: background 0.5s,color 0.7s;

}

#gray{
	border: 2px solid black ;
	color: black;
	transition: background 0.5s,color 0.5s;
}

#solid:hover{
	background: #B4A83C;
	color: white;
	cursor:pointer;
}

#jazz:hover{
	background: #D47DB2;
	color: white;
	cursor:pointer;
}

#gray:hover{
	background: black;
	color: white;
	cursor:pointer;
}

#erase{
	margin-top: 2vh;
	width:50vw;
	/*border-radius: 5px;*/
	text-transform: uppercase;
	letter-spacing: .3rem;
	background-color: #44AEC1;
	border: none;
	border: 3px solid #44AEC1;
	transition: background 0.5s,color 0.5s, box-shadow 0.5s,border 0.5s;
}

#erase:hover{
	color: #44AEC1;
	border: 3px solid #44AEC1;
	background: rgba(255,255,255,0);
	box-shadow: 6px 6px #44AEC1;
	cursor: pointer;
}