button
	cursor: pointer

h3
	font-family: 'Rent Strike'
	font-size: 5em
	margin: 30px

input
	font-family: 'Rent Strike'
	font-size: 1.5em

.columns
	display: flex

	.column
		width: 400px
		padding: 20px

		&:nth-child(4n+1)
			--color-strong: #c0d694
			--color-weak: #e5eed4

		&:nth-child(4n+2)
			--color-strong: #6ed8d6
			--color-weak: #d3f3f2

		&:nth-child(4n+3)
			--color-strong: #d3aee1
			--color-weak: #eddef3

		&:nth-child(4n+4)
			--color-strong: #eeab87
			--color-weak: #f9e5db

		& > h3
			color: var(--color-strong)
		& > .tile
			background-color: var(--color-weak)
		& > .add-tile
			background-color: var(--color-strong)

		h3
			text-align: center

		#hover-tile
			height: 110px
			margin-top: -15px

.tile
	position: relative
	height: 80px
	width: 400px

	display: grid
	align-items: center
	margin-bottom: 15px
	border: none

	&::after
		width: 400px
		height: 20px
		content: ''
		position: absolute
		top: -20px
		z-index: -1 // Prevent fluttering when moving mouse up

	input
		padding: 20px
		margin: 0
		height: 40px
		background: none
		border: none
		text-align: center
		font-size: 2.6em
		width: 360px

		&:focus-visible
			border: none

	.tile-stickers
		position: absolute
		top: 0
		left: 0
		pointer-events: none // Allow clicking the input box below this

	&.add-tile
		padding: 0
		text-align: center
		font-weight: bold
		font-size: 80px
		color: white
		line-height: 0

#mouse-detector
	position: absolute
	top: 0
	left: 0
	width: 100%
	height: 100%

#floaty-tile
	position: absolute

	&.hovering-1 > .tile
		background-color: #e5eed4

	&.hovering-2 > .tile
		background-color: #d3f3f2

	&.hovering-3 > .tile
		background-color: #eddef3

	&.hovering-4 > .tile
		background-color: #f9e5db

	& > .tile
		position: relative
		top: -40px
		left: -40px
		pointer-events: none