CoCalc -- games.css

GitHub Repository: TheGameCenter/TheGameCenter.github.io
Path: blob/main/assets/css/games.css
⁷⁰¹⁷ views
1
* {
2
    margin: 0;
3
    padding: 0;
4
}
5

6
body {
7
    box-sizing: border-box;
8
    word-wrap: break-word;
9
    background: #0c192c;
10
    color: #fff;
11
    font-family: sans-serif;
12
    font-size: 1rem;
13
    scroll-behavior: smooth;
14
    scrollbar-width: thin;
15
}
16

17

18
                     ::-webkit-scrollbar {
19
                    width: 12px;
20
                    height: 12px;
21
                    }
22
                    
23
                    ::-webkit-scrollbar-track {
24
                    background: #f5f5f5;
25
                    border-radius: 10px;
26
                    }
27
                    
28
                    ::-webkit-scrollbar-thumb {
29
                    border-radius: 10px;
30
                    background: rgb(66, 66, 66);  
31
                    }
32
                    
33
                    ::-webkit-scrollbar-thumb:hover {
34
                    background: rgba(0, 0, 0, 0.836);  
35
                    }
36

37
        a:link {
38
            text-decoration: none!important;
39
            list-style: none!important;
40
            color: inherit!important;
41
        }
42

43
        a:visited {
44
            text-decoration: none!important;
45
            list-style: none!important;
46
            color: inherit!important; 
47
        }
48

49
            .navbar {
50
                width: 100%!important;
51
                position: sticky!important;
52
                top: 0!important;
53
                z-index: 30!important;
54
            }
55

56
.navbar .navbar-shape {
57
    padding: 1.5em;
58
    background: rgba(0, 0, 0, 0.575);
59
}
60

61
.navbar-text {
62
    word-spacing: 3em;
63
    font-size: 1.3rem;
64
    text-align: center;
65
    text-transform: uppercase;
66
    font-weight: 550;
67
    transform: translateY(-1.55em);
68
    color: #2875da!important;
69
}
70

71
    .navbar-text span.text-home:hover {
72
        color: #fff!important;
73
        filter: drop-shadow(0 0 5px #fff);
74
        transition: all 0.125s ease-in-out;
75

76
    }
77

78
    .navbar-text span.text-games:hover {
79
        color: #fff!important;
80
        filter: drop-shadow(0 0 5px #fff);
81
        transition: all 0.125s ease-in-out;
82
    }
83

84

85

86
.container .safe-area {
87
    background: rgba(0, 0, 0, 0.295);
88
    border: 3px solid rgba(0, 0, 0, 0.295);
89
    border-radius: 5px;
90
    width: 95vw;
91
    height: 95vh;
92
    margin-top: 1em; margin-right: 3em; margin-bottom: 3em; margin-left: 3em;
93
    z-index: 1!important;
94
}
95

96
 a.button {
97
    padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 15px;
98
    background: rgb(214, 9, 214);
99
    border-radius: 5px;
100
 }
101

102
 a.button:hover {
103
    background:rgb(182, 7, 182);
104
    transition: all 0.1s ease-in-out;
105
 }
106

107
    .radio-tile1 {
108
        z-index: 9;
109
    }
110

111
    .radio-tile1 .tile-design {
112
        background: #fff;
113
        padding-top: 10em;
114
        padding-right: 10em;
115
        padding-bottom: 5em;
116
        padding-left: 10em;
117
        border-radius: 5px;
118
        width: 5em;
119
        min-width: 5em;
120
    }
121

122
    .radio-tile1 div#tile1 {
123
        position: absolute;
124
        transform: translate(6em, 2em);
125
    }
126

127
    .radio-tile1 div.tile-img-bg {
128
        background: gray;
129
        padding-top: 1.2em;
130
        padding-right: 23.8em;
131
        padding-bottom: 6em;
132
        padding-left: 1.2em;
133
        border-top-left-radius: 5px;
134
        border-top-right-radius: 5px;
135
    }
136

137
    .radio-tile1 span.title {
138
        color: #000;
139
        position: absolute;
140
        transform: translate(6em, 9em);
141
        font-size: 1.05rem;
142
        font-weight: 550;
143
    }
144

145
    .radio-tile1 span.description {
146
        color: rgb(48, 47, 47);
147
        position: absolute;
148
        transform: translate(6.5em, 11em);
149
    }
150

151
    .radio-tile1 span.description:hover {
152
        color: black;
153
        transition: color 0.3s ease-in-out;
154
    }
155

156
    .radio-tile1 span.performance {
157
        color: rgb(3, 212, 3);
158
        position: absolute;
159
        font-weight: 600;
160
        transform: translate(6.5em, 15em);
161
    }
162

163
    .radio-tile1 a.button {
164
        position: absolute;
165
        transform: translate(24em, 14em);
166
    }
167

168

169
    
170

171

172

173

174

175

176

177

178
    .radio-tile2 {
179
        z-index: 9;
180
        transform: translate(28em, 0em);
181
    }
182

183
    .radio-tile2 .tile-design {
184
        background: #fff;
185
        padding-top: 10em;
186
        padding-right: 10em;
187
        padding-bottom: 5em;
188
        padding-left: 10em;
189
        border-radius: 5px;
190
        width: 5em;
191
        min-width: 5em;
192
    }
193

194
    .radio-tile2 div#tile1 {
195
        position: absolute;
196
        transform: translate(6em, 2em);
197
    }
