* {
	box-sizing: border-box;
	margin: 0;

	color-scheme: dark light;

	cursor: default;
}

.wrapper {
	display: grid;
	place-items: center;
	place-content: center;

	font-size: clamp(4rem, 70vh, 80vw);
}

.potato {
	grid-row: 1;
	grid-column: 1;

	transition: 1000ms;
}

.heart {
	grid-row: 1;
	grid-column: 1;
	z-index: -1;
	font-size: 4rem;

	opacity: 0;
	transition: 1000ms;
}

.potato:hover + .heart {
	font-size: clamp(4rem, 70vh, 80vw);
	opacity: 100%;
}

.potato:hover {
	opacity: 0;
}