CoCalc -- styles-1755147161.css

GitHub Repository: QuiteAFancyEmerald/Holy-Unblocker
Path: blob/master/views/assets/css/styles-1755147161.css
¹¹¹⁹⁶ views
1
@charset "UTF-8";
2

3
/* -----------------------------------------------
4
/* Authors: QuiteAFancyEmerald, OlyB, and Yoct
5
/* MIT license: http://opensource.org/licenses/MIT
6
/* HU CSS
7
/* ----------------------------------------------- */
8

9
/*
10
Nord Theme (https://nordtheme.com)
11
Guide:
12

13
nord0 - nord3: "Polar Night" (dark greys) (darker to lighter)
14
nord4 - nord6: "Snow Storm" (almost white) (darker to lighter)
15
nord7 - nord10: "Frost" (blue and teal colors) (teal to medium blue)
16
nord11 - nord15: "Aurora" (muted rainbow colors) (red to purple, no blue)
17

18
see https://raw.githubusercontent.com/arcticicestudio/nord-docs/develop/assets/images/nord/repository-color-palettes.svg for colors
19
*/
20

21
/* also includes bootstrap colors */
22

23
/* '~' function hexav(a,b){var da=parseInt(a,16),db=parseInt(b,16),diff=db-da,step=diff/3,dc=da+step,dd=db-step,c=Math.round(dc).toString(16),d=Math.round(dd).toString(16);return[c,d];} */
24

25
:root {
26
  --nord0: #1d232a;
27
  --nord0m1: #2e3440;
28
  --nord0m2: #323946;
29
  --nord0m3: #373d4c;
30
  --nord1: #3b4252;
31
  --nord2: #434c5e;
32
  --nord3: #4c566a;
33
  --nord4: #d8dee9;
34
  --nord5: #e5e9f0;
35
  --nord6: #eceff4;
36
  --nord7: #8fbcbb;
37
  --nord8: #88c0d0;
38
  --nord8lighter: #98d0e0;
39
  --nord9: #81a1c1;
40
  --nord10: #5e81ac;
41
  --nord11: #bf616a;
42
  --nord12: #d08770;
43
  --nord13: #ebcb8b;
44
  --nord14: #a3be8c;
45
  --nord15: #b48ead;
46
  --nord16: #abadb1;
47
  --nord17: #ff5861;
48
  --nord18: #2e3440;
49
  --nord19: rgba(255, 87, 95, 0.569);
50
  --blue: #375a7f;
51
  --indigo: #6610f2;
52
  --purple: #6f42c1;
53
  --pink: #e83e8c;
54
  --red: #e74c3c;
55
  --orange: #fd7e14;
56
  --yellow: #f39c12;
57
  --green: #00bc8c;
58
  --teal: #20c997;
59
  --cyan: #3498db;
60
  --white: #fff;
61
  --gray: #999;
62
  --gray-dark: #303030;
63
  --primary: #375a7f;
64
  --secondary: #444;
65
  --success: #00bc8c;
66
  --info: #3498db;
67
  --warning: #f39c12;
68
  --danger: #e74c3c;
69
  --light: #999;
70
  --dark: #303030;
71
  --dark2: #22262f;
72
  --fancy-dark: rgba(46, 52, 64, 0.2);
73
}
74

75
:root:not(.light) {
76
  --radio-accent: var(--nord8);
77
  --hero-grid-bg: var(--fancy-dark);
78
}
79

80
.light:root {
81
  --nord0: #eceff4;
82
  --nord1: #e5e9f0;
83
  --nord2: #d8dee9;
84
  /* Don't override nord3. */
85
  --nord4: #434c5e;
86
  --nord5: #3b4252;
87
  --nord6: #1d232a;
88
  --nord0m1: #f0f2f7;
89
  --nord0m2: #e8ecf4;
90
  --nord0m3: #e0e5f0;
91
  --html-color: var(--nord5);
92
  --radio-bg: var(--nord2);
93
  --a-color: var(--nord17);
94
  --bigtitle-color: var(--nord17);
95
  --banner-bg: var(--nord2);
96
  --footer-img: url('{{route}}{{/assets/img/waves-light.svg}}');
97
  --footer-grad: var(--nord0m3);
98
  --margin-hover: var(--nord11);
99
  --logo-img: url('{{route}}{{/assets/img/logo-light.webp}}');
100
  /* nord0m3 but with roughly 0.5 opacity in hex. */
101
  --dropdown-bg: #e0e5f080;
102
  /* nord3 but with roughly 0.3 opacity in hex. */
103
  --settings-bg: #4c566a4d;
104
  --settings-border: #e0e0e0;
105
  --settings-color: var(--nord5);
106
  --cseltitle-main-color: var(--nord17);
107
  --close-btn-color: var(--nord11);
108
  --radio-label-color: var(--nord0);
109
  --switch-bg: var(--nord3);
110
  --switch-checked-bg: var(--nord9);
111
  --select-hover-bg: var(--nord0);
112
  --cf-bg: var(--nord0);
113
  --cf-color: var(--nord5);
114
  --csel-input: var(--nord4);
115
  --mac-title-bg: var(--nord2);
116
  --mac-ui-bg: var(--nord17);
117
  --cmd-color: var(--nord5);
118
  --url-color: var(--nord17);
119
  --comment-color: var(--nord6);
120
  --omnibox-bg: var(--nord2);
121
  --ac-bg: var(--nord0m3);
122
  --hero-grad: rgba(233, 220, 220, 0.377);
123
  --box-badge-bg: var(--nord2);
124
  --box-btn-color: var(--dark2);
125
  --glowshadow1: var(--nord11);
126
  --glowshadow2: var(--nord17);
127
  --particles-bg: #ffffff00;
128
  --particles-color: #485163;
129
  /* Same as above but with 0.2 opacity in hex. */
130
  --particles-links: #48516333;
131
  --particles-mv-spd: 0.3;
132
  --particles-op-max: 0.3;
133
  --particles-op-spd: 0.2;
134
  --particles-sz-spd: 0.3;
135
}
136

137
/* -----------------------------------------------
138
/* HU Page Layout / General Styling
139
/* ----------------------------------------------- */
140

141
html {
142
  color: var(--html-color, white);
143
  font-family: 'Rethink Sans', sans-serif;
144
  font-weight: 300;
145
  scroll-behavior: smooth;
146
  text-wrap: balance;
147
  word-break: normal;
148
  overflow-wrap: break-word;
149
}
150

151
body {
152
  position: absolute;
153
  width: 100%;
154
  left: 0;
155
  top: 0;
156
  margin: 0;
157
  background-color: var(--nord0);
158
}
159

160
canvas {
161
  background-color: var(--nord0);
162
}
163

164
p,
165
h1,
166
h2,
167
h3,
168
h4,
169
h5,
170
h6 {
171
  margin: 0;
172
}
173

174
p,
175
h1,
176
h2,
177
h3,
178
h4,
179
h5,
180
h6,
181
input,
182
select {
183
  color: var(--html-color, white);
184
}
185

186
h1,
187
h2,
188
h3,
189
h4,
190
h5,
191
h6 {
192
  font-family: 'Figtree', sans-serif;
193
  font-weight: 900;
194
}
195

196
h2 {
197
  font-size: 28px;
198
}
199

200
img {
201
  display: block;
202
}
203

204
::selection {
205
  background: rgba(180, 142, 173, 0.513);
206
}
207

208
::-webkit-scrollbar {
209
  width: 6px;
210
  height: 6px;
211
}
212

213
::-webkit-scrollbar-track {
214
  background-color: var(--nord0);
215
  border-radius: 5px;
216
}
217

218
::-webkit-scrollbar-thumb {
219
  background-color: var(--nord11);
220
  border-radius: 5px;
221
  border: 3px solid var;
222
}
223

224
::-webkit-scrollbar-thumb:hover {
225
  background-color: var(--nord11);
226
}
227

228
::-webkit-scrollbar-thumb:active {
229
  background: var(--nord11);
230
  border-radius: 5px;
231
  border: 3px solid transparent;
232
  background-clip: padding-box;
233
}
234

235
::-webkit-scrollbar-corner {
236
  border-left: 1px solid var(--nord10);
237
  border-top: 1px solid var(--nord10);
238
  background: var(--nord10);
239
}
240

241
::-moz-selection {
242
  background: rgba(180, 142, 173, 0.513);
243
}
244

245
@-moz-document url-prefix() {
246
  html {
247
    scrollbar-color: var(--nord10) var(--nord0);
248
    scrollbar-width: thin;
249
    overflow-x: hidden;
250
  }
251
}
252

253
input[type='radio'] {
254
  accent-color: var(--radio-accent, initial);
255
  cursor: pointer;
256
  width: 20px;
257
  height: 20px;
258
  background-color: var(--radio-bg, var(--nord1));
259
}
260

261
.text-center {
262
  text-align: center;
263
}
264

265
a {
266
  color: var(--a-color, rgb(255, 88, 97));
267
}
268

269
details summary {
270
  cursor: pointer;
271
  font-weight: bold;
272
}
273

274
details[open] summary {
275
  margin-bottom: 16px;
276
}
277

278
.font2 {
279
  font-family: 'Rethink Sans', sans-serif;
280
}
281

282
.font3 {
283
  font-family: 'Lato', sans-serif;
284
}
285

286
.notbold {
287
  font-weight: normal;
288
}
289

290
.bold {
291
  font-weight: bold;
292
}
293

294
.accented {
295
  color: var(--nord8lighter);
296
}
297

298
.fullwidth {
299
  width: 100%;
300
  box-sizing: border-box;
301
}
302