198

199
    .radio-tile2 div.tile-img-bg {
200
        background: gray;
201
        padding-top: 1.2em;
202
        padding-right: 23.8em;
203
        padding-bottom: 6em;
204
        padding-left: 1.2em;
205
        border-top-left-radius: 5px;
206
        border-top-right-radius: 5px;
207
    }
208

209
    .radio-tile2 span.title {
210
        color: #000;
211
        position: absolute;
212
        transform: translate(6em, 9em);
213
        font-size: 1.05rem;
214
        font-weight: 550;
215
    }
216

217
    .radio-tile2 span.description {
218
        color: rgb(48, 47, 47);
219
        position: absolute;
220
        transform: translate(6.5em, 11em);
221
    }
222

223
    .radio-tile2 span.description:hover {
224
        color: black;
225
        transition: color 0.3s ease-in-out;
226
    }
227

228
    .radio-tile2 span.performance {
229
        color: rgb(3, 212, 3);
230
        position: absolute;
231
        font-weight: 600;
232
        transform: translate(6.5em, 15em);
233
    }
234

235
    .radio-tile2 a.button {
236
        position: absolute;
237
        transform: translate(24em, 14em);
238
    }
239

240

241

242

243

244

245

246

247

248
    .radio-tile3 {
249
        z-index: 9;
250
        transform: translate(56em, 0em);
251
    }
252

253
    .radio-tile3 .tile-design {
254
        background: #fff;
255
        padding-top: 10em;
256
        padding-right: 10em;
257
        padding-bottom: 5em;
258
        padding-left: 10em;
259
        border-radius: 5px;
260
        width: 5em;
261
        min-width: 5em;
262
    }
263

264
    .radio-tile3 div#tile1 {
265
        position: absolute;
266
        transform: translate(6em, 2em);
267
    }
268

269
    .radio-tile3 div.tile-img-bg {
270
        background: gray;
271
        padding-top: 1.2em;
272
        padding-right: 23.8em;
273
        padding-bottom: 6em;
274
        padding-left: 1.2em;
275
        border-top-left-radius: 5px;
276
        border-top-right-radius: 5px;
277
    }
278

279
    .radio-tile3 span.title {
280
        color: #000;
281
        position: absolute;
282
        transform: translate(6em, 9em);
283
        font-size: 1.05rem;
284
        font-weight: 550;
285
    }
286

287
    .radio-tile3 span.description {
288
        color: rgb(48, 47, 47);
289
        position: absolute;
290
        transform: translate(6.5em, 11em);
291
    }
