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

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

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

			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
				text-align: center
				font-weight: bold
				font-size: 80px
				color: white
				line-height: 0