1:root {
2 color-scheme: dark;
3 --pink: #ff2bd6;
4 --cyan: #28f7ff;
5 --yellow: #ffe66d;
6 --green: #5cff89;
7 --bg: #070711;
8}
9* { box-sizing: border-box; }
10body {
11 margin: 0;
12 min-height: 100vh;
13 display: grid;
14 place-items: center;
15 overflow: hidden;
16 background:
17 radial-gradient(circle at 50% 25%, rgba(72, 38, 138, .45), transparent 35%),
18 linear-gradient(#0b0b18, #030307 60%);
19 color: white;
20 font-family: "Trebuchet MS", system-ui, sans-serif;
21}
22body::before {
23 content: "";
24 position: fixed;
25 inset: 0;
26 pointer-events: none;
27 background: repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 4px);
28 mix-blend-mode: overlay;
29}
30.cabinet {
31 width: min(96vw, 1040px);
32 padding: 22px;
33 border: 3px solid var(--cyan);
34 border-radius: 28px;
35 background: linear-gradient(145deg, rgba(19,19,42,.95), rgba(2,2,8,.95));
36 box-shadow: 0 0 25px rgba(40,247,255,.45), inset 0 0 35px rgba(255,43,214,.13);
37}
38.marquee {
39 display: flex;
40 justify-content: space-between;
41 gap: 16px;
42 align-items: center;
43 flex-wrap: wrap;
44 margin-bottom: 14px;
45}
46h1 {
47 margin: 0;
48 letter-spacing: .16em;
49 color: var(--yellow);
50 text-shadow: 0 0 8px var(--yellow), 0 0 18px var(--pink);
51}
52.hud {
53 display: flex;
54 gap: 14px;
55 flex-wrap: wrap;
56 font-family: monospace;
57 color: var(--cyan);
58 text-shadow: 0 0 9px var(--cyan);
59}
60.hud span { border: 1px solid rgba(40,247,255,.45); padding: 7px 10px; border-radius: 999px; }
61.screen-wrap {
62 position: relative;
63 border-radius: 16px;
64 overflow: hidden;
65 border: 2px solid rgba(255,43,214,.8);
66 box-shadow: 0 0 22px rgba(255,43,214,.45);
67 background: #02020a;
68}
69canvas { display: block; width: 100%; height: auto; background: transparent; }
70.overlay {
71 position: absolute;
72 inset: 0;
73 display: grid;
74 place-content: center;
75 text-align: center;
76 padding: 24px;
77 background: rgba(2,2,10,.68);
78 backdrop-filter: blur(3px);
79}
80.overlay.hidden { display: none; }
81.overlay h2 {
82 margin: 0 0 8px;
83 font-size: clamp(38px, 9vw, 96px);
84 color: var(--pink);
85 text-shadow: 0 0 10px var(--pink), 0 0 28px var(--cyan);
86}
87button {
88 cursor: pointer;
89 color: white;
90 background: transparent;
91 border: 2px solid var(--cyan);
92 border-radius: 999px;
93 padding: 10px 18px;
94 text-transform: uppercase;
95 font-weight: 800;
96 letter-spacing: .08em;
97 box-shadow: 0 0 12px rgba(40,247,255,.35), inset 0 0 12px rgba(40,247,255,.15);
98}
99button:hover { border-color: var(--pink); box-shadow: 0 0 14px rgba(255,43,214,.6); }
100.controls { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
101.hint { margin-left: auto; color: #bfefff; opacity: .85; }
102@media (max-width: 700px) { .hint { margin-left: 0; } }
103
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.