292

293
    .radio-tile3 span.description:hover {
294
        color: black;
295
        transition: color 0.3s ease-in-out;
296
    }
297

298
    .radio-tile3 span.performance {
299
        color: rgb(3, 212, 3);
300
        position: absolute;
301
        font-weight: 600;
302
        transform: translate(6.5em, 15em);
303
    }
304

305
    .radio-tile3 a.button {
306
        position: absolute;
307
        transform: translate(24em, 14em);
308
    }
309

310

311

312

313

314

315
    .radio-tile4 {
316
        z-index: 9;
317
        transform: translate(83.5em, 0em);
318
    }
319

320
    .radio-tile4 .tile-design {
321
        background: #fff;
322
        padding-top: 10em;
323
        padding-right: 10em;
324
        padding-bottom: 5em;
325
        padding-left: 10em;
326
        border-radius: 5px;
327
        width: 5em;
328
        min-width: 5em;
329
    }
330

331
    .radio-tile4 div#tile1 {
332
        position: absolute;
333
        transform: translate(6em, 2em);
334
    }
335

336
    .radio-tile4 div.tile-img-bg {
337
        background: gray;
338
        padding-top: 1.2em;
339
        padding-right: 23.8em;
340
        padding-bottom: 6em;
341
        padding-left: 1.2em;
342
        border-top-left-radius: 5px;
343
        border-top-right-radius: 5px;
344
    }
345

346
    .radio-tile4 span.title {
347
        color: #000;
348
        position: absolute;
349
        transform: translate(6em, 9em);
350
        font-size: 1.05rem;
351
        font-weight: 550;
352
    }
353

354
    .radio-tile4 span.description {
355
        color: rgb(48, 47, 47);
356
        position: absolute;
357
        transform: translate(6.5em, 11em);
358
    }
359

360
    .radio-tile4 span.description:hover {
361
        color: black;
362
        transition: color 0.3s ease-in-out;
363
    }
364

365
    .radio-tile4 span.performance {
366
        color: rgb(203, 206, 30);
367
        position: absolute;
368
        font-weight: 600;
369
        transform: translate(6.5em, 15em);
370
    }
371

372
    .radio-tile4 a.button {
373
        position: absolute;
374
        transform: translate(24em, 14em);
375
    }
376

377

378
    .radio-tile5 {
379
        z-index: 9;
380
        transform: translate(0em, 17.5em);
381
    }
382

383
    .radio-tile5 .tile-design {
384
        background: #fff;
385
        padding-top: 10em;
386
        padding-right: 10em;
387
        padding-bottom: 5em;
388
        padding-left: 10em;
389
        border-radius: 5px;
390
        width: 5em;
391
        min-width: 5em;
392
    }
393

394
    .radio-tile5 div#tile1 {
395
        position: absolute;
396
        transform: translate(6em, 2em);
397
    }
398

399
    .radio-tile5 div.tile-img-bg {
400
        background: gray;
401
        padding-top: 1.2em;
402
        padding-right: 23.8em;
403
        padding-bottom: 6em;
404
        padding-left: 1.2em;
405
        border-top-left-radius: 5px;
406
        border-top-right-radius: 5px;
407
    }
408

409
    .radio-tile5 span.title {
410
        color: #000;
411
        position: absolute;
412
        transform: translate(6em, 9em);
413
        font-size: 1.05rem;
414
        font-weight: 550;
415
    }
416

417
    .radio-tile5 span.description {
418
        color: rgb(48, 47, 47);
419
        position: absolute;
420
        transform: translate(6.5em, 11em);
421
    }
422

423
    .radio-tile5 span.description:hover {
424
        color: black;
425
        transition: color 0.3s ease-in-out;
426
    }
427

428
    .radio-tile5 span.performance {
429
        color: rgb(3, 212, 3);
430
        position: absolute;
431
        font-weight: 600;
432
        transform: translate(6.5em, 15em);
433
    }