303
.binside {
304
  list-style-position: inside;
305
  padding: 0;
306
}
307

308
.display-off {
309
  display: none;
310
}
311

312
#password-field {
313
  position: absolute;
314
  width: 1px;
315
  height: 1px;
316
  margin: -1px;
317
  overflow: hidden;
318
  clip: rect(0 0 0 0);
319
}
320

321
/* Used on a lot of navigation pages. */
322
.bigtitle {
323
  font-size: 42px;
324
  color: var(--bigtitle-color, rgb(255, 88, 97));
325
}
326

327
#header {
328
  background-color: var(--nord0);
329
  display: flex;
330
  flex-flow: row wrap;
331
  justify-content: space-between;
332
  align-items: center;
333
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.274);
334
  padding: 25px 180px 25px 180px;
335
  z-index: 2;
336
  position: relative;
337
}
338

339
#banner {
340
  background-color: var(--banner-bg, var(--nord0m1));
341
  position: sticky;
342
  top: 0;
343
  font-weight: bold;
344
  font-size: 15px;
345
  padding: 15px;
346
  font-family: 'Rethink Sans', sans-serif;
347
  font-weight: 600;
348
  z-index: 1;
349
  animation: fadeInAnimation ease-in-out 0.3s;
350
  animation-iteration-count: 1;
351
  animation-fill-mode: forwards;
352
}
353

354
#mainbody {
355
  position: relative;
356
  animation: fadeInAnimation ease-in-out 0.6s;
357
  animation-iteration-count: 1;
358
  animation-fill-mode: forwards;
359
  overflow-x: clip;
360
}
361

362
#particles-js {
363
  background-color: var(--nord0);
364
  position: fixed;
365
  left: 0;
366
  top: 0;
367
  z-index: -1;
368
  height: 100%;
369
}
370

371
/* To change the top padding on the footer, change the 3 vw values here to the same thing. */
372

373
#footer {
374
  font-family: 'Lato', sans-serif;
375
  padding-top: 15vw;
376
  background: var(--footer-img, url('{{route}}{{/assets/img/waves.svg}}')),
377
    linear-gradient(
378
      to bottom,
379
      transparent 0 15vw,
380
      var(--footer-grad, #1d2029) 15vw 100%
381
    );
382
  background-repeat: no-repeat;
383
  background-size: 100vw auto;
384
  position: relative;
385
}
386

387
#footer a {
388
  text-decoration: inherit;
389
  color: var(--nord6);
390
}
391

392
#header a:hover,
393
#footer a:hover {
394
  color: var(--margin-hover, white);
395
}
396

397
/* -----------------------------------------------
398
/* Icons and Branding
399
/* ----------------------------------------------- */
400

401
.brand-logo-container,
402
.new {
403
  display: flex;
404
  align-items: center;
405
}
406

407
.brand {
408
  font-size: 21px;
409
  font-weight: bold;
410
  height: 30px;
411
  line-height: 30px;
412
  white-space: nowrap;
413
  margin-right: 20px;
414
  font-family: 'Figtree', sans-serif;
415
  font-weight: 900;
416
  letter-spacing: 1px;
417
  text-decoration: none;
418
  color: var(--nord4) !important;
419
}
420

421
.logo {
422
  width: 70px;
423
  height: 70px;
424
  background-image: var(--logo-img, url('{{route}}{{/assets/img/logo.webp}}'));
425
  background-size: contain;
426
  background-repeat: no-repeat;
427
}
428

429
.brand-logo-container > i {
430
  margin-right: 10px;
431
}
432

433
.logo-potato {
434
  width: 20px;
435
  height: 20px;
436
  background-image: url('{{route}}{{/assets/img/potato.webp}}');
437
  background-size: cover;
438
  opacity: 0.5;
439
  overflow: hidden;
440
}
441

442
/* -----------------------------------------------
443
/* Navigation Bar and Menus (Header Contents)
444
/* ----------------------------------------------- */
445

446
.white-text > a {
447
  text-decoration: none !important;
448
  color: var(--nord4) !important;
449
}
450

451
.smenu .white-text > a {
452
  background-color: var(--nord17);
453
  padding: 10px 20px 10px 20px;
454
  border-radius: 30px;
455
  transition: background-color .3s ease;
456
}
457

458
.smenu .white-text > a:hover {
459
  background-color: #d5484f;
460
}
461

462
.navbar-group {
463
  display: flex;
464
  gap: 20px;
465
  font-size: 15px;
466
}
467

468
.navbar-1 {
469
  list-style: none;
470
  padding: 0;
471
  margin: 0;
472
  display: flex;
473
  align-items: center;
474
  color: var(--nord4);
475
  order: 2;
476
}
477

478
.navbar-1 > li {
479
  margin-left: 45px;
480
}
481

482
.navbar-1 > li > a.line {
483
  text-decoration: none;
484
  color: var(--nord4);
485
  position: relative;
486
  overflow: hidden;
487
  text-align: center;
488
  padding-bottom: 0.35em;
489
}
490

491
.navbar-1 > li > a.line::after {
492
  content: '';
493
  position: absolute;
494
  bottom: 0;
495
  left: 0;
496
  width: 100%;
497
  height: 2px; 
498
  background-color: var(--nord17);
499
  transform: scaleX(0);
500
  transform-origin: left center;
501
  transition: transform 0.3s ease;
502
}
503

504
.navbar-1 > li > a.line:hover::after,
505
.navbar-1 > li > a.line:focus::after {
506
  transform: scaleX(1);
507
}
508

509
.subnavbar {
510
  list-style: none;
511
  padding: 0;
512
}
513

514
.subnavbar > li > a {
515
  display: block;
516
  padding: 5px 0;
517
  padding-left: 15px;
518
  padding-right: 15px;
519
  border-radius: 5px;
520
}
521

522
.subnavbar > li > a:hover {
523
  background-color: var(--nord11) !important;
524
}
525

526
.navbar {
527
  list-style: none;
528
  padding: 0;
529
  margin: 0;
530
  display: flex;
531
  align-items: center;
532
  order: 3;
533
}
534

535
.navbar > .dmenu {
536
  margin-left: 30px;
537
  margin-top: 2px;
538
  font-size: 18px;
539
}
540

541
.navbar > .smenu {
542
  margin-left: 25px;
543
}
544

545
.navbar > li > a {
546
  text-decoration: none;
547
  color: var(--nord4) !important;
548
  font-size: 0.95rem;
549
  font-weight: 500;
550
  transition: color 0.3s ease;
551
}
552

553
.navbar > li > a:hover {
554
  color: var(--nord11);
555
}
556

557
.navbar .dropdown-child {
558
  display: none;
559
  position: absolute;
560
  z-index: 5;
561
  background-color: var(--nord0);
562
  border: 1px solid var(--nord3);
563
  border-radius: 10px;
564
  cursor: auto;
565
  padding: 15px 25px;
566
  margin-top: 15px;
567
  font-family: 'Rethink Sans', sans-serif;
568
  opacity: 0;
569
  transition: opacity 0.3s ease, transform 0.3s ease;
570
}
571

572
.dropdown-parent:focus-within .dropdown-child {
573
  display: block;
574
  opacity: 1;
575
  visibility: visible;
576
  transform: translateY(10px) translateX(-30px);
577
}
578

579
.subnavbar {
580
  list-style: none;
581
  padding: 0;
582
}
583

584
.subnavbar > li > a {
585
  display: block;
586
  padding: 5px 15px;
587
  border-radius: 5px;
588
  color: var(--nord4);
589
  transition: background-color 0.3s ease, color 0.3s ease;
590
  text-decoration: none !important;
591
}
592

593
.subnavbar > li > a:hover {
594
  background-color: var(--primary);
595
  color: var(--nord0);
596
}
597

598
.navbar .dropdown-settings,
599
.omnibar .dropdown-settings {
600
  display: none;
601
  pointer-events: none;
602
  position: fixed;
603
  top: 0;
604
  left: 0;
605
  width: 100%;
606
  height: 100%;
607
  background: var(--dropdown-bg, rgba(0, 0, 0, 0.5));
608
  backdrop-filter: blur(10px);
609
  z-index: 5;
610
  align-items: center;
611
  justify-content: center;
612
  opacity: 0;
613
  transition: opacity 0.3s ease;
614
}
615

616
.dropdown-parent:focus-within
617
  .dropdown-settings:not(:is(:has(.close-settings-btn:active))) {
618
  display: flex;
619
  pointer-events: auto;
620
  opacity: 1;
621
}
622

623
.dropdown-parent:focus-within .dropdown-settings {
624
  opacity: 1;
625
}
626

627
/* Settings Menu (Updated) */
628
/* Designed adapted from vanilla HU v5 && Modal */
629
/* Modal GitHub: https://github.com/DerpmanDev/modal */
630

631
.settings-content {
632
  pointer-events: auto;
633
  background-color: var(--settings-bg, var(--fancy-dark));
634
  border: 1px solid var(--settings-border, var(--nord3));
635
  border-radius: 10px;
636
  padding: 25px;
637
  z-index: 6;
638
  width: 800px;
639
  max-height: 90vh;
640
  overflow-y: auto;
641
  margin: 5vh auto;
642
  color: var(--settings-color, var(--nord6));
643
  font-weight: 500;
644
  font-family: 'Figtree', sans-serif;
645
  letter-spacing: 1px;
646
  display: flex;
647
  flex-direction: column;
648
  backdrop-filter: blur(10px);
649
  -webkit-backdrop-filter: blur(10px);
650
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
651
  transition: opacity .3s ease;
652
}
653

