body{
	/*background-image:url("images/Page.png");
	background-size: 100%;*/
	background-color: yellow;
    top:0px;
    font-family: 'Chewy', cursive;

}
p, h3{
	font-family: 'Cabin', sans-serif;
}
.head{
	margin-left:34%;
	width:35%;
	position:absolute;
	top:0px;
}
.top{
	font-size: 2.6vw;
	text-decoration: none;
	text-align:center;
	color:black;
	padding:1.0vw;
	position:absolute;

	}
.top:hover{
	color:rgb(200,200,200);
}

.head2{
	
	margin:70px 20px 0 200px;
	height:70px;
	text-align: center;
}
.top2{
	font-size: 1.9vw;
	
	
	margin-top:0px;
	margin-left:2vw;

	}
	
.top3{
	float:left;
	width:10vw;
	height:30px;
}
.top2:hover{
	color:rgb(200,200,200);
}
.right{
	position: absolute;
	right:2px;
	top:5px;
}

.right img{
	width:40px;
}

.section{
	position: relative;
	padding:2px;
	margin:10px 205px;
}

.r{color:red;}
.o{color:orange;}
.y{color:yellow;}
.g{color:green;}
.b{color:rgb(0,200,255);}
.i{color:rgb(0,0,255);}
.v{color:rgb(170,0,255);}

.side{
	background:white;
	width:200px;
	
	padding:0px 10px;
	border-radius: 6px;
	float:left;
	line-height: 20px;
    position:absolute;
    top:140px;
    font-size: 14px;
}
.side2{
	background:white;
	width:200px;
	
	padding:0px 10px;
	border-radius: 6px;
	float:right;
	position:absolute;
    top:60px;
    right:10px;
    
}
.side3{
	background:white;
	width:200px;
	
	padding:5px 10px;
	border-radius: 6px;
	float:left;
	margin: 5px;
	line-height: 20px;
    position:absolute;
    top:140px;
    font-size: 14px;
}
.side4{
	background:white;
	width:200px;
	
	padding:5px 10px;
	border-radius: 6px;
	margin: 5px;
	float:right;
	position:absolute;
    top:60px;
    right:10px;
    font-size: 14px;
}
.side2 h2{
 margin:5px;
 padding:0;
}
.side4 h2{
 margin:5px;
 padding:0;
}
.walk{
	width:10px;
}
button{
	background-color: red; 
	position: relative;
    float:right;
    right:30px;
    color: black;
    padding: 3px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    border-radius: 6px;
    font-family: 'Chewy', cursive;
}
#share p{
	width:700px;
	float:left;
}
.canvas{
	position: relative;
	
}

.canvas-box2{
	
	
	margin: auto;
	width:900px;
}
.canvas-box{
	margin:50px 200px 0 200px;
}

.side2img{
	position:relative;
	width:90%;
	padding:2% 10px;
}
.create-pic{
	position:relative;
	float:left;
	width:21vw;
	height:14vw;
	padding:10px 2%
}
.play-pic{
	position:relative;
	float:left;
	width:28vw;
	height:16vw;
	padding:10px 2vw;
}
.footer{
	clear: both;
	position: relative;
	width:99%;
	top: 10px;
	height:30px;
}
.footer2{
	clear: both;
	position: relative;
	width:99%;
	top: 598px;
	height:30px;
	padding:4px;
	margin:0;
}
.footer2 p{
	margin:0;
}

.container {
   min-height:100%;
  
   margin:0px;
   padding: 0px;
   top:0px;
   width:100%;
}


@media screen and (max-width: 1330px) and (min-width: 1090px) {
	.side2{
		background:white;
		width:80%;
		margin:0px 10% 10px 10%;
		padding:20px;
		border-radius: 6px;
		float:none;
		position: absolute;
		top: 640px;
	}
	.top{
		
		line-height: 40px;
	}
	.side2img{
		position:relative;
		width:23%;
		padding:0 5px;
	}
	.canvas-box{
		margin:50px 0 0 200px;
	}
	.footer{
		top:250px;
	}
	.top3{
		
		width:9vw;
	}
}

@media screen and (max-width: 1090px){
	.side2{
		background:white;
		width:48%;
		margin:0px 0% 10px 0px;
		padding:10px;
		border-radius: 6px;
		float:right;
		position: absolute;
		top: 620px;
	}
	.top{
		
		line-height: 35px;
	}
	.side2img{
		position:relative;
		width:45%;
		padding:0 5px;
	}
	.side{
		background:white;
		width:45%;
		margin-top:0px;
		padding:0px 10px;
		border-radius: 6px;
		float:left;
		line-height: 20px;
		position: absolute;
		top: 620px;
	}
	.canvas-box{
		margin:50px 0 0 0px;
	}
	.side4{
		width:150px;
	}
	.side3{
		width:200px;
	}
	.footer{
		top:430px;
	}
	.top3{
		float:left;
		width:8vw;
	}
}