434

435
    .radio-tile5 a.button {
436
        position: absolute;
437
        transform: translate(24em, 14em);
438
    }
439

440

441
    
442

443

444

445

446

447

448

449

450
    .radio-tile6 {
451
        z-index: 9;
452
        transform: translate(28em, 17.5em);
453
    }
454

455
    .radio-tile6 .tile-design {
456
        background: #fff;
457
        padding-top: 10em;
458
        padding-right: 10em;
459
        padding-bottom: 5em;
460
        padding-left: 10em;
461
        border-radius: 5px;
462
        width: 5em;
463
        min-width: 5em;
464
    }
465

466
    .radio-tile6 div#tile1 {
467
        position: absolute;
468
        transform: translate(6em, 2em);
469
    }
470

471
    .radio-tile6 div.tile-img-bg {
472
        background: gray;
473
        padding-top: 1.2em;
474
        padding-right: 23.8em;
475
        padding-bottom: 6em;
476
        padding-left: 1.2em;
477
        border-top-left-radius: 5px;
478
        border-top-right-radius: 5px;
479
    }
480

481
    .radio-tile6 span.title {
482
        color: #000;
483
        position: absolute;
484
        transform: translate(6em, 9em);
485
        font-size: 1.05rem;
486
        font-weight: 550;
487
    }
488

489
    .radio-tile6 span.description {
490
        color: rgb(48, 47, 47);
491
        position: absolute;
492
        transform: translate(6.5em, 11em);
493
    }
494

495
    .radio-tile6 span.description:hover {
496
        color: black;
497
        transition: color 0.3s ease-in-out;
498
    }
499

500
    .radio-tile6 span.performance {
501
        color: rgb(3, 212, 3);
502
        position: absolute;
503
        font-weight: 600;
504
        transform: translate(6.5em, 15em);
505
    }
506

507
    .radio-tile6 a.button {
508
        position: absolute;
509
        transform: translate(24em, 14em);
510
    }
511

512

513

514

515

516

517

518

519

520
    .radio-tile7 {
521
        z-index: 9;
522
        transform: translate(56em, 17.5em);
523
    }
524

525
    .radio-tile7 .tile-design {
526
        background: #fff;
527
        padding-top: 10em;
528
        padding-right: 10em;
529
        padding-bottom: 5em;
530
        padding-left: 10em;
531
        border-radius: 5px;
532
        width: 5em;
533
        min-width: 5em;
534
    }
535

536
    .radio-tile7 div#tile1 {
537
        position: absolute;
538
        transform: translate(6em, 2em);
539
    }
540

541
    .radio-tile7 div.tile-img-bg {
542
        background: gray;
543
        padding-top: 1.2em;
544
        padding-right: 23.8em;
545
        padding-bottom: 6em;
546
        padding-left: 1.2em;
547
        border-top-left-radius: 5px;
548
        border-top-right-radius: 5px;
549
    }
550

551
    .radio-tile7 span.title {
552
        color: #000;
553
        position: absolute;
554
        transform: translate(6em, 9em);
555
        font-size: 1.05rem;
556
        font-weight: 550;
557
    }
558

559
    .radio-tile7 span.description {
560
        color: rgb(48, 47, 47);
561
        position: absolute;
562
        transform: translate(6.5em, 11em);
563
    }
564

565
    .radio-tile7 span.description:hover {
566
        color: black;
567
        transition: color 0.3s ease-in-out;
568
    }
569

570
    .radio-tile7 span.performance {
571
        color: rgb(3, 212, 3);
572
        position: absolute;
573
        font-weight: 600;
574
        transform: translate(6.5em, 15em);
575
    }
576

577
    .radio-tile7 a.button {
578
        position: absolute;
579
        transform: translate(24em, 14em);
580
    }
581

582

583

584

585

586

587
    .radio-tile8 {
588
        z-index: 9;
589
        transform: translate(83.5em, 17.5em);
590
    }
