CSS quests

/* colours */

@pipeline: #DCF9AF;
@green: #C6E774;
@leaves: #3CA656;

/* mixins */

.abs(@t: 0; @l: 0) {
	position: absolute;
	top: @t;
	left: @l;
}
.size (@h: 0; @w: 0) {
	height: @h;
	width: @w;
}
.transform(@func) {
	-webkit-transform: @func;
	-moz-transform: @func;
	-o-transform: @func;
	-ms-transform: @func;
	transform: @func;
}

*:before,
*:after {
	content: "";
	display: block;
}

.container {
	.size(550px; 500px;);
	margin: 200px auto;
	position: relative;
}
.glass {
	.size(@w: 200px;);
	border-top: 350px solid rgba(221, 240, 216, 0.5);
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	height: 0;
	margin: 100px auto;
}
.liquid {
	.size(@w: 180px;);
	.abs(50px; ~"calc(50% - 120px)");
	border-top: 300px solid rgba(194, 202, 151, 0.25);
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	height: 0;
}
.glass-top {
	.size(10px; 270px);
	.abs(0; ~"calc(50% - 135px)");
	background: rgba(221, 240, 216, 0.7);
	border-radius: 10px;
}
.glass-bottom {
	.size(14px; 220px);
	.abs(350px; ~"calc(50% - 110px)");
	background: rgba(221, 240, 216, 0.9);
	border-radius: 20px 20px 0 0;
}
.straw {
	.size(410px; 16px);
	border-radius: 3px;
	background: #888;
	position: absolute;
	z-index: -1;
	&.right {
		.transform(rotate(4deg));
		right: 160px;
		top: -80px;
	}
	&.left {
		.transform(rotate(-2deg));
		left: 280px;
		top: -85px;
		z-index: -2;
	}
}
.mint-leaf {
	.size(80px; 50px);
	border-radius: 15% 100%;
	z-index: -1;
	&.first {
		.abs(-20px; 205px);
		.transform(scale(1.3));
		background: @leaves;
	}
	&.second {
		.abs(-10px; 265px);
		.transform(rotate(60deg) scale(1.1));
		background: darken(@leaves, 18%);
	}
	&.third {
		.abs(200px; 230px);
		.transform(rotate(40deg) scale(0.8));
		background: lighten(@leaves, 5%);
	}
	&.forth {
		.abs(-60px; 220px);
		.transform(rotate(10deg));
		background: lighten(@leaves, 10%);
		z-index: -2;
	}
	&.fifth {
		.abs(130px; 290px);
		.transform(rotate(60deg) scale(1.2));
		background: darken(@leaves, 10%);
	}
	&.sixth {
		.abs(200px; 190px);
		.transform(rotate(-10deg));
		background: darken(@leaves, 3%);
	}
}
.ice {
	.size(50px; 50px);
	border-radius: 5px;
	&.first {
		.abs(70px; 250px);
		.transform(rotate(15deg));
		background: rgba(255, 255, 255, 0.9);
	}
	&.second {
		.abs(100px; 290px);
		.transform(rotate(-5deg) scale(1.1));
		background: rgba(255, 255, 255, 0.7);
	}
	&.third {
		.abs(25px; 150px);
		.transform(rotate(-5deg) scale(1.1));
		background: rgba(255, 255, 255, 0.8);
	}
	&.forth {
		.abs(15px; 185px);
		.transform(rotate(20deg) scale(0.8));
		background: rgba(255, 255, 255, 0.9);
	}
	&.fifth {
		.abs(15px; 320px);
		.transform(rotate(-30deg) scale(0.7));
		background: rgba(255, 255, 255, 0.95);
	}
	&.sixth {
		.abs(65px; 180px);
		.transform(rotate(-10deg) scale(1.2));
		background: rgba(255, 255, 255, 0.6);
	}
}
.lime {
	.size(40px; 100px);
	background: @pipeline;
	border-top: 15px solid @green;
	border-radius: 70px 70px 0 0;
	.line {
		.size(90%; 4px;);
		.abs(4px; ~"calc(50% - 2px)");
		background: lighten(@pipeline, 10%);
	}
	&:before {
		.size(100%; 4px;);
		.abs(0; ~"calc(50% - 4px)");
		.transform(rotate(-45deg));
		background: lighten(@pipeline, 10%);
		-webkit-transform-origin: bottom;
		-moz-transform-origin: bottom;
		-ms-transform-origin: bottom;
		-o-transform-origin: bottom;
		transform-origin: bottom;
	}
	&:after {
		.size(100%; 4px;);
		.abs(0; 50%);
		.transform(rotate(45deg));
		background: lighten(@pipeline, 10%);
		-webkit-transform-origin: bottom;
		-moz-transform-origin: bottom;
		-ms-transform-origin: bottom;
		-o-transform-origin: bottom;
		transform-origin: bottom;
	}
	&.first {
		.abs(275px; 145px;);
		.transform(rotate(-155deg));
	}
	&.second {
		.abs(125px; 165px;);
		.transform(rotate(45deg) scale(1.2));
		z-index: -1;
	}
	&.third {
		.abs(225px; 265px;);
		.transform(rotate(140deg) scale(0.9));
		z-index: -1;
	}
}
body {
	.size(100%; 100%);
	background: white;
        overflow: hidden;
}