body {
	margin: 0;
	height: 100vh;
	height: 100dvh;
  

	backdrop-filter: brightness(0.5);
	--hue: 322;
	background: radial-gradient(
				hsl(var(--hue), 100%, 27%) 4%,
				hsl(var(--hue), 100%, 18%) 9%,
				hsla(var(--hue), 100%, 20%, 0) 9%
			)
			0 0,
		radial-gradient(
				hsl(var(--hue), 100%, 27%) 4%,
				hsl(var(--hue), 100%, 18%) 8%,
				hsla(var(--hue), 100%, 20%, 0) 10%
			)
			50px 50px,
		radial-gradient(hsla(var(--hue), 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0))
			50px 0,
		radial-gradient(hsla(var(--hue), 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0))
			0 50px,
		radial-gradient(
				hsla(var(--hue), 100%, 20%, 1) 35%,
				hsla(0, 100%, 20%, 0) 60%
			)
			50px 0,
		radial-gradient(
				hsla(var(--hue), 100%, 20%, 1) 35%,
				hsla(0, 100%, 20%, 0) 60%
			)
			100px 50px,
		radial-gradient(hsla(var(--hue), 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
		radial-gradient(hsla(var(--hue), 100%, 15%, 0.7), hsla(0, 100%, 20%, 0))
			50px 50px,
		linear-gradient(
				45deg,
				hsla(var(--hue), 100%, 20%, 0) 49%,
				hsla(var(--hue), 100%, 0%, 1) 50%,
				hsla(var(--hue), 100%, 20%, 0) 70%
			)
			0 0,
		linear-gradient(
				-45deg,
				hsla(var(--hue), 100%, 20%, 0) 49%,
				hsla(var(--hue), 100%, 0%, 1) 50%,
				hsla(var(--hue), 100%, 20%, 0) 70%
			)
			0 0;
	background-color: #300;
	background-size: 100px 100px;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  height: 100dvh;
}

form {
	display: grid;
	gap: 2rem;

	& > input[type="text"] {
		font-size: 2rem;
		max-width: 30ch;
		margin-inline: auto;
		padding: 1rem;
	}
}

button {
	cursor: pointer;
  touch-action: manipulation;
}

button#btn-love-add {
	font-size: 13vw;
	border-radius: 50%;
	width: 18vw;
	height: 18vw;
	margin-inline: auto;
  margin-bottom: 2rem;

	display: flex;
	justify-content: center;
	align-items: center;

  box-shadow: 3px 2px 10px black;
}

.flex {
	display: flex;
	align-items: center;
	gap: 1rem;
}

#list-love {
	height: 8rem;
	overflow-y: scroll;
	background: aliceblue;
}

.ascii-wrapper {
	position: relative;
	width: 50vw;
	height: 50vw;
	max-width: 500px;
	max-height: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-inline: auto;
  margin-top: 3rem;

	--circle-radius: 100px; /* Change this to adjust the radius */
	--font-size: 16px; /* Adjust font size */
	--svg-size: calc(var(--circle-radius) * 2 + 20px);
	/* --svg-color-fill: hsl(351, 22%, 65%); */
}

text-circle {
	filter: drop-shadow(2px 2px 8px rgba(42, 42, 42, 0.59));
}