body{
	background-image: url(../img/paper.jpg);
	height: fill;
	width: 100%;
}

svg{
	height: fill;
}

button#sun{
	background-image: url(../img/sun2.png);
	background-size: cover;
	background-color: transparent;
	border-color: transparent;
	position: fixed;
	z-index: 2;
	stroke: yellow;

	width: 200px;
	height: 200px;
}

button#sun:hover{
	background-image: url(../img/sun22.png);
}

#l_top:hover{
	fill: #ff00e4;
}

#l_bottom:hover{
	fill: #ff00e4;
}

#r_top:hover{
	fill: #ff00e4;
}

#r_bottom:hover{
	fill: #ff00e4;
}

#center:hover{
	fill: #ff00e4;
}

button#juice2{
	z-index: 100;
	position: fixed;
	background-color: transparent;
	border-color: transparent;
	top: 0;
	right: 0;
	font-size: 40pt;
	position: fixed;
}

button#glass{
	z-index: 100;
	position: fixed;
	background-color: transparent;
	border-color: transparent;
	top: 0;
	right: 60px;
	font-size: 40pt;
	position: fixed;
}

button#soup{
	z-index: 100;
	position: fixed;
	background-color: transparent;
	border-color: transparent;
	top: 0;
	right: 120px;
	font-size: 40pt;
	position: fixed;
}

aside#drawer{
	background-color: transparent;
	background-image: url(../img/pinkpaper.jpeg);
	background-size: cover;
	width: 40vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: -100vw;
	transform: transform 1s;
	z-index: +1;
}

.slide{
	transform: translate(100vw);
}

img{
	width: 400px;
	margin-left: 90px;
}

#redcrayon{
	margin-top: 220px;
}

#bluecrayon{
	margin-top: 100px;
}

#greencrayon{
	margin-top: 100px;
}

.scalebig{
	transform: scale(.5);
}

.rotate{
	transform: rotate(180deg);
}

.spill{
	transform: skew(10deg);
}



@media screen and (max-width: 1200px){
	svg{
		height: fill;
		transform: scale(1.7);
	}
}

@media screen and (max-width: 600px){
	svg{
		height: fill;
		width: 190%;
		position: center;
}