CSS quests

/* 

Kruka = #fe9263 
Kruka2 = #ffb27a

Blå = #c1ffe8

*/
html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
	height: 100vh;
	width: 100vw;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
	background: url("http://www.onlinecurtainfabrics.com/catalogue/images/large_Montgomery_EscadaVelvet(Chart1)_06%20Terracotta.jpg"), radial-gradient(circle, #fffce1, #ffe6be);
	background-blend-mode: overlay;
	background-size: cover;
	height: 100%;
	width: 100%;
	perspective: 500px;
  margin: 0;
  padding: 0;
}


html:hover {
	animation: jiggle 0.9s ease-out;
	transform-origin: 50% 50%;
	animation-iteration-count: infinite;
}

@keyframes jiggle {
	0% {
	
	}
	20% {
		transform: translateX(-30px) scaleX(0.95);
	}
	40% {
		transform: translateX(30px) scaleX(1.05);
	}
	60% {
		transform: translateX(-20px) scaleX(0.99);
	}
	80% {
		transform: translateX(10px) scaleX(1.01);
	}
	100% {
		transform: translateX(0);
	}
}



.pot {
	width: 90px;
	height: 60px;
	margin: 42% auto 20px ;
	background-color: #fe9263;
	background-image: url("http://www.onlinecurtainfabrics.com/catalogue/images/large_Montgomery_EscadaVelvet(Chart1)_06%20Terracotta.jpg");
	background-blend-mode: hard-light;
	transform: rotateX(-30deg) translateZ(20px);
	outline: 1px solid transparent;
	position: relative;
	z-index: 20;
	
}

.pot::after {
	content: " ";
	display: block;
	background: #eec4ad;
	width: 150px;
	height: 100px;
	border-radius: 50%;
	transform: rotateX(80deg) translateX(-32px) translateY(-60px) translateZ(0px);
	filter: blur(20px);
	opacity: 0.7;
}

.pot-edge {
	width: 112%;
	height: 40%;
	margin: 0 auto 0 -5.8%;
	background-color: #ffb27a;
	background-image: url("http://www.onlinecurtainfabrics.com/catalogue/images/large_Montgomery_EscadaVelvet(Chart1)_06%20Terracotta.jpg");
	background-blend-mode: multiply;
	transform: rotateX(-10deg) translateY(-5px);
	outline: 1px solid transparent;
	box-shadow: 0px 3px 2px rgba(0,0,0,0.10);
	z-index: 30;
	
}

.cactus {
	background-color: #5d7;
	background-image: url('http://img07.deviantart.net/0804/i/2009/283/3/4/whitenoise_texture_by_stockbyami.jpg');
	background-blend-mode: soft-light;
	background-size: cover;
	height: 220px; 
	width: 50px;
	margin: -265px auto;
	border-radius: 50px 5px 80% 50px;
	transform: skew(10deg, -30deg) translateX(-19.5px) rotateZ(-8deg);
	position: relative;
	z-index: -20;
	outline: 1px solid transparent;
	box-shadow: 0px 10px 25px rgba(0,0,0,0.37);

}



.arm-1 {
	background-color: #3f9;
	height: 30px;
	width: 50px;
	border-radius: 0 50% 50% 50%;
	transform: skew(30deg, 10deg)rotate(140deg) translateX(55px);
	box-shadow: 7px -9px 10px rgba(0,0,0,0.15);
}

.arm-2 {
	background-color: #5e6;
	background-image: url('http://img07.deviantart.net/0804/i/2009/283/3/4/whitenoise_texture_by_stockbyami.jpg');
	background-blend-mode: overlay;
	height: 55px;
	width: 55px;
	border-radius: 50% 50% 0 50%;
	transform: skew(-10deg, 30deg)rotate(120deg) translateY(-65px);
	box-shadow: 7px -9px 10px rgba(0,0,0,0.12);
}

.bodypart-2 {
	background-color: #3e8;
	background-image: url('http://img07.deviantart.net/0804/i/2009/283/3/4/whitenoise_texture_by_stockbyami.jpg');
	background-blend-mode: soft-light;
	height: 200px;
	width: 55px;
	border-radius: 50px 50px 50px 0%;
	transform: skew(-10deg, 30deg)rotate(2deg) translateY(-79.5px) translateX(-7px);
	box-shadow: -2px 10px 11px rgba(0,0,0,0.25);
}

.arm-3 {
	background-color: #3f8;
	background-image: url('http://img07.deviantart.net/0804/i/2009/283/3/4/whitenoise_texture_by_stockbyami.jpg');
	background-blend-mode: overlay;
	height: 45px;
	width: 45px;
	border-radius: 50% 50% 0 50%;
	transform: skew(-10deg, 30deg) rotateY(190deg) translateY(-260px) translateX(0);
	box-shadow: 0px -2px 10px rgba(0,0,0,0.12);
}