支援者募集中!仕事依頼はこちら

CSSでドラクエのドット絵を描いたみた!ツールがあれば誰でも出来ます!

スポンサーリンク

こんにちは!ぽんひろ(@ponhiroo)です。

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

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

この記事では

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

を紹介します!

スポンサーリンク

完成した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」で決めています。

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

CSS dropshadowの仕組み

仕組みは意外とシンプルです。

ツールを使えば誰でも作れる!

あるかなぁ〜って思ってググったらありました。
自動でCSSを出力してくれるツールです。

こういうツール作れる人って尊敬します!使わせていただきましょう!

DotGen.css - CSS Collection

ただし、ドットは自分で打たないといけません。笑

使い方

pixel: ドットの数
px/dot: ドットの大きさ
paint: 描画
eraser: 消しゴム
color: 色の指定
output: HTML、CSSの出力

ドット絵の見本は検索すれば出てきます。

気長にやれば誰でもできると思うので興味がある方はやってみてください。

制作の様子

コメント

ページトップへ