CoCalc -- main.css

GitHub Repository: AroriaNetwork/3kho-backup
Path: blob/main/projects/doge2048/style/main.css
¹⁸³⁵ views
1
@import url(fonts/comic-sans.css);
2
html, body {
3
  margin: 0;
4
  padding: 0;
5
  background: #fff;
6
  color: #000;
7
/*  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;*/
8
  font-family: 'Comic Sans', 'Comic Sans', Chalkboard, Helvetica, Arial, sans-serif;
9
  font-size: 18px; 
10
  -webkit-animation: background-gradient-change linear 6s infinite alternate;
11
  -moz-animation: background-gradient-change linear 6s infinite alternate;
12
  -moz-animation: background-gradient-change linear 6s infinite alternate; }
13

14
body {
15
  margin: 20px 0 0 0; }
16

17
.overlay{
18
	height: 100%;
19
	width: 100%;
20
	position:fixed;
21
	top:0;
22
	left:0;
23
	overflow:auto;
24
	background: rgba(255,255,255,0.8);
25
	z-index: 1000;
26
}
27

28
.modal{
29
	background: #f0f;
30
    border-radius: 3px;
31
	width:300px;
32
	margin-top:100px;
33
	margin-left: auto;
34
	margin-right: auto;
35
}
36
.appstore{
37
	text-align: center;
38
}
39

40
.appstore-icon{
41
	margin-top:20px;	
42
	margin-left:auto;
43
	margin-right:auto;	
44
	height: 212px;
45
	width: 212px;
46
    background: #f0f url('../img/212/doge-sunglasses-212.gif');
47
}
48
.close-modal{
49
	margin-top:20px;
50
	cursor: pointer;
51
}
52

53
.close-modal:hover{
54
	-webkit-animation: hover-change linear 0.1s infinite;
55
	-moz-animation: hover-change linear 0.1s infinite;
56
	animation: hover-change linear 0.1s infinite;
57
}
58

59
.heading:after {
60
  content: "";
61
  display: block;
62
  clear: both; }
63

64
h1.title {
65
  color:#333;
66
  font-size: 48px;
67
  font-weight: bold;
68
  margin: 0;
69
  display: block;
70
  float: left; }
71
  
72
  #twitter-widget-0 {
73
    width: 100px !important;    
74
    position: relative;
75
  }
76
  
77
  .COINWIDGETCOM_CONTAINER {
78
  position: relative;
79
  bottom: 5px;
80
  }
81
  
82
  .footer > div{
83
    display:inline-block !important;
84
    width: auto !important;
85
    overflow:hidden;
86
  }
87
  
88
  .footer{
89
/*    width:188px;*/
90
    width:265px;
91
    margin-left: auto;
92
    margin-right: auto;
93
    text-align:center;}
94

95
@-webkit-keyframes move-up {
96
  0% {
97
    top: 25px;
98
    opacity: 1; }
99

100
  100% {
101
    top: -50px;
102
    opacity: 0; } }
103

104
@-moz-keyframes move-up {
105
  0% {
106
    top: 25px;
107
    opacity: 1; }
108

109
  100% {
110
    top: -50px;
111
    opacity: 0; } }
112

113
@keyframes move-up {
114
  0% {
115
    top: 25px;
116
    opacity: 1; }
117

118
  100% {
119
    top: -50px;
120
    opacity: 0; } }
121
    
122
  @-webkit-keyframes fade-in-out {
123
    0% {
124
      opacity: 0; }
125
      
126
    50% {
127
      opacity: 1; }
128

129
    100% {
130
      opacity: 0; } }
131

132
  @-moz-keyframes fade-in-out {
133
    0% {
134
      opacity: 0; }
135
      
136
    50% {
137
      opacity: 1; }
138

139
    100% {
140
      opacity: 0; } }
141

142
  @keyframes fade-in-out {
143
    0% {
144
      opacity: 0; }
145
      
146
    50% {
147
      opacity: 1; }
148

149
    100% {
150
      opacity: 0; } }
151
      
152
  @-webkit-keyframes hover-change {
153
      0%   {color: cyan;}
154
      25%  {color: magenta;}
155
      50%  {color: yellow;}
156
      100% {color: white;} }
157

158
  @-moz-keyframes hover-change {
159
      0%   {color: cyan;}
160
      25%  {color: magenta;}
161
      50%  {color: yellow;}
162
      100% {color: white;} }