654
.settings-header {
655
  display: flex;
656
  justify-content: space-between;
657
  align-items: center;
658
  margin-bottom: 20px;
659
}
660

661
.cseltitle-main {
662
  font-size: 35px;
663
  color: var(--cseltitle-main-color, rgb(255, 88, 97));
664
  font-weight: 900;
665
}
666

667
.close-settings-btn {
668
  cursor: pointer;
669
  font-size: 24px;
670
  font-weight: 100;
671
  margin-left: auto;
672
}
673

674
.close-settings-btn:hover {
675
  color: var(--close-btn-color, lightgray);
676
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
677
  transform: scale(1.05);
678
}
679

680
.settings-content-body {
681
  display: flex;
682
  gap: 40px;
683
}
684

685
.csel-container-left,
686
.settings-right-column {
687
  display: flex;
688
  flex-direction: column;
689
  gap: 15px;
690
}
691

692
.csel-container-left {
693
  flex: 1;
694
  max-width: 400px;
695
}
696

697
.settings-right-column {
698
  width: 300px;
699
}
700

701
.cseltitle {
702
  font-size: 22px;
703
  margin: 10px 0;
704
}
705

706
.transport-table {
707
  display: flex;
708
  justify-content: center;
709
  border-collapse: separate;
710
  border-spacing: 0 10px;
711
}
712

713
.transport-table td {
714
  vertical-align: middle;
715
  padding: 6px 10px;
716
}
717

718
.transport-table label {
719
  display: flex;
720
  align-items: center;
721
  gap: 4px;
722
  font-weight: 500;
723
}
724

725
.transport-table input[type='radio'] {
726
  transform: scale(1.2);
727
  margin-left: 8px;
728
}
729

730
.radio-group {
731
  display: flex;
732
  flex-direction: column;
733
  gap: 10px;
734
  margin-bottom: 15px;
735
}
736

737
.radio-group label {
738
  display: flex;
739
  align-items: center;
740
  justify-content: space-between;
741
  color: var(--radio-label-color, var(--nord6));
742
  font-size: 16px;
743
  max-width: 100%;
744
}
745

746
.radio-group p {
747
  margin: 0;
748
  flex: 1;
749
  float: left;
750
}
751

752
.radio-group input[type='radio'] {
753
  accent-color: var(--radio-accent, initial);
754
  cursor: pointer;
755
  width: 20px;
756
  height: 20px;
757
  background-color: var(--radio-bg, var(--nord1));
758
}
759

760
.switch-container {
761
  display: flex;
762
  align-items: center;
763
  justify-content: space-between;
764
}
765

766
.switch-container p {
767
  margin: 0;
768
}
769

770
.switch {
771
  appearance: unset;
772
  cursor: pointer;
773
  position: relative;
774
  display: inline-block;
775
  width: 34px;
776
  height: 20px;
777
  margin: 0;
778
  border-radius: 34px;
779
  background-color: var(--switch-bg, var(--nord3));
780
  transition: 0.4s;
781
}
782

783
.switch::after {
784
  position: absolute;
785
  content: '';
786
  height: 14px;
787
  width: 14px;
788
  left: 3px;
789
  bottom: 3px;
790
  background-color: white;
791
  transition: 0.4s;
792
  border-radius: 50%;
793
}
794

795
.switch:checked {
796
  background-color: var(--switch-checked-bg, var(--nord9));
797
}
798

799
.switch:checked::after {
800
  transform: translateX(14px);
801
}
802

803
#csel #newtab {
804
  padding: 2.25px 4.5px;
805
  margin: 0;
806
}
807

808
select {
809
  margin: 0 0 0 10px;
810
  padding: 10px;
811
  background-color: var(--nord0);
812
  border: 1px solid var(--switch-bg, var(--nord3));
813
  border-radius: 5px;
814
  color: var(--settings-color, var(--nord6));
815
  max-width: 300px;
816
  box-sizing: border-box;
817
  appearance: none;
818
  -webkit-appearance: none;
819
  -moz-appearance: none;
820
  cursor: pointer;
821
  transition: background-color 0.3s ease, border-color 0.3s ease;
822
}
823

824
select:hover {
825
  background-color: var(--select-hover-bg, var(--nord1));
826
}
827

828
select::after {
829
  content: '▼';
830
  position: absolute;
831
  right: 10px;
832
  pointer-events: none;
833
}
834

835
.default-badge,
836
.alt-badge,
837
.beta-badge {
838
  display: inline-block;
839
  padding: 2px 5px;
840
  border-radius: 5px;
841
  font-size: 12px;
842
  margin-left: 5px;
843
}
844

845
.default-badge {
846
  background-color: var(--nord8);
847
  color: var(--nord18);
848
}
849

850
.alt-badge {
851
  background-color: var(--nord12);
852
  color: var(--nord18);
853
}
854

855
.beta-badge {
856
  background-color: var(--nord15);
857
  color: var(--nord18);
858
}
859

860
.cloakform {
861
  display: flex;
862
  gap: 10px;
863
  margin-bottom: 15px;
864
}
865

866
.cloakform input[type='text'] {
867
  flex: 1;
868
  background-color: var(--cf-bg, var(--nord1));
869
  border: 1px solid var(--nord3);
870
  border-radius: 5px;
871
  padding: 10px;
872
  color: var(--cf-color, var(--nord6));
873
  box-sizing: border-box;
874
}
875

876
.cloakform input[type='button'] {
877
  background-color: var(--nord10);
878
  border: none;
879
  border-radius: 5px;
880
  padding: 10px;
881
  color: var(--cf-color, var(--nord6));
882
  cursor: pointer;
883
}
884

885
.cloakform input[type='button']:hover {
886
  background-color: var(--nord9);
887
}
888

889
input[type='text'] {
890
  width: 100%;
891
  padding: 10px;
892
  background-color: var(--cf-bg, var(--nord6));
893
  border: 1px solid var(--nord3);
894
  border-radius: 5px;
895
  color: var(--cf-color, var(--nord6));
896
  box-sizing: border-box;
897
}
898

899
#csel,
900
.settings-content {
901
  color: var(--nord4);
902
  display: flex;
903
  flex-direction: column;
904
  gap: 15px;
905
}
906

907
#csel input:not([type='checkbox']),
908
#csel select {
909
  outline: none;
910
  box-sizing: border-box;
911
  padding: 10px 12px;
912
  border-radius: 5px;
913
  margin: 5px 0;
914
  background-color: var(--nord0);
915
  border: 1px solid var(--nord9);
916
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
917
}
918

919
#csel input[type='text']:focus {
920
  box-shadow: inset 0 0 5px 0 var(--csel-input, var(--nord3));
921
  transition: box-shadow 0.15s ease-out;
922
}
923

924
#csel input:is([type='submit'], [type='button']):hover {
925
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
926
  transform: scale(1.05);
927
}
928

929
#csel input:is([type='submit'], [type='button']):active {
930
  background-color: #78b0c0;
931
}
932

933
#csel #cselreset {
934
  margin: 20px 0 5px;
935
}
936

937
#csel .cseltitle ~ p:not(:last-child) a {
938
  color: var(--nord8);
939
}
940

941
#csel .cseltitle ~ p:not(:last-child) a:hover {
942
  text-decoration: underline;
943
}
944

945
#csel .checkbox {
946
  display: flex;
947
  align-items: center;
948
  justify-content: center;
949
  gap: 10px;
950
}
951

952
#hideads,
953
#useonion {
954
  cursor: pointer;
955
  margin-left: 0;
956
}
957

958
/* -----------------------------------------------
959
/* Footer Contents
960
/* ----------------------------------------------- */
961

962
.footerflex {
963
  display: flex;
964
  justify-content: center;
965
}
966

967
.footersocials {
968
  text-align: center;
969
}
970

971
.footerflex > div {
972
  margin: 25px 50px;
973
}
974

975
.copyright {
976
  text-align: center;
977
  padding: 25px 0;
978
}
979

980
#footer .footerbrand h3 a {
981
  color: var(--html-color, white);
982
}
983

984
.footerbrand h3 a:hover {
985
  text-decoration: underline !important;
986
}
987

988
.footerbrand p {
989
  margin-top: 20px;
990
}
991

992
.footerlist ul {
993
  list-style: none;
994
  padding: 0;
995
}
996

997
.footerlist ul > li:hover {
998
  animation: iconpulse 2s;
999
}
1000

1001
.footerlist ul > li {
1002
  padding: 2px;
1003
}
1004

1005
.footersocials {
1006
  font-size: 20px;
1007
}
1008

1009
.footersocials a {
1010
  display: inline-block;
1011
  width: 20px;
1012
  height: 20px;
1013
  line-height: 20px;
1014
  padding: 8px;
1015
  margin: 0 5px;
1016
  border: 1px solid var(--nord4);
1017
  border-radius: 50%;
1018
}
1019

1020
.footersocials a .fab {
1021
  vertical-align: top;
1022
}
1023

1024
/* -----------------------------------------------
1025
/* Welcome Screen Content (i.e., Big Bold Words)
1026
/* ----------------------------------------------- */
1027

1028
.box-home {
1029
  margin: 35vh 0;
1030
  animation: fadeInAnimation ease-in-out 0.3s;
1031
  animation-iteration-count: 1;
1032
  animation-fill-mode: forwards;
1033
}
1034

1035
.home-grid-container {
1036
  display: flex;
1037
  align-items: center;
1038
  justify-content: space-between;
1039
  flex-direction: column;
1040
  padding: 170px 0 170px 0;
1041
  gap: 150px;
1042
  box-sizing: border-box;
1043
}
1044