591

592
    .radio-tile8 .tile-design {
593
        background: #fff;
594
        padding-top: 10em;
595
        padding-right: 10em;
596
        padding-bottom: 5em;
597
        padding-left: 10em;
598
        border-radius: 5px;
599
        width: 5em;
600
        min-width: 5em;
601
    }
602

603
    .radio-tile8 div#tile1 {
604
        position: absolute;
605
        transform: translate(6em, 2em);
606
    }
607

608
    .radio-tile8 div.tile-img-bg {
609
        background: gray;
610
        padding-top: 1.2em;
611
        padding-right: 23.8em;
612
        padding-bottom: 6em;
613
        padding-left: 1.2em;
614
        border-top-left-radius: 5px;
615
        border-top-right-radius: 5px;
616
    }
617

618
    .radio-tile8 span.title {
619
        color: #000;
620
        position: absolute;
621
        transform: translate(6em, 9em);
622
        font-size: 1.05rem;
623
        font-weight: 550;
624
    }
625

626
    .radio-tile8 span.description {
627
        color: rgb(48, 47, 47);
628
        position: absolute;
629
        transform: translate(6.5em, 11em);
630
    }
631

632
    .radio-tile8 span.description:hover {
633
        color: black;
634
        transition: color 0.3s ease-in-out;
635
    }
636

637
    .radio-tile8 span.performance {
638
        color: rgb(3, 212, 3);
639
        position: absolute;
640
        font-weight: 600;
641
        transform: translate(6.5em, 15em);
642
    }
643

644
    .radio-tile8 a.button {
645
        position: absolute;
646
        transform: translate(24em, 14em);
647
    }
648

649

650

651

652
    .radio-tile9 {
653
        z-index: 9;
654
        transform: translate(0em, 35em);
655
    }
656

657
    .radio-tile9 .tile-design {
658
        background: #fff;
659
        padding-top: 10em;
660
        padding-right: 10em;
661
        padding-bottom: 5em;
662
        padding-left: 10em;
663
        border-radius: 5px;
664
        width: 5em;
665
        min-width: 5em;
666
    }
667

668
    .radio-tile9 div#tile1 {
669
        position: absolute;
670
        transform: translate(6em, 2em);
671
    }
672

673
    .radio-tile9 div.tile-img-bg {
674
        background: gray;
675
        padding-top: 1.2em;
676
        padding-right: 23.8em;
677
        padding-bottom: 6em;
678
        padding-left: 1.2em;
679
        border-top-left-radius: 5px;
680
        border-top-right-radius: 5px;
681
    }
682

683
    .radio-tile9 span.title {
684
        color: #000;
685
        position: absolute;
686
        transform: translate(6em, 9em);
687
        font-size: 1.05rem;
688
        font-weight: 550;
689
    }
690

691
    .radio-tile9 span.description {
692
        color: rgb(48, 47, 47);
693
        position: absolute;
694
        transform: translate(6.5em, 11em);
695
    }
696

697
    .radio-tile9 span.description:hover {
698
        color: black;
699
        transition: color 0.3s ease-in-out;
700
    }
701

702
    .radio-tile9 span.performance {
703
        color: rgb(3, 212, 3);
704
        position: absolute;
705
        font-weight: 600;
706
        transform: translate(6.5em, 15em);
707
    }
708

709
    .radio-tile9 a.button {
710
        position: absolute;
711
        transform: translate(24em, 14em);
712
    }
713

714
    a.note {
715
       color: rgb(223, 223, 223);
716
       text-align: center;
717
       display: flex;
718
       justify-content: center;
719
    }
720

721
    a.old {
722
        color:#438af5!important;
723
        justify-content: center;
724
        text-align: center;
725
        display: flex;
726
    }
727

728
    a.old:hover {
729
        filter: drop-shadow(0 0 0.5px #fff);
730
        color: #fff!important;
731
        transition: all 500ms ease-in-out;
732
    }
733
Product

Resources

Company