163
      
164
  @keyframes hover-change {
165
      0%   {color: cyan;}
166
      25%  {color: magenta;}
167
      50%  {color: yellow;}
168
      100% {color: white;} }
169
      
170
  @-webkit-keyframes background-gradient-change {
171
      0%   {background: #cff;}
172
      33%  {background: #fcf;}
173
      66%  {background: #ffc;}
174
      100%   {background: #cff;}}
175

176
  @-moz-keyframes background-gradient-change {
177
      0%   {background: #dff;}
178
      33%  {background: #fdf;}
179
      66%  {background: #ffd;}
180
      100%   {background: #dff;}}
181
      
182
  @keyframes background-gradient-change {
183
      0%   {background: #dff;}
184
      33%  {background: #fdf;}
185
      66%  {background: #ffd;}
186
      100%   {background: #dff;}}      
187
      
188
  a:hover {
189
         -webkit-animation: hover-change linear 0.1s infinite;
190
         -moz-animation: hover-change linear 0.1s infinite;
191
         animation: hover-change linear 0.1s infinite;
192
       }      
193

194
.scores-container {
195
  float: right;
196
  text-align: right; }
197
  
198
.game-container .doge-says {
199
  position: fixed;
200
  top: 0;
201
  left: 0;
202
  z-index: 100;}
203
  .game-container .doge-says p {
204
    position:fixed;
205
    font-size: 60px;
206
    font-weight: bold;
207
    height: 60px;
208
    line-height: 60px;
209
    -webkit-animation: fade-in-out 600ms ease-in;
210
    -moz-animation: fade-in-out 600ms ease-in;
211
    animation: fade-in-out 600ms ease-in;
212
    -webkit-animation-fill-mode: both;
213
    -moz-animation-fill-mode: both;
214
    animation-fill-mode: both; }
215
    
216

217
  .info-container {
218
    position: relative;
219
    cursor:pointer;
220
    left:50%;
221
    margin-left:-32px;
222
    margin-bottom:10px;}
223
    
224
    .shout-out-container{
225
      text-align:center;
226
    }
227
    .shout-out{
228
      height:10px;
229
      line-height: 10px;
230
      background: #f0f;
231
      padding: 10px 10px;
232
      border-radius: 3px;
233
      display:inline-block;
234
    }
235
    
236
  .shout-out a{
237
    font-weight: normal;
238
    height:10px;
239
    width:auto;
240
    text-decoration:none;
241
    color:#fff;
242
  }
243
    
244
  .info-container, .hide-info {
245
    display: inline-block;
246
    background: #f0f;
247
    padding: 10px 15px;
248
    height: 10px;
249
    line-height: 10px;
250
    font-size:10px;
251
    font-weight: bold;
252
    border-radius: 3px;
253
    color: white;
254
    margin-top: 8px;
255
    width: 36px;
256
    text-align: center; }
257
      .info-container a, .hide-info a{
258
        color:#fff;
259
        text-decoration:none;}
260
    
261
  .game-container .info {
262
    display: none;
263
    position: absolute;
264
    overflow: scroll;
265
    top: 0;
266
    right: 0;
267
    bottom: 0;
268
    left: 0;
269
    background: rgba(255,255,255,0.9);
270
    z-index: 100;
271
    border-radius: 6px;
272
    text-align: center;
273
/*    -webkit-animation: fade-in 800ms ease;
274
    -moz-animation: fade-in 800ms ease;
275
    animation: fade-in 800ms ease;*/
276
    -webkit-animation-fill-mode: both;
277
    -moz-animation-fill-mode: both;
278
    animation-fill-mode: both; }
279
    .game-container .info p {
280
      position:relative;
281
      font-size: 16px;
282
      padding:10px 20px 10px 20px;
283
      font-weight: bold;}
284

285
.score-container, .best-container {
286
  position: relative;
287
  display: inline-block;
288
  background: #f0f;
289
  padding: 15px 25px;
290
/*  font-size: 25px;*/
291
  height: 25px;
292
  line-height: 42px;
293
  font-weight: bold;
294
  border-radius: 3px;
295
  color: white;
296
  margin-top: 8px;
297
  text-align: center; }
298
  .score-container:after, .best-container:after {
299
    position: absolute;
300
    width: 100%;
301
    top: 10px;
302
    left: 0;
303
    text-transform: uppercase;
304
    font-size: 12px;
305
    line-height: 13px;
306
    text-align: center;
307
    color: #000; }
308
  .score-container .score-addition, .best-container .score-addition {
309
    position: absolute;
310
    right: 30px;
311
    font-size: 20px;
312
    line-height: 20px;
313
    color: rgba(119, 110, 101, 0.9);
314
    z-index: 100;
315
    -webkit-animation: move-up 600ms ease-in;
316
    -moz-animation: move-up 600ms ease-in;
317
    animation: move-up 600ms ease-in;
318
    -webkit-animation-fill-mode: both;
319
    -moz-animation-fill-mode: both;
320
    animation-fill-mode: both; }
321

322
.score-container:after {
323
  content: "Score"; }
324

325
.best-container:after {
326
  content: "Best"; }
327

328
p {
329
  margin-top: 0;
330
  margin-bottom: 10px;
331
  line-height: 1.65; }
332

333
a {
334
  color: #f0f;
335
  font-weight: bold;
336
  text-decoration: underline;
337
  cursor: pointer; }
338

339
strong.important {
340
  text-transform: uppercase; }
341

342
hr {
343
  border: none;
344
  border-bottom: 1px solid #d8d4d0;
345
  margin-top: 20px;
346
  margin-bottom: 30px; }
347

348
.container {
349
  width: 500px;
350
  margin: 0 auto; }
351

352
@-webkit-keyframes fade-in {
353
  0% {
354
    opacity: 0; }
355

356
  100% {
357
    opacity: 1; } }
358

359
@-moz-keyframes fade-in {
360
  0% {
361
    opacity: 0; }
362

363
  100% {
364
    opacity: 1; } }
365

366
@keyframes fade-in {
367
  0% {
368
    opacity: 0; }
369

370
  100% {
371
    opacity: 1; } }
372

373
.game-container {
374
  margin-top: 40px;
375
  position: relative;
376
  padding: 15px;
377
  cursor: default;
378
  -webkit-touch-callout: none;
379
  -webkit-user-select: none;
380
  -moz-user-select: none;
381
  background: rgba(0,0,0,0.05);
382
/*  background: #a0a0a0;*/
383
  border-radius: 6px;
384
  width: 500px;
385
  height: 500px;
386
  -webkit-box-sizing: border-box;
387
  -moz-box-sizing: border-box;
388
  box-sizing: border-box; }
389
  .game-container .game-message{
390
    display: none;
391
    position: absolute;
392
    top: 0;
393
    right: 0;
394
    bottom: 0;
395
    left: 0;
396
    background: rgba(255,255,255,0.9);
397
    z-index: 100;
398
    text-align: center;
399
    -webkit-animation: fade-in 800ms ease 1200ms;
400
    -moz-animation: fade-in 800ms ease 1200ms;
401
    animation: fade-in 800ms ease 1200ms;
402
    -webkit-animation-fill-mode: both;
403
    -moz-animation-fill-mode: both;
404
    animation-fill-mode: both; }
405
    .game-container .game-message p {
406
      font-size: 60px;
407
      font-weight: bold;
408
      height: 60px;
409
      line-height: 60px;
410
      margin-top: 222px; }
411
    .game-container .game-message .lower {
412
      display: block;
413
      margin-top: 59px; }
414
    .game-container .game-message a {
415
      display: inline-block;
416
      background: #f0f;
417
      border-radius: 3px;
418
      padding: 0 20px;
419
      text-decoration: none;
420
      color: #f9f6f2;
421
      height: 40px;
422
      line-height: 42px;
423
      margin-left: 9px; }
424
      .game-container .game-message a.keep-playing-button {
425
        display: none; }
426
    .game-container .game-message.game-won {
427
      background: rgba(237, 194, 46, 0.5);
428
      color: #f9f6f2; }
429
      .game-container .game-message.game-won a.keep-playing-button {
430
        display: inline-block; }
431
    .game-container .game-message.game-won, .game-container .game-message.game-over {
432
      display: block; }
433

434
.grid-container {
435
  position: absolute;
436
  z-index: 1; }
437

438
.grid-row {
439
  margin-bottom: 15px; }
440
  .grid-row:last-child {
441
    margin-bottom: 0; }
442
  .grid-row:after {
443
    content: "";
444
    display: block;
445
    clear: both; }
446

447
.grid-cell {
448
  width: 106.25px;
449
  height: 106.25px;
450
  margin-right: 15px;
451
  float: left;
452
  border-radius: 3px;
453
  background: rgba(255,255,255,0.8);
454
/*  background: rgba(238, 228, 218, 0.35);*/
455
 }
456
  .grid-cell:last-child {
457
    margin-right: 0; }
458

459
.tile-container {
460
  position: absolute;
461
  z-index: 2; }
462

463
.tile, .tile .tile-inner {
464
  width: 107px;
465
  height: 107px;
466
  -webkit-transform: translate3d(0, 0, 0);  
467
  line-height: 116.25px; }
468
.tile.tile-position-1-1 {
469
  -webkit-transform: translate(0px, 0px);
470
  -moz-transform: translate(0px, 0px);
471
  transform: translate(0px, 0px); }
472
.tile.tile-position-1-2 {
473
  -webkit-transform: translate(0px, 121px);
474
  -moz-transform: translate(0px, 121px);
475
  transform: translate(0px, 121px); }
476
.tile.tile-position-1-3 {
477
  -webkit-transform: translate(0px, 242px);
478
  -moz-transform: translate(0px, 242px);
479
  transform: translate(0px, 242px); }
480
.tile.tile-position-1-4 {
481
  -webkit-transform: translate(0px, 363px);
482
  -moz-transform: translate(0px, 363px);
483
  transform: translate(0px, 363px); }
484
.tile.tile-position-2-1 {
485
  -webkit-transform: translate(121px, 0px);
486
  -moz-transform: translate(121px, 0px);
487
  transform: translate(121px, 0px); }
488
.tile.tile-position-2-2 {
489
  -webkit-transform: translate(121px, 121px);
490
  -moz-transform: translate(121px, 121px);
491
  transform: translate(121px, 121px); }
492
.tile.tile-position-2-3 {
493
  -webkit-transform: translate(121px, 242px);
494
  -moz-transform: translate(121px, 242px);
495
  transform: translate(121px, 242px); }
496
.tile.tile-position-2-4 {
497
  -webkit-transform: translate(121px, 363px);
498
  -moz-transform: translate(121px, 363px);
499
  transform: translate(121px, 363px); }
500
.tile.tile-position-3-1 {
501
  -webkit-transform: translate(242px, 0px);
502
  -moz-transform: translate(242px, 0px);
503
  transform: translate(242px, 0px); }
504
.tile.tile-position-3-2 {
505
  -webkit-transform: translate(242px, 121px);
506
  -moz-transform: translate(242px, 121px);
507
  transform: translate(242px, 121px); }
508
.tile.tile-position-3-3 {
509
  -webkit-transform: translate(242px, 242px);
510
  -moz-transform: translate(242px, 242px);
511
  transform: translate(242px, 242px); }
512
.tile.tile-position-3-4 {
513
  -webkit-transform: translate(242px, 363px);
514
  -moz-transform: translate(242px, 363px);
515
  transform: translate(242px, 363px); }
516
.tile.tile-position-4-1 {
517
  -webkit-transform: translate(363px, 0px);
518
  -moz-transform: translate(363px, 0px);
519
  transform: translate(363px, 0px); }
520
.tile.tile-position-4-2 {
521
  -webkit-transform: translate(363px, 121px);
522
  -moz-transform: translate(363px, 121px);
523
  transform: translate(363px, 121px); }
524
.tile.tile-position-4-3 {
525
  -webkit-transform: translate(363px, 242px);
526
  -moz-transform: translate(363px, 242px);
527
  transform: translate(363px, 242px); }
528
.tile.tile-position-4-4 {
529
  -webkit-transform: translate(363px, 363px);
530
  -moz-transform: translate(363px, 363px);
531
  transform: translate(363px, 363px); }
532

533
.tile {
534
  color: rgba(0,0,0,0);
535
  position: absolute;
536
  -webkit-transition: 100ms ease-in-out;
537
  -moz-transition: 100ms ease-in-out;
538
  transition: 100ms ease-in-out;
539
  -webkit-transition-property: -webkit-transform;
540
  -moz-transition-property: -moz-transform;
541
  transition-property: transform; }
542
  .tile .tile-inner {
543
    border-radius: 3px;
544
    background: #eee4da;
545
    text-align: center;
546
    font-weight: bold;
547
    z-index: 10;
548
    font-size: 55px; }
549
  .tile.tile-2 .tile-inner {
550
    background: #f0f url('../img/212/doge-wink-212.gif');
551
    background-size: cover;
552
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
553
    
554
  .tile.tile-4 .tile-inner {
555
    background: #f0f url('../img/212/doge-shake-space-212.gif');
556
    background-size: cover;    
557
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
558
    
559
  .tile.tile-8 .tile-inner {
560
    background: #f0f url('../img/212/doge-peepers-212.gif');
561
    background-size: cover;}
562
    
563
  .tile.tile-16 .tile-inner {
564
    background: #f0f url('../img/212/doge-prizza-212.gif');
565
    background-size: cover;}
566
    
567
  .tile.tile-32 .tile-inner {
568
    background: #f0f url('../img/212/doge-hat-212.gif');
569
    background-size: cover;}
570
    
571
  .tile.tile-64 .tile-inner {
572
    background: #f0f url('../img/212/doge-gradient-212.gif');
573
    background-size: cover;}
574
    
575
  .tile.tile-128 .tile-inner {
576
    background: #f0f url('../img/212/doge-fat-212.gif');
577
    background-size: cover;
578
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
579
    font-size: 45px; }
580
    @media screen and (max-width: 480px) {
581
      .tile.tile-128 .tile-inner {
582
        font-size: 25px; } }
583
  .tile.tile-256 .tile-inner {
584

585
    background: #f0f url('../img/212/doge-rainbow-212.gif');
586
    background-size: cover;
587
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
588
    font-size: 45px; }
589
    @media screen and (max-width: 480px) {
590
      .tile.tile-256 .tile-inner {
591
        font-size: 25px; } }
592
  .tile.tile-512 .tile-inner {
593

594
    background: #f0f url('../img/212/doge-sunglasses-212.gif');
595
    background-size: cover;
596
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
597
    font-size: 45px; }
598
    @media screen and (max-width: 480px) {
599
      .tile.tile-512 .tile-inner {
600
        font-size: 25px; } }
601
  .tile.tile-1024 .tile-inner {
602
    background: #f0f url('../img/212/doge-derp-212.gif');
603
    background-size: cover;
604
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
605
    font-size: 35px; }
606
    @media screen and (max-width: 480px) {
607
      .tile.tile-1024 .tile-inner {
608
        font-size: 15px; } }
609
  .tile.tile-2048 .tile-inner {
610

611
    background: #f0f url('../img/212/doge-shake-212.gif');
612
    background-size: cover;
613
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
614
    font-size: 35px; }
615
    @media screen and (max-width: 480px) {
616
      .tile.tile-2048 .tile-inner {
617
        font-size: 15px; } }
618
  .tile.tile-super .tile-inner {
619

620
    background: #f0f url('../img/212/doge-derp-212.gif');
621
    background-size: cover;    
622
    font-size: 30px; }
623
    @media screen and (max-width: 480px) {
624
      .tile.tile-super .tile-inner {
625
        font-size: 10px; } }
626

627
@-webkit-keyframes appear {
628
  0% {
629
    opacity: 0;
630
    -webkit-transform: scale(0);
631
    -moz-transform: scale(0);
632
    transform: scale(0); }
633

634
  100% {
635
    opacity: 1;
636
    -webkit-transform: scale(1);
637
    -moz-transform: scale(1);
638
    transform: scale(1); } }
639

640
@-moz-keyframes appear {
641
  0% {
642
    opacity: 0;
643
    -webkit-transform: scale(0);
644
    -moz-transform: scale(0);
645
    transform: scale(0); }
646

647
  100% {
648
    opacity: 1;
649
    -webkit-transform: scale(1);
650
    -moz-transform: scale(1);
651
    transform: scale(1); } }
652

653
@keyframes appear {
654
  0% {
655
    opacity: 0;
656
    -webkit-transform: scale(0);
657
    -moz-transform: scale(0);
658
    transform: scale(0); }
659

660
  100% {
661
    opacity: 1;
662
    -webkit-transform: scale(1);
663
    -moz-transform: scale(1);
664
    transform: scale(1); } }
665

666
.tile-new .tile-inner {
667
  -webkit-animation: appear 200ms ease 100ms;
668
  -moz-animation: appear 200ms ease 100ms;
669
  animation: appear 200ms ease 100ms;
670
  -webkit-animation-fill-mode: backwards;
671
  -moz-animation-fill-mode: backwards;
672
  animation-fill-mode: backwards; }
673

674
@-webkit-keyframes pop {
675
  0% {
676
    -webkit-transform: scale(0);
677
    -moz-transform: scale(0);
678
    transform: scale(0); }
679

680
  50% {
681
    -webkit-transform: scale(1.2);
682
    -moz-transform: scale(1.2);
683
    transform: scale(1.2); }
684

685
  100% {
686
    -webkit-transform: scale(1);
687
    -moz-transform: scale(1);
688
    transform: scale(1); } }
689

690
@-moz-keyframes pop {
691
  0% {
692
    -webkit-transform: scale(0);
693
    -moz-transform: scale(0);
694
    transform: scale(0); }
695

696
  50% {
697
    -webkit-transform: scale(1.2);
698
    -moz-transform: scale(1.2);
699
    transform: scale(1.2); }
700

701
  100% {
702
    -webkit-transform: scale(1);
703
    -moz-transform: scale(1);
704
    transform: scale(1); } }
705

706
@keyframes pop {
707
  0% {
708
    -webkit-transform: scale(0);
709
    -moz-transform: scale(0);
710
    transform: scale(0); }
711

712
  50% {
713
    -webkit-transform: scale(1.2);
714
    -moz-transform: scale(1.2);
715
    transform: scale(1.2); }
716

717
  100% {
718
    -webkit-transform: scale(1);
719
    -moz-transform: scale(1);
720
    transform: scale(1); } }
721

722
.tile-merged .tile-inner {
723
  z-index: 20;
724
  -webkit-animation: pop 200ms ease 100ms;
725
  -moz-animation: pop 200ms ease 100ms;
726
  animation: pop 200ms ease 100ms;
727
  -webkit-animation-fill-mode: backwards;
728
  -moz-animation-fill-mode: backwards;
729
  animation-fill-mode: backwards; }
730

731
.game-intro {
732
  margin-bottom: 0; }
733

734
.game-explanation, .shout-out {
735
  margin-top: 0px;
736
  text-align: center;
737
  font-size: 14px;}
738

739

740

741
@media screen and (max-width: 480px) {
742
  html, body {
743
    font-size: 15px; }
744

745
  body {
746
    margin: 20px 0;
747
    padding: 0 20px; }
748

749
  .modal{
750
	width:280px;}
751

752
  h1.title {
753
    font-size: 25px;
754
    margin-top: 15px; }
755

756
  .container {
757
    width: 280px;
758
    margin: 0 auto; }
759

760
  .score-container, .best-container {
761
    margin-top: 0;
762
    padding: 15px 10px;
763
    min-width: 40px; }
764

765
  .heading {
766
    margin-bottom: 10px; }
767

768
  .game-explanation {
769
    display:none;}
770
    
771
  .shout-out, .game-explanation{
772
    margin-top:10px;
773
    height:0;
774
    padding-top:10px;
775
    padding-bottom:20px;
776
  /*  font-size:12px;*/
777
  }
778

779
  .game-container {
780
    margin-top: 40px;
781
    position: relative;
782
    padding: 10px;
783
    cursor: default;
784
    -webkit-touch-callout: none;
785
    -webkit-user-select: none;
786
    -moz-user-select: none;
787
    border-radius: 6px;
788
    width: 280px;
789
    height: 280px;
790
    -webkit-box-sizing: border-box;
791
    -moz-box-sizing: border-box;
792
    box-sizing: border-box; }
793
    .game-container .game-message {
794
      display: none;
795
      position: absolute;
796
      top: 0;
797
      right: 0;
798
      bottom: 0;
799
      left: 0;
800
      z-index: 100;
801
      text-align: center;
802
      -webkit-animation: fade-in 800ms ease;
803
      -moz-animation: fade-in 800ms ease;
804
      animation: fade-in 800ms ease;
805
      -webkit-animation-fill-mode: both;
806
      -moz-animation-fill-mode: both;
807
      animation-fill-mode: both; }
808
      .game-container .game-message p {
809
        font-size: 60px;
810
        font-weight: bold;
811
        height: 60px;
812
        line-height: 60px;
813
        margin-top: 222px; }
814
      .game-container .game-message .lower {
815
        display: block;
816
        margin-top: 59px; }
817
      .game-container .game-message a {
818
        display: inline-block;
819
        border-radius: 3px;
820
        padding: 0 20px;
821
        text-decoration: none;
822
        height: 40px;
823
        line-height: 42px;
824
        margin-left: 9px; }
825
        .game-container .game-message a.keep-playing-button {
826
          display: none; }
827
      .game-container .game-message.game-won {
828
        background: rgba(237, 194, 46, 0.5);}
829
        .game-container .game-message.game-won a.keep-playing-button {
830
          display: inline-block; }
831
      .game-container .game-message.game-won, .game-container .game-message.game-over {
832
        display: block; }
833

834
  .grid-container {
835
    position: absolute;
836
    z-index: 1; }
837

838
  .grid-row {
839
    margin-bottom: 10px; }
840
    .grid-row:last-child {
841
      margin-bottom: 0; }
842
    .grid-row:after {
843
      content: "";
844
      display: block;
845
      clear: both; }
846

847
  .grid-cell {
848
    width: 57.5px;
849
    height: 57.5px;
850
    margin-right: 10px;
851
    float: left;
852
    border-radius: 3px;}
853
    .grid-cell:last-child {
854
      margin-right: 0; }
855

856
  .tile-container {
857
    position: absolute;
858
    z-index: 2; }
859

860
  .tile, .tile .tile-inner {
861
    width: 58px;
862
    height: 58px;
863
    line-height: 67.5px; }
864
  .tile.tile-position-1-1 {
865
    -webkit-transform: translate(0px, 0px);
866
    -moz-transform: translate(0px, 0px);
867
    transform: translate(0px, 0px); }
868
  .tile.tile-position-1-2 {
869
    -webkit-transform: translate(0px, 67px);
870
    -moz-transform: translate(0px, 67px);
871
    transform: translate(0px, 67px); }
872
  .tile.tile-position-1-3 {
873
    -webkit-transform: translate(0px, 135px);
874
    -moz-transform: translate(0px, 135px);
875
    transform: translate(0px, 135px); }
876
  .tile.tile-position-1-4 {
877
    -webkit-transform: translate(0px, 202px);
878
    -moz-transform: translate(0px, 202px);
879
    transform: translate(0px, 202px); }
880
  .tile.tile-position-2-1 {
881
    -webkit-transform: translate(67px, 0px);
882
    -moz-transform: translate(67px, 0px);
883
    transform: translate(67px, 0px); }
884
  .tile.tile-position-2-2 {
885
    -webkit-transform: translate(67px, 67px);
886
    -moz-transform: translate(67px, 67px);
887
    transform: translate(67px, 67px); }
888
  .tile.tile-position-2-3 {
889
    -webkit-transform: translate(67px, 135px);
890
    -moz-transform: translate(67px, 135px);
891
    transform: translate(67px, 135px); }
892
  .tile.tile-position-2-4 {
893
    -webkit-transform: translate(67px, 202px);
894
    -moz-transform: translate(67px, 202px);
895
    transform: translate(67px, 202px); }
896
  .tile.tile-position-3-1 {
897
    -webkit-transform: translate(135px, 0px);
898
    -moz-transform: translate(135px, 0px);
899
    transform: translate(135px, 0px); }
900
  .tile.tile-position-3-2 {
901
    -webkit-transform: translate(135px, 67px);
902
    -moz-transform: translate(135px, 67px);
903
    transform: translate(135px, 67px); }
904
  .tile.tile-position-3-3 {
905
    -webkit-transform: translate(135px, 135px);
906
    -moz-transform: translate(135px, 135px);
907
    transform: translate(135px, 135px); }
908
  .tile.tile-position-3-4 {
909
    -webkit-transform: translate(135px, 202px);
910
    -moz-transform: translate(135px, 202px);
911
    transform: translate(135px, 202px); }
912
  .tile.tile-position-4-1 {
913
    -webkit-transform: translate(202px, 0px);
914
    -moz-transform: translate(202px, 0px);
915
    transform: translate(202px, 0px); }
916
  .tile.tile-position-4-2 {
917
    -webkit-transform: translate(202px, 67px);
918
    -moz-transform: translate(202px, 67px);
919
    transform: translate(202px, 67px); }
920
  .tile.tile-position-4-3 {
921
    -webkit-transform: translate(202px, 135px);
922
    -moz-transform: translate(202px, 135px);
923
    transform: translate(202px, 135px); }
924
  .tile.tile-position-4-4 {
925
    -webkit-transform: translate(202px, 202px);
926
    -moz-transform: translate(202px, 202px);
927
    transform: translate(202px, 202px); }
928

929
    .tile.tile-2 .tile-inner {
930
      background: #f0f url('../img/114/doge-wink-114.gif');
931
      background-size: cover;
932
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
933
    
934
    .tile.tile-4 .tile-inner {
935
      background: #f0f url('../img/114/doge-shake-space-114.gif');
936
      background-size: cover;    
937
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
938
    
939
    .tile.tile-8 .tile-inner {
940
      background: #f0f url('../img/114/doge-peepers-114.gif');
941
      background-size: cover;}
942
    
943
    .tile.tile-16 .tile-inner {
944
      background: #f0f url('../img/114/doge-prizza-114.gif');
945
      background-size: cover;}
946
    
947
    .tile.tile-32 .tile-inner {
948
      background: #f0f url('../img/114/doge-hat-114.gif');
949
      background-size: cover;}
950
    
951
    .tile.tile-64 .tile-inner {
952
      background: #f0f url('../img/114/doge-gradient-114.gif');
953
      background-size: cover;}
954
    
955
    .tile.tile-128 .tile-inner {
956
      background: #f0f url('../img/114/doge-fat-114.gif');
957
      background-size: cover;
958
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
959
      font-size: 45px; }
960
      @media screen and (max-width: 480px) {
961
        .tile.tile-128 .tile-inner {
962
          font-size: 25px; } }
963
    .tile.tile-256 .tile-inner {
964

965
      background: #f0f url('../img/114/doge-rainbow-114.gif');
966
      background-size: cover;
967
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
968
      font-size: 45px; }
969
      @media screen and (max-width: 480px) {
970
        .tile.tile-256 .tile-inner {
971
          font-size: 25px; } }
972
    .tile.tile-512 .tile-inner {
973

974
      background: #f0f url('../img/114/doge-sunglasses-114.gif');
975
      background-size: cover;
976
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
977
      font-size: 45px; }
978
      @media screen and (max-width: 480px) {
979
        .tile.tile-512 .tile-inner {
980
          font-size: 25px; } }
981
    .tile.tile-1024 .tile-inner {
982
      background: #f0f url('../img/114/doge-derp-114.gif');
983
      background-size: cover;
984
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
985
      font-size: 35px; }
986
      @media screen and (max-width: 480px) {
987
        .tile.tile-1024 .tile-inner {
988
          font-size: 15px; } }
989
    .tile.tile-2048 .tile-inner {
990

991
      background: #f0f url('../img/114/doge-shake-114.gif');
992
      background-size: cover;
993
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
994
      font-size: 35px; }
995
      @media screen and (max-width: 480px) {
996
        .tile.tile-2048 .tile-inner {
997
          font-size: 15px; } }
998
    .tile.tile-super .tile-inner {
999

1000
      background: #f0f url('../img/114/doge-derp-114.gif');
1001
      background-size: cover;    
1002
      font-size: 30px; }
1003
      @media screen and (max-width: 480px) {
1004
        .tile.tile-super .tile-inner {
1005
          font-size: 10px; } }
1006

1007

1008
    .footer{
1009
      width:188px;}
1010

1011
    #twitter-widget-0 {
1012
      position: relative;
1013
      top:5px;
1014
    }
1015
    
1016
    .COINWIDGETCOM_CONTAINER {
1017
      display:none !important;
1018
    }
1019

1020
    .game-container .info p {
1021
      font-size: 12px;
1022
      padding:5px 10px 5px 10px;
1023
    }
1024

1025
  .game-container {
1026
    margin-top: 20px; }
1027

1028
  .tile .tile-inner {
1029
    font-size: 35px; }
1030

1031
  .doge-says p {
1032
    font-size: 30px !important;
1033
    height: 30px !important;
1034
    line-height: 30px !important;}
1035

1036
  .game-message p {
1037
    font-size: 30px !important;
1038
    height: 30px !important;
1039
    line-height: 30px !important;
1040
    margin-top: 90px !important; }
1041
  .game-message .lower {
1042
    margin-top: 30px !important; } }
1043

1044
Product

Resources

Company
