CoCalc -- main.css

GitHub Repository: titaniumnetwork-dev/Incognito-old
Path: blob/main/static/src/gs/public/2048/style/main.css
¹³²⁵ views
1
@import url(fonts/clear-sans.css);
2
html, body {
3
  margin: 0;
4
  padding: 0;
5
  background: #faf8ef;
6
  color: #776e65;
7
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
8
  font-size: 18px; }
9

10
body {
11
  margin: 80px 0; }
12

13
.heading:after {
14
  content: "";
15
  display: block;
16
  clear: both; }
17

18
h1.title {
19
  font-size: 80px;
20
  font-weight: bold;
21
  margin: 0;
22
  display: block;
23
  float: left; }
24

25
@-webkit-keyframes move-up {
26
  0% {
27
    top: 25px;
28
    opacity: 1; }
29

30
  100% {
31
    top: -50px;
32
    opacity: 0; } }
33
@-moz-keyframes move-up {
34
  0% {
35
    top: 25px;
36
    opacity: 1; }
37

38
  100% {
39
    top: -50px;
40
    opacity: 0; } }
41
@keyframes move-up {
42
  0% {
43
    top: 25px;
44
    opacity: 1; }
45

46
  100% {
47
    top: -50px;
48
    opacity: 0; } }
49
.scores-container {
50
  float: right;
51
  text-align: right; }
52

53
.score-container, .best-container {
54
  position: relative;
55
  display: inline-block;
56
  background: #bbada0;
57
  padding: 15px 25px;
58
  font-size: 25px;
59
  height: 25px;
60
  line-height: 47px;
61
  font-weight: bold;
62
  border-radius: 3px;
63
  color: white;
64
  margin-top: 8px;
65
  text-align: center; }
