CSSでドット絵を描く！知識必要なし！

こんにちは！DQは5と7が好きなぽんひろ(@ponhiroo)です。

ドラクエ5のドット絵をCSSで作ってみました！

ということで、今回は「CSSでドット絵を描く」。

この記事では

CSSでドット絵を描く仕組み
仕組みがわからなくても描ける方法

を紹介します！

クリックでジャンプ

完成したCSSドット絵がこちら！全部画像ではありません！
このドット絵はbox-shadowで描いてる！
ツールを使えば誰でも作れる！
1. 制作の様子

完成したCSSドット絵がこちら！全部画像ではありません！

DQ5主人公
©SQUARE ENIX CO.

コード表示

<div class="dot-1"></div>

.dot-1{
position:relative;
width: 140px;
height: 140px;
margin:0 auto;
}
.dot-1::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 15px;
  width: 5px;
  height: 5px;
  background: transparent;
  box-shadow:5px 5px 0 transparent,
10px 5px 0 transparent,
15px 5px 0 transparent,
20px 5px 0 transparent,
25px 5px 0 transparent,
30px 5px 0 transparent,
35px 5px 0 transparent,
40px 5px 0 rgb(22, 23, 32),
45px 5px 0 rgb(22, 23, 32),
50px 5px 0 rgb(22, 23, 32),
55px 5px 0 rgb(22, 23, 32),
60px 5px 0 rgb(22, 23, 32),
65px 5px 0 rgb(22, 23, 32),
70px 5px 0 transparent,
75px 5px 0 transparent,
80px 5px 0 transparent,
85px 5px 0 transparent,
90px 5px 0 transparent,
95px 5px 0 transparent,
100px 5px 0 transparent,
5px 10px 0 transparent,
10px 10px 0 transparent,
15px 10px 0 transparent,
20px 10px 0 transparent,
25px 10px 0 transparent,
30px 10px 0 transparent,
35px 10px 0 rgb(22, 23, 32),
40px 10px 0 rgb(121, 28, 132),
45px 10px 0 rgb(108, 67, 174),
50px 10px 0 rgb(108, 67, 174),
55px 10px 0 rgb(121, 28, 132),
60px 10px 0 rgb(61, 24, 94),
65px 10px 0 rgb(61, 24, 94),
70px 10px 0 rgb(22, 23, 32),
75px 10px 0 transparent,
80px 10px 0 transparent,
85px 10px 0 transparent,
90px 10px 0 transparent,
95px 10px 0 transparent,
100px 10px 0 transparent,
5px 15px 0 transparent,
10px 15px 0 transparent,
15px 15px 0 transparent,
20px 15px 0 transparent,
25px 15px 0 transparent,
30px 15px 0 rgb(22, 23, 32),
35px 15px 0 rgb(121, 28, 132),
40px 15px 0 rgb(108, 67, 174),
45px 15px 0 rgb(108, 67, 174),
50px 15px 0 rgb(108, 67, 174),
55px 15px 0 rgb(108, 67, 174),
60px 15px 0 rgb(121, 28, 132),
65px 15px 0 rgb(61, 24, 94),
70px 15px 0 rgb(61, 24, 94),
75px 15px 0 rgb(22, 23, 32),
80px 15px 0 transparent,
85px 15px 0 transparent,
90px 15px 0 transparent,
95px 15px 0 transparent,
100px 15px 0 transparent,
5px 20px 0 transparent,
10px 20px 0 transparent,
15px 20px 0 transparent,
20px 20px 0 transparent,
25px 20px 0 transparent,
30px 20px 0 rgb(22, 23, 32),
35px 20px 0 rgb(61, 24, 94),
40px 20px 0 rgb(108, 67, 174),
45px 20px 0 rgb(108, 67, 174),
50px 20px 0 rgb(108, 67, 174),
55px 20px 0 rgb(108, 67, 174),
60px 20px 0 rgb(61, 24, 94),
65px 20px 0 rgb(61, 24, 94),
70px 20px 0 rgb(61, 24, 94),
75px 20px 0 rgb(22, 23, 32),
80px 20px 0 transparent,
85px 20px 0 transparent,
90px 20px 0 transparent,
95px 20px 0 transparent,
100px 20px 0 transparent,
5px 25px 0 transparent,
10px 25px 0 transparent,
15px 25px 0 transparent,
20px 25px 0 transparent,
25px 25px 0 transparent,
30px 25px 0 rgb(22, 23, 32),
35px 25px 0 rgb(121, 28, 132),
40px 25px 0 rgb(108, 67, 174),
45px 25px 0 rgb(61, 24, 94),
50px 25px 0 rgb(61, 24, 94),
55px 25px 0 rgb(61, 24, 94),
60px 25px 0 rgb(108, 67, 174),
65px 25px 0 rgb(121, 28, 132),
70px 25px 0 rgb(61, 24, 94),
75px 25px 0 rgb(22, 23, 32),
80px 25px 0 transparent,
85px 25px 0 transparent,
90px 25px 0 transparent,
95px 25px 0 transparent,
100px 25px 0 transparent,
5px 30px 0 transparent,
10px 30px 0 transparent,
15px 30px 0 transparent,
20px 30px 0 transparent,
25px 30px 0 transparent,
30px 30px 0 rgb(22, 23, 32),
35px 30px 0 rgb(61, 24, 94),
40px 30px 0 rgb(121, 28, 132),
45px 30px 0 rgb(121, 28, 132),
50px 30px 0 rgb(108, 67, 174),
55px 30px 0 rgb(108, 67, 174),
60px 30px 0 rgb(121, 28, 132),
65px 30px 0 rgb(61, 24, 94),
70px 30px 0 rgb(61, 24, 94),
75px 30px 0 rgb(22, 23, 32),
80px 30px 0 transparent,
85px 30px 0 transparent,
90px 30px 0 transparent,
95px 30px 0 transparent,
100px 30px 0 transparent,
5px 35px 0 transparent,
10px 35px 0 transparent,
15px 35px 0 transparent,
20px 35px 0 transparent,
25px 35px 0 transparent,
30px 35px 0 rgb(22, 23, 32),
35px 35px 0 rgb(61, 24, 94),
40px 35px 0 rgb(61, 24, 94),
45px 35px 0 rgb(61, 24, 94),
50px 35px 0 rgb(61, 24, 94),
55px 35px 0 rgb(61, 24, 94),
60px 35px 0 rgb(61, 24, 94),
65px 35px 0 rgb(61, 24, 94),
70px 35px 0 rgb(61, 24, 94),
75px 35px 0 rgb(22, 23, 32),
80px 35px 0 transparent,
85px 35px 0 transparent,
90px 35px 0 transparent,
95px 35px 0 transparent,
100px 35px 0 transparent,
5px 40px 0 transparent,
10px 40px 0 transparent,
15px 40px 0 transparent,
20px 40px 0 rgb(22, 23, 32),
25px 40px 0 rgb(22, 23, 32),
30px 40px 0 rgb(22, 23, 32),
35px 40px 0 rgb(22, 23, 32),
40px 40px 0 rgb(255, 243, 219),
45px 40px 0 rgb(22, 23, 32),
50px 40px 0 rgb(111, 68, 38),
55px 40px 0 rgb(111, 68, 38),
60px 40px 0 rgb(22, 23, 32),
65px 40px 0 rgb(255, 243, 219),
70px 40px 0 rgb(22, 23, 32),
75px 40px 0 rgb(22, 23, 32),
80px 40px 0 transparent,
85px 40px 0 transparent,
90px 40px 0 transparent,
95px 40px 0 transparent,
100px 40px 0 transparent,
5px 45px 0 transparent,
10px 45px 0 transparent,
15px 45px 0 rgb(22, 23, 32),
20px 45px 0 rgb(111, 68, 38),
25px 45px 0 rgb(67, 46, 33),
30px 45px 0 rgb(22, 23, 32),
35px 45px 0 rgb(255, 243, 219),
40px 45px 0 rgb(255, 243, 219),
45px 45px 0 rgb(22, 23, 32),
50px 45px 0 rgb(255, 243, 219),
55px 45px 0 rgb(255, 243, 219),
60px 45px 0 rgb(22, 23, 32),
65px 45px 0 rgb(255, 243, 219),
70px 45px 0 rgb(255, 243, 219),
75px 45px 0 rgb(22, 23, 32),
80px 45px 0 rgb(22, 23, 32),
85px 45px 0 transparent,
90px 45px 0 transparent,
95px 45px 0 transparent,
100px 45px 0 transparent,
5px 50px 0 transparent,
10px 50px 0 transparent,
15px 50px 0 rgb(22, 23, 32),
20px 50px 0 rgb(111, 68, 38),
25px 50px 0 rgb(67, 46, 33),
30px 50px 0 rgb(61, 24, 94),
35px 50px 0 rgb(22, 23, 32),
40px 50px 0 rgb(255, 243, 219),
45px 50px 0 rgb(255, 243, 219),
50px 50px 0 rgb(255, 243, 219),
55px 50px 0 rgb(255, 243, 219),
60px 50px 0 rgb(255, 243, 219),
65px 50px 0 rgb(255, 243, 219),
70px 50px 0 rgb(22, 23, 32),
75px 50px 0 rgb(121, 28, 132),
80px 50px 0 rgb(61, 24, 94),
85px 50px 0 rgb(22, 23, 32),
90px 50px 0 transparent,
95px 50px 0 transparent,
100px 50px 0 transparent,
5px 55px 0 transparent,
10px 55px 0 transparent,
15px 55px 0 rgb(22, 23, 32),
20px 55px 0 rgb(111, 68, 38),
25px 55px 0 rgb(67, 46, 33),
30px 55px 0 rgb(61, 24, 94),
35px 55px 0 rgb(121, 28, 132),
40px 55px 0 rgb(22, 23, 32),
45px 55px 0 rgb(22, 23, 32),
50px 55px 0 rgb(255, 243, 219),
55px 55px 0 rgb(255, 243, 219),
60px 55px 0 rgb(22, 23, 32),
65px 55px 0 rgb(22, 23, 32),
70px 55px 0 rgb(121, 28, 132),
75px 55px 0 rgb(61, 24, 94),
80px 55px 0 rgb(111, 68, 38),
85px 55px 0 rgb(22, 23, 32),
90px 55px 0 transparent,
95px 55px 0 transparent,
100px 55px 0 transparent,
5px 60px 0 transparent,
10px 60px 0 transparent,
15px 60px 0 transparent,
20px 60px 0 rgb(67, 46, 33),
25px 60px 0 rgb(67, 46, 33),
30px 60px 0 rgb(61, 24, 94),
35px 60px 0 rgb(61, 24, 94),
40px 60px 0 rgb(121, 28, 132),
45px 60px 0 rgb(121, 28, 132),
50px 60px 0 rgb(22, 23, 32),
55px 60px 0 rgb(22, 23, 32),
60px 60px 0 rgb(121, 28, 132),
65px 60px 0 rgb(61, 24, 94),
70px 60px 0 rgb(61, 24, 94),
75px 60px 0 rgb(106, 111, 115),
80px 60px 0 rgb(111, 68, 38),
85px 60px 0 rgb(255, 243, 219),
90px 60px 0 rgb(22, 23, 32),
95px 60px 0 transparent,
100px 60px 0 transparent,
5px 65px 0 transparent,
10px 65px 0 transparent,
15px 65px 0 rgb(22, 23, 32),
20px 65px 0 rgb(255, 243, 219),
25px 65px 0 rgb(111, 68, 38),
30px 65px 0 rgb(106, 111, 115),
35px 65px 0 rgb(61, 24, 94),
40px 65px 0 rgb(61, 24, 94),
45px 65px 0 rgb(61, 24, 94),
50px 65px 0 rgb(61, 24, 94),
55px 65px 0 rgb(61, 24, 94),
60px 65px 0 rgb(61, 24, 94),
65px 65px 0 rgb(61, 24, 94),
70px 65px 0 rgb(106, 111, 115),
75px 65px 0 rgb(106, 111, 115),
80px 65px 0 rgb(22, 23, 32),
85px 65px 0 rgb(255, 243, 219),
90px 65px 0 rgb(22, 23, 32),
95px 65px 0 transparent,
100px 65px 0 transparent,
5px 70px 0 transparent,
10px 70px 0 transparent,
15px 70px 0 rgb(22, 23, 32),
20px 70px 0 rgb(111, 68, 38),
25px 70px 0 rgb(111, 68, 38),
30px 70px 0 rgb(22, 23, 32),
35px 70px 0 rgb(106, 111, 115),
40px 70px 0 rgb(250, 255, 254),
45px 70px 0 rgb(250, 255, 254),
50px 70px 0 rgb(250, 255, 254),
55px 70px 0 rgb(250, 255, 254),
60px 70px 0 rgb(250, 255, 254),
65px 70px 0 rgb(106, 111, 115),
70px 70px 0 rgb(106, 111, 115),
75px 70px 0 rgb(22, 23, 32),
80px 70px 0 rgb(22, 23, 32),
85px 70px 0 rgb(111, 68, 38),
90px 70px 0 rgb(22, 23, 32),
95px 70px 0 transparent,
100px 70px 0 transparent,
5px 75px 0 transparent,
10px 75px 0 transparent,
15px 75px 0 transparent,
20px 75px 0 rgb(22, 23, 32),
25px 75px 0 rgb(67, 46, 33),
30px 75px 0 rgb(106, 111, 115),
35px 75px 0 rgb(22, 23, 32),
40px 75px 0 rgb(106, 111, 115),
45px 75px 0 rgb(250, 255, 254),
50px 75px 0 rgb(250, 255, 254),
55px 75px 0 rgb(250, 255, 254),
60px 75px 0 rgb(106, 111, 115),
65px 75px 0 rgb(106, 111, 115),
70px 75px 0 rgb(22, 23, 32),
75px 75px 0 rgb(106, 111, 115),
80px 75px 0 rgb(22, 23, 32),
85px 75px 0 rgb(111, 68, 38),
90px 75px 0 rgb(22, 23, 32),
95px 75px 0 transparent,
100px 75px 0 transparent,
5px 80px 0 transparent,
10px 80px 0 transparent,
15px 80px 0 transparent,
20px 80px 0 rgb(22, 23, 32),
25px 80px 0 rgb(67, 46, 33),
30px 80px 0 rgb(106, 111, 115),
35px 80px 0 rgb(106, 111, 115),
40px 80px 0 rgb(22, 23, 32),
45px 80px 0 rgb(67, 46, 33),
50px 80px 0 rgb(111, 68, 38),
55px 80px 0 rgb(111, 68, 38),
60px 80px 0 rgb(111, 68, 38),
65px 80px 0 rgb(67, 46, 33),
70px 80px 0 rgb(106, 111, 115),
75px 80px 0 rgb(106, 111, 115),
80px 80px 0 rgb(22, 23, 32),
85px 80px 0 rgb(22, 23, 32),
90px 80px 0 transparent,
95px 80px 0 transparent,
100px 80px 0 transparent,
5px 85px 0 transparent,
10px 85px 0 transparent,
15px 85px 0 transparent,
20px 85px 0 rgb(22, 23, 32),
25px 85px 0 rgb(111, 68, 38),
30px 85px 0 rgb(22, 23, 32),
35px 85px 0 rgb(106, 111, 115),
40px 85px 0 rgb(106, 111, 115),
45px 85px 0 rgb(250, 255, 254),
50px 85px 0 rgb(250, 255, 254),
55px 85px 0 rgb(250, 255, 254),
60px 85px 0 rgb(250, 255, 254),
65px 85px 0 rgb(250, 255, 254),
70px 85px 0 rgb(106, 111, 115),
75px 85px 0 rgb(22, 23, 32),
80px 85px 0 transparent,
85px 85px 0 transparent,
90px 85px 0 transparent,
95px 85px 0 transparent,
100px 85px 0 transparent,
5px 90px 0 transparent,
10px 90px 0 transparent,
15px 90px 0 transparent,
20px 90px 0 rgb(22, 23, 32),
25px 90px 0 rgb(111, 68, 38),
30px 90px 0 rgb(22, 23, 32),
35px 90px 0 rgb(26, 48, 151),
40px 90px 0 rgb(26, 48, 151),
45px 90px 0 rgb(26, 48, 151),
50px 90px 0 rgb(22, 23, 32),
55px 90px 0 rgb(111, 68, 38),
60px 90px 0 rgb(255, 243, 219),
65px 90px 0 rgb(255, 243, 219),
70px 90px 0 rgb(111, 68, 38),
75px 90px 0 rgb(22, 23, 32),
80px 90px 0 transparent,
85px 90px 0 transparent,
90px 90px 0 transparent,
95px 90px 0 transparent,
100px 90px 0 transparent,
5px 95px 0 transparent,
10px 95px 0 transparent,
15px 95px 0 transparent,
20px 95px 0 rgb(22, 23, 32),
25px 95px 0 rgb(111, 68, 38),
30px 95px 0 rgb(22, 23, 32),
35px 95px 0 rgb(106, 111, 115),
40px 95px 0 rgb(106, 111, 115),
45px 95px 0 rgb(106, 111, 115),
50px 95px 0 rgb(22, 23, 32),
55px 95px 0 rgb(26, 48, 151),
60px 95px 0 rgb(26, 48, 151),
65px 95px 0 rgb(26, 48, 151),
70px 95px 0 rgb(26, 48, 151),
75px 95px 0 rgb(22, 23, 32),
80px 95px 0 transparent,
85px 95px 0 transparent,
90px 95px 0 transparent,
95px 95px 0 transparent,
100px 95px 0 transparent,
5px 100px 0 transparent,
10px 100px 0 transparent,
15px 100px 0 transparent,
20px 100px 0 transparent,
25px 100px 0 rgb(22, 23, 32),
30px 100px 0 rgb(22, 23, 32),
35px 100px 0 transparent,
40px 100px 0 transparent,
45px 100px 0 transparent,
50px 100px 0 rgb(22, 23, 32),
55px 100px 0 rgb(106, 111, 115),
60px 100px 0 rgb(250, 255, 254),
65px 100px 0 rgb(250, 255, 254),
70px 100px 0 rgb(106, 111, 115),
75px 100px 0 rgb(22, 23, 32),
80px 100px 0 transparent,
85px 100px 0 transparent,
90px 100px 0 transparent,
95px 100px 0 transparent,
100px 100px 0 transparent;
}

