Make it prettier (improve CSS)

src/Main.elm

@@ -65,14 +65,14 @@ init flags url browserKey =
   { windowW = 1
   , windowH = 1
   , columns =
-    [ { name = "Yes - Into"
+    [ { name = "Into"
       , tiles =
         [ Tile
           "Vore"
           [(Sticker (TextSticker "red" "<3") "Into This" 100 40)]
         ] |> Array.fromList
       }
-    , { name = "Yes - Willing"
+    , { name = "Willing"
       , tiles = Array.empty
       }
     , { name = "Maybe"

style.sass

@@ -1,22 +1,49 @@
-body
-	background-color: #fce0b5
-
 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
-		border-right: 1px solid black
+
+		&: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
-			background-color: #fcedd6
 			position: relative
 			height: 80px
 			width: 400px
@@ -32,6 +59,9 @@ button
 				height: 40px
 				background: none
 				border: none
+				text-align: center
+				font-size: 2.6em
+				width: 360px
 
 				&:focus-visible
 					border: none
@@ -45,6 +75,6 @@ button
 			&.add-tile
 				text-align: center
 				font-weight: bold
-				font-size: 60px
-				background-color: #efc88d
-				color: #3d2c12
+				font-size: 80px
+				color: white
+				line-height: 0