1+ /* Theme variables */
2+ : root {
3+ --bg-color : # f8f9fa ;
4+ --card-bg : # fff ;
5+ --text-color : # 212529 ;
6+ --border-color : # dee2e6 ;
7+ --card-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.1 );
8+ --code-bg : # 2c3e50 ;
9+ --code-color : # ecf0f1 ;
10+ --button-bg : # 3498db ;
11+ --button-hover : # 2980b9 ;
12+ --section-bg : # f8f9fa ;
13+ --input-bg : # ffffff ;
14+ --input-color : # 2c3e50 ;
15+ --input-border : # ddd ;
16+ }
17+
18+ /* Dark theme */
19+ [data-theme = "dark" ] {
20+ --bg-color : # 212529 ;
21+ --card-bg : # 343a40 ;
22+ --text-color : # f8f9fa ;
23+ --border-color : # 495057 ;
24+ --card-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.3 );
25+ --code-bg : # 1a1a1a ;
26+ --code-color : # ecf0f1 ;
27+ --button-bg : # 2980b9 ;
28+ --button-hover : # 3498db ;
29+ --section-bg : # 2d3338 ;
30+ --input-bg : # 2d3338 ;
31+ --input-color : # f8f9fa ;
32+ --input-border : # 495057 ;
33+ }
34+
35+ /* Reset margins and padding */
36+ * {
37+ margin : 0 ;
38+ padding : 0 ;
39+ box-sizing : border-box;
40+ }
41+
42+ html , body {
43+ margin : 0 ;
44+ padding : 0 ;
45+ font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI' , Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans' , 'Helvetica Neue' , sans-serif;
46+ background : var (--bg-color );
47+ color : var (--text-color );
48+ line-height : 1.6 ;
49+ font-size : 16px ;
50+ min-height : 100vh ;
51+ transition : all 0.3s ease;
52+ }
53+
54+ .content {
55+ max-width : 1200px ;
56+ margin : 0 auto;
57+ padding : 0 ;
58+ }
59+
60+ .box {
61+ background : var (--card-bg );
62+ border-radius : 8px ;
63+ padding : 25px ;
64+ margin : 20px 0 ;
65+ box-shadow : var (--card-shadow );
66+ border : 1px solid var (--border-color );
67+ }
68+
69+ .container {
70+ max-width : 800px ;
71+ margin : 0 auto;
72+ background : var (--card-bg );
73+ border-radius : 8px ;
74+ box-shadow : var (--card-shadow );
75+ padding : 20px ;
76+ }
77+
78+ main {
79+ padding : 0 ;
80+ }
81+
82+ h1 , h2 , h3 , h4 {
83+ color : var (--text-color );
84+ }
85+
86+ /* Updated heading styles */
87+ h1 {
88+ font-size : 2.75rem ;
89+ margin : 1rem 0 ;
90+ color : var (--text-color );
91+ text-align : center;
92+ font-weight : 600 ;
93+ }
94+
95+ h2 {
96+ font-size : 2.25rem ;
97+ margin : 0.875rem 0 ;
98+ color : var (--text-color );
99+ font-weight : 600 ;
100+ }
101+
102+ h3 {
103+ font-size : 2rem ;
104+ margin : 2rem 0 1rem ;
105+ color : var (--text-color );
106+ font-weight : 600 ;
107+ border-bottom : 2px solid var (--border-color );
108+ padding-bottom : 0.5rem ;
109+ }
110+
111+ h4 {
112+ font-size : 1.5rem ;
113+ margin : 1.5rem 0 1rem ;
114+ color : var (--text-color );
115+ font-weight : 600 ;
116+ }
117+
118+ .section {
119+ background : var (--section-bg );
120+ margin : 25px 0 ;
121+ padding : 20px ;
122+ border-radius : 8px ;
123+ border : 1px solid var (--border-color );
124+ }
125+
126+ .section h2 {
127+ margin-top : 0 ;
128+ color : var (--text-color );
129+ font-size : 1.75rem ;
130+ }
131+
132+ input [type = "text" ], textarea {
133+ width : 100% ;
134+ padding : 12px ;
135+ margin : 8px 0 ;
136+ border : 1px solid var (--input-border );
137+ border-radius : 4px ;
138+ background : var (--input-bg );
139+ color : var (--input-color );
140+ font-size : 1rem ;
141+ transition : all 0.3s ease;
142+ }
143+
144+ button , .button {
145+ background : var (--button-bg );
146+ color : white;
147+ padding : 12px 24px ;
148+ border : none;
149+ border-radius : 4px ;
150+ cursor : pointer;
151+ text-decoration : none;
152+ display : inline-block;
153+ margin : 5px 0 ;
154+ font-size : 1rem ;
155+ transition : all 0.3s ease;
156+ }
157+
158+ button : hover , .button : hover {
159+ background : var (--button-hover );
160+ transform : translateY (-1px );
161+ }
162+
163+ .code-block {
164+ background : var (--code-bg );
165+ color : var (--code-color );
166+ padding : 15px ;
167+ border-radius : 4px ;
168+ overflow-x : auto;
169+ margin : 10px 0 ;
170+ font-family : 'Consolas' , 'Monaco' , 'Courier New' , monospace;
171+ font-size : 0.95rem ;
172+ line-height : 1.4 ;
173+ }
174+
175+ pre {
176+ margin : 0 ;
177+ white-space : pre-wrap;
178+ font-size : 0.95rem ;
179+ }
180+
181+ .info {
182+ background : var (--section-bg );
183+ padding : 20px ;
184+ border-left : 4px solid var (--button-bg );
185+ margin : 20px 0 ;
186+ border-radius : 0 8px 8px 0 ;
187+ font-size : 1.1rem ;
188+ }
189+
190+ .lab {
191+ background : var (--section-bg );
192+ border-left : 4px solid var (--button-bg );
193+ padding : 20px ;
194+ margin : 20px 0 ;
195+ border-radius : 0 8px 8px 0 ;
196+ font-size : 1.1rem ;
197+ }
198+
199+ .lab .bp {
200+ margin : 1rem 0 ;
201+ font-weight : 500 ;
202+ }
203+
204+ .bp {
205+ font-size : 1.1rem ;
206+ line-height : 1.7 ;
207+ margin : 1rem 0 ;
208+ color : var (--text-color );
209+ }
210+
211+ ul {
212+ padding-left : 25px ;
213+ }
214+
215+ li {
216+ margin : 10px 0 ;
217+ line-height : 1.5 ;
218+ font-size : 1.1rem ;
219+ }
220+
221+ .theme-toggle {
222+ position : fixed;
223+ top : 20px ;
224+ right : 20px ;
225+ z-index : 1000 ;
226+ width : 40px ;
227+ height : 40px ;
228+ border-radius : 50% ;
229+ border : 2px solid var (--border-color );
230+ background-color : var (--card-bg );
231+ color : var (--text-color );
232+ cursor : pointer;
233+ transition : all 0.3s ease;
234+ display : flex;
235+ align-items : center;
236+ justify-content : center;
237+ padding : 0 ;
238+ font-size : 1.2rem ;
239+ }
240+
241+ .theme-toggle : hover {
242+ transform : scale (1.1 );
243+ opacity : 0.9 ;
244+ }
0 commit comments