:root {
	--background: #fab3a1;
	--cup: #fff6e2;

	--cup-border: 1.75rem;
	--cup-height: 21rem;
	--cup-width: 13rem;

	--cap-border: 0.25rem;
	--cap-height: 2.75rem;
	--cap-width: 4.75rem;
	--cap-total-height: calc(var(--cup-height) + var(--cap-height));
	--cap-total-width: calc(var(--cup-width) + var(--cap-width));
}

body {
	background-color: var(--background);
	height: 100vh;
	margin: 0;
}

.container {
	-webkit-box-align: center;
	        align-items: center;
	display: -webkit-box;
	display: flex;
	height: 100%;
	-webkit-box-pack: center;
	        justify-content: center;
}

.cup {
	border-left: var(--cup-border) solid transparent;
	border-right: var(--cup-border) solid transparent;
	border-top: var(--cup-height) solid var(--cup);
	position: absolute;
	width: var(--cup-width);
}

.cup::before,
.cup::after {
	content: "";
	display: block;
	position: relative;
}

.cup::before {
	background-color: var(--cup);
	border-radius: 3px;
	bottom: var(--cap-total-height);
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
	height: var(--cap-height);
	right: 38px;
	width: var(--cap-total-width);
}

.cup::after {
	background-color: var(--cup);
	border-radius: 15%;
	bottom: calc(var(--cap-total-height) + 4.75rem);
	height: calc(var(--cap-height) + 0.75rem);
	right: 1rem;
	-webkit-transform: rotate(5deg);
	        transform: rotate(5deg);
	width: calc(var(--cap-total-width) - 2.75rem);
}