body {
	background: #279dd4;
	color: white;
	font-family: "Ubuntu", sans-serif;
}

.height {
	min-height: 20vh;
}

.big-cup {
	background: white;
	color: rgb(24, 76, 180);
	border: 0.3rem solid rgb(24, 76, 180);
	border-radius: 0 0 2.5rem 2.5rem;
	width: 15em;
	min-height: 20em;
}

.litres {
	font-size: 1.3rem;
}

.percentage {
	font-size: 2.2rem;
	background: rgb(110, 174, 199);
	min-width: 80%;
}

.cups {
	min-height: 20em;
}

.small-cup {
	background: white;
	color: rgb(24, 76, 180);
	border: 0.2rem solid rgb(24, 76, 180);
	border-radius: 0 0 1rem 1rem;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
}

.small-cup:hover {
	background: rgb(110, 174, 199);
	color: white;
}

.cup-250 {
	height: 5em;
	width: 4em;
}

.cup-500 {
	height: 8em;
	width: 5em;
}

.cup-750 {
	height: 11em;
	width: 6em;
}

.cup-1000 {
	height: 14em;
	width: 7em;
}

.reset-button {
	background: white;
	color: rgb(24, 76, 180);
	border: 0.2rem solid rgb(24, 76, 180);
	cursor: pointer;
}

.reset-button:hover {
	background: rgb(110, 174, 199);
	color: white;
}

@media screen and (max-width: 768px) {
	.heading {
		margin-top: 1em;
	}

	.reset-button {
		margin-bottom: 1em;
	}
}


#article {
	padding: 5% 10% 0;
}

a {
	color:yellow;
}