ビアンカ
©SQUARE ENIX CO.

コード表示

<div class="dot-2"></div>

.dot-2{
position:relative;
width: 140px;
height: 140px;
margin:0 auto;
}
.dot-2::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 15px;
  width: 5px;
  height: 5px;
  background: transparent;
  box-shadow:5px 5px 0 transparent,
10px 5px 0 transparent,
15px 5px 0 transparent,
20px 5px 0 transparent,
25px 5px 0 transparent,
30px 5px 0 transparent,
35px 5px 0 transparent,
40px 5px 0 rgb(22, 23, 32),
45px 5px 0 rgb(22, 23, 32),
50px 5px 0 rgb(22, 23, 32),
55px 5px 0 rgb(22, 23, 32),
60px 5px 0 rgb(22, 23, 32),
65px 5px 0 rgb(22, 23, 32),
70px 5px 0 transparent,
75px 5px 0 transparent,
80px 5px 0 transparent,
85px 5px 0 transparent,
90px 5px 0 transparent,
95px 5px 0 transparent,
100px 5px 0 transparent,
105px 5px 0 transparent,
5px 10px 0 transparent,
10px 10px 0 transparent,
15px 10px 0 transparent,
20px 10px 0 transparent,
25px 10px 0 transparent,
30px 10px 0 transparent,
35px 10px 0 rgb(22, 23, 32),
40px 10px 0 rgb(111, 68, 38),
45px 10px 0 rgb(111, 68, 38),
50px 10px 0 rgb(238, 231, 53),
55px 10px 0 rgb(238, 231, 53),
60px 10px 0 rgb(111, 68, 38),
65px 10px 0 rgb(111, 68, 38),
70px 10px 0 rgb(22, 23, 32),
75px 10px 0 transparent,
80px 10px 0 transparent,
85px 10px 0 transparent,
90px 10px 0 transparent,
95px 10px 0 transparent,
100px 10px 0 transparent,
105px 10px 0 transparent,
5px 15px 0 transparent,
10px 15px 0 transparent,
15px 15px 0 transparent,
20px 15px 0 transparent,
25px 15px 0 transparent,
30px 15px 0 rgb(22, 23, 32),
35px 15px 0 rgb(111, 68, 38),
40px 15px 0 rgb(238, 231, 53),
45px 15px 0 rgb(238, 231, 53),
50px 15px 0 rgb(238, 231, 53),
55px 15px 0 rgb(111, 68, 38),
60px 15px 0 rgb(111, 68, 38),
65px 15px 0 rgb(238, 231, 53),
70px 15px 0 rgb(111, 68, 38),
75px 15px 0 rgb(22, 23, 32),
80px 15px 0 transparent,
85px 15px 0 transparent,
90px 15px 0 transparent,
95px 15px 0 transparent,
100px 15px 0 transparent,
105px 15px 0 transparent,
5px 20px 0 transparent,
10px 20px 0 transparent,
15px 20px 0 transparent,
20px 20px 0 transparent,
25px 20px 0 transparent,
30px 20px 0 rgb(22, 23, 32),
35px 20px 0 rgb(238, 231, 53),
40px 20px 0 rgb(232, 239, 241),
45px 20px 0 rgb(238, 231, 53),
50px 20px 0 rgb(111, 68, 38),
55px 20px 0 rgb(111, 68, 38),
60px 20px 0 rgb(22, 23, 32),
65px 20px 0 rgb(111, 68, 38),
70px 20px 0 rgb(232, 239, 241),
75px 20px 0 rgb(22, 23, 32),
80px 20px 0 transparent,
85px 20px 0 transparent,
90px 20px 0 transparent,
95px 20px 0 transparent,
100px 20px 0 transparent,
105px 20px 0 transparent,
5px 25px 0 transparent,
10px 25px 0 transparent,
15px 25px 0 transparent,
20px 25px 0 transparent,
25px 25px 0 rgb(22, 23, 32),
30px 25px 0 rgb(111, 68, 38),
35px 25px 0 rgb(232, 239, 241),
40px 25px 0 rgb(238, 231, 53),
45px 25px 0 rgb(111, 68, 38),
50px 25px 0 rgb(22, 23, 32),
55px 25px 0 rgb(22, 23, 32),
60px 25px 0 rgb(22, 23, 32),
65px 25px 0 rgb(111, 68, 38),
70px 25px 0 rgb(238, 231, 53),
75px 25px 0 rgb(111, 68, 38),
80px 25px 0 rgb(22, 23, 32),
85px 25px 0 transparent,
90px 25px 0 transparent,
95px 25px 0 transparent,
100px 25px 0 transparent,
105px 25px 0 transparent,
5px 30px 0 transparent,
10px 30px 0 transparent,
15px 30px 0 transparent,
20px 30px 0 transparent,
25px 30px 0 rgb(22, 23, 32),
30px 30px 0 rgb(238, 231, 53),
35px 30px 0 rgb(238, 231, 53),
40px 30px 0 rgb(111, 68, 38),
45px 30px 0 rgb(22, 23, 32),
50px 30px 0 rgb(255, 243, 219),
55px 30px 0 rgb(255, 243, 219),
60px 30px 0 rgb(255, 243, 219),
65px 30px 0 rgb(22, 23, 32),
70px 30px 0 rgb(111, 68, 38),
75px 30px 0 rgb(111, 68, 38),
80px 30px 0 rgb(22, 23, 32),
85px 30px 0 transparent,
90px 30px 0 transparent,
95px 30px 0 transparent,
100px 30px 0 transparent,
105px 30px 0 transparent,
5px 35px 0 transparent,
10px 35px 0 transparent,
15px 35px 0 transparent,
20px 35px 0 transparent,
25px 35px 0 rgb(22, 23, 32),
30px 35px 0 rgb(238, 231, 53),
35px 35px 0 rgb(238, 231, 53),
40px 35px 0 rgb(22, 23, 32),
45px 35px 0 rgb(255, 243, 219),
50px 35px 0 rgb(255, 243, 219),
55px 35px 0 rgb(255, 243, 219),
60px 35px 0 rgb(255, 243, 219),
65px 35px 0 rgb(255, 243, 219),
70px 35px 0 rgb(111, 68, 38),
75px 35px 0 rgb(111, 68, 38),
80px 35px 0 rgb(22, 23, 32),
85px 35px 0 transparent,
90px 35px 0 transparent,
95px 35px 0 transparent,
100px 35px 0 transparent,
105px 35px 0 transparent,
5px 40px 0 transparent,
10px 40px 0 transparent,
15px 40px 0 transparent,
20px 40px 0 transparent,
25px 40px 0 rgb(22, 23, 32),
30px 40px 0 rgb(238, 231, 53),
35px 40px 0 rgb(22, 23, 32),
40px 40px 0 rgb(255, 243, 219),
45px 40px 0 rgb(22, 23, 32),
50px 40px 0 rgb(255, 243, 219),
55px 40px 0 rgb(255, 243, 219),
60px 40px 0 rgb(22, 23, 32),
65px 40px 0 rgb(255, 243, 219),
70px 40px 0 rgb(22, 23, 32),
75px 40px 0 rgb(111, 68, 38),
80px 40px 0 rgb(22, 23, 32),
85px 40px 0 transparent,
90px 40px 0 transparent,
95px 40px 0 transparent,
100px 40px 0 transparent,
105px 40px 0 transparent,
5px 45px 0 transparent,
10px 45px 0 transparent,
15px 45px 0 transparent,
20px 45px 0 transparent,
25px 45px 0 rgb(22, 23, 32),
30px 45px 0 rgb(238, 231, 53),
35px 45px 0 rgb(22, 23, 32),
40px 45px 0 rgb(255, 243, 219),
45px 45px 0 rgb(22, 23, 32),
50px 45px 0 rgb(255, 243, 219),
55px 45px 0 rgb(255, 243, 219),
60px 45px 0 rgb(22, 23, 32),
65px 45px 0 rgb(255, 243, 219),
70px 45px 0 rgb(255, 243, 219),
75px 45px 0 rgb(22, 23, 32),
80px 45px 0 transparent,
85px 45px 0 transparent,
90px 45px 0 transparent,
95px 45px 0 transparent,
100px 45px 0 transparent,
105px 45px 0 transparent,
5px 50px 0 transparent,
10px 50px 0 transparent,
15px 50px 0 transparent,
20px 50px 0 transparent,
25px 50px 0 rgb(22, 23, 32),
30px 50px 0 rgb(111, 68, 38),
35px 50px 0 rgb(22, 23, 32),
40px 50px 0 rgb(255, 243, 219),
45px 50px 0 rgb(255, 243, 219),
50px 50px 0 rgb(255, 243, 219),
55px 50px 0 rgb(255, 243, 219),
60px 50px 0 rgb(255, 243, 219),
65px 50px 0 rgb(255, 243, 219),
70px 50px 0 rgb(22, 23, 32),
75px 50px 0 rgb(22, 23, 32),
80px 50px 0 transparent,
85px 50px 0 transparent,
90px 50px 0 transparent,
95px 50px 0 transparent,
100px 50px 0 transparent,
105px 50px 0 transparent,
5px 55px 0 transparent,
10px 55px 0 transparent,
15px 55px 0 transparent,
20px 55px 0 transparent,
25px 55px 0 rgb(22, 23, 32),
30px 55px 0 rgb(22, 23, 32),
35px 55px 0 rgb(111, 68, 38),
40px 55px 0 rgb(22, 23, 32),
45px 55px 0 rgb(22, 23, 32),
50px 55px 0 rgb(255, 243, 219),
55px 55px 0 rgb(255, 243, 219),
60px 55px 0 rgb(22, 23, 32),
65px 55px 0 rgb(22, 23, 32),
70px 55px 0 rgb(238, 231, 53),
75px 55px 0 rgb(22, 23, 32),
80px 55px 0 transparent,
85px 55px 0 transparent,
90px 55px 0 transparent,
95px 55px 0 transparent,
100px 55px 0 transparent,
105px 55px 0 transparent,
5px 60px 0 transparent,
10px 60px 0 transparent,
15px 60px 0 transparent,
20px 60px 0 rgb(22, 23, 32),
25px 60px 0 rgb(111, 68, 38),
30px 60px 0 rgb(22, 23, 32),
35px 60px 0 rgb(238, 231, 53),
40px 60px 0 rgb(111, 68, 38),
45px 60px 0 rgb(22, 23, 32),
50px 60px 0 rgb(22, 23, 32),
55px 60px 0 rgb(22, 23, 32),
60px 60px 0 rgb(238, 231, 53),
65px 60px 0 rgb(22, 23, 32),
70px 60px 0 rgb(22, 23, 32),
75px 60px 0 rgb(255, 243, 219),
80px 60px 0 rgb(22, 23, 32),
85px 60px 0 transparent,
90px 60px 0 transparent,
95px 60px 0 transparent,
100px 60px 0 transparent,
105px 60px 0 transparent,
5px 65px 0 transparent,
10px 65px 0 transparent,
15px 65px 0 transparent,
20px 65px 0 rgb(22, 23, 32),
25px 65px 0 rgb(255, 243, 219),
30px 65px 0 rgb(255, 243, 219),
35px 65px 0 rgb(22, 23, 32),
40px 65px 0 rgb(238, 231, 53),
45px 65px 0 rgb(22, 23, 32),
50px 65px 0 rgb(16, 119, 104),
55px 65px 0 rgb(16, 119, 104),
60px 65px 0 rgb(22, 23, 32),
65px 65px 0 rgb(22, 23, 32),
70px 65px 0 rgb(22, 23, 32),
75px 65px 0 rgb(111, 68, 38),
80px 65px 0 rgb(255, 243, 219),
85px 65px 0 rgb(22, 23, 32),
90px 65px 0 transparent,
95px 65px 0 transparent,
100px 65px 0 transparent,
105px 65px 0 transparent,
5px 70px 0 transparent,
10px 70px 0 transparent,
15px 70px 0 transparent,
20px 70px 0 rgb(22, 23, 32),
25px 70px 0 rgb(111, 68, 38),
30px 70px 0 rgb(255, 243, 219),
35px 70px 0 rgb(22, 23, 32),
40px 70px 0 rgb(22, 23, 32),
45px 70px 0 rgb(16, 119, 104),
50px 70px 0 rgb(16, 119, 104),
55px 70px 0 rgb(16, 119, 104),
60px 70px 0 rgb(16, 119, 104),
65px 70px 0 rgb(16, 119, 104),
70px 70px 0 rgb(22, 23, 32),
75px 70px 0 rgb(22, 23, 32),
80px 70px 0 rgb(255, 243, 219),
85px 70px 0 rgb(22, 23, 32),
90px 70px 0 transparent,
95px 70px 0 transparent,
100px 70px 0 transparent,
105px 70px 0 transparent,
5px 75px 0 transparent,
10px 75px 0 transparent,
15px 75px 0 transparent,
20px 75px 0 transparent,
25px 75px 0 rgb(22, 23, 32),
30px 75px 0 rgb(22, 23, 32),
35px 75px 0 rgb(22, 23, 32),
40px 75px 0 rgb(22, 23, 32),
45px 75px 0 rgb(22, 23, 32),
50px 75px 0 rgb(232, 239, 241),
55px 75px 0 rgb(122, 131, 133),
60px 75px 0 rgb(22, 23, 32),
65px 75px 0 rgb(22, 23, 32),
70px 75px 0 rgb(111, 68, 38),
75px 75px 0 rgb(22, 23, 32),
80px 75px 0 rgb(111, 68, 38),
85px 75px 0 rgb(22, 23, 32),
90px 75px 0 transparent,
95px 75px 0 transparent,
100px 75px 0 transparent,
105px 75px 0 transparent,
5px 80px 0 transparent,
10px 80px 0 transparent,
15px 80px 0 transparent,
20px 80px 0 transparent,
25px 80px 0 transparent,
30px 80px 0 rgb(22, 23, 32),
35px 80px 0 rgb(111, 68, 38),
40px 80px 0 rgb(22, 23, 32),
45px 80px 0 rgb(16, 119, 104),
50px 80px 0 rgb(16, 119, 104),
55px 80px 0 rgb(16, 119, 104),
60px 80px 0 rgb(16, 119, 104),
65px 80px 0 rgb(22, 23, 32),
70px 80px 0 rgb(111, 68, 38),
75px 80px 0 rgb(22, 23, 32),
80px 80px 0 rgb(22, 23, 32),
85px 80px 0 transparent,
90px 80px 0 transparent,
95px 80px 0 transparent,
100px 80px 0 transparent,
105px 80px 0 transparent,
5px 85px 0 transparent,
10px 85px 0 transparent,
15px 85px 0 transparent,
20px 85px 0 transparent,
25px 85px 0 transparent,
30px 85px 0 rgb(22, 23, 32),
35px 85px 0 rgb(238, 231, 53),
40px 85px 0 rgb(22, 23, 32),
45px 85px 0 rgb(22, 23, 32),
50px 85px 0 rgb(22, 23, 32),
55px 85px 0 rgb(22, 23, 32),
60px 85px 0 rgb(22, 23, 32),
65px 85px 0 rgb(22, 23, 32),
70px 85px 0 rgb(238, 231, 53),
75px 85px 0 rgb(22, 23, 32),
80px 85px 0 transparent,
85px 85px 0 transparent,
90px 85px 0 transparent,
95px 85px 0 transparent,
100px 85px 0 transparent,
105px 85px 0 transparent,
5px 90px 0 transparent,
10px 90px 0 transparent,
15px 90px 0 transparent,
20px 90px 0 transparent,
25px 90px 0 transparent,
30px 90px 0 rgb(22, 23, 32),
35px 90px 0 rgb(238, 231, 53),
40px 90px 0 rgb(22, 23, 32),
45px 90px 0 rgb(111, 68, 38),
50px 90px 0 rgb(22, 23, 32),
55px 90px 0 rgb(255, 243, 219),
60px 90px 0 rgb(111, 68, 38),
65px 90px 0 rgb(22, 23, 32),
70px 90px 0 rgb(238, 231, 53),
75px 90px 0 rgb(22, 23, 32),
80px 90px 0 transparent,
85px 90px 0 transparent,
90px 90px 0 transparent,
95px 90px 0 transparent,
100px 90px 0 transparent,
105px 90px 0 transparent,
5px 95px 0 transparent,
10px 95px 0 transparent,
15px 95px 0 transparent,
20px 95px 0 transparent,
25px 95px 0 transparent,
30px 95px 0 transparent,
35px 95px 0 rgb(22, 23, 32),
40px 95px 0 rgb(22, 23, 32),
45px 95px 0 rgb(16, 119, 104),
50px 95px 0 rgb(22, 23, 32),
55px 95px 0 rgb(255, 243, 219),
60px 95px 0 rgb(255, 243, 219),
65px 95px 0 rgb(22, 23, 32),
70px 95px 0 rgb(22, 23, 32),
75px 95px 0 transparent,
80px 95px 0 transparent,
85px 95px 0 transparent,
90px 95px 0 transparent,
95px 95px 0 transparent,
100px 95px 0 transparent,
105px 95px 0 transparent,
5px 100px 0 transparent,
10px 100px 0 transparent,
15px 100px 0 transparent,
20px 100px 0 transparent,
25px 100px 0 transparent,
30px 100px 0 transparent,
35px 100px 0 transparent,
40px 100px 0 rgb(22, 23, 32),
45px 100px 0 rgb(22, 23, 32),
50px 100px 0 rgb(22, 23, 32),
55px 100px 0 rgb(16, 119, 104),
60px 100px 0 rgb(16, 119, 104),
65px 100px 0 rgb(22, 23, 32),
70px 100px 0 transparent,
75px 100px 0 transparent,
80px 100px 0 transparent,
85px 100px 0 transparent,
90px 100px 0 transparent,
95px 100px 0 transparent,
100px 100px 0 transparent,
105px 100px 0 transparent,
5px 105px 0 transparent,
10px 105px 0 transparent,
15px 105px 0 transparent,
20px 105px 0 transparent,
25px 105px 0 transparent,
30px 105px 0 transparent,
35px 105px 0 transparent,
40px 105px 0 transparent,
45px 105px 0 transparent,
50px 105px 0 rgb(22, 23, 32),
55px 105px 0 rgb(232, 239, 241),
60px 105px 0 rgb(122, 131, 133),
65px 105px 0 rgb(22, 23, 32),
70px 105px 0 transparent,
75px 105px 0 transparent,
80px 105px 0 transparent,
85px 105px 0 transparent,
90px 105px 0 transparent,
95px 105px 0 transparent,
100px 105px 0 transparent,
105px 105px 0 transparent;
}