1045
.home-text {
1046
  max-width: 750px;
1047
  flex: 1;
1048
  text-align: center;
1049
}
1050

1051
.home-text h1 {
1052
  font-size: 48px;
1053
  color: var(--nord4);
1054
  font-weight: 300;
1055
  margin: 0;
1056
  line-height: 1.2;
1057
}
1058

1059
.home-text h1 > span {
1060
  font-size: 64px;
1061
  font-weight: 900;
1062
  color: rgb(255, 88, 97);
1063
  display: block;
1064
}
1065

1066
.mac-window {
1067
  flex: 1;
1068
  max-width: 1100px;
1069
  height: 510px;
1070
  border: 1px solid var(--nord0);
1071
  border-radius: 12px;
1072
  overflow: hidden;
1073
  background-color: var(--nord0);
1074
  background-image: url('{{route}}{{/assets/img/noise.webp}}'),
1075
    linear-gradient(
1076
      145deg,
1077
      rgba(34, 38, 47, 0.9) 0%,
1078
      rgba(34, 38, 47, 0.9) 100%
1079
    );
1080
  background-blend-mode: overlay;
1081
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
1082
}
1083

1084
.mac-title-bar {
1085
  padding: 15px;
1086
  background-color: var(--mac-title-bg, var(--dark2));
1087
  border-bottom: 1px solid var(--nord0);
1088
}
1089

1090
.mac-buttons {
1091
  display: flex;
1092
  gap: 8px;
1093
}
1094

1095
.mac-buttons span {
1096
  width: 12px;
1097
  height: 12px;
1098
  border-radius: 50%;
1099
  display: inline-block;
1100
}
1101

1102
.mac-close {
1103
  background-color: var(--mac-ui-bg, var(--nord3));
1104
}
1105

1106
.mac-minimize {
1107
  background-color: var(--mac-ui-bg, var(--nord3));
1108
}
1109

1110
.mac-maximize {
1111
  background-color: var(--mac-ui-bg, var(--nord3));
1112
}
1113

1114
.no-select,
1115
.comment,
1116
.mac-content br {
1117
  user-select: none;
1118
  -webkit-user-select: none;
1119
  -moz-user-select: none;
1120
  -ms-user-select: none;
1121
}
1122

1123
.mac-content {
1124
  color: var(--nord4);
1125
  font-family: 'Source Code Pro', monospace;
1126
  font-optical-sizing: auto;
1127
  font-weight: 500;
1128
  -webkit-font-smoothing: antialiased;
1129
  -moz-osx-font-smoothing: grayscale;
1130
  padding: 40px 40px 0 80px;
1131
  flex: 1;
1132
  display: flex;
1133
  justify-content: center;
1134
  align-items: center;
1135
  font-size: 18px;
1136
}
1137

1138
.downarrowgroup {
1139
  color: var(--select-hover-bg, var(--nord3));
1140
  font-size: 35px;
1141
  margin-left: 80%;
1142
}
1143

1144
.cmd {
1145
  color: var(--cmd-color, #a4bbd1);
1146
  white-space: pre-wrap;
1147
}
1148

1149
.cmd::before {
1150
  content: '$ ';
1151
  color: var(--nord4);
1152
}
1153

1154
.cmd::after {
1155
  content: '\a';
1156
}
1157

1158
.url {
1159
  color: var(--url-color, rgb(255, 136, 142));
1160
}
1161

1162
.comment {
1163
  color: var(--comment-color, #616e88);
1164
}
1165

1166
.comment::before {
1167
  content: '# ';
1168
}
1169

1170
.homebutton {
1171
  display: inline-block;
1172
  text-decoration: none;
1173
  padding: 15px 50px;
1174
  border-radius: 8px;
1175
  background-color: var(--nord0);
1176
  color: var(--nord4) !important;
1177
  margin-top: 20px;
1178
  transition: 0.3s ease-in-out;
1179
  -webkit-transition: 0.3s ease-in-out;
1180
  border: 1px solid rgba(255, 255, 255, 0.2);
1181
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
1182
  -webkit-backdrop-filter: blur(10px);
1183
  backdrop-filter: blur(10px);
1184
}
1185

1186
.homebutton:hover {
1187
  background-color: var(--nord2);
1188
}
1189

1190
.fancybutton {
1191
  display: inline-block;
1192
  text-decoration: none;
1193
  padding: 10px 12px;
1194
  border-radius: 8px;
1195
  background-color: var(--nord0);
1196
  color: var(--nord4) !important;
1197
  margin: 5px 10px;
1198
  transition: 0.3s ease-in-out;
1199
  -webkit-transition: 0.3s ease-in-out;
1200
}
1201

1202
.fancybutton:hover {
1203
  background-color: var(--nord2);
1204
}
1205

1206
.box-info {
1207
  margin: 100px 200px;
1208
  padding: 20px 30px;
1209
  background-color: var(--nord1);
1210
  border-radius: 10px;
1211
  animation: fadeInAnimation ease-in-out 0.3s;
1212
  animation-iteration-count: 1;
1213
  animation-fill-mode: forwards;
1214
}
1215

1216
/* Homepage Hero */
1217

1218
.potato {
1219
  margin-top: 30px;
1220
  opacity: 0.5;
1221
  width: 350px !important;
1222
}
1223

1224
.splashstroke {
1225
  display: inline-block;
1226
  position: relative;
1227
  margin-top: 20px;
1228
}
1229

1230
.text-center {
1231
  text-align: center;
1232
}
1233

1234
.splashstrokeheader {
1235
  position: relative;
1236
  display: inline-block;
1237
  font-size: 36px;
1238
  line-height: 1.2;
1239
}
1240

1241
.underline-svg {
1242
  position: absolute;
1243
  bottom: -115%;
1244
  left: 0;
1245
  width: 100%;
1246
}
1247

1248
.hero-grid-container {
1249
  display: grid;
1250
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
1251
  margin: 40px auto;
1252
  width: 90%;
1253
  max-width: 1250px;
1254
  background-color: var(--hero-grid-bg, initial);
1255
  border-radius: 10px;
1256
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
1257
  border: 1px solid rgba(255, 255, 255, 0.2);
1258
  -webkit-backdrop-filter: blur(10px);
1259
  backdrop-filter: blur(10px);
1260
  position: relative;
1261
}
1262

1263
.carousel-container {
1264
  text-align: center;
1265
  position: relative;
1266
  width: 500px;
1267
  margin: 0 auto;
1268
}
1269

1270
.carousel-title {
1271
  margin: 0;
1272
  font-size: 1.5rem;
1273
  font-weight: bold;
1274
}
1275

1276
.carousel-wrapper {
1277
  overflow: hidden;
1278
  position: relative;
1279
  width: 100%;
1280
  padding: 10px 0;
1281
}
1282

1283
.carousel {
1284
  display: flex;
1285
  width: auto;
1286
  animation: scroll 20s linear infinite;
1287
}
1288

1289
.carousel-inner {
1290
  display: flex;
1291
  width: auto;
1292
}
1293

1294
.dependencylogo {
1295
  flex: 0 0 auto;
1296
  margin: 0 15px;
1297
}
1298

1299
.dependencylogo img {
1300
  width: 50px;
1301
  height: 50;
1302
  padding: 10px;
1303
  border-radius: 20px;
1304
  background-color: var(--nord2);
1305
}
1306

1307
@keyframes scroll {
1308
  0% {
1309
    transform: translateX(0);
1310
  }
1311
  100% {
1312
    transform: translateX(-100%);
1313
  }
1314
}
1315

1316
#scrollfix {
1317
  margin-bottom: 20px;
1318
}
1319

1320
/* -----------------------------------------------
1321
/* Proxy Frame Page */
1322
/* ----------------------------------------------- */
1323

1324
.loader {
1325
  position: fixed;
1326
  top: 0;
1327
  left: 0;
1328
  width: 100vw;
1329
  height: 100vh;
1330
  background-color: #1d232a;
1331
  background-image: radial-gradient(
1332
      circle,
1333
      rgba(131, 131, 131, 0.02) 1px,
1334
      transparent 1px
1335
    ),
1336
    radial-gradient(circle, rgba(148, 148, 148, 0.02) 1px, transparent 1px);
1337
  background-position: 0 0, 5px 5px;
1338
  background-size: 10px 10px;
1339
  z-index: 3;
1340
  align-items: center;
1341
  justify-content: center;
1342
  display: flex;
1343
  visibility: hidden;
1344
  opacity: 0;
1345
  transition: visibility 0s, opacity ease-in-out 0.3s;
1346
  transition-delay: 0.3s, 0s;
1347
}
1348

1349
.loader-active {
1350
  opacity: 1;
1351
  visibility: visible;
1352
  transition-delay: 0s, 0.6s;
1353
}
1354

1355
.loader-w {
1356
  width: 80px;
1357
  aspect-ratio: 1;
1358
  box-shadow: 0 0 0 3px #fff inset;
1359
  border-radius: 50%;
1360
  position: relative;
1361
  animation: l11 7s infinite;
1362
}
1363

1364
.loader-w:before,
1365
.loader-w:after {
1366
  content: '';
1367
  position: absolute;
1368
  top: calc(100% + 3px);
1369
  left: calc(50% - 20px);
1370
  box-shadow: inherit;
1371
  width: 40px;
1372
  aspect-ratio: 1;
1373
  border-radius: 50%;
1374
  transform-origin: 50% -45px;
1375
  animation: l11 1.5s infinite;
1376
}
1377

1378
.loader-w:after {
1379
  animation-delay: -0.75s;
1380
}
1381

1382
@keyframes l11 {
1383
  100% {
1384
    transform: rotate(360deg);
1385
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
1386
  }
1387
}
1388

1389
.omnibar > .logo {
1390
  width: 40px;
1391
  height: 40px;
1392
  margin-right: 5px;
1393
}
1394

1395
.omnibar {
1396
  position: fixed;
1397
  top: 10px;
1398
  /* 50% - (width/2 + padding width + border width), i.e., omnibox total width */
1399
  left: calc(50% - 20vw - 17px);
1400
  width: 40vw;
1401
  background-color: var(--omnibox-bg, var(--nord0));
1402
  background-image: radial-gradient(
1403
      circle,
1404
      rgba(131, 131, 131, 0.02) 1px,
1405
      transparent 1px
1406
    ),
1407
    radial-gradient(circle, rgba(148, 148, 148, 0.02) 1px, transparent 1px);
1408
  background-position: 0 0, 5px 5px;
1409
  background-size: 10px 10px;
1410
  display: flex;
1411
  align-items: center;
1412
  justify-content: center;
1413
  gap: 4px;
1414
  padding: 10px 16px;
1415
  z-index: 2;
1416
  border: 1px solid #ff919369;
1417
  border-radius: 15px;
1418
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
1419
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1420
}
1421

1422
.omnibar > button + div,
1423
.omnibar > button:has(+ div) {
1424
  margin-right: 4px;
1425
}
1426

1427
@media (max-width: 800px) {
1428
  .omnibar {
1429
    display: none;
1430
  }
1431
}
1432

1433
.omnibar #search-input {
1434
  flex: 1;
1435
  padding: 8px 12px;
1436
  border-radius: 6px;
1437
  border: 1px solid var(--nord1);
1438
  background: var(--nord0);
1439
  color: var(--nord4);
1440
  font-family: 'Montserrat Alternates', sans-serif;
1441
  font-size: 1rem;
1442
}
1443

