|
24 | 24 | box-sizing: border-box; |
25 | 25 | } |
26 | 26 |
|
| 27 | +:root { |
| 28 | +--color-black:#090B0B; |
| 29 | +--color-white:#FFFFFF; |
| 30 | +--color-dark-gray:#18181B; |
| 31 | +--color-light-gray:#A1A1AA; |
| 32 | +--color-orange:#F3722C; |
| 33 | +} |
| 34 | + |
27 | 35 | html, |
28 | 36 | body { |
29 | | -background-color:#05060b; |
30 | | -color:#a1a1aa; |
31 | 37 | display: flex; |
32 | 38 | align-items: center; |
33 | 39 | justify-content: center; |
34 | | -font-family: sans-serif; |
35 | | -font-size:16px; |
36 | 40 | height:100%; |
| 41 | + |
| 42 | +background:var(--color-black); |
| 43 | +color:var(--color-light-gray); |
| 44 | + |
| 45 | +font-family: system-ui, sans-serif; |
| 46 | +font-size:16px; |
37 | 47 | } |
38 | 48 |
|
39 | 49 | header { |
40 | 50 | text-align: center; |
41 | 51 | } |
42 | 52 |
|
43 | 53 | .container { |
44 | | ---side-padding:24px; |
| 54 | +--side-padding:1.5rem; |
45 | 55 | width:100%; |
46 | | -max-width:calc(500px+var(--side-padding)*2); |
| 56 | +max-width:calc(31.25+var(--side-padding)*2); |
47 | 57 | padding:0var(--side-padding); |
48 | 58 | } |
49 | 59 |
|
50 | 60 | .coder-svg { |
51 | | -width:80px; |
52 | | -margin-bottom:24px; |
| 61 | +width:5rem; |
| 62 | +margin-bottom:1.5rem; |
53 | 63 | } |
54 | 64 |
|
55 | 65 | h1 { |
56 | | -font-size:24px; |
57 | | -margin-bottom:8px; |
| 66 | +font-size:1.5rem; |
58 | 67 | font-weight:400; |
59 | | -color: white; |
| 68 | +color:var(--color-white); |
| 69 | + |
| 70 | +margin-bottom:0.5rem; |
60 | 71 | } |
61 | 72 |
|
62 | 73 | p, |
63 | 74 | li { |
64 | 75 | line-height:140%; |
65 | | -font-size:14px; |
| 76 | +font-size:1rem; |
66 | 77 | } |
67 | 78 |
|
68 | | - |
69 | 79 | .button-group { |
70 | 80 | display: flex; |
71 | 81 | align-items: center; |
72 | 82 | justify-content: center; |
73 | | -gap:12px; |
74 | | -margin-top:24px; |
| 83 | +gap:0.75rem; |
| 84 | + |
| 85 | +margin-top:1.5rem; |
75 | 86 | } |
76 | 87 |
|
77 | 88 | .button-groupa, |
78 | 89 | .button-groupbutton { |
79 | 90 | display: inline-flex; |
80 | 91 | align-items: center; |
81 | 92 | justify-content: center; |
82 | | -padding:6px16px; |
83 | | -border-radius:4px; |
84 | | -border:1px solid#2c3854; |
85 | | -text-decoration: none; |
| 93 | + |
| 94 | +padding:0.5rem1rem; |
| 95 | + |
| 96 | +border-radius:0.375rem; |
| 97 | +border:1px solid#27272a; |
86 | 98 | background: none; |
87 | | -font-size: inherit; |
88 | | -color: inherit; |
89 | | -width:200px; |
90 | | -height:42px; |
| 99 | + |
| 100 | +color:#ffffff; |
| 101 | +text-decoration: none; |
| 102 | +font-size:0.875rem; |
| 103 | +font-weight:400; |
| 104 | + |
| 105 | +width:12.5rem; |
| 106 | +height:2.5rem; |
| 107 | + |
91 | 108 | cursor: pointer; |
92 | 109 | } |
93 | 110 |
|
94 | 111 | .button-groupa:hover, |
95 | 112 | .button-groupbutton:hover { |
96 | | -border-color:hsl(222,31%,40%); |
| 113 | +background-color:var(--color-dark-gray); |
| 114 | +border-color:#27272a; |
97 | 115 | } |
98 | 116 |
|
99 | 117 | .warning { |
100 | | -margin-top:24px; |
101 | | -border:1px solidrgb(243,140,89); |
102 | | -background:rgb(13,19,33); |
| 118 | +border:1px solidvar(--color-orange); |
| 119 | +background:var(--color-dark-gray); |
103 | 120 | width:100%; |
104 | | -padding:24px; |
| 121 | + |
| 122 | +margin:1.5rem00; |
| 123 | +padding:1.5rem; |
105 | 124 | } |
106 | 125 |
|
107 | 126 | .warning-title { |
|
111 | 130 | } |
112 | 131 |
|
113 | 132 | .warning-titleh3 { |
114 | | -margin-left:12px; |
115 | | -font-size:16px; |
116 | | -font-weight:500; |
117 | | -color: white; |
| 133 | +font-size:1rem; |
| 134 | +font-weight:400; |
| 135 | +color:var(--color-white); |
| 136 | + |
| 137 | +margin-left:0.75rem; |
118 | 138 | } |
119 | 139 |
|
120 | 140 | .warningli { |
121 | | -padding-top:10px; |
122 | | -margin-left:30px; |
| 141 | +padding-top:0.625rem; |
| 142 | +margin-left:1.875rem; |
123 | 143 | } |
124 | 144 | </style> |
125 | 145 | </head> |
|