@mixin grid($column: '1', $row: '1', $color: 'transparent')
	grid-column: span $column
	grid-row: span $row
	background: $color

$n: ".pixel:nth-child"

$black: #000
$red: #EA3628
$tan: #ECCEAA
$yellow: #FED700

body
	display: grid
	height: 100vh
	width: 100%
	align-content: center
	justify-content: center
	margin: 0
	background-color: #abfaf7

.container
	display: grid
	width: 90vmin
	max-width: 420px
	height: 90vmin
	max-height: 420px
	grid-template-rows: repeat(27, 1fr)
	grid-template-columns: repeat(24, 1fr)
	.pixel
		box-sizing: border-box
		//Uncomment to see the borders of each box
		//border: 2px solid #888

#{$n}(1)
	+grid(10, 7)
#{$n}(3)
	+grid(6)
#{$n}(5)
	+grid(3, 4)
#{$n}(6)
	+grid(1, 6, $black)
#{$n}(7)
	+grid(2, 4, $tan)
#{$n}(15)
	+grid(4, 2, $red)
#{$n}(18), #{$n}(20), #{$n}(97)
	+grid(3, 1, $red)
#{$n}(19)
	+grid(6, 1, $black)
#{$n}(21), #{$n}(106)
	+grid(9, 1, $black)
#{$n}(22), #{$n}(100)
	+grid(1, 10)
#{$n}(25)
	+grid(6, 1, $tan)
#{$n}(27), #{$n}(51)
	+grid(9, 2)
#{$n}(28)
	+grid(4, 1, $black)
#{$n}(29)
	+grid(3, 2, $tan)
#{$n}(35), #{$n}(61)
	+grid(2, 2)
#{$n}(38), #{$n}(88)
	+grid(2, 2, $black)
#{$n}(39)
	+grid(8, 2)
#{$n}(41)
	+grid(2, 2, $tan)
#{$n}(43)
	+grid(7, 1, $tan)
#{$n}(45), #{$n}(129)
	+grid(1, 2)
#{$n}(50), #{$n}(63)
	+grid(5, 1, $tan)
#{$n}(53), #{$n}(59)
	+grid(4, 1, $tan)
#{$n}(60)
	+grid(5, 1, $black)
#{$n}(61)
	+grid(11, 1)
#{$n}(65)
	+grid(3, 1)
#{$n}(68)
	+grid(6, 1)
#{$n}(71)
	+grid(10, 1, $black)
#{$n}(72)
	+grid(1, 4, $black)
#{$n}(73), #{$n}(89), #{$n}(102)
	+grid(2, 2, $red)
#{$n}(77), #{$n}(87)
	+grid(4, 1, $red)
#{$n}(81), #{$n}(93), #{$n}(101)
	+grid(3, 1, $tan)
#{$n}(85)
	+grid(4, 2, $tan)
#{$n}(107)
	+grid(1, 9)
#{$n}(114)
	+grid(7, 6, $black)
#{$n}(115)
	+grid(2, 2, $yellow)
#{$n}(116)
	+grid(2, 5, $black)
#{$n}(117)
	+grid(1, 2, $yellow)
#{$n}(119)
	+grid(2, 7)
#{$n}(124)
	+grid(2, 6)
#{$n}(127)
	+grid(2, 4, $black)
#{$n}(130)
	+grid(1, 5)
#{$n}(135)
	+grid(1, 3, $black)
#{$n}(136)
	+grid(2, 3, $red)
#{$n}(137)
	+grid(2, 4)
#{$n}(139)
	+grid(2, 3)
#{$n}(143)
	+grid(3, 2)
#{$n}(148)
	+grid(4, 1)


//All the single tan pixels
$tan-1x1: 37 46 83 95 110

@each $px in $tan-1x1
	#{$n}(#{$px})
		+grid(1, 1, $tan)


//All the single black pixels
$black-1x1: 8 14 17 36 42 47 49 52 64 86 94 109 113 132 140

@each $px in $black-1x1
	#{$n}(#{$px})
		+grid(1, 1, $black)


//All the single red pixels
$red-1x1: 16 23 92 98 105 111 121 133 138

@each $px in $red-1x1
	#{$n}(#{$px})
		+grid(1, 1, $red)


//1x2 black blocks
$black-1x2: 12 30 32 34 40 44 82 96 118 128 134

@each $px in $black-1x2
	#{$n}(#{$px})
		+grid(1, 2, $black)


//2x1 black blocks
$black-2x1: 4 24 26 58 67 69/*nice*/ 74 78 80 84 90 120 123 145 147

@each $px in $black-2x1
	#{$n}(#{$px})
		+grid(2, 1, $black)


//3x1 black blocks
$black-3x1: 2 56 62 99 103 125

@each $px in $black-3x1
	#{$n}(#{$px})
		+grid(3, 1, $black)


//4x1 black blocks
$black-4x1: 10 54 76 142

@each $px in $black-4x1
	#{$n}(#{$px})
		+grid(4, 1, $black)


//2x1 red blocks
$red-2x1: 70 79 126 141

@each $px in $red-2x1
	#{$n}(#{$px})
		+grid(2, 1, $red)


//2x1 tan blocks
$tan-2x1: 48 55 91 104 112 122

@each $px in $tan-2x1
	#{$n}(#{$px})
		+grid(2, 1, $tan)


//And all the 1x2 tan blocks
$tan-1x2: 11 13 31 33

@each $px in $tan-1x2
	#{$n}(#{$px})
		+grid(1, 2, $tan)