1444
.search-box {
1445
  display: inline-block;
1446
  position: relative;
1447
  max-width: 700px;
1448
  width: calc(100% - 44px);
1449
}
1450

1451
#autocomplete {
1452
  position: absolute;
1453
  background-color: var(--ac-bg, var(--nord0));
1454
  color: var(--nord4);
1455
  list-style: none;
1456
  margin: 5px 3px;
1457
  font-size: 18px;
1458
  padding: 0;
1459
  border: 0.5px solid #ff919369;
1460
  border-radius: 15px;
1461
  z-index: 2;
1462
  max-height: calc(5 * (1.5em + 1px + 30px));
1463
  overflow: auto;
1464
  overflow-x: hidden;
1465
  opacity: 0;
1466
  transform: translateY(-10px);
1467
  pointer-events: none;
1468
  transition: opacity 0.25s ease, transform 0.25s ease,
1469
    background-color 0.3s ease, border-color 0.3s ease;
1470
  scrollbar-width: thin;
1471
  scrollbar-color: #ff919369 transparent;
1472
  border-radius: 15px;
1473
}
1474

1475
#autocomplete::-webkit-scrollbar {
1476
  width: 8px;
1477
  border-radius: 15px;
1478
}
1479

1480
#autocomplete::-webkit-scrollbar-track {
1481
  background: transparent;
1482
  border-radius: 15px;
1483
}
1484

1485
#autocomplete::-webkit-scrollbar-thumb {
1486
  background-color: #ff919369;
1487
  border-radius: 15px;
1488
  border: 2px solid transparent;
1489
}
1490

1491
#autocomplete:not(:empty) {
1492
  opacity: 1;
1493
  transform: translateY(0);
1494
  pointer-events: auto;
1495
}
1496

1497
#autocomplete li {
1498
  border: 0.5px solid #ff919369;
1499
  line-height: 1.5;
1500
  padding: 15px;
1501
}
1502

1503
#autocomplete li:hover {
1504
  background-color: #b48ead2c;
1505
  cursor: pointer;
1506
  animation: glowshadow 2s linear infinite;
1507
}
1508

1509
#autocomplete li:active {
1510
  background-color: #1d2029;
1511
  color: white;
1512
}
1513

1514
.search-box input[type='text'],
1515
.search-box #autocomplete {
1516
  width: 100%;
1517
}
1518

1519
.omnibar #search-input:focus {
1520
  outline: none;
1521
  animation: glowshadow 2s linear infinite;
1522
}
1523

1524
.omnibar button {
1525
  background: none;
1526
  border: none;
1527
  color: var(--nord4);
1528
  font-size: 1.2em;
1529
  cursor: pointer;
1530
  padding: 6px 10px;
1531
  border-radius: 4px;
1532
  transition: background 0.2s;
1533
}
1534

1535
.omnibar button:hover {
1536
  background: var(--nord0m3);
1537
}
1538

1539
.omnibar-hidden {
1540
  transform: translateY(-100%);
1541
}
1542

1543
.omnibar-s {
1544
  position: fixed;
1545
  left: 50%;
1546
  transform: translateX(240px);
1547
  z-index: 3;
1548
  background: var(--nord0);
1549
  border-radius: 0 0 10px 10px;
1550
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
1551
  border: 1px solid #ff919369;
1552
  padding: 6px 18px;
1553
  color: var(--nord4);
1554
  transition: top 0.3s, left 0.3s, transform 0.3s;
1555
}
1556

1557
.omnibar-s:hover {
1558
  background: var(--nord0m3);
1559
}
1560

1561
/* -----------------------------------------------
1562
/* Cards, Buttons and Forms
1563
/* ----------------------------------------------- */
1564

1565
.box-hero > .box-noflex {
1566
  display: inline;
1567
}
1568

1569
.box-hero {
1570
  display: flex;
1571
  align-items: center;
1572
  padding: 20px;
1573
  border: 1px var(--nord19);
1574
  border-radius: 10px;
1575
  position: relative;
1576
  overflow: hidden;
1577
  box-sizing: border-box;
1578
}
1579

1580
.box-hero::after {
1581
  content: '';
1582
  position: absolute;
1583
  top: 0;
1584
  left: 0;
1585
  width: 100%;
1586
  height: 100%;
1587
  background: url('{{route}}{{/assets/img/noise.webp}}') repeat,
1588
    rgba(255, 255, 255, 0.03);
1589
  opacity: var(--noise-opacity, 0.02);
1590
  pointer-events: none;
1591
  -webkit-mask-image: radial-gradient(circle, white 30%, transparent 50%);
1592
  -webkit-mask-size: 800px 800px;
1593
  -webkit-mask-position: calc(var(--mouse-x) - 400px)
1594
    calc(var(--mouse-y) - 400px);
1595
  -webkit-mask-repeat: no-repeat;
1596
  mask-image: radial-gradient(
1597
    closest-side,
1598
    var(--hero-grad, rgba(37, 35, 35, 0.377)) 30%,
1599
    rgba(255, 255, 255, 0.048) 70%,
1600
    transparent 90%
1601
  );
1602
  mask-size: 800px 800px;
1603
  mask-position: calc(var(--mouse-x) - 400px) calc(var(--mouse-y) - 400px);
1604
  mask-repeat: no-repeat;
1605
}
1606

1607
.box-hero:hover::after {
1608
  opacity: 0.09;
1609
}
1610

1611
.box-hero:not(:hover)::after {
1612
  opacity: 0;
1613
}
1614

1615
.hero-content {
1616
  flex: 1;
1617
}
1618

1619
.hero-content-header {
1620
  color: var(--nord4);
1621
}
1622

1623
.palered {
1624
  color: rgb(255, 88, 97);
1625
}
1626

1627
.hero-text-wrap {
1628
  margin-right: 15%;
1629
}
1630

1631
.hero-text-wrap p {
1632
  margin-bottom: 50px;
1633
  font-size: 17px;
1634
  color: var(--nord4);
1635
}
1636

1637
.image-container-hero {
1638
  display: flex;
1639
  flex-direction: column;
1640
  align-items: center;
1641
  justify-content: center;
1642
  margin-right: 10%;
1643
}
1644

1645
.image-container-hero > a {
1646
  width: 150px;
1647
  text-align: center;
1648
}
1649

1650
.hero {
1651
  width: 100%;
1652
  max-width: 250px;
1653
}
1654

1655
.image-container > .hero {
1656
  width: 100%;
1657
  max-width: 250px;
1658
}
1659

1660
.text-wrap {
1661
  max-width: 46ch;
1662
}
1663

1664
.image-container-hero > p {
1665
  color: var(--nord4);
1666
}
1667

1668
.image-container-hero > h2 {
1669
  color: rgb(255, 88, 97);
1670
}
1671

1672
.box-hero h1,
1673
.box-hero h2,
1674
.box-hero h3 {
1675
  margin: 10px 0;
1676
}
1677

1678
.grid-container {
1679
  display: grid;
1680
  grid-template-columns: 1fr;
1681
  gap: 80px;
1682
  margin: 80px;
1683
  margin-top: 300px;
1684
  padding: 0 20px;
1685
  box-sizing: border-box;
1686
}
1687

1688
.box-card {
1689
  width: 100%;
1690
  padding: 40px;
1691
  background-color: var(--hero-grid-bg, initial);
1692
  border-radius: 10px;
1693
  position: relative;
1694
  overflow: hidden;
1695
  text-align: left;
1696
  box-sizing: border-box;
1697
  backdrop-filter: blur(10px);
1698
  -webkit-backdrop-filter: blur(10px);
1699
}
1700

