The official website for the open-source compatibility layer fpPS4
1@media screen and (min-width: 3830px) {
2 .coming-soon {
3 font-size: 84px;
4 }
5
6 .main-text {
7 font-size: 94px;
8 }
9
10 .progress-text {
11 font-size: 50px;
12 }
13
14 .button {
15 padding: 27px 0;
16 width: 316px;
17 height: 122px;
18 font-size: 40px;
19 border-radius: 20px;
20 border: 6px solid rgba(255, 255, 255, 0.4);
21 }
22
23 .bottom-top-text {
24 font-size: 94px;
25 }
26
27 .bottom-desc-text {
28 font-size: 48px;
29 }
30
31 .buttons-container {
32 gap: 126px;
33 }
34
35 .thank-user-container {
36 font-size: 40px;
37 gap: 54px;
38 }
39 .button:hover {border: 6px solid var(--txt-color);}
40
41}
42
43@media screen and (min-width: 2560px) {
44 .coming-soon {
45 font-size: 51px;
46 }
47
48 .main-text {
49 font-size: 65px;
50 }
51
52 .progress-text {
53 font-size: 27px;
54 }
55
56 .button {
57 padding: 16px 0;
58 width: 173px;
59 height: 66px;
60 font-size: 22px;
61 border-radius: 16px;
62 border: 3px solid rgba(255, 255, 255, 0.4);
63 }
64
65 .bottom-top-text {
66 font-size: 52px;
67 }
68
69 .bottom-desc-text {
70 font-size: 30px;
71 }
72
73 .buttons-container {
74 gap: 80px;
75 }
76
77 .thank-user-container {
78 font-size: 24px;
79 gap: 32px;
80 }
81 .button:hover {border: 3px solid var(--txt-color);}
82
83}
84
85@media screen and (max-width: 1280px) {
86 .button {
87 padding: 9px 0;
88 width: 116px;
89 height: 42px;
90 font-size: 16px;
91 }
92
93 .bottom-top-text {
94 font-size: 28px;
95 }
96
97 .bottom-desc-text {
98 font-size: 18px;
99 }
100
101 .thank-user-container {
102 font-size: 16px;
103 left: 17%;
104 }
105}
106
107@media screen and (max-width: 1024px) {
108 .top-text-container {
109 width: 65%;
110 height: 50%;
111 }
112
113 .coming-soon {
114 font-size: 30px;
115 }
116
117 .main-text {
118 font-size: 40px;
119 }
120
121
122 .bottom-top-text {
123 font-size: 25px;
124 }
125
126 .bottom-desc-text {
127 font-size: 17px;
128 margin: 0 15%;
129 }
130
131 .thank-user-container {
132 font-size: 15px;
133 left: 18%;
134 gap: 14px;
135 left: 9%;
136 }
137}
138
139@media screen and (max-width: 770px) {
140 .coming-soon {
141 font-size: 28px;
142 }
143
144 .main-text {
145 font-size: 38px;
146 }
147
148 .progress-text {
149 font-size: 17px;
150 margin: 0 10%;
151 }
152
153 .buttons-container {
154 gap: 40px;
155 }
156
157 .bottom-left {
158 left: 50%;
159 width: 80% !important;
160 height: 55%;
161 top: 16%;
162 }
163
164 .bottom-right {
165 top: 95%;
166 left: 50%;
167 width: 80% !important;
168 height: 55%;
169 }
170
171 .top-text-container {
172 width: 80% !important;
173 }
174
175 .bottom-container {
176 height: 60vh !important;
177 }
178
179 .thank-user-container{
180 left: 17%;
181 }
182
183}
184
185@media screen and (max-width: 600px) {
186 .top-text-container {
187 height: 40%;
188 }
189
190 .coming-soon {
191 font-size: 22px;
192 }
193
194 .main-text {
195 font-size: 28px;
196 }
197
198 .progress-text {
199 font-size: 14px;
200 }
201
202 .bottom-top-text {
203 font-size: 26px;
204 }
205
206 .button {
207 padding: 7px 0;
208 width: 100px;
209 height: 34px;
210 font-size: 14px;
211 }
212
213 .bottom-desc-text {
214 font-size: 14px;
215 }
216
217 .thank-user-container {
218 font-size: 13px;
219 gap: 14px;
220 }
221
222 .buttons-container {
223 gap: 16px;
224 }
225}
226
227@media screen and (max-width: 460px) {
228 .top-text-container {
229 height: 35%;
230 width: 70%;
231 }
232
233 .main-text {
234 font-size: 26px;
235 }
236
237 .progress-text {
238 font-size: 13.5px;
239 margin: 0 1%;
240 }
241
242 .bottom-desc-text {
243 font-size: 13.5px;
244 margin: 0 4%;
245 }
246
247 .thank-user-container {
248 left: 8%;
249 font-size: 12px;
250 gap: 12px;
251 }
252}
253
254@media screen and (max-width: 360px) {
255 .progress-text {
256 font-size: 12.5px;
257 }
258
259 .bottom-desc-text {
260 font-size: 12.5px;
261 }
262
263 .thank-user-container {
264 left: 7%;
265 font-size: 12px;
266 gap: 12px;
267 }
268}