ベビーパンサー
©SQUARE ENIX CO.

コード表示

<div class="dot-3"></div>

.dot-3{
position:relative;
width: 200px;
height: 200px;
margin:0 auto;
}
.dot-3::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;

  width: 5px;
  height: 5px;
  background: transparent;

  box-shadow:5px 5px 0 transparent,
10px 5px 0 transparent,
15px 5px 0 transparent,
20px 5px 0 transparent,
25px 5px 0 transparent,
30px 5px 0 transparent,
35px 5px 0 transparent,
40px 5px 0 transparent,
45px 5px 0 transparent,
50px 5px 0 transparent,
55px 5px 0 transparent,
60px 5px 0 transparent,
65px 5px 0 transparent,
70px 5px 0 transparent,
75px 5px 0 transparent,
80px 5px 0 transparent,
85px 5px 0 transparent,
90px 5px 0 transparent,
95px 5px 0 transparent,
100px 5px 0 transparent,
105px 5px 0 transparent,
110px 5px 0 transparent,
115px 5px 0 transparent,
120px 5px 0 transparent,
125px 5px 0 transparent,
130px 5px 0 transparent,
135px 5px 0 transparent,
140px 5px 0 transparent,
145px 5px 0 transparent,
150px 5px 0 transparent,
155px 5px 0 transparent,
160px 5px 0 transparent,
165px 5px 0 transparent,
170px 5px 0 transparent,
175px 5px 0 transparent,
180px 5px 0 transparent,
185px 5px 0 transparent,
190px 5px 0 transparent,
195px 5px 0 transparent,
200px 5px 0 transparent,
5px 10px 0 transparent,
10px 10px 0 transparent,
15px 10px 0 transparent,
20px 10px 0 transparent,
25px 10px 0 transparent,
30px 10px 0 transparent,
35px 10px 0 transparent,
40px 10px 0 transparent,
45px 10px 0 transparent,
50px 10px 0 transparent,
55px 10px 0 transparent,
60px 10px 0 transparent,
65px 10px 0 transparent,
70px 10px 0 transparent,
75px 10px 0 transparent,
80px 10px 0 transparent,
85px 10px 0 transparent,
90px 10px 0 transparent,
95px 10px 0 transparent,
100px 10px 0 transparent,
105px 10px 0 transparent,
110px 10px 0 transparent,
115px 10px 0 transparent,
120px 10px 0 transparent,
125px 10px 0 transparent,
130px 10px 0 transparent,
135px 10px 0 transparent,
140px 10px 0 transparent,
145px 10px 0 transparent,
150px 10px 0 transparent,
155px 10px 0 transparent,
160px 10px 0 transparent,
165px 10px 0 transparent,
170px 10px 0 transparent,
175px 10px 0 transparent,
180px 10px 0 transparent,
185px 10px 0 transparent,
190px 10px 0 transparent,
195px 10px 0 transparent,
200px 10px 0 transparent,
5px 15px 0 transparent,
10px 15px 0 transparent,
15px 15px 0 transparent,
20px 15px 0 transparent,
25px 15px 0 transparent,
30px 15px 0 transparent,
35px 15px 0 transparent,
40px 15px 0 transparent,
45px 15px 0 transparent,
50px 15px 0 transparent,
55px 15px 0 transparent,
60px 15px 0 transparent,
65px 15px 0 transparent,
70px 15px 0 transparent,
75px 15px 0 transparent,
80px 15px 0 transparent,
85px 15px 0 transparent,
90px 15px 0 transparent,
95px 15px 0 transparent,
100px 15px 0 rgb(22, 23, 32),
105px 15px 0 transparent,
110px 15px 0 transparent,
115px 15px 0 transparent,
120px 15px 0 transparent,
125px 15px 0 transparent,
130px 15px 0 transparent,
135px 15px 0 transparent,
140px 15px 0 transparent,
145px 15px 0 transparent,
150px 15px 0 transparent,
155px 15px 0 transparent,
160px 15px 0 transparent,
165px 15px 0 transparent,
170px 15px 0 transparent,
175px 15px 0 transparent,
180px 15px 0 transparent,
185px 15px 0 transparent,
190px 15px 0 transparent,
195px 15px 0 transparent,
200px 15px 0 transparent,
5px 20px 0 transparent,
10px 20px 0 transparent,
15px 20px 0 transparent,
20px 20px 0 transparent,
25px 20px 0 transparent,
30px 20px 0 transparent,
35px 20px 0 transparent,
40px 20px 0 transparent,
45px 20px 0 transparent,
50px 20px 0 transparent,
55px 20px 0 transparent,
60px 20px 0 transparent,
65px 20px 0 transparent,
70px 20px 0 transparent,
75px 20px 0 transparent,
80px 20px 0 transparent,
85px 20px 0 transparent,
90px 20px 0 transparent,
95px 20px 0 rgb(22, 23, 32),
100px 20px 0 rgb(166, 81, 46),
105px 20px 0 rgb(22, 23, 32),
110px 20px 0 transparent,
115px 20px 0 transparent,
120px 20px 0 transparent,
125px 20px 0 transparent,
130px 20px 0 transparent,
135px 20px 0 transparent,
140px 20px 0 transparent,
145px 20px 0 transparent,
150px 20px 0 transparent,
155px 20px 0 transparent,
160px 20px 0 transparent,
165px 20px 0 transparent,
170px 20px 0 transparent,
175px 20px 0 transparent,
180px 20px 0 transparent,
185px 20px 0 transparent,
190px 20px 0 transparent,
195px 20px 0 transparent,
200px 20px 0 transparent,
5px 25px 0 transparent,
10px 25px 0 transparent,
15px 25px 0 transparent,
20px 25px 0 transparent,
25px 25px 0 transparent,
30px 25px 0 transparent,
35px 25px 0 transparent,
40px 25px 0 transparent,
45px 25px 0 transparent,
50px 25px 0 transparent,
55px 25px 0 transparent,
60px 25px 0 transparent,
65px 25px 0 transparent,
70px 25px 0 transparent,
75px 25px 0 transparent,
80px 25px 0 transparent,
85px 25px 0 transparent,
90px 25px 0 rgb(22, 23, 32),
95px 25px 0 rgb(166, 81, 46),
100px 25px 0 rgb(166, 81, 46),
105px 25px 0 rgb(22, 23, 32),
110px 25px 0 transparent,
115px 25px 0 transparent,
120px 25px 0 transparent,
125px 25px 0 transparent,
130px 25px 0 transparent,
135px 25px 0 transparent,
140px 25px 0 transparent,
145px 25px 0 transparent,
150px 25px 0 transparent,
155px 25px 0 transparent,
160px 25px 0 transparent,
165px 25px 0 transparent,
170px 25px 0 transparent,
175px 25px 0 transparent,
180px 25px 0 transparent,
185px 25px 0 transparent,
190px 25px 0 transparent,
195px 25px 0 transparent,
200px 25px 0 transparent,
5px 30px 0 transparent,
10px 30px 0 transparent,
15px 30px 0 transparent,
20px 30px 0 transparent,
25px 30px 0 transparent,
30px 30px 0 transparent,
35px 30px 0 transparent,
40px 30px 0 transparent,
45px 30px 0 transparent,
50px 30px 0 transparent,
55px 30px 0 transparent,
60px 30px 0 transparent,
65px 30px 0 transparent,
70px 30px 0 transparent,
75px 30px 0 transparent,
80px 30px 0 transparent,
85px 30px 0 transparent,
90px 30px 0 rgb(22, 23, 32),
95px 30px 0 rgb(166, 81, 46),
100px 30px 0 rgb(146, 48, 30),
105px 30px 0 rgb(166, 81, 46),
110px 30px 0 rgb(22, 23, 32),
115px 30px 0 transparent,
120px 30px 0 transparent,
125px 30px 0 transparent,
130px 30px 0 rgb(22, 23, 32),
135px 30px 0 rgb(22, 23, 32),
140px 30px 0 rgb(22, 23, 32),
145px 30px 0 rgb(22, 23, 32),
150px 30px 0 transparent,
155px 30px 0 transparent,
160px 30px 0 transparent,
165px 30px 0 transparent,
170px 30px 0 transparent,
175px 30px 0 transparent,
180px 30px 0 transparent,
185px 30px 0 transparent,
190px 30px 0 transparent,
195px 30px 0 transparent,
200px 30px 0 transparent,
5px 35px 0 transparent,
10px 35px 0 transparent,
15px 35px 0 transparent,
20px 35px 0 transparent,
25px 35px 0 transparent,
30px 35px 0 transparent,
35px 35px 0 transparent,
40px 35px 0 transparent,
45px 35px 0 transparent,
50px 35px 0 transparent,
55px 35px 0 transparent,
60px 35px 0 transparent,
65px 35px 0 transparent,
70px 35px 0 transparent,
75px 35px 0 transparent,
80px 35px 0 transparent,
85px 35px 0 rgb(22, 23, 32),
90px 35px 0 rgb(166, 81, 46),
95px 35px 0 rgb(146, 48, 30),
100px 35px 0 rgb(146, 48, 30),
105px 35px 0 rgb(166, 81, 46),
110px 35px 0 rgb(22, 23, 32),
115px 35px 0 rgb(22, 23, 32),
120px 35px 0 transparent,
125px 35px 0 rgb(22, 23, 32),
130px 35px 0 rgb(250, 205, 55),
135px 35px 0 rgb(250, 205, 55),
140px 35px 0 rgb(250, 205, 55),
145px 35px 0 rgb(180, 187, 173),
150px 35px 0 rgb(22, 23, 32),
155px 35px 0 transparent,
160px 35px 0 transparent,
165px 35px 0 transparent,
170px 35px 0 transparent,
175px 35px 0 transparent,
180px 35px 0 transparent,
185px 35px 0 transparent,
190px 35px 0 transparent,
195px 35px 0 transparent,
200px 35px 0 transparent,
5px 40px 0 transparent,
10px 40px 0 transparent,
15px 40px 0 transparent,
20px 40px 0 transparent,
25px 40px 0 transparent,
30px 40px 0 transparent,
35px 40px 0 transparent,
40px 40px 0 transparent,
45px 40px 0 transparent,
50px 40px 0 transparent,
55px 40px 0 transparent,
60px 40px 0 transparent,
65px 40px 0 transparent,
70px 40px 0 transparent,
75px 40px 0 transparent,
80px 40px 0 rgb(22, 23, 32),
85px 40px 0 rgb(166, 81, 46),
90px 40px 0 rgb(146, 48, 30),
95px 40px 0 rgb(22, 23, 32),
100px 40px 0 rgb(146, 48, 30),
105px 40px 0 rgb(166, 81, 46),
110px 40px 0 rgb(22, 23, 32),
115px 40px 0 rgb(166, 81, 46),
120px 40px 0 rgb(22, 23, 32),
125px 40px 0 rgb(188, 154, 62),
130px 40px 0 rgb(250, 205, 55),
135px 40px 0 rgb(22, 23, 32),
140px 40px 0 rgb(22, 23, 32),
145px 40px 0 rgb(232, 239, 241),
150px 40px 0 rgb(180, 187, 173),
155px 40px 0 rgb(22, 23, 32),
160px 40px 0 transparent,
165px 40px 0 transparent,
170px 40px 0 transparent,
175px 40px 0 transparent,
180px 40px 0 transparent,
185px 40px 0 transparent,
190px 40px 0 transparent,
195px 40px 0 transparent,
200px 40px 0 transparent,
5px 45px 0 transparent,
10px 45px 0 transparent,
15px 45px 0 transparent,
20px 45px 0 transparent,
25px 45px 0 transparent,
30px 45px 0 transparent,
35px 45px 0 transparent,
40px 45px 0 transparent,
45px 45px 0 transparent,
50px 45px 0 transparent,
55px 45px 0 transparent,
60px 45px 0 transparent,
65px 45px 0 transparent,
70px 45px 0 transparent,
75px 45px 0 transparent,
80px 45px 0 rgb(22, 23, 32),
85px 45px 0 rgb(146, 48, 30),
90px 45px 0 rgb(22, 23, 32),
95px 45px 0 rgb(166, 81, 46),
100px 45px 0 rgb(22, 23, 32),
105px 45px 0 rgb(146, 48, 30),
110px 45px 0 rgb(166, 81, 46),
115px 45px 0 rgb(22, 23, 32),
120px 45px 0 rgb(188, 154, 62),
125px 45px 0 rgb(188, 154, 62),
130px 45px 0 rgb(22, 23, 32),
135px 45px 0 transparent,
140px 45px 0 transparent,
145px 45px 0 rgb(22, 23, 32),
150px 45px 0 rgb(232, 239, 241),
155px 45px 0 rgb(22, 23, 32),
160px 45px 0 rgb(22, 23, 32),
165px 45px 0 rgb(22, 23, 32),
170px 45px 0 transparent,
175px 45px 0 transparent,
180px 45px 0 transparent,
185px 45px 0 transparent,
190px 45px 0 transparent,
195px 45px 0 transparent,
200px 45px 0 transparent,
5px 50px 0 transparent,
10px 50px 0 transparent,
15px 50px 0 transparent,
20px 50px 0 transparent,
25px 50px 0 transparent,
30px 50px 0 transparent,
35px 50px 0 transparent,
40px 50px 0 transparent,
45px 50px 0 transparent,
50px 50px 0 transparent,
55px 50px 0 transparent,
60px 50px 0 transparent,
65px 50px 0 transparent,
70px 50px 0 transparent,
75px 50px 0 transparent,
80px 50px 0 rgb(22, 23, 32),
85px 50px 0 rgb(166, 81, 46),
90px 50px 0 rgb(22, 23, 32),
95px 50px 0 rgb(166, 81, 46),
100px 50px 0 rgb(22, 23, 32),
105px 50px 0 rgb(22, 23, 32),
110px 50px 0 rgb(146, 48, 30),
115px 50px 0 rgb(146, 48, 30),
120px 50px 0 rgb(22, 23, 32),
125px 50px 0 rgb(22, 23, 32),
130px 50px 0 transparent,
135px 50px 0 transparent,
140px 50px 0 transparent,
145px 50px 0 rgb(22, 23, 32),
150px 50px 0 rgb(22, 23, 32),
155px 50px 0 rgb(166, 81, 46),
160px 50px 0 rgb(166, 81, 46),
165px 50px 0 rgb(22, 23, 32),
170px 50px 0 rgb(22, 23, 32),
175px 50px 0 transparent,
180px 50px 0 transparent,
185px 50px 0 transparent,
190px 50px 0 transparent,
195px 50px 0 transparent,
200px 50px 0 transparent,
5px 55px 0 transparent,
10px 55px 0 transparent,
15px 55px 0 transparent,
20px 55px 0 transparent,
25px 55px 0 transparent,
30px 55px 0 transparent,
35px 55px 0 transparent,
40px 55px 0 transparent,
45px 55px 0 transparent,
50px 55px 0 transparent,
55px 55px 0 transparent,
60px 55px 0 transparent,
65px 55px 0 transparent,
70px 55px 0 transparent,
75px 55px 0 rgb(22, 23, 32),
80px 55px 0 rgb(166, 81, 46),
85px 55px 0 rgb(22, 23, 32),
90px 55px 0 rgb(166, 81, 46),
95px 55px 0 rgb(166, 81, 46),
100px 55px 0 rgb(22, 23, 32),
105px 55px 0 rgb(166, 81, 46),
110px 55px 0 rgb(22, 23, 32),
115px 55px 0 rgb(146, 48, 30),
120px 55px 0 rgb(22, 23, 32),
125px 55px 0 transparent,
130px 55px 0 transparent,
135px 55px 0 transparent,
140px 55px 0 rgb(22, 23, 32),
145px 55px 0 rgb(166, 81, 46),
150px 55px 0 rgb(166, 81, 46),
155px 55px 0 rgb(146, 48, 30),
160px 55px 0 rgb(146, 48, 30),
165px 55px 0 rgb(166, 81, 46),
170px 55px 0 rgb(166, 81, 46),
175px 55px 0 rgb(22, 23, 32),
180px 55px 0 transparent,
185px 55px 0 transparent,
190px 55px 0 transparent,
195px 55px 0 transparent,
200px 55px 0 transparent,
5px 60px 0 transparent,
10px 60px 0 transparent,
15px 60px 0 transparent,
20px 60px 0 transparent,
25px 60px 0 transparent,
30px 60px 0 transparent,
35px 60px 0 transparent,
40px 60px 0 transparent,
45px 60px 0 transparent,
50px 60px 0 transparent,
55px 60px 0 transparent,
60px 60px 0 transparent,
65px 60px 0 transparent,
70px 60px 0 rgb(22, 23, 32),
75px 60px 0 rgb(166, 81, 46),
80px 60px 0 rgb(166, 81, 46),
85px 60px 0 rgb(166, 81, 46),
90px 60px 0 rgb(146, 48, 30),
95px 60px 0 rgb(166, 81, 46),
100px 60px 0 rgb(166, 81, 46),
105px 60px 0 rgb(166, 81, 46),
110px 60px 0 rgb(22, 23, 32),
115px 60px 0 rgb(146, 48, 30),
120px 60px 0 rgb(146, 48, 30),
125px 60px 0 rgb(22, 23, 32),
130px 60px 0 transparent,
135px 60px 0 transparent,
140px 60px 0 rgb(22, 23, 32),
145px 60px 0 rgb(166, 81, 46),
150px 60px 0 rgb(22, 23, 32),
155px 60px 0 rgb(166, 81, 46),
160px 60px 0 rgb(146, 48, 30),
165px 60px 0 rgb(166, 81, 46),
170px 60px 0 rgb(22, 23, 32),
175px 60px 0 rgb(22, 23, 32),
180px 60px 0 transparent,
185px 60px 0 transparent,
190px 60px 0 transparent,
195px 60px 0 transparent,
200px 60px 0 transparent,
5px 65px 0 transparent,
10px 65px 0 transparent,
15px 65px 0 transparent,
20px 65px 0 transparent,
25px 65px 0 transparent,
30px 65px 0 transparent,
35px 65px 0 transparent,
40px 65px 0 transparent,
45px 65px 0 transparent,
50px 65px 0 transparent,
55px 65px 0 transparent,
60px 65px 0 transparent,
65px 65px 0 transparent,
70px 65px 0 rgb(22, 23, 32),
75px 65px 0 rgb(166, 81, 46),
80px 65px 0 rgb(166, 81, 46),
85px 65px 0 rgb(146, 48, 30),
90px 65px 0 rgb(146, 48, 30),
95px 65px 0 rgb(22, 23, 32),
100px 65px 0 rgb(166, 81, 46),
105px 65px 0 rgb(146, 48, 30),
110px 65px 0 rgb(22, 23, 32),
115px 65px 0 rgb(146, 48, 30),
120px 65px 0 rgb(146, 48, 30),
125px 65px 0 rgb(22, 23, 32),
130px 65px 0 transparent,
135px 65px 0 transparent,
140px 65px 0 transparent,
145px 65px 0 rgb(22, 23, 32),
150px 65px 0 rgb(166, 81, 46),
155px 65px 0 rgb(166, 81, 46),
160px 65px 0 rgb(166, 81, 46),
165px 65px 0 rgb(146, 48, 30),
170px 65px 0 rgb(146, 48, 30),
175px 65px 0 rgb(166, 81, 46),
180px 65px 0 rgb(22, 23, 32),
185px 65px 0 transparent,
190px 65px 0 transparent,
195px 65px 0 transparent,
200px 65px 0 transparent,
5px 70px 0 transparent,
10px 70px 0 transparent,
15px 70px 0 transparent,
20px 70px 0 transparent,
25px 70px 0 transparent,
30px 70px 0 transparent,
35px 70px 0 transparent,
40px 70px 0 transparent,
45px 70px 0 transparent,
50px 70px 0 transparent,
55px 70px 0 transparent,
60px 70px 0 transparent,
65px 70px 0 rgb(22, 23, 32),
70px 70px 0 rgb(146, 48, 30),
75px 70px 0 rgb(22, 23, 32),
80px 70px 0 rgb(146, 48, 30),
85px 70px 0 rgb(22, 23, 32),
90px 70px 0 rgb(146, 48, 30),
95px 70px 0 rgb(22, 23, 32),
100px 70px 0 rgb(146, 48, 30),
105px 70px 0 rgb(22, 23, 32),
110px 70px 0 rgb(146, 48, 30),
115px 70px 0 rgb(22, 23, 32),
120px 70px 0 rgb(146, 48, 30),
125px 70px 0 rgb(22, 23, 32),
130px 70px 0 transparent,
135px 70px 0 transparent,
140px 70px 0 transparent,
145px 70px 0 rgb(22, 23, 32),
150px 70px 0 rgb(166, 81, 46),
155px 70px 0 rgb(22, 23, 32),
160px 70px 0 rgb(166, 81, 46),
165px 70px 0 rgb(22, 23, 32),
170px 70px 0 rgb(166, 81, 46),
175px 70px 0 rgb(166, 81, 46),
180px 70px 0 rgb(166, 81, 46),
185px 70px 0 rgb(22, 23, 32),
190px 70px 0 transparent,
195px 70px 0 transparent,
200px 70px 0 transparent,
5px 75px 0 transparent,
10px 75px 0 transparent,
15px 75px 0 transparent,
20px 75px 0 transparent,
25px 75px 0 transparent,
30px 75px 0 transparent,
35px 75px 0 transparent,
40px 75px 0 transparent,
45px 75px 0 transparent,
50px 75px 0 transparent,
55px 75px 0 transparent,
60px 75px 0 transparent,
65px 75px 0 transparent,
70px 75px 0 rgb(22, 23, 32),
75px 75px 0 rgb(146, 48, 30),
80px 75px 0 rgb(166, 81, 46),
85px 75px 0 rgb(22, 23, 32),
90px 75px 0 rgb(146, 48, 30),
95px 75px 0 rgb(146, 48, 30),
100px 75px 0 rgb(146, 48, 30),
105px 75px 0 rgb(146, 48, 30),
110px 75px 0 rgb(166, 81, 46),
115px 75px 0 rgb(146, 48, 30),
120px 75px 0 rgb(166, 81, 46),
125px 75px 0 rgb(22, 23, 32),
130px 75px 0 transparent,
135px 75px 0 transparent,
140px 75px 0 transparent,
145px 75px 0 transparent,
150px 75px 0 rgb(22, 23, 32),
155px 75px 0 rgb(22, 23, 32),
160px 75px 0 rgb(166, 81, 46),
165px 75px 0 rgb(166, 81, 46),
170px 75px 0 rgb(22, 23, 32),
175px 75px 0 rgb(166, 81, 46),
180px 75px 0 rgb(146, 48, 30),
185px 75px 0 rgb(22, 23, 32),
190px 75px 0 transparent,
195px 75px 0 transparent,
200px 75px 0 transparent,
5px 80px 0 transparent,
10px 80px 0 transparent,
15px 80px 0 transparent,
20px 80px 0 transparent,
25px 80px 0 transparent,
30px 80px 0 transparent,
35px 80px 0 transparent,
40px 80px 0 transparent,
45px 80px 0 transparent,
50px 80px 0 transparent,
55px 80px 0 transparent,
60px 80px 0 transparent,
65px 80px 0 rgb(22, 23, 32),
70px 80px 0 rgb(166, 81, 46),
75px 80px 0 rgb(22, 23, 32),
80px 80px 0 rgb(146, 48, 30),
85px 80px 0 rgb(166, 81, 46),
90px 80px 0 rgb(22, 23, 32),
95px 80px 0 rgb(146, 48, 30),
100px 80px 0 rgb(166, 81, 46),
105px 80px 0 rgb(146, 48, 30),
110px 80px 0 rgb(166, 81, 46),
115px 80px 0 rgb(166, 81, 46),
120px 80px 0 rgb(22, 23, 32),
125px 80px 0 transparent,
130px 80px 0 transparent,
135px 80px 0 transparent,
140px 80px 0 transparent,
145px 80px 0 transparent,
150px 80px 0 transparent,
155px 80px 0 transparent,
160px 80px 0 rgb(22, 23, 32),
165px 80px 0 rgb(22, 23, 32),
170px 80px 0 transparent,
175px 80px 0 rgb(22, 23, 32),
180px 80px 0 rgb(146, 48, 30),
185px 80px 0 rgb(22, 23, 32),
190px 80px 0 transparent,
195px 80px 0 transparent,
200px 80px 0 transparent,
5px 85px 0 transparent,
10px 85px 0 transparent,
15px 85px 0 transparent,
20px 85px 0 transparent,
25px 85px 0 transparent,
30px 85px 0 transparent,
35px 85px 0 transparent,
40px 85px 0 transparent,
45px 85px 0 transparent,
50px 85px 0 transparent,
55px 85px 0 transparent,
60px 85px 0 transparent,
65px 85px 0 rgb(22, 23, 32),
70px 85px 0 rgb(166, 81, 46),
75px 85px 0 rgb(166, 81, 46),
80px 85px 0 rgb(166, 81, 46),
85px 85px 0 rgb(166, 81, 46),
90px 85px 0 rgb(166, 81, 46),
95px 85px 0 rgb(146, 48, 30),
100px 85px 0 rgb(166, 81, 46),
105px 85px 0 rgb(166, 81, 46),
110px 85px 0 rgb(166, 81, 46),
115px 85px 0 rgb(22, 23, 32),
120px 85px 0 rgb(166, 81, 46),
125px 85px 0 rgb(22, 23, 32),
130px 85px 0 transparent,
135px 85px 0 transparent,
140px 85px 0 transparent,
145px 85px 0 transparent,
150px 85px 0 transparent,
155px 85px 0 transparent,
160px 85px 0 transparent,
165px 85px 0 transparent,
170px 85px 0 transparent,
175px 85px 0 transparent,
180px 85px 0 rgb(22, 23, 32),
185px 85px 0 transparent,
190px 85px 0 transparent,
195px 85px 0 transparent,
200px 85px 0 transparent,
5px 90px 0 transparent,
10px 90px 0 transparent,
15px 90px 0 transparent,
20px 90px 0 transparent,
25px 90px 0 transparent,
30px 90px 0 transparent,
35px 90px 0 transparent,
40px 90px 0 transparent,
45px 90px 0 transparent,
50px 90px 0 transparent,
55px 90px 0 transparent,
60px 90px 0 rgb(22, 23, 32),
65px 90px 0 rgb(188, 154, 62),
70px 90px 0 rgb(22, 23, 32),
75px 90px 0 rgb(166, 81, 46),
80px 90px 0 rgb(22, 23, 32),
85px 90px 0 rgb(166, 81, 46),
90px 90px 0 rgb(166, 81, 46),
95px 90px 0 rgb(166, 81, 46),
100px 90px 0 rgb(166, 81, 46),
105px 90px 0 rgb(22, 23, 32),
110px 90px 0 rgb(166, 81, 46),
115px 90px 0 rgb(166, 81, 46),
120px 90px 0 rgb(22, 23, 32),
125px 90px 0 rgb(188, 154, 62),
130px 90px 0 rgb(22, 23, 32),
135px 90px 0 transparent,
140px 90px 0 transparent,
145px 90px 0 transparent,
150px 90px 0 transparent,
155px 90px 0 transparent,
160px 90px 0 transparent,
165px 90px 0 transparent,
170px 90px 0 transparent,
175px 90px 0 transparent,
180px 90px 0 transparent,
185px 90px 0 transparent,
190px 90px 0 transparent,
195px 90px 0 transparent,
200px 90px 0 transparent,
5px 95px 0 transparent,
10px 95px 0 transparent,
15px 95px 0 transparent,
20px 95px 0 transparent,
25px 95px 0 transparent,
30px 95px 0 transparent,
35px 95px 0 transparent,
40px 95px 0 transparent,
45px 95px 0 transparent,
50px 95px 0 transparent,
55px 95px 0 rgb(22, 23, 32),
60px 95px 0 rgb(188, 154, 62),
65px 95px 0 rgb(22, 23, 32),
70px 95px 0 rgb(22, 23, 32),
75px 95px 0 rgb(22, 23, 32),
80px 95px 0 rgb(22, 23, 32),
85px 95px 0 rgb(166, 81, 46),
90px 95px 0 rgb(166, 81, 46),
95px 95px 0 rgb(22, 23, 32),
100px 95px 0 rgb(166, 81, 46),
105px 95px 0 rgb(166, 81, 46),
110px 95px 0 rgb(22, 23, 32),
115px 95px 0 rgb(22, 23, 32),
120px 95px 0 rgb(22, 23, 32),
125px 95px 0 rgb(22, 23, 32),
130px 95px 0 rgb(188, 154, 62),
135px 95px 0 rgb(22, 23, 32),
140px 95px 0 transparent,
145px 95px 0 transparent,
150px 95px 0 transparent,
155px 95px 0 transparent,
160px 95px 0 transparent,
165px 95px 0 transparent,
170px 95px 0 transparent,
175px 95px 0 transparent,
180px 95px 0 transparent,
185px 95px 0 transparent,
190px 95px 0 transparent,
195px 95px 0 transparent,
200px 95px 0 transparent,
5px 100px 0 transparent,
10px 100px 0 transparent,
15px 100px 0 transparent,
20px 100px 0 transparent,
25px 100px 0 transparent,
30px 100px 0 transparent,
35px 100px 0 transparent,
40px 100px 0 rgb(22, 23, 32),
45px 100px 0 rgb(22, 23, 32),
50px 100px 0 rgb(22, 23, 32),
55px 100px 0 rgb(22, 23, 32),
60px 100px 0 rgb(22, 23, 32),
65px 100px 0 rgb(22, 23, 32),
70px 100px 0 rgb(22, 23, 32),
75px 100px 0 rgb(22, 23, 32),
80px 100px 0 rgb(250, 205, 55),
85px 100px 0 rgb(22, 23, 32),
90px 100px 0 rgb(166, 81, 46),
95px 100px 0 rgb(22, 23, 32),
100px 100px 0 rgb(166, 81, 46),
105px 100px 0 rgb(22, 23, 32),
110px 100px 0 rgb(250, 205, 55),
115px 100px 0 rgb(22, 23, 32),
120px 100px 0 rgb(22, 23, 32),
125px 100px 0 rgb(22, 23, 32),
130px 100px 0 rgb(22, 23, 32),
135px 100px 0 rgb(22, 23, 32),
140px 100px 0 rgb(22, 23, 32),
145px 100px 0 rgb(22, 23, 32),
150px 100px 0 rgb(22, 23, 32),
155px 100px 0 transparent,
160px 100px 0 transparent,
165px 100px 0 transparent,
170px 100px 0 transparent,
175px 100px 0 transparent,
180px 100px 0 transparent,
185px 100px 0 transparent,
190px 100px 0 transparent,
195px 100px 0 transparent,
200px 100px 0 transparent,
5px 105px 0 transparent,
10px 105px 0 transparent,
15px 105px 0 transparent,
20px 105px 0 transparent,
25px 105px 0 transparent,
30px 105px 0 transparent,
35px 105px 0 rgb(22, 23, 32),
40px 105px 0 rgb(232, 239, 241),
45px 105px 0 rgb(22, 23, 32),
50px 105px 0 rgb(22, 23, 32),
55px 105px 0 rgb(22, 23, 32),
60px 105px 0 rgb(22, 23, 32),
65px 105px 0 rgb(22, 23, 32),
70px 105px 0 rgb(22, 23, 32),
75px 105px 0 rgb(250, 205, 55),
80px 105px 0 rgb(250, 205, 55),
85px 105px 0 rgb(250, 205, 55),
90px 105px 0 rgb(22, 23, 32),
95px 105px 0 rgb(166, 81, 46),
100px 105px 0 rgb(22, 23, 32),
105px 105px 0 rgb(250, 205, 55),
110px 105px 0 rgb(250, 205, 55),
115px 105px 0 rgb(250, 205, 55),
120px 105px 0 rgb(22, 23, 32),
125px 105px 0 rgb(22, 23, 32),
130px 105px 0 rgb(22, 23, 32),
135px 105px 0 rgb(22, 23, 32),
140px 105px 0 rgb(22, 23, 32),
145px 105px 0 rgb(22, 23, 32),
150px 105px 0 rgb(232, 239, 241),
155px 105px 0 rgb(22, 23, 32),
160px 105px 0 transparent,
165px 105px 0 transparent,
170px 105px 0 transparent,
175px 105px 0 transparent,
180px 105px 0 transparent,
185px 105px 0 transparent,
190px 105px 0 transparent,
195px 105px 0 transparent,
200px 105px 0 transparent,
5px 110px 0 transparent,
10px 110px 0 transparent,
15px 110px 0 transparent,
20px 110px 0 transparent,
25px 110px 0 transparent,
30px 110px 0 transparent,
35px 110px 0 rgb(22, 23, 32),
40px 110px 0 rgb(232, 239, 241),
45px 110px 0 rgb(232, 239, 241),
50px 110px 0 rgb(180, 187, 173),
55px 110px 0 rgb(22, 23, 32),
60px 110px 0 rgb(22, 23, 32),
65px 110px 0 rgb(22, 23, 32),
70px 110px 0 rgb(250, 205, 55),
75px 110px 0 rgb(22, 23, 32),
80px 110px 0 rgb(250, 205, 55),
85px 110px 0 rgb(250, 205, 55),
90px 110px 0 rgb(250, 205, 55),
95px 110px 0 rgb(22, 23, 32),
100px 110px 0 rgb(250, 205, 55),
105px 110px 0 rgb(250, 205, 55),
110px 110px 0 rgb(250, 205, 55),
115px 110px 0 rgb(22, 23, 32),
120px 110px 0 rgb(250, 205, 55),
125px 110px 0 rgb(22, 23, 32),
130px 110px 0 rgb(22, 23, 32),
135px 110px 0 rgb(22, 23, 32),
140px 110px 0 rgb(180, 187, 173),
145px 110px 0 rgb(232, 239, 241),
150px 110px 0 rgb(232, 239, 241),
155px 110px 0 rgb(22, 23, 32),
160px 110px 0 transparent,
165px 110px 0 transparent,
170px 110px 0 transparent,
175px 110px 0 transparent,
180px 110px 0 transparent,
185px 110px 0 transparent,
190px 110px 0 transparent,
195px 110px 0 transparent,
200px 110px 0 transparent,
5px 115px 0 transparent,
10px 115px 0 transparent,
15px 115px 0 transparent,
20px 115px 0 transparent,
25px 115px 0 transparent,
30px 115px 0 transparent,
35px 115px 0 transparent,
40px 115px 0 rgb(22, 23, 32),
45px 115px 0 rgb(232, 239, 241),
50px 115px 0 rgb(180, 187, 173),
55px 115px 0 rgb(180, 187, 173),
60px 115px 0 rgb(180, 187, 173),
65px 115px 0 rgb(22, 23, 32),
70px 115px 0 rgb(250, 205, 55),
75px 115px 0 rgb(188, 154, 62),
80px 115px 0 rgb(188, 154, 62),
85px 115px 0 rgb(22, 23, 32),
90px 115px 0 rgb(250, 205, 55),
95px 115px 0 rgb(250, 205, 55),
100px 115px 0 rgb(250, 205, 55),
105px 115px 0 rgb(22, 23, 32),
110px 115px 0 rgb(188, 154, 62),
115px 115px 0 rgb(188, 154, 62),
120px 115px 0 rgb(250, 205, 55),
125px 115px 0 rgb(22, 23, 32),
130px 115px 0 rgb(180, 187, 173),
135px 115px 0 rgb(180, 187, 173),
140px 115px 0 rgb(180, 187, 173),
145px 115px 0 rgb(232, 239, 241),
150px 115px 0 rgb(22, 23, 32),
155px 115px 0 transparent,
160px 115px 0 transparent,
165px 115px 0 transparent,
170px 115px 0 transparent,
175px 115px 0 transparent,
180px 115px 0 transparent,
185px 115px 0 transparent,
190px 115px 0 transparent,
195px 115px 0 transparent,
200px 115px 0 transparent,
5px 120px 0 transparent,
10px 120px 0 transparent,
15px 120px 0 transparent,
20px 120px 0 transparent,
25px 120px 0 transparent,
30px 120px 0 transparent,
35px 120px 0 transparent,
40px 120px 0 rgb(22, 23, 32),
45px 120px 0 rgb(22, 23, 32),
50px 120px 0 rgb(232, 239, 241),
55px 120px 0 rgb(180, 187, 173),
60px 120px 0 rgb(22, 23, 32),
65px 120px 0 rgb(22, 23, 32),
70px 120px 0 rgb(188, 154, 62),
75px 120px 0 rgb(22, 23, 32),
80px 120px 0 rgb(188, 154, 62),
85px 120px 0 rgb(188, 154, 62),
90px 120px 0 rgb(250, 205, 55),
95px 120px 0 rgb(188, 154, 62),
100px 120px 0 rgb(250, 205, 55),
105px 120px 0 rgb(188, 154, 62),
110px 120px 0 rgb(188, 154, 62),
115px 120px 0 rgb(22, 23, 32),
120px 120px 0 rgb(188, 154, 62),
125px 120px 0 rgb(22, 23, 32),
130px 120px 0 rgb(22, 23, 32),
135px 120px 0 rgb(180, 187, 173),
140px 120px 0 rgb(232, 239, 241),
145px 120px 0 rgb(22, 23, 32),
150px 120px 0 rgb(22, 23, 32),
155px 120px 0 transparent,
160px 120px 0 transparent,
165px 120px 0 transparent,
170px 120px 0 transparent,
175px 120px 0 transparent,
180px 120px 0 transparent,
185px 120px 0 transparent,
190px 120px 0 transparent,
195px 120px 0 transparent,
200px 120px 0 transparent,
5px 125px 0 transparent,
10px 125px 0 transparent,
15px 125px 0 transparent,
20px 125px 0 transparent,
25px 125px 0 transparent,
30px 125px 0 rgb(22, 23, 32),
35px 125px 0 rgb(22, 23, 32),
40px 125px 0 rgb(180, 187, 173),
45px 125px 0 rgb(22, 23, 32),
50px 125px 0 rgb(22, 23, 32),
55px 125px 0 rgb(22, 23, 32),
60px 125px 0 rgb(22, 23, 32),
65px 125px 0 rgb(188, 154, 62),
70px 125px 0 rgb(22, 23, 32),
75px 125px 0 rgb(188, 154, 62),
80px 125px 0 rgb(22, 23, 32),
85px 125px 0 rgb(22, 23, 32),
90px 125px 0 rgb(188, 154, 62),
95px 125px 0 rgb(22, 23, 32),
100px 125px 0 rgb(188, 154, 62),
105px 125px 0 rgb(22, 23, 32),
110px 125px 0 rgb(22, 23, 32),
115px 125px 0 rgb(188, 154, 62),
120px 125px 0 rgb(22, 23, 32),
125px 125px 0 rgb(188, 154, 62),
130px 125px 0 rgb(22, 23, 32),
135px 125px 0 rgb(22, 23, 32),
140px 125px 0 rgb(22, 23, 32),
145px 125px 0 rgb(22, 23, 32),
150px 125px 0 rgb(180, 187, 173),
155px 125px 0 rgb(22, 23, 32),
160px 125px 0 rgb(22, 23, 32),
165px 125px 0 transparent,
170px 125px 0 transparent,
175px 125px 0 transparent,
180px 125px 0 transparent,
185px 125px 0 transparent,
190px 125px 0 transparent,
195px 125px 0 transparent,
200px 125px 0 transparent,
5px 130px 0 transparent,
10px 130px 0 transparent,
15px 130px 0 transparent,
20px 130px 0 transparent,
25px 130px 0 rgb(22, 23, 32),
30px 130px 0 rgb(232, 239, 241),
35px 130px 0 rgb(232, 239, 241),
40px 130px 0 rgb(180, 187, 173),
45px 130px 0 rgb(22, 23, 32),
50px 130px 0 rgb(188, 154, 62),
55px 130px 0 rgb(22, 23, 32),
60px 130px 0 rgb(232, 239, 241),
65px 130px 0 rgb(188, 154, 62),
70px 130px 0 rgb(22, 23, 32),
75px 130px 0 rgb(22, 23, 32),
80px 130px 0 rgb(232, 239, 241),
85px 130px 0 rgb(232, 239, 241),
90px 130px 0 rgb(22, 23, 32),
95px 130px 0 rgb(188, 154, 62),
100px 130px 0 rgb(22, 23, 32),
105px 130px 0 rgb(232, 239, 241),
110px 130px 0 rgb(232, 239, 241),
115px 130px 0 rgb(22, 23, 32),
120px 130px 0 rgb(22, 23, 32),
125px 130px 0 rgb(188, 154, 62),
130px 130px 0 rgb(232, 239, 241),
135px 130px 0 rgb(22, 23, 32),
140px 130px 0 rgb(188, 154, 62),
145px 130px 0 rgb(22, 23, 32),
150px 130px 0 rgb(180, 187, 173),
155px 130px 0 rgb(232, 239, 241),
160px 130px 0 rgb(232, 239, 241),
165px 130px 0 rgb(22, 23, 32),
170px 130px 0 transparent,
175px 130px 0 transparent,
180px 130px 0 transparent,
185px 130px 0 transparent,
190px 130px 0 transparent,
195px 130px 0 transparent,
200px 130px 0 transparent,
5px 135px 0 transparent,
10px 135px 0 transparent,
15px 135px 0 transparent,
20px 135px 0 transparent,
25px 135px 0 rgb(22, 23, 32),
30px 135px 0 rgb(22, 23, 32),
35px 135px 0 rgb(180, 187, 173),
40px 135px 0 rgb(22, 23, 32),
45px 135px 0 rgb(250, 205, 55),
50px 135px 0 rgb(22, 23, 32),
55px 135px 0 rgb(232, 239, 241),
60px 135px 0 rgb(22, 23, 32),
65px 135px 0 rgb(250, 205, 55),
70px 135px 0 rgb(188, 154, 62),
75px 135px 0 rgb(22, 23, 32),
80px 135px 0 rgb(232, 239, 241),
85px 135px 0 rgb(34, 93, 123),
90px 135px 0 rgb(34, 93, 123),
95px 135px 0 rgb(22, 23, 32),
100px 135px 0 rgb(34, 93, 123),
105px 135px 0 rgb(34, 93, 123),
110px 135px 0 rgb(232, 239, 241),
115px 135px 0 rgb(22, 23, 32),
120px 135px 0 rgb(188, 154, 62),
125px 135px 0 rgb(250, 205, 55),
130px 135px 0 rgb(22, 23, 32),
135px 135px 0 rgb(232, 239, 241),
140px 135px 0 rgb(22, 23, 32),
145px 135px 0 rgb(250, 205, 55),
150px 135px 0 rgb(22, 23, 32),
155px 135px 0 rgb(180, 187, 173),
160px 135px 0 rgb(22, 23, 32),
165px 135px 0 rgb(22, 23, 32),
170px 135px 0 transparent,
175px 135px 0 transparent,
180px 135px 0 transparent,
185px 135px 0 transparent,
190px 135px 0 transparent,
195px 135px 0 transparent,
200px 135px 0 transparent,
5px 140px 0 transparent,
10px 140px 0 transparent,
15px 140px 0 transparent,
20px 140px 0 transparent,
25px 140px 0 transparent,
30px 140px 0 transparent,
35px 140px 0 rgb(22, 23, 32),
40px 140px 0 rgb(22, 23, 32),
45px 140px 0 rgb(250, 205, 55),
50px 140px 0 rgb(22, 23, 32),
55px 140px 0 rgb(232, 239, 241),
60px 140px 0 rgb(250, 205, 55),
65px 140px 0 rgb(250, 205, 55),
70px 140px 0 rgb(188, 154, 62),
75px 140px 0 rgb(188, 154, 62),
80px 140px 0 rgb(22, 23, 32),
85px 140px 0 rgb(232, 239, 241),
90px 140px 0 rgb(34, 93, 123),
95px 140px 0 rgb(22, 23, 32),
100px 140px 0 rgb(34, 93, 123),
105px 140px 0 rgb(232, 239, 241),
110px 140px 0 rgb(22, 23, 32),
115px 140px 0 rgb(188, 154, 62),
120px 140px 0 rgb(188, 154, 62),
125px 140px 0 rgb(250, 205, 55),
130px 140px 0 rgb(250, 205, 55),
135px 140px 0 rgb(232, 239, 241),
140px 140px 0 rgb(22, 23, 32),
145px 140px 0 rgb(250, 205, 55),
150px 140px 0 rgb(22, 23, 32),
155px 140px 0 rgb(22, 23, 32),
160px 140px 0 transparent,
165px 140px 0 transparent,
170px 140px 0 transparent,
175px 140px 0 transparent,
180px 140px 0 transparent,
185px 140px 0 transparent,
190px 140px 0 transparent,
195px 140px 0 transparent,
200px 140px 0 transparent,
5px 145px 0 transparent,
10px 145px 0 transparent,
15px 145px 0 transparent,
20px 145px 0 transparent,
25px 145px 0 transparent,
30px 145px 0 transparent,
35px 145px 0 rgb(22, 23, 32),
40px 145px 0 rgb(250, 205, 55),
45px 145px 0 rgb(22, 23, 32),
50px 145px 0 rgb(232, 239, 241),
55px 145px 0 rgb(250, 205, 55),
60px 145px 0 rgb(22, 23, 32),
65px 145px 0 rgb(188, 154, 62),
70px 145px 0 rgb(22, 23, 32),
75px 145px 0 rgb(22, 23, 32),
80px 145px 0 rgb(22, 23, 32),
85px 145px 0 rgb(22, 23, 32),
90px 145px 0 rgb(22, 23, 32),
95px 145px 0 rgb(188, 154, 62),
100px 145px 0 rgb(22, 23, 32),
105px 145px 0 rgb(22, 23, 32),
110px 145px 0 rgb(22, 23, 32),
115px 145px 0 rgb(22, 23, 32),
120px 145px 0 rgb(22, 23, 32),
125px 145px 0 rgb(188, 154, 62),
130px 145px 0 rgb(22, 23, 32),
135px 145px 0 rgb(250, 205, 55),
140px 145px 0 rgb(232, 239, 241),
145px 145px 0 rgb(22, 23, 32),
150px 145px 0 rgb(250, 205, 55),
155px 145px 0 rgb(22, 23, 32),
160px 145px 0 transparent,
165px 145px 0 transparent,
170px 145px 0 transparent,
175px 145px 0 transparent,
180px 145px 0 transparent,
185px 145px 0 transparent,
190px 145px 0 transparent,
195px 145px 0 transparent,
200px 145px 0 transparent,
5px 150px 0 transparent,
10px 150px 0 transparent,
15px 150px 0 transparent,
20px 150px 0 transparent,
25px 150px 0 transparent,
30px 150px 0 transparent,
35px 150px 0 rgb(22, 23, 32),
40px 150px 0 rgb(250, 205, 55),
45px 150px 0 rgb(22, 23, 32),
50px 150px 0 rgb(232, 239, 241),
55px 150px 0 rgb(22, 23, 32),
60px 150px 0 rgb(188, 154, 62),
65px 150px 0 rgb(22, 23, 32),
70px 150px 0 rgb(188, 154, 62),
75px 150px 0 rgb(22, 23, 32),
80px 150px 0 rgb(232, 239, 241),
85px 150px 0 rgb(22, 23, 32),
90px 150px 0 rgb(166, 81, 46),
95px 150px 0 rgb(22, 23, 32),
100px 150px 0 rgb(166, 81, 46),
105px 150px 0 rgb(22, 23, 32),
110px 150px 0 rgb(232, 239, 241),
115px 150px 0 rgb(22, 23, 32),
120px 150px 0 rgb(188, 154, 62),
125px 150px 0 rgb(22, 23, 32),
130px 150px 0 rgb(188, 154, 62),
135px 150px 0 rgb(22, 23, 32),
140px 150px 0 rgb(232, 239, 241),
145px 150px 0 rgb(22, 23, 32),
150px 150px 0 rgb(250, 205, 55),
155px 150px 0 rgb(22, 23, 32),
160px 150px 0 transparent,
165px 150px 0 transparent,
170px 150px 0 transparent,
175px 150px 0 transparent,
180px 150px 0 transparent,
185px 150px 0 transparent,
190px 150px 0 transparent,
195px 150px 0 transparent,
200px 150px 0 transparent,
5px 155px 0 transparent,
10px 155px 0 transparent,
15px 155px 0 transparent,
20px 155px 0 transparent,
25px 155px 0 transparent,
30px 155px 0 rgb(22, 23, 32),
35px 155px 0 rgb(250, 205, 55),
40px 155px 0 rgb(250, 205, 55),
45px 155px 0 rgb(188, 154, 62),
50px 155px 0 rgb(22, 23, 32),
55px 155px 0 rgb(232, 239, 241),
60px 155px 0 rgb(188, 154, 62),
65px 155px 0 rgb(188, 154, 62),
70px 155px 0 rgb(22, 23, 32),
75px 155px 0 rgb(180, 187, 173),
80px 155px 0 rgb(232, 239, 241),
85px 155px 0 rgb(232, 239, 241),
90px 155px 0 rgb(22, 23, 32),
95px 155px 0 rgb(22, 23, 32),
100px 155px 0 rgb(22, 23, 32),
105px 155px 0 rgb(232, 239, 241),
110px 155px 0 rgb(232, 239, 241),
115px 155px 0 rgb(180, 187, 173),
120px 155px 0 rgb(22, 23, 32),
125px 155px 0 rgb(188, 154, 62),
130px 155px 0 rgb(188, 154, 62),
135px 155px 0 rgb(232, 239, 241),
140px 155px 0 rgb(22, 23, 32),
145px 155px 0 rgb(188, 154, 62),
150px 155px 0 rgb(250, 205, 55),
155px 155px 0 rgb(250, 205, 55),
160px 155px 0 rgb(22, 23, 32),
165px 155px 0 transparent,
170px 155px 0 transparent,
175px 155px 0 transparent,
180px 155px 0 transparent,
185px 155px 0 transparent,
190px 155px 0 transparent,
195px 155px 0 transparent,
200px 155px 0 transparent,
5px 160px 0 transparent,
10px 160px 0 transparent,
15px 160px 0 transparent,
20px 160px 0 transparent,
25px 160px 0 transparent,
30px 160px 0 rgb(22, 23, 32),
35px 160px 0 rgb(22, 23, 32),
40px 160px 0 rgb(188, 154, 62),
45px 160px 0 transparent,
50px 160px 0 rgb(22, 23, 32),
55px 160px 0 rgb(232, 239, 241),
60px 160px 0 rgb(22, 23, 32),
65px 160px 0 rgb(232, 239, 241),
70px 160px 0 rgb(22, 23, 32),
75px 160px 0 rgb(180, 187, 173),
80px 160px 0 rgb(180, 187, 173),
85px 160px 0 rgb(180, 187, 173),
90px 160px 0 rgb(180, 187, 173),
95px 160px 0 rgb(180, 187, 173),
100px 160px 0 rgb(180, 187, 173),
105px 160px 0 rgb(180, 187, 173),
110px 160px 0 rgb(180, 187, 173),
115px 160px 0 rgb(180, 187, 173),
120px 160px 0 rgb(22, 23, 32),
125px 160px 0 transparent,
130px 160px 0 rgb(22, 23, 32),
135px 160px 0 rgb(232, 239, 241),
140px 160px 0 rgb(22, 23, 32),
145px 160px 0 transparent,
150px 160px 0 rgb(188, 154, 62),
155px 160px 0 rgb(22, 23, 32),
160px 160px 0 rgb(22, 23, 32),
165px 160px 0 transparent,
170px 160px 0 transparent,
175px 160px 0 transparent,
180px 160px 0 transparent,
185px 160px 0 transparent,
190px 160px 0 transparent,
195px 160px 0 transparent,
200px 160px 0 transparent,
5px 165px 0 transparent,
10px 165px 0 transparent,
15px 165px 0 transparent,
20px 165px 0 transparent,
25px 165px 0 transparent,
30px 165px 0 rgb(22, 23, 32),
35px 165px 0 rgb(250, 205, 55),
40px 165px 0 rgb(188, 154, 62),
45px 165px 0 rgb(22, 23, 32),
50px 165px 0 rgb(184, 190, 179),
55px 165px 0 rgb(22, 23, 32),
60px 165px 0 rgb(22, 23, 32),
65px 165px 0 rgb(184, 190, 179),
70px 165px 0 rgb(232, 239, 241),
75px 165px 0 rgb(22, 23, 32),
80px 165px 0 rgb(184, 190, 179),
85px 165px 0 rgb(184, 190, 179),
90px 165px 0 rgb(22, 23, 32),
95px 165px 0 rgb(22, 23, 32),
100px 165px 0 rgb(22, 23, 32),
105px 165px 0 rgb(184, 190, 179),
110px 165px 0 rgb(184, 190, 179),
115px 165px 0 rgb(22, 23, 32),
120px 165px 0 transparent,
125px 165px 0 rgb(184, 190, 179),
130px 165px 0 rgb(22, 23, 32),
135px 165px 0 rgb(22, 23, 32),
140px 165px 0 rgb(184, 190, 179),
145px 165px 0 rgb(22, 23, 32),
150px 165px 0 rgb(188, 154, 62),
155px 165px 0 rgb(250, 205, 55),
160px 165px 0 rgb(22, 23, 32),
165px 165px 0 transparent,
170px 165px 0 transparent,
175px 165px 0 transparent,
180px 165px 0 transparent,
185px 165px 0 transparent,
190px 165px 0 transparent,
195px 165px 0 transparent,
200px 165px 0 transparent,
5px 170px 0 transparent,
10px 170px 0 transparent,
15px 170px 0 transparent,
20px 170px 0 transparent,
25px 170px 0 rgb(22, 23, 32),
30px 170px 0 rgb(250, 205, 55),
35px 170px 0 rgb(250, 205, 55),
40px 170px 0 rgb(250, 205, 55),
45px 170px 0 transparent,
50px 170px 0 rgb(184, 190, 179),
55px 170px 0 rgb(22, 23, 32),
60px 170px 0 transparent,
65px 170px 0 rgb(22, 23, 32),
70px 170px 0 rgb(22, 23, 32),
75px 170px 0 rgb(184, 190, 179),
80px 170px 0 rgb(22, 23, 32),
85px 170px 0 rgb(22, 23, 32),
90px 170px 0 rgb(237, 167, 170),
95px 170px 0 rgb(237, 167, 170),
100px 170px 0 rgb(237, 167, 170),
105px 170px 0 rgb(22, 23, 32),
110px 170px 0 rgb(22, 23, 32),
115px 170px 0 rgb(184, 190, 179),
120px 170px 0 rgb(22, 23, 32),
125px 170px 0 rgb(22, 23, 32),
130px 170px 0 transparent,
135px 170px 0 rgb(22, 23, 32),
140px 170px 0 rgb(184, 190, 179),
145px 170px 0 transparent,
150px 170px 0 rgb(250, 205, 55),
155px 170px 0 rgb(250, 205, 55),
160px 170px 0 rgb(250, 205, 55),
165px 170px 0 rgb(22, 23, 32),
170px 170px 0 transparent,
175px 170px 0 transparent,
180px 170px 0 transparent,
185px 170px 0 transparent,
190px 170px 0 transparent,
195px 170px 0 transparent,
200px 170px 0 transparent,
5px 175px 0 transparent,
10px 175px 0 transparent,
15px 175px 0 transparent,
20px 175px 0 transparent,
25px 175px 0 rgb(22, 23, 32),
30px 175px 0 rgb(232, 239, 241),
35px 175px 0 rgb(22, 23, 32),
40px 175px 0 rgb(250, 205, 55),
45px 175px 0 rgb(184, 190, 179),
50px 175px 0 rgb(22, 23, 32),
55px 175px 0 transparent,
60px 175px 0 transparent,
65px 175px 0 transparent,
70px 175px 0 transparent,
75px 175px 0 rgb(22, 23, 32),
80px 175px 0 rgb(22, 23, 32),
85px 175px 0 rgb(184, 190, 179),
90px 175px 0 rgb(22, 23, 32),
95px 175px 0 rgb(232, 239, 241),
100px 175px 0 rgb(22, 23, 32),
105px 175px 0 rgb(184, 190, 179),
110px 175px 0 rgb(22, 23, 32),
115px 175px 0 rgb(22, 23, 32),
120px 175px 0 transparent,
125px 175px 0 transparent,
130px 175px 0 transparent,
135px 175px 0 transparent,
140px 175px 0 rgb(22, 23, 32),
145px 175px 0 rgb(184, 190, 179),
150px 175px 0 rgb(250, 205, 55),
155px 175px 0 rgb(22, 23, 32),
160px 175px 0 rgb(232, 239, 241),
165px 175px 0 rgb(22, 23, 32),
170px 175px 0 transparent,
175px 175px 0 transparent,
180px 175px 0 transparent,
185px 175px 0 transparent,
190px 175px 0 transparent,
195px 175px 0 transparent,
200px 175px 0 transparent,
5px 180px 0 transparent,
10px 180px 0 transparent,
15px 180px 0 transparent,
20px 180px 0 rgb(22, 23, 32),
25px 180px 0 rgb(22, 23, 32),
30px 180px 0 rgb(184, 190, 179),
35px 180px 0 rgb(232, 239, 241),
40px 180px 0 rgb(232, 239, 241),
45px 180px 0 rgb(22, 23, 32),
50px 180px 0 transparent,
55px 180px 0 transparent,
60px 180px 0 transparent,
65px 180px 0 transparent,
70px 180px 0 transparent,
75px 180px 0 transparent,
80px 180px 0 rgb(22, 23, 32),
85px 180px 0 rgb(232, 239, 241),
90px 180px 0 rgb(22, 23, 32),
95px 180px 0 rgb(22, 23, 32),
100px 180px 0 rgb(22, 23, 32),
105px 180px 0 rgb(232, 239, 241),
110px 180px 0 rgb(22, 23, 32),
115px 180px 0 transparent,
120px 180px 0 transparent,
125px 180px 0 transparent,
130px 180px 0 transparent,
135px 180px 0 transparent,
140px 180px 0 transparent,
145px 180px 0 rgb(22, 23, 32),
150px 180px 0 rgb(232, 239, 241),
155px 180px 0 rgb(232, 239, 241),
160px 180px 0 rgb(184, 190, 179),
165px 180px 0 rgb(22, 23, 32),
170px 180px 0 rgb(22, 23, 32),
175px 180px 0 transparent,
180px 180px 0 transparent,
185px 180px 0 transparent,
190px 180px 0 transparent,
195px 180px 0 transparent,
200px 180px 0 transparent,
5px 185px 0 transparent,
10px 185px 0 transparent,
15px 185px 0 rgb(22, 23, 32),
20px 185px 0 rgb(232, 239, 241),
25px 185px 0 rgb(232, 239, 241),
30px 185px 0 rgb(184, 190, 179),
35px 185px 0 rgb(232, 239, 241),
40px 185px 0 rgb(184, 190, 179),
45px 185px 0 rgb(232, 239, 241),
50px 185px 0 rgb(22, 23, 32),
55px 185px 0 transparent,
60px 185px 0 transparent,
65px 185px 0 transparent,
70px 185px 0 transparent,
75px 185px 0 transparent,
80px 185px 0 transparent,
85px 185px 0 rgb(22, 23, 32),
90px 185px 0 rgb(232, 239, 241),
95px 185px 0 rgb(232, 239, 241),
100px 185px 0 rgb(232, 239, 241),
105px 185px 0 rgb(22, 23, 32),
110px 185px 0 transparent,
115px 185px 0 transparent,
120px 185px 0 transparent,
125px 185px 0 transparent,
130px 185px 0 transparent,
135px 185px 0 transparent,
140px 185px 0 rgb(22, 23, 32),
145px 185px 0 rgb(232, 239, 241),
150px 185px 0 rgb(184, 190, 179),
155px 185px 0 rgb(232, 239, 241),
160px 185px 0 rgb(184, 190, 179),
165px 185px 0 rgb(232, 239, 241),
170px 185px 0 rgb(232, 239, 241),
175px 185px 0 rgb(22, 23, 32),
180px 185px 0 transparent,
185px 185px 0 transparent,
190px 185px 0 transparent,
195px 185px 0 transparent,
200px 185px 0 transparent,
5px 190px 0 transparent,
10px 190px 0 rgb(22, 23, 32),
15px 190px 0 rgb(184, 190, 179),
20px 190px 0 rgb(22, 23, 32),
25px 190px 0 rgb(184, 190, 179),
30px 190px 0 rgb(22, 23, 32),
35px 190px 0 rgb(184, 190, 179),
40px 190px 0 rgb(22, 23, 32),
45px 190px 0 rgb(184, 190, 179),
50px 190px 0 rgb(232, 239, 241),
55px 190px 0 rgb(22, 23, 32),
60px 190px 0 transparent,
65px 190px 0 transparent,
70px 190px 0 transparent,
75px 190px 0 transparent,
80px 190px 0 transparent,
85px 190px 0 transparent,
90px 190px 0 rgb(22, 23, 32),
95px 190px 0 rgb(22, 23, 32),
100px 190px 0 rgb(22, 23, 32),
105px 190px 0 transparent,
110px 190px 0 transparent,
115px 190px 0 transparent,
120px 190px 0 transparent,
125px 190px 0 transparent,
130px 190px 0 transparent,
135px 190px 0 rgb(22, 23, 32),
140px 190px 0 rgb(232, 239, 241),
145px 190px 0 rgb(184, 190, 179),
150px 190px 0 rgb(22, 23, 32),
155px 190px 0 rgb(184, 190, 179),
160px 190px 0 rgb(22, 23, 32),
165px 190px 0 rgb(184, 190, 179),
170px 190px 0 rgb(22, 23, 32),
175px 190px 0 rgb(184, 190, 179),
180px 190px 0 rgb(22, 23, 32),
185px 190px 0 transparent,
190px 190px 0 transparent,
195px 190px 0 transparent,
200px 190px 0 transparent,
5px 195px 0 transparent,
10px 195px 0 rgb(22, 23, 32),
15px 195px 0 rgb(22, 23, 32),
20px 195px 0 rgb(232, 239, 241),
25px 195px 0 rgb(184, 190, 179),
30px 195px 0 rgb(22, 23, 32),
35px 195px 0 rgb(184, 190, 179),
40px 195px 0 rgb(232, 239, 241),
45px 195px 0 rgb(22, 23, 32),
50px 195px 0 rgb(22, 23, 32),
55px 195px 0 rgb(22, 23, 32),
60px 195px 0 transparent,
65px 195px 0 transparent,
70px 195px 0 transparent,
75px 195px 0 transparent,
80px 195px 0 transparent,
85px 195px 0 transparent,
90px 195px 0 transparent,
95px 195px 0 transparent,
100px 195px 0 transparent,
105px 195px 0 transparent,
110px 195px 0 transparent,
115px 195px 0 transparent,
120px 195px 0 transparent,
125px 195px 0 transparent,
130px 195px 0 transparent,
135px 195px 0 rgb(22, 23, 32),
140px 195px 0 rgb(22, 23, 32),
145px 195px 0 rgb(22, 23, 32),
150px 195px 0 rgb(232, 239, 241),
155px 195px 0 rgb(184, 190, 179),
160px 195px 0 rgb(22, 23, 32),
165px 195px 0 rgb(184, 190, 179),
170px 195px 0 rgb(232, 239, 241),
175px 195px 0 rgb(22, 23, 32),
180px 195px 0 rgb(22, 23, 32),
185px 195px 0 transparent,
190px 195px 0 transparent,
195px 195px 0 transparent,
200px 195px 0 transparent,
5px 200px 0 transparent,
10px 200px 0 transparent,
15px 200px 0 transparent,
20px 200px 0 rgb(22, 23, 32),
25px 200px 0 rgb(22, 23, 32),
30px 200px 0 transparent,
35px 200px 0 rgb(22, 23, 32),
40px 200px 0 rgb(22, 23, 32),
45px 200px 0 transparent,
50px 200px 0 transparent,
55px 200px 0 transparent,
60px 200px 0 transparent,
65px 200px 0 transparent,
70px 200px 0 transparent,
75px 200px 0 transparent,
80px 200px 0 transparent,
85px 200px 0 transparent,
90px 200px 0 transparent,
95px 200px 0 transparent,
100px 200px 0 transparent,
105px 200px 0 transparent,
110px 200px 0 transparent,
115px 200px 0 transparent,
120px 200px 0 transparent,
125px 200px 0 transparent,
130px 200px 0 transparent,
135px 200px 0 transparent,
140px 200px 0 transparent,
145px 200px 0 transparent,
150px 200px 0 rgb(22, 23, 32),
155px 200px 0 rgb(22, 23, 32),
160px 200px 0 transparent,
165px 200px 0 rgb(22, 23, 32),
170px 200px 0 rgb(22, 23, 32),
175px 200px 0 transparent,
180px 200px 0 transparent,
185px 200px 0 transparent,
190px 200px 0 transparent,
195px 200px 0 transparent,
200px 200px 0 transparent;
}

このドット絵はbox-shadowで描いてる！

仕組みを簡単に説明しますが、知っても知らなくても誰でも作れるのでスルーして大丈夫です！

そもそもbox-shadowとは、影をつけるためのCSSです。その影を使って一つ一つのドットに描画しています。

まずはこちらのコードを見てください。


<div class="dot"></div>


.dot{
position:relative;
width: 100px;
height: 100px;
margin:0 auto;
}
.dot::before {
content: "";
position: absolute;
background: #ccc;
width: 20px;
height: 20px;
box-shadow: 
0 20px #58be89,
20px 40px #0e7ac4,
40px 60px #f27398;
}

これを出力するとこうなります。

「.dot」のCSSは配置や幅の指定なのでドット絵には関係ありません。

注目して欲しいのは「.dot::before」のCSSです。

まずbackgroundは背景色です。今回はわかりやすく灰色に設定していますが、実際作るときは「background: transparent;」にして透明にします。

この灰色の場所を基準にして影をつけていきます。

緑の影:左から0px、上から20pxの位置に描画
青の影:左から20px、上から40pxの位置に描画
ピンクの影:左から40px、上から60pxの位置に描画

ちなみにドットのサイズは「width」と「height」で決めています。

図にするとこんな感じです。