1701
.box-card::after {
1702
  content: '';
1703
  position: absolute;
1704
  top: 0;
1705
  left: 0;
1706
  width: 100%;
1707
  height: 100%;
1708
  background: url('{{route}}{{/assets/img/noise.webp}}') repeat,
1709
    rgba(46, 52, 64, 0.03);
1710
  opacity: var(--noise-opacity, 0.02);
1711
  pointer-events: none;
1712
  -webkit-mask-image: radial-gradient(circle, white 30%, transparent 50%);
1713
  -webkit-mask-size: 800px 800px;
1714
  -webkit-mask-position: calc(var(--mouse-x) - 400px)
1715
    calc(var(--mouse-y) - 400px);
1716
  -webkit-mask-repeat: no-repeat;
1717
  mask-image: radial-gradient(
1718
    closest-side,
1719
    rgba(37, 35, 35, 0.377) 30%,
1720
    rgba(255, 255, 255, 0.048) 70%,
1721
    transparent 90%
1722
  );
1723
  mask-size: 800px 800px;
1724
  mask-position: calc(var(--mouse-x) - 400px) calc(var(--mouse-y) - 400px);
1725
  mask-repeat: no-repeat;
1726
}
1727

1728
.box-card:hover::after {
1729
  opacity: 0.09;
1730
}
1731

1732
.box-card:not(:hover)::after {
1733
  opacity: 0;
1734
}
1735

1736
.box-card .content {
1737
  width: calc(95% - min(30%, 180px) - 32px);
1738
  margin-right: 20px;
1739
  box-sizing: border-box;
1740
  overflow-wrap: break-word;
1741
}
1742

1743
.image-container {
1744
  position: absolute;
1745
  right: 5%;
1746
  top: 50%;
1747
  transform: translateY(-50%);
1748
  width: 30%;
1749
  max-width: 180px;
1750
  height: auto;
1751
  background-color: #f2575c0c;
1752
  border-radius: 10px;
1753
  padding: 15px;
1754
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
1755
  border: 1px solid #ff9192;
1756
}
1757

1758
.image-container:hover {
1759
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
1760
}
1761

1762
.box-card .hero {
1763
  width: 100%;
1764
  border-radius: 5px;
1765
}
1766

1767
.box-card h1 {
1768
  margin-top: 0;
1769
}
1770

1771
.box-card p {
1772
  color: var(--nord4);
1773
  margin: 0 0 10px;
1774
  line-height: 1.5;
1775
}
1776

1777
.box-medium {
1778
  margin-top: 100px;
1779
  margin-bottom: 100px;
1780
}
1781

1782
.box-main-container {
1783
  display: flex;
1784
  align-items: center;
1785
  justify-content: space-between;
1786
  max-width: 1300px;
1787
  margin: 50px auto 200px auto;
1788
  padding: 20px;
1789
  gap: 20%;
1790
  position: relative;
1791
}
1792

1793
.box-badge {
1794
  padding: 10px 0;
1795
  border-radius: 3px;
1796
  background-color: var(--box-badge-bg, var(--nord5));
1797
  color: #000;
1798
  margin-bottom: 50px;
1799
}
1800

1801
.box-default-badge {
1802
  background-color: #638af7;
1803
  color: #000;
1804
  padding: 3px 6px;
1805
  border-radius: 3px;
1806
  font-size: 0.9em;
1807
  margin: 0 5px;
1808
}
1809

1810
.box-text-container {
1811
  max-width: 610px;
1812
  padding: 20px;
1813
}
1814

1815
.box-text-container > h1 {
1816
  font-size: 2.5rem;
1817
  font-weight: 900;
1818
  color: rgb(255, 88, 97);
1819
}
1820

1821
.box-description {
1822
  font-size: 1.2rem;
1823
  margin: 30px 0;
1824
  font-weight: 300;
1825
  color: var(--nord4);
1826
}
1827

1828
.box-button-container {
1829
  margin-top: 20px;
1830
}
1831

1832
.box-button {
1833
  display: inline-block;
1834
  padding: 15px 25px;
1835
  margin-top: 10px;
1836
  margin-right: 10px;
1837
  border: var(--nord11) 1px solid;
1838
  border-radius: 5px;
1839
  text-decoration: none;
1840
  color: var(--box-btn-color, white) !important;
1841
  background-color: var(--mac-title-bg, var(--dark2));
1842
  font-size: 1em;
1843
  transition: background-color 0.3s ease;
1844
}
1845

1846
.box-button:hover {
1847
  background-color: var(--mac-title-bg, var(--nord18));
1848
}
1849

1850
.box-image-container {
1851
  display: flex;
1852
  align-items: center;
1853
  margin-left: auto;
1854
}
1855

1856
.box-pr-logo {
1857
  max-width: 100%;
1858
  height: auto;
1859
  width: 1000px;
1860
  border-radius: 35px;
1861
}
1862

1863
.box-line-divider {
1864
  position: absolute;
1865
  bottom: -50px;
1866
  left: 50%;
1867
  transform: translateX(-50%);
1868
  width: 80%;
1869
  height: 1px;
1870
  background-color: var(--nord11);
1871
  opacity: 0.2;
1872
}
1873

1874
@media (max-width: 768px) {
1875
  .box-main-container {
1876
    flex-direction: column;
1877
    align-items: center;
1878
    gap: 20px;
1879
    position: relative;
1880
  }
1881

1882
  .box-text-container {
1883
    max-width: 100%;
1884
    text-align: center;
1885
  }
1886

1887
  .box-image-container {
1888
    margin-left: 0;
1889
  }
1890

1891
  .box-pr-logo {
1892
    width: 100%;
1893
  }
1894
}
1895

1896
.box-large {
1897
  width: 80vw;
1898
  margin: 20px auto;
1899
}
1900

1901
.box-clear {
1902
  padding: 50px;
1903
}
1904

1905
.box-error {
1906
  margin: 40vh 0;
1907
  font-family: 'Lato', sans-serif;
1908
}
1909

1910
.box-error h1 {
1911
  font-size: 48px;
1912
}
1913

1914
.box-error p {
1915
  margin: 10px 0;
1916
}
1917

1918
.splashend > h1 {
1919
  font-size: 40px;
1920
}
1921

1922
.textm p,
1923
.textm details,
1924
.box-card p {
1925
  margin-bottom: 16px;
1926
}
1927

1928
.textm h1,
1929
.textm h2,
1930
.textm h3,
1931
.textm h4,
1932
.textm h5,
1933
.textm h6,
1934
.box-card h1 {
1935
  margin-bottom: 8px;
1936
}
1937

1938
/* -----------------------------------------------
1939
/* Documentation and FAQ Pages
1940
/* ----------------------------------------------- */
1941

1942
#documentation {
1943
  font-family: 'Lato', sans-serif;
1944
}
1945

1946
#documentation code {
1947
  color: var(--nord13);
1948
}
1949

1950
.faq-center {
1951
  text-align: center;
1952
  font-size: 28px;
1953
}
1954

1955
.faq-search {
1956
  outline: none;
1957
  background-color: var(--dark2) !important;
1958
  border: 2px solid var(--nord4);
1959
  color: white;
1960
  padding: 6px 8px;
1961
  font-size: 16px;
1962
  margin: 20px auto 10px auto;
1963
  display: block;
1964
  max-width: 50%;
1965
}
1966

1967
.faq-search::placeholder {
1968
  color: var(--gray);
1969
}
1970

1971
.faq-text {
1972
  margin-bottom: 30px;
1973
}
1974

1975
.faq-text *:not(h4, strong) {
1976
  color: var(--nord4);
1977
}
1978

1979
/* Used on icons.html and the FAQ page. */
1980
.fb-l {
1981
  background-color: var(--nord1);
1982
}
1983

1984
/* -----------------------------------------------
1985
/* Proxy Pages
1986
/* ----------------------------------------------- */
1987
.pr-logo {
1988
  width: 100%;
1989
  max-width: 310px;
1990
  height: auto;
1991
  margin: 0 auto 30px auto;
1992
}
1993

1994
.pr-tippy {
1995
  color: rgb(255, 136, 142);
1996
}
1997

1998
#settings-panel label {
1999
  display: inline-block;
2000
  margin-inline-end: 20px;
2001
}
2002

2003
.pr-form {
2004
  margin-top: 30px;
2005
  margin-bottom: 16px;
2006
}
2007

2008
.pr-form input {
2009
  background-color: var(--nord0);
2010
  border: 1px solid var(--nord1);
2011
}
2012

2013
.pr-form input,
2014
.pr-form a,
2015
.pr-form select {
2016
  vertical-align: baseline;
2017
  outline: none;
2018
  border-radius: 5px;
2019
  padding: 10px 12px;
2020
  color: var(--html-color, white);
2021
  background-color: var(--mac-title-bg, var(--dark2));
2022
  font-family: 'Montserrat Alternates', sans-serif;
2023
  font-size: 20px;
2024
  margin: 3px;
2025
}
2026

2027
.pr-form input[type='text']:focus {
2028
  animation: glowshadow 2s linear infinite;
2029
}
2030

2031
.pr-form input[type='text']::placeholder {
2032
  color: var(--gray);
2033
}
2034

2035
.pr-button {
2036
  cursor: pointer;
2037
  text-decoration: none;
2038
  display: inline-block;
2039
  background-color: var(--nord0);
2040
  border: 1px solid var(--nord1) !important;
2041
  transition: 0.3s ease-in-out;
2042
  -webkit-transition: 0.3s ease-in-out;
2043
}
2044