66
  .score-container:after, .best-container:after {
67
    position: absolute;
68
    width: 100%;
69
    top: 10px;
70
    left: 0;
71
    text-transform: uppercase;
72
    font-size: 13px;
73
    line-height: 13px;
74
    text-align: center;
75
    color: #eee4da; }
76
  .score-container .score-addition, .best-container .score-addition {
77
    position: absolute;
78
    right: 30px;
79
    color: red;
80
    font-size: 25px;
81
    line-height: 25px;
82
    font-weight: bold;
83
    color: rgba(119, 110, 101, 0.9);
84
    z-index: 100;
85
    -webkit-animation: move-up 600ms ease-in;
86
    -moz-animation: move-up 600ms ease-in;
87
    animation: move-up 600ms ease-in;
88
    -webkit-animation-fill-mode: both;
89
    -moz-animation-fill-mode: both;
90
    animation-fill-mode: both; }
91

92
.score-container:after {
93
  content: "Score"; }
94

95
.best-container:after {
96
  content: "Best"; }
97

98
p {
99
  margin-top: 0;
100
  margin-bottom: 10px;
101
  line-height: 1.65; }
102

103
a {
104
  color: #776e65;
105
  font-weight: bold;
106
  text-decoration: underline;
107
  cursor: pointer; }
108

109
strong.important {
110
  text-transform: uppercase; }
111

112
hr {
113
  border: none;
114
  border-bottom: 1px solid #d8d4d0;
115
  margin-top: 20px;
116
  margin-bottom: 30px; }
117

118
.container {
119
  width: 500px;
120
  margin: 0 auto; }
121

122
@-webkit-keyframes fade-in {
123
  0% {
124
    opacity: 0; }
125

126
  100% {
127
    opacity: 1; } }
128
@-moz-keyframes fade-in {
129
  0% {
130
    opacity: 0; }
131

132
  100% {
133
    opacity: 1; } }
134
@keyframes fade-in {
135
  0% {
136
    opacity: 0; }
137

138
  100% {
139
    opacity: 1; } }
140
.game-container {
141
  margin-top: 40px;
142
  position: relative;
143
  padding: 15px;
144
  cursor: default;
145
  -webkit-touch-callout: none;
146
  -ms-touch-callout: none;
147
  -webkit-user-select: none;
148
  -moz-user-select: none;
149
  -ms-user-select: none;
150
  -ms-touch-action: none;
151
  touch-action: none;
152
  background: #bbada0;
153
  border-radius: 6px;
154
  width: 500px;
155
  height: 500px;
156
  -webkit-box-sizing: border-box;
157
  -moz-box-sizing: border-box;
158
  box-sizing: border-box; }
159
  .game-container .game-message {
160
    display: none;
161
    position: absolute;
162
    top: 0;
163
    right: 0;
164
    bottom: 0;
165
    left: 0;
166
    background: rgba(238, 228, 218, 0.5);
167
    z-index: 100;
168
    text-align: center;
169
    -webkit-animation: fade-in 800ms ease 1200ms;
170
    -moz-animation: fade-in 800ms ease 1200ms;
171
    animation: fade-in 800ms ease 1200ms;
172
    -webkit-animation-fill-mode: both;
173
    -moz-animation-fill-mode: both;
174
    animation-fill-mode: both; }
175
    .game-container .game-message p {
176
      font-size: 60px;
177
      font-weight: bold;
178
      height: 60px;
179
      line-height: 60px;
180
      margin-top: 222px; }
181
    .game-container .game-message .lower {
182
      display: block;
183
      margin-top: 59px; }
184
    .game-container .game-message a {
185
      display: inline-block;
186
      background: #8f7a66;
187
      border-radius: 3px;
188
      padding: 0 20px;
189
      text-decoration: none;
190
      color: #f9f6f2;
191
      height: 40px;
192
      line-height: 42px;
193
      margin-left: 9px; }
194
      .game-container .game-message a.keep-playing-button {
195
        display: none; }
196
    .game-container .game-message.game-won {
197
      background: rgba(237, 194, 46, 0.5);
198
      color: #f9f6f2; }
199
      .game-container .game-message.game-won a.keep-playing-button {
200
        display: inline-block; }
201
    .game-container .game-message.game-won, .game-container .game-message.game-over {
202
      display: block; }
203

204
.grid-container {
205
  position: absolute;
206
  z-index: 1; }
207

208
.grid-row {
209
  margin-bottom: 15px; }
210
  .grid-row:last-child {
211
    margin-bottom: 0; }
212
  .grid-row:after {
213
    content: "";
214
    display: block;
215
    clear: both; }
216

217
.grid-cell {
218
  width: 106.25px;
219
  height: 106.25px;
220
  margin-right: 15px;
221
  float: left;
222
  border-radius: 3px;
223
  background: rgba(238, 228, 218, 0.35); }
224
  .grid-cell:last-child {
225
    margin-right: 0; }
226

227
.tile-container {
228
  position: absolute;
229
  z-index: 2; }
230

231
.tile, .tile .tile-inner {
232
  width: 107px;
233
  height: 107px;
234
  line-height: 107px; }
235
.tile.tile-position-1-1 {
236
  -webkit-transform: translate(0px, 0px);
237
  -moz-transform: translate(0px, 0px);
238
  -ms-transform: translate(0px, 0px);
239
  transform: translate(0px, 0px); }
240
.tile.tile-position-1-2 {
241
  -webkit-transform: translate(0px, 121px);
242
  -moz-transform: translate(0px, 121px);
243
  -ms-transform: translate(0px, 121px);
244
  transform: translate(0px, 121px); }
245
.tile.tile-position-1-3 {
246
  -webkit-transform: translate(0px, 242px);
247
  -moz-transform: translate(0px, 242px);
248
  -ms-transform: translate(0px, 242px);
249
  transform: translate(0px, 242px); }
250
.tile.tile-position-1-4 {
251
  -webkit-transform: translate(0px, 363px);
252
  -moz-transform: translate(0px, 363px);
253
  -ms-transform: translate(0px, 363px);
254
  transform: translate(0px, 363px); }
255
.tile.tile-position-2-1 {
256
  -webkit-transform: translate(121px, 0px);
257
  -moz-transform: translate(121px, 0px);
258
  -ms-transform: translate(121px, 0px);
259
  transform: translate(121px, 0px); }
260
.tile.tile-position-2-2 {
261
  -webkit-transform: translate(121px, 121px);
262
  -moz-transform: translate(121px, 121px);
263
  -ms-transform: translate(121px, 121px);
264
  transform: translate(121px, 121px); }
265
.tile.tile-position-2-3 {
266
  -webkit-transform: translate(121px, 242px);
267
  -moz-transform: translate(121px, 242px);
268
  -ms-transform: translate(121px, 242px);
269
  transform: translate(121px, 242px); }
270
.tile.tile-position-2-4 {
271
  -webkit-transform: translate(121px, 363px);
272
  -moz-transform: translate(121px, 363px);
273
  -ms-transform: translate(121px, 363px);
274
  transform: translate(121px, 363px); }
275
.tile.tile-position-3-1 {
276
  -webkit-transform: translate(242px, 0px);
277
  -moz-transform: translate(242px, 0px);
278
  -ms-transform: translate(242px, 0px);
279
  transform: translate(242px, 0px); }
280
.tile.tile-position-3-2 {
281
  -webkit-transform: translate(242px, 121px);
282
  -moz-transform: translate(242px, 121px);
283
  -ms-transform: translate(242px, 121px);
284
  transform: translate(242px, 121px); }
285
.tile.tile-position-3-3 {
286
  -webkit-transform: translate(242px, 242px);
287
  -moz-transform: translate(242px, 242px);
288
  -ms-transform: translate(242px, 242px);
289
  transform: translate(242px, 242px); }
290
.tile.tile-position-3-4 {
291
  -webkit-transform: translate(242px, 363px);
292
  -moz-transform: translate(242px, 363px);
293
  -ms-transform: translate(242px, 363px);
294
  transform: translate(242px, 363px); }
295
.tile.tile-position-4-1 {
296
  -webkit-transform: translate(363px, 0px);
297
  -moz-transform: translate(363px, 0px);
298
  -ms-transform: translate(363px, 0px);
299
  transform: translate(363px, 0px); }
300
.tile.tile-position-4-2 {
301
  -webkit-transform: translate(363px, 121px);
302
  -moz-transform: translate(363px, 121px);
303
  -ms-transform: translate(363px, 121px);
304
  transform: translate(363px, 121px); }
305
.tile.tile-position-4-3 {
306
  -webkit-transform: translate(363px, 242px);
307
  -moz-transform: translate(363px, 242px);
308
  -ms-transform: translate(363px, 242px);
309
  transform: translate(363px, 242px); }
310
.tile.tile-position-4-4 {
311
  -webkit-transform: translate(363px, 363px);
312
  -moz-transform: translate(363px, 363px);
313
  -ms-transform: translate(363px, 363px);
314
  transform: translate(363px, 363px); }
315

316
.tile {
317
  position: absolute;
318
  -webkit-transition: 100ms ease-in-out;
319
  -moz-transition: 100ms ease-in-out;
320
  transition: 100ms ease-in-out;
321
  -webkit-transition-property: -webkit-transform;
322
  -moz-transition-property: -moz-transform;
323
  transition-property: transform; }
324
  .tile .tile-inner {
325
    border-radius: 3px;
326
    background: #eee4da;
327
    text-align: center;
328
    font-weight: bold;
329
    z-index: 10;
330
    font-size: 55px; }
331
  .tile.tile-2 .tile-inner {
332
    background: #eee4da;
333
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
334
  .tile.tile-4 .tile-inner {
335
    background: #ede0c8;
336
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
337
  .tile.tile-8 .tile-inner {
338
    color: #f9f6f2;
339
    background: #f2b179; }
340
  .tile.tile-16 .tile-inner {
341
    color: #f9f6f2;
342
    background: #f59563; }
343
  .tile.tile-32 .tile-inner {
344
    color: #f9f6f2;
345
    background: #f67c5f; }
346
  .tile.tile-64 .tile-inner {
347
    color: #f9f6f2;
348
    background: #f65e3b; }
349
  .tile.tile-128 .tile-inner {
350
    color: #f9f6f2;
351
    background: #edcf72;
352
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
353
    font-size: 45px; }
354
    @media screen and (max-width: 520px) {
355
      .tile.tile-128 .tile-inner {
356
        font-size: 25px; } }
357
  .tile.tile-256 .tile-inner {
358
    color: #f9f6f2;
359
    background: #edcc61;
360
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
361
    font-size: 45px; }
362
    @media screen and (max-width: 520px) {
363
      .tile.tile-256 .tile-inner {
364
        font-size: 25px; } }
365
  .tile.tile-512 .tile-inner {
366
    color: #f9f6f2;
367
    background: #edc850;
368
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
369
    font-size: 45px; }
370
    @media screen and (max-width: 520px) {
371
      .tile.tile-512 .tile-inner {
372
        font-size: 25px; } }
373
  .tile.tile-1024 .tile-inner {
374
    color: #f9f6f2;
375
    background: #edc53f;
376
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
377
    font-size: 35px; }
378
    @media screen and (max-width: 520px) {
379
      .tile.tile-1024 .tile-inner {
380
        font-size: 15px; } }
381
  .tile.tile-2048 .tile-inner {
382
    color: #f9f6f2;
383
    background: #edc22e;
384
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
385
    font-size: 35px; }
386
    @media screen and (max-width: 520px) {
387
      .tile.tile-2048 .tile-inner {
388
        font-size: 15px; } }
389
  .tile.tile-super .tile-inner {
390
    color: #f9f6f2;
391
    background: #3c3a32;
392
    font-size: 30px; }
393
    @media screen and (max-width: 520px) {
394
      .tile.tile-super .tile-inner {
395
        font-size: 10px; } }
396

397
@-webkit-keyframes appear {
398
  0% {
399
    opacity: 0;
400
    -webkit-transform: scale(0);
401
    -moz-transform: scale(0);
402
    -ms-transform: scale(0);
403
    transform: scale(0); }
404

405
  100% {
406
    opacity: 1;
407
    -webkit-transform: scale(1);
408
    -moz-transform: scale(1);
409
    -ms-transform: scale(1);
410
    transform: scale(1); } }
411
@-moz-keyframes appear {
412
  0% {
413
    opacity: 0;
414
    -webkit-transform: scale(0);
415
    -moz-transform: scale(0);
416
    -ms-transform: scale(0);
417
    transform: scale(0); }
418

419
  100% {
420
    opacity: 1;
421
    -webkit-transform: scale(1);
422
    -moz-transform: scale(1);
423
    -ms-transform: scale(1);
424
    transform: scale(1); } }
425
@keyframes appear {
426
  0% {
427
    opacity: 0;
428
    -webkit-transform: scale(0);
429
    -moz-transform: scale(0);
430
    -ms-transform: scale(0);
431
    transform: scale(0); }
432

433
  100% {
434
    opacity: 1;
435
    -webkit-transform: scale(1);
436
    -moz-transform: scale(1);
437
    -ms-transform: scale(1);
438
    transform: scale(1); } }
439
.tile-new .tile-inner {
440
  -webkit-animation: appear 200ms ease 100ms;
441
  -moz-animation: appear 200ms ease 100ms;
442
  animation: appear 200ms ease 100ms;
443
  -webkit-animation-fill-mode: backwards;
444
  -moz-animation-fill-mode: backwards;
445
  animation-fill-mode: backwards; }
446

447
@-webkit-keyframes pop {
448
  0% {
449
    -webkit-transform: scale(0);
450
    -moz-transform: scale(0);
451
    -ms-transform: scale(0);
452
    transform: scale(0); }
453

454
  50% {
455
    -webkit-transform: scale(1.2);
456
    -moz-transform: scale(1.2);
457
    -ms-transform: scale(1.2);
458
    transform: scale(1.2); }
459

460
  100% {
461
    -webkit-transform: scale(1);
462
    -moz-transform: scale(1);
463
    -ms-transform: scale(1);
464
    transform: scale(1); } }
465
@-moz-keyframes pop {
466
  0% {
467
    -webkit-transform: scale(0);
468
    -moz-transform: scale(0);
469
    -ms-transform: scale(0);
470
    transform: scale(0); }
471

472
  50% {
473
    -webkit-transform: scale(1.2);
474
    -moz-transform: scale(1.2);
475
    -ms-transform: scale(1.2);
476
    transform: scale(1.2); }
477

478
  100% {
479
    -webkit-transform: scale(1);
480
    -moz-transform: scale(1);
481
    -ms-transform: scale(1);
482
    transform: scale(1); } }
483
@keyframes pop {
484
  0% {
485
    -webkit-transform: scale(0);
486
    -moz-transform: scale(0);
487
    -ms-transform: scale(0);
488
    transform: scale(0); }
489

490
  50% {
491
    -webkit-transform: scale(1.2);
492
    -moz-transform: scale(1.2);
493
    -ms-transform: scale(1.2);
494
    transform: scale(1.2); }
495

496
  100% {
497
    -webkit-transform: scale(1);
498
    -moz-transform: scale(1);
499
    -ms-transform: scale(1);
500
    transform: scale(1); } }
501
.tile-merged .tile-inner {
502
  z-index: 20;
503
  -webkit-animation: pop 200ms ease 100ms;
504
  -moz-animation: pop 200ms ease 100ms;
505
  animation: pop 200ms ease 100ms;
506
  -webkit-animation-fill-mode: backwards;
507
  -moz-animation-fill-mode: backwards;
508
  animation-fill-mode: backwards; }
509

510
.above-game:after {
511
  content: "";
512
  display: block;
513
  clear: both; }
514

515
.game-intro {
516
  float: left;
517
  line-height: 42px;
518
  margin-bottom: 0; }
519

520
.restart-button {
521
  display: inline-block;
522
  background: #8f7a66;
523
  border-radius: 3px;
524
  padding: 0 20px;
525
  text-decoration: none;
526
  color: #f9f6f2;
527
  height: 40px;
528
  line-height: 42px;
529
  display: block;
530
  text-align: center;
531
  float: right; }
532

533
.game-explanation {
534
  margin-top: 50px; }
535

536
@media screen and (max-width: 520px) {
537
  html, body {
538
    font-size: 15px; }
539

540
  body {
541
    margin: 20px 0;
542
    padding: 0 20px; }
543

544
  h1.title {
545
    font-size: 27px;
546
    margin-top: 15px; }
547

548
  .container {
549
    width: 280px;
550
    margin: 0 auto; }
551

552
  .score-container, .best-container {
553
    margin-top: 0;
554
    padding: 15px 10px;
555
    min-width: 40px; }
556

557
  .heading {
558
    margin-bottom: 10px; }
559

560
  .game-intro {
561
    width: 55%;
562
    display: block;
563
    box-sizing: border-box;
564
    line-height: 1.65; }
565

566
  .restart-button {
567
    width: 42%;
568
    padding: 0;
569
    display: block;
570
    box-sizing: border-box;
571
    margin-top: 2px; }
572

573
  .game-container {
574
    margin-top: 17px;
575
    position: relative;
576
    padding: 10px;
577
    cursor: default;
578
    -webkit-touch-callout: none;
579
    -ms-touch-callout: none;
580
    -webkit-user-select: none;
581
    -moz-user-select: none;
582
    -ms-user-select: none;
583
    -ms-touch-action: none;
584
    touch-action: none;
585
    background: #bbada0;
586
    border-radius: 6px;
587
    width: 280px;
588
    height: 280px;
589
    -webkit-box-sizing: border-box;
590
    -moz-box-sizing: border-box;
591
    box-sizing: border-box; }
592
    .game-container .game-message {
593
      display: none;
594
      position: absolute;
595
      top: 0;
596
      right: 0;
597
      bottom: 0;
598
      left: 0;
599
      background: rgba(238, 228, 218, 0.5);
600
      z-index: 100;
601
      text-align: center;
602
      -webkit-animation: fade-in 800ms ease 1200ms;
603
      -moz-animation: fade-in 800ms ease 1200ms;
604
      animation: fade-in 800ms ease 1200ms;
605
      -webkit-animation-fill-mode: both;
606
      -moz-animation-fill-mode: both;
607
      animation-fill-mode: both; }
608
      .game-container .game-message p {
609
        font-size: 60px;
610
        font-weight: bold;
611
        height: 60px;
612
        line-height: 60px;
613
        margin-top: 222px; }
614
      .game-container .game-message .lower {
615
        display: block;
616
        margin-top: 59px; }
617
      .game-container .game-message a {
618
        display: inline-block;
619
        background: #8f7a66;
620
        border-radius: 3px;
621
        padding: 0 20px;
622
        text-decoration: none;
623
        color: #f9f6f2;
624
        height: 40px;
625
        line-height: 42px;
626
        margin-left: 9px; }
627
        .game-container .game-message a.keep-playing-button {
628
          display: none; }
629
      .game-container .game-message.game-won {
630
        background: rgba(237, 194, 46, 0.5);
631
        color: #f9f6f2; }
632
        .game-container .game-message.game-won a.keep-playing-button {
633
          display: inline-block; }
634
      .game-container .game-message.game-won, .game-container .game-message.game-over {
635
        display: block; }
636

637
  .grid-container {
638
    position: absolute;
639
    z-index: 1; }
640

641
  .grid-row {
642
    margin-bottom: 10px; }
643
    .grid-row:last-child {
644
      margin-bottom: 0; }
645
    .grid-row:after {
646
      content: "";
647
      display: block;
648
      clear: both; }
649

650
  .grid-cell {
651
    width: 57.5px;
652
    height: 57.5px;
653
    margin-right: 10px;
654
    float: left;
655
    border-radius: 3px;
656
    background: rgba(238, 228, 218, 0.35); }
657
    .grid-cell:last-child {
658
      margin-right: 0; }
659

660
  .tile-container {
661
    position: absolute;
662
    z-index: 2; }
663

664
  .tile, .tile .tile-inner {
665
    width: 58px;
666
    height: 58px;
667
    line-height: 58px; }
668
  .tile.tile-position-1-1 {
669
    -webkit-transform: translate(0px, 0px);
670
    -moz-transform: translate(0px, 0px);
671
    -ms-transform: translate(0px, 0px);
672
    transform: translate(0px, 0px); }
673
  .tile.tile-position-1-2 {
674
    -webkit-transform: translate(0px, 67px);
675
    -moz-transform: translate(0px, 67px);
676
    -ms-transform: translate(0px, 67px);
677
    transform: translate(0px, 67px); }
678
  .tile.tile-position-1-3 {
679
    -webkit-transform: translate(0px, 135px);
680
    -moz-transform: translate(0px, 135px);
681
    -ms-transform: translate(0px, 135px);
682
    transform: translate(0px, 135px); }
683
  .tile.tile-position-1-4 {
684
    -webkit-transform: translate(0px, 202px);
685
    -moz-transform: translate(0px, 202px);
686
    -ms-transform: translate(0px, 202px);
687
    transform: translate(0px, 202px); }
688
  .tile.tile-position-2-1 {
689
    -webkit-transform: translate(67px, 0px);
690
    -moz-transform: translate(67px, 0px);
691
    -ms-transform: translate(67px, 0px);
692
    transform: translate(67px, 0px); }
693
  .tile.tile-position-2-2 {
694
    -webkit-transform: translate(67px, 67px);
695
    -moz-transform: translate(67px, 67px);
696
    -ms-transform: translate(67px, 67px);
697
    transform: translate(67px, 67px); }
698
  .tile.tile-position-2-3 {
699
    -webkit-transform: translate(67px, 135px);
700
    -moz-transform: translate(67px, 135px);
701
    -ms-transform: translate(67px, 135px);
702
    transform: translate(67px, 135px); }
703
  .tile.tile-position-2-4 {
704
    -webkit-transform: translate(67px, 202px);
705
    -moz-transform: translate(67px, 202px);
706
    -ms-transform: translate(67px, 202px);
707
    transform: translate(67px, 202px); }
708
  .tile.tile-position-3-1 {
709
    -webkit-transform: translate(135px, 0px);
710
    -moz-transform: translate(135px, 0px);
711
    -ms-transform: translate(135px, 0px);
712
    transform: translate(135px, 0px); }
713
  .tile.tile-position-3-2 {
714
    -webkit-transform: translate(135px, 67px);
715
    -moz-transform: translate(135px, 67px);
716
    -ms-transform: translate(135px, 67px);
717
    transform: translate(135px, 67px); }
718
  .tile.tile-position-3-3 {
719
    -webkit-transform: translate(135px, 135px);
720
    -moz-transform: translate(135px, 135px);
721
    -ms-transform: translate(135px, 135px);
722
    transform: translate(135px, 135px); }
723
  .tile.tile-position-3-4 {
724
    -webkit-transform: translate(135px, 202px);
725
    -moz-transform: translate(135px, 202px);
726
    -ms-transform: translate(135px, 202px);
727
    transform: translate(135px, 202px); }
728
  .tile.tile-position-4-1 {
729
    -webkit-transform: translate(202px, 0px);
730
    -moz-transform: translate(202px, 0px);
731
    -ms-transform: translate(202px, 0px);
732
    transform: translate(202px, 0px); }
733
  .tile.tile-position-4-2 {
734
    -webkit-transform: translate(202px, 67px);
735
    -moz-transform: translate(202px, 67px);
736
    -ms-transform: translate(202px, 67px);
737
    transform: translate(202px, 67px); }
738
  .tile.tile-position-4-3 {
739
    -webkit-transform: translate(202px, 135px);
740
    -moz-transform: translate(202px, 135px);
741
    -ms-transform: translate(202px, 135px);
742
    transform: translate(202px, 135px); }
743
  .tile.tile-position-4-4 {
744
    -webkit-transform: translate(202px, 202px);
745
    -moz-transform: translate(202px, 202px);
746
    -ms-transform: translate(202px, 202px);
747
    transform: translate(202px, 202px); }
748

749
  .tile .tile-inner {
750
    font-size: 35px; }
751

752
  .game-message p {
753
    font-size: 30px !important;
754
    height: 30px !important;
755
    line-height: 30px !important;
756
    margin-top: 90px !important; }
757
  .game-message .lower {
758
    margin-top: 30px !important; } }
759

760
Product

Resources

Company
