CSS quests

/* mixins */
.box(@padding: 0) {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: @padding;
}
.size(@height: 0; @width: 0) {
	height: @height;
	width: @width;
}
.abs(@top; @left) {
	position: absolute;
	top: @top;
	left: @left;
}

html, body {
	.size(500px; 100%);
	background: #333;
	margin: 0;
	padding: 0;
}

/* rocket */
.rocket-cont {
	.size(80vh; 50%);
	margin: 0 auto;
	.rocket {
		margin: 0 auto;
		position: relative;
		.body {
			.box;
			.size(200px; 60px);
			.abs(45px; ~"calc(50% - 30px)");
			border: 2px solid white;
			border-radius: 100% 100% 40px 40px;
			&:before, &:after {
				content: "";
				display: block;
			}
			&:before {
				.abs(120px; -34px;);
				border-bottom: 60px solid white;
				border-left: 30px solid transparent;
			}
			&:after {
				.abs(120px; 60px;);
				border-bottom: 60px solid white;
				border-right: 30px solid transparent;
			}
			.window {
				.box;
				.size(30px; 30px);
				.abs(30px, 13px);
				border: 2px solid white;
				border-radius: 50%;
			}
			.rings {
				.size(40px; 56px);
				.abs(80px; 0);
				background: repeating-linear-gradient(
					#333, #333 2px, white 2px, white 4px);
			}
		}
	}
	.smoke {
		.size(0; 50px;);
		border-radius: 20%;
	    &.one {
			.abs(300px; ~"calc(50% - 45px)");
			border-bottom: 200px solid white;
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
		}
		&.two {
			.abs(300px; ~"calc(50% - 35px)");
			border-bottom: 180px solid #333;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
		}
	}
}