2045
.pr-button:hover {
2046
  background-color: var(--nord2);
2047
}
2048

2049
#wisp-box .table-header {
2050
  display: flex;
2051
  background-color: #f0f0f0;
2052
  padding: 8px;
2053
  border-bottom: 1px solid #ddd;
2054
}
2055

2056
#wisp-box .table-row {
2057
  display: flex;
2058
  padding: 8px;
2059
  border-bottom: 1px solid #ddd;
2060
}
2061

2062
#wisp-box .table-cell {
2063
  flex: 1;
2064
  padding: 8px;
2065
}
2066

2067
#wisp-box .table-cell:nth-child(1) {
2068
  width: 20%;
2069
}
2070

2071
#wisp-box .table-cell:nth-child(2) {
2072
  width: 40%;
2073
}
2074

2075
#wisp-box .table-cell:nth-child(3) {
2076
  width: 20%;
2077
}
2078

2079
#wisp-box .table-cell:nth-child(4) {
2080
  width: 20%;
2081
}
2082

2083
/* Stealth Mode IFrame */
2084

2085
#frame {
2086
  position: fixed;
2087
  display: block;
2088
  border: none;
2089
  width: 100vw;
2090
  height: 100vh;
2091
  left: 0;
2092
  top: 0;
2093
  background-color: #ffffff;
2094
}
2095

2096
/* NOTE: Currently unused. */
2097
#hu-frame {
2098
  border: none;
2099
  position: absolute;
2100
  top: 0;
2101
  left: 0;
2102
  width: 100vw;
2103
  height: 100vh;
2104
  background-color: #111;
2105
}
2106

2107
/* -----------------------------------------------
2108
/* HU Games Directory
2109
/* ----------------------------------------------- */
2110

2111
.dir {
2112
  padding-top: 10px;
2113
}
2114

2115
.box-g {
2116
  padding: 10px 50px;
2117
}
2118

2119
/* Games list for non-flash games */
2120

2121
.proxy-form > .glist > a {
2122
  border-radius: 10px !important;
2123
}
2124

2125
.glist {
2126
  font-family: 'Lato', sans-serif;
2127
  display: flex;
2128
  flex-wrap: wrap;
2129
  justify-content: center;
2130
  text-align: center;
2131
}
2132

2133
.glist > a {
2134
  display: block;
2135
  text-decoration: none;
2136
  width: 200px;
2137
  padding: 20px;
2138
  margin: 10px;
2139
  border: 1px solid var(--nord9);
2140
  border-radius: 15%;
2141
  transition: ease-in-out 0.3s;
2142
  flex-grow: 0;
2143
  flex-shrink: 0;
2144
}
2145

2146
.glist > a:hover {
2147
  border: 1px solid var(--nord11);
2148
}
2149

2150
.glist > a img {
2151
  pointer-events: none;
2152
  border-radius: 30%;
2153
  width: 200px;
2154
  height: 200px;
2155
  object-position: 50% top;
2156
  object-fit: cover;
2157
  box-shadow: 3px 4px 5px 0 rgba(0, 0, 0, 0.38);
2158
  animation: fadeInAnimation ease-in-out 0.5s;
2159
  animation-iteration-count: 1;
2160
  animation-fill-mode: forwards;
2161
}
2162

2163
.glist > a h3 {
2164
  margin: 16px 0;
2165
  color: #ff5861;
2166
}
2167

2168
.glist > a p {
2169
  margin: 5px 0 0 0;
2170
  color: var(--nord4);
2171
}
2172

2173
/* Flash Games Search Bar */
2174

2175
#fsearchbar {
2176
  font-family: 'Lato', sans-serif;
2177
  font-size: 16px;
2178
  background-color: var(--nord0);
2179
  outline: none;
2180
  color: white;
2181
  border: 2px solid var(--nord1);
2182
  border-bottom: none;
2183
  padding: 8px 10px;
2184
  width: 380px;
2185
}
2186

2187
#fsearchbar::placeholder {
2188
  color: var(--gray);
2189
}
2190

2191
/* Flash Games List */
2192

2193
.flist {
2194
  font-family: 'Lato', sans-serif;
2195
  background-color: var(--nord0);
2196
  width: 700px;
2197
  height: calc(100vh - 92px);
2198
  overflow-y: auto;
2199
  overflow-x: hidden;
2200
  margin: 0 auto;
2201
  border: 2px solid var(--nord1);
2202
  padding-bottom: 2px;
2203
  border-radius: 15px;
2204
}
2205

2206
.flist > a {
2207
  display: block;
2208
  text-decoration: none;
2209
  text-transform: capitalize;
2210
  padding: 20px;
2211
  background-color: var(--nord1);
2212
  border: 2px solid var(--nord0);
2213
  border-radius: 15px;
2214
  border-bottom: none;
2215
  color: var(--nord4);
2216
}
2217

2218
.flist > a:hover {
2219
  background-color: var(--nord2);
2220
}
2221

2222
/* Footer for non-flash games */
2223

2224
.gfooter {
2225
  margin: 32px 0;
2226
}
2227

2228
.gfooter-only {
2229
  margin: 40px 0 32px;
2230
}
2231

2232
/* -----------------------------------------------
2233
/* CSS Animations
2234
/* ----------------------------------------------- */
2235

2236
/* Smooth Loading */
2237

2238
@keyframes fadeInAnimation {
2239
  0% {
2240
    opacity: 0;
2241
  }
2242
  100% {
2243
    opacity: 1;
2244
  }
2245
}
2246

2247
/* Subtle Blur Hover Animation */
2248

2249
@keyframes iconpulse {
2250
  0% {
2251
    filter: blur(0px);
2252
  }
2253
  50% {
2254
    filter: blur(0.9px);
2255
  }
2256
}
2257

2258
/* Pulse Hover Animation */
2259

2260
.pulse {
2261
  will-change: transform;
2262
}
2263

2264
@keyframes pulse {
2265
  0%,
2266
  100% {
2267
    transform: scale(1);
2268
  }
2269
  50% {
2270
    transform: scale(1.05);
2271
  }
2272
}
2273

2274
.pulse:hover {
2275
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
2276
  transform: scale(1.05) translateZ(0);
2277
}
2278

2279
/* Glowing Button Animation */
2280

2281
@keyframes glowshadow {
2282
  0%,
2283
  100% {
2284
    box-shadow: 0 0 8px 2px var(--glowshadow1, var(--nord0));
2285
  }
2286
  50% {
2287
    box-shadow: 0 0 8px 2px var(--glowshadow2, var(--nord1));
2288
  }
2289
}
2290

2291
@keyframes glowbg {
2292
  0% {
2293
    background-position: 0;
2294
  }
2295
  100% {
2296
    background-position: 100px 0;
2297
  }
2298
}
2299

2300
.glowbutton {
2301
  position: relative;
2302
  z-index: 1;
2303
}
2304

2305
.glowbutton::after {
2306
  content: '';
2307
  border-radius: inherit;
2308
  display: inline-block;
2309
  position: absolute;
2310
  z-index: -1;
2311
  left: 0;
2312
  top: 0;
2313
  width: 100%;
2314
  height: 100%;
2315
  opacity: 0;
2316
  transition: opacity 0.3s ease-out;
2317
}
2318

2319
.glowbutton:hover::after {
2320
  opacity: 1;
2321
  animation: glowshadow 2s linear infinite;
2322
}
2323

2324
.glowbutton:active::after {
2325
  background: linear-gradient(90deg, var(--nord7), var(--nord8), var(--nord7));
2326
  background-size: 100px auto;
2327
  animation: glowshadow 2s linear infinite, glowbg 2s linear infinite;
2328
}
2329

2330
/* -----------------------------------------------
2331
/* Mobile Support
2332
/* ----------------------------------------------- */
2333

2334
/* For mobile-exclusive versions of certain UI elements. */
2335
.mobile {
2336
  display: none;
2337
}
2338

2339
.mnave {
2340
  display: none;
2341
  width: 50px;
2342
  height: 50px;
2343
  margin: 20px;
2344
  cursor: pointer;
2345
  float: right;
2346
  order: 1;
2347
}
2348

2349
#mnavecb {
2350
  position: absolute;
2351
  width: 1px;
2352
  height: 1px;
2353
  margin: -1px;
2354
  overflow: hidden;
2355
  clip: rect(0 0 0 0);
2356
}
2357

2358
.mnavebutton,
2359
.mnavebutton::before,
2360
.mnavebutton::after {
2361
  display: block;
2362
  background-color: var(--nord4);
2363
  height: 4px;
2364
  width: 36px;
2365
  border-radius: 2px;
2366
}
2367

2368
.mnavebutton::before,
2369
.mnavebutton::after {
2370
  content: '';
2371
  position: absolute;
2372
  transition: transform 0.2s ease-out, top 0.2s ease-out;
2373
}
2374

2375
.mnavebutton {
2376
  position: relative;
2377
  left: 50%;
2378
  top: 50%;
2379
  transform: translate(-50%, -50%);
2380
  transition: background-color 0.2s ease-out;
2381
}
2382

2383
.mnavebutton::before {
2384
  top: 12px;
2385
}
2386

2387
.mnavebutton::after {
2388
  top: -12px;
2389
}
2390

2391
#mnavecb:focus-visible + .mnave,
2392
:focus-visible {
2393
  outline: var(--nord17) dashed 3px;
2394
}
2395

2396
#mnavecb:checked + .mnave .mnavebutton {
2397
  background-color: transparent;
2398
}
2399

2400
#mnavecb:checked + .mnave .mnavebutton::before {
2401
  top: 0;
