|
@@ -3,21 +3,42 @@
|
3
|
3
|
<title>Duality</title>
|
4
|
4
|
<link rel="icon" type="image/png" href="favicon.png" />
|
5
|
5
|
<style>
|
|
6
|
+ body {
|
|
7
|
+ background: linear-gradient(
|
|
8
|
+ to right,
|
|
9
|
+ #000000 0%,
|
|
10
|
+ #000000 50%,
|
|
11
|
+ #ffffff 50%,
|
|
12
|
+ #ffffff 100%
|
|
13
|
+ );
|
|
14
|
+ }
|
6
|
15
|
#wrap, .text {
|
7
|
16
|
width: 100%;
|
8
|
17
|
max-width: 640px; /* 160px * 4 */
|
9
|
|
- margin: auto;
|
10
|
|
- text-align: center;
|
|
18
|
+ margin: 0px auto;
|
11
|
19
|
}
|
12
|
20
|
#wrap {
|
13
|
21
|
height: 100%;
|
14
|
22
|
max-height: 576px; /* 144px * 4 */
|
|
23
|
+ border-radius: 5px;
|
|
24
|
+ padding: 5px;
|
|
25
|
+ }
|
|
26
|
+ .text {
|
|
27
|
+ text-align: center;
|
|
28
|
+ border-radius: 5px;
|
|
29
|
+ padding: 5px;
|
|
30
|
+ margin-top: 10px;
|
|
31
|
+ margin-bottom: 10px;
|
15
|
32
|
}
|
16
|
33
|
#controls {
|
17
|
34
|
margin: 0px auto;
|
18
|
35
|
}
|
|
36
|
+ body, #wrap, .text {
|
|
37
|
+ background-color: #DDDDDD;
|
|
38
|
+ color: #000000;
|
|
39
|
+ }
|
19
|
40
|
@media (prefers-color-scheme: dark) {
|
20
|
|
- body, .wrap, #text {
|
|
41
|
+ body, #wrap, .text {
|
21
|
42
|
background-color: #111111;
|
22
|
43
|
color: #FFFFFF;
|
23
|
44
|
}
|