2402
  transform: rotate(-45deg);
2403
}
2404

2405
#mnavecb:checked + .mnave .mnavebutton::after {
2406
  top: 0;
2407
  transform: rotate(45deg);
2408
}
2409

2410
.mobile-overlay {
2411
  position: fixed;
2412
  top: 0;
2413
  left: 0;
2414
  width: 100%;
2415
  height: 100%;
2416
  background: rgba(0,0,0,0.5);
2417
  backdrop-filter: blur(10px);
2418
  display: flex;
2419
  flex-direction: column;
2420
  align-items: center;
2421
  padding-top: calc(10% + 90px);
2422
  opacity: 0;
2423
  pointer-events: none;
2424
  visibility: hidden;
2425
  transition: opacity 0.3s ease;
2426
}
2427

2428
#mnavecb:checked ~ .mobile-overlay {
2429
  opacity: 1;
2430
  pointer-events: auto;
2431
  visibility: visible;
2432
}
2433

2434
.mobile-overlay .navbar-1 {
2435
  display: flex !important;
2436
  flex-direction: column;
2437
  text-align: center;
2438
}
2439

2440
.mobile-overlay .navbar-1 > li {
2441
  margin: 10px 0;
2442
}
2443

2444
.mobile-overlay a {
2445
  display: block;
2446
  width: 110px;
2447
  padding: 15px;
2448
  text-decoration: none;
2449
  color: var(--nord4);
2450
  padding: 15px 25px;
2451
  border: var(--nord11) 1px solid;
2452
  border-radius: 5px;
2453
  color: var(--box-btn-color, white) !important;
2454
  background-color: var(--mac-title-bg, var(--dark2));
2455
  font-size: 16px;
2456
  transition: background-color 0.3s ease;
2457
}
2458

2459
/* -----------------------------------------------
2460
/* CSS Media Queries (largely for mobile support)
2461
/* ----------------------------------------------- */
2462

2463
@media (max-width: 1160px) {
2464
  .navbar-1 {
2465
    display: none !important; 
2466
  }
2467

2468
  .mnave {
2469
    display: inline-block;
2470
  }
2471
}
2472

2473
@media (max-width: 1400px) {
2474
  #header {
2475
    padding: 15px 50px;
2476
  }
2477

2478
  .brand {
2479
    font-size: 21px;
2480
  }
2481

2482
  .logo {
2483
    width: 50px;
2484
    height: 50px;
2485
  }
2486

2487
  .navbar {
2488
    display: flex;
2489
  }
2490

2491
  .navbar-1 {
2492
    justify-content: flex-end;
2493
    flex-grow: 1;
2494
  }
2495

2496
  .navbar-1 > li {
2497
    margin-left: 30px;
2498
  }
2499

2500
  .navbar-1 > li:last-child {
2501
    margin-right: 0;
2502
  }
2503
}
2504

2505
@media (max-width: 1170px) {
2506
  #header {
2507
    padding: 15px 40px;
2508
  }
2509

2510
  .brand {
2511
    font-size: 21px;
2512
  }
2513

2514
  .logo {
2515
    width: 50px;
2516
    height: 50px;
2517
  }
2518

2519
  .navbar {
2520
    display: flex;
2521
  }
2522

2523
  .navbar-1 {
2524
    justify-content: flex-end;
2525
    flex-grow: 1;
2526
  }
2527

2528
  .navbar-1 > li {
2529
    margin-left: 20px;
2530
  }
2531

2532
  .navbar-1 > li:last-child {
2533
    margin-right: 0;
2534
  }
2535

2536
  #banner {
2537
    display: none;
2538
  }
2539
}
2540

2541
@media (min-width: 1160px) {
2542
  .grid-container {
2543
    grid-template-columns: 1fr 1fr;
2544
  }
2545
}
2546

2547
@media only screen and (max-width: 1160px) {
2548
  #header {
2549
    height: auto;
2550
  }
2551

2552
  .navbar-1 {
2553
    justify-content: flex-start;
2554
    flex: 0 0 100%;
2555
  }
2556

2557
  .navbar {
2558
    display: none;
2559
    margin: 0;
2560
    height: auto;
2561
  }
2562

2563
  .navbar > li {
2564
    display: block;
2565
    float: none;
2566
    margin: 0;
2567
  }
2568

2569
  .navbar > li:hover {
2570
    background-color: var(--nord0);
2571
  }
2572

2573
  .navbar > li > a {
2574
    display: block;
2575
    padding: 15px 20px;
2576
  }
2577

2578
  .navbar > li > a:hover {
2579
    animation: none;
2580
  }
2581

2582
  .navbar .dropdown-child {
2583
    margin-top: 0;
2584
  }
2585

2586
  #mnavecb:checked ~ .navbar,
2587
  .mnave {
2588
    display: block;
2589
  }
2590
}
2591

2592
@media (max-width: 960px) {
2593
  .mac-window {
2594
    display: none;
2595
  }
2596
}
2597

2598
@media only screen and (max-width: 800px) {
2599
  .homebutton:not(.mobile) {
2600
    display: none;
2601
  }
2602

2603
  .mobile {
2604
    display: inline-block;
2605
  }
2606

2607
  .image-container-hero {
2608
    display: none;
2609
  }
2610

2611
  .hero-text-wrap {
2612
    margin-right: auto;
2613
  }
2614

2615
  .footerflex {
2616
    flex-direction: column;
2617
  }
2618

2619
  .ad {
2620
    position: relative;
2621
    margin: 20px;
2622
    width: calc(100% - 40px);
2623
    height: 100px;
2624
  }
2625

2626
  #ad-right {
2627
    display: none !important;
2628
  }
2629
}
2630

2631
@media (max-width: 600px) {
2632
  #header {
2633
    padding: 15px 30px;
2634
  }
2635

2636
  .logo {
2637
    width: 25px;
2638
    height: 25px;
2639
  }
2640

2641
  .brand {
2642
    font-size: 14px;
2643
  }
2644

2645
  .navbar,
2646
  .navbar-1 {
2647
    font-size: 11px;
2648
  }
2649

2650
  .new::after {
2651
    padding: 18.2px 20px;
2652
    margin-left: 6.5px;
2653
  }
2654

2655
  .mnave {
2656
    width: 25px;
2657
    height: 25px;
2658
    margin: 10px;
2659
  }
2660

2661
  .mnavebutton,
2662
  .mnavebutton::before,
2663
  .mnavebutton::after {
2664
    height: 2px;
2665
    width: 18px;
2666
    border-radius: 1px;
2667
  }
2668

2669
  .mnavebutton::before {
2670
    top: 6px;
2671
  }
2672

2673
  .mnavebutton::after {
2674
    top: -6px;
2675
  }
2676

2677
  .settings-content {
2678
    width: 300px;
2679
  }
2680

2681
  .settings-header {
2682
    margin-bottom: 10px;
2683
  }
2684

2685
  .cseltitle-main {
2686
    font-size: 23.5px;
2687
  }
2688

2689
  .cseltitle {
2690
    font-size: 15px;
2691
  }
2692

2693
  #csel .cseltitle ~ p:not(:last-child) {
2694
    margin-top: 7px;
2695
  }
2696

2697
  #csel input:not([type='checkbox']),
2698
  #csel select {
2699
    padding: 7px 8px;
2700
    margin: 3.5px 1.75px;
2701
    font-size: 11px;
2702
  }
2703

2704
  #csel .cseltitle ~ input:not([type='checkbox']),
2705
  #csel select {
2706
    width: calc(100% - 94.5px);
2707
  }
2708

2709
  #csel #cselreset {
2710
    margin: 13.5px 0 3.5px;
2711
  }
2712

2713
  .text-wrap {
2714
    width: 60vw;
2715
  }
2716

2717
  .hero,
2718
  .image-container {
2719
    display: none;
2720
  }
2721

2722
  .box-card .content {
2723
    width: min-content !important;
2724
  }
2725

2726
  .grid-container {
2727
    margin: 20px !important;
2728
    margin-top: 100px !important;
2729
  }
2730

2731
  .splashend > h1 {
2732
    font-size: 2em;
2733
  }
2734
}
2735

2736
@media (max-width: 425px) {
2737
  #header {
2738
    padding: 15px 20px;
2739
  }
2740

2741
  .navbar-1 {
2742
    justify-content: space-evenly;
2743
  }
2744

2745
  .home-grid-container {
2746
    padding: 75px 0 50px 5%;
2747
  }
2748

2749
  .home-text h1 > span {
2750
    font-size: 48px;
2751
  }
2752

2753
  .home-text h1 {
2754
    font-size: 36px;
2755
  }
2756

2757
  .homebutton {
2758
    padding: 13.5px 45px;
2759
    font-size: 0.9em;
2760
  }
2761

2762
  .hero-content-header {
2763
    font-size: 1.25em;
2764
  }
2765

2766
  .hero-text-wrap p {
2767
    margin-bottom: 35px;
2768
    font-size: 0.9em;
2769
  }
2770

2771
  .hero-text-wrap p:last-child {
2772
    margin-bottom: 14px;
2773
  }
2774

2775
  .box-card {
2776
    padding: 20px;
2777
  }
2778

2779
  .box-card p {
2780
    margin: 0 2ch 10px 0;
2781
    line-height: 1.375;
2782
    font-size: 0.9em;
2783
  }
2784

2785
  h1.splashstrokeheader,
2786
  .box-card h1,
2787
  .splashend > h1 {
2788
    font-size: 1.625em;
2789
  }
2790
}
2791

2792
Product

Resources

Company
