22 font-family : Arial, sans-serif;
33 margin : 0 ;
44 padding : 0 ;
5- background-color : # f9fafb ;
6- color : # 333 ;
5+ background-color : # 121212 ;
6+ color : # e0e0e0 ;
77 display : flex;
88 justify-content : center;
99 align-items : center;
@@ -12,15 +12,15 @@ body {
1212
1313h1 {
1414 font-size : 2.5em ;
15- color : # 333 ;
15+ color : # ffffff ;
1616 margin-bottom : 20px ;
1717}
1818
1919form {
20- background : # fff ;
20+ background : # 1e1e1e ;
2121 padding : 30px ;
2222 border-radius : 8px ;
23- box-shadow : 0px 4px 12px rgba (0 , 0 , 0 , 0.1 );
23+ box-shadow : 0px 4px 12px rgba (0 , 0 , 0 , 0.3 );
2424 width : 100% ;
2525 max-width : 800px ;
2626 text-align : left;
@@ -30,25 +30,23 @@ label {
3030 font-weight : bold;
3131 margin-bottom : 8px ;
3232 display : inline-block;
33- color : # 555 ;
33+ color : # bbbbbb ;
3434}
3535
36- textarea {
36+ textarea , input {
3737 width : 100% ;
3838 padding : 12px ;
3939 margin-bottom : 16px ;
40- border : 1px solid # ccc ;
40+ border : 1px solid # 444 ;
4141 border-radius : 6px ;
42- font-family : 'Courier New' , monospace;
42+ background-color : # 262626 ;
43+ color : # e0e0e0 ;
4344 font-size : 1rem ;
44- line-height : 1.5 ;
45- min-height : 200px ;
4645 box-sizing : border-box;
4746 transition : border-color 0.3s ease;
48- resize : vertical;
4947}
5048
51- textarea : focus {
49+ textarea : focus , input : focus {
5250 border-color : # 007bff ;
5351 outline : none;
5452}
@@ -79,7 +77,7 @@ button {
7977 cursor : pointer;
8078 font-size : 1rem ;
8179 width : 100% ;
82- margin-top : 10px ; /* Reduced margin-top to reduce space between button and password input */
80+ margin-top : 10px ;
8381 transition : background-color 0.3s ;
8482}
8583
@@ -103,33 +101,31 @@ button:hover {
103101
104102# code-editor {
105103 min-height : 300px ;
106- border : 1px solid # ccc ;
104+ border : 1px solid # 444 ;
107105 border-radius : 6px ;
108106 padding : 10px ;
109- background-color : # f9f9f9 ;
110- }
111-
112- /* Add margin-bottom only to the password input */
113- form div : nth-child (2 ) {
114- margin-bottom : 1rem ; /* Add spacing between password input and code editor */
107+ background-color : # 1e1e1e ;
108+ color : # e0e0e0 ;
109+ font-family : 'Courier New' , monospace;
115110}
116111
117112.error-details {
118- background-color : # fff ;
113+ background-color : # 1e1e1e ;
119114 padding : 20px ;
120115 border-radius : 8px ;
121- box-shadow : 0px 4px 12px rgba (0 , 0 , 0 , 0.1 );
116+ box-shadow : 0px 4px 12px rgba (0 , 0 , 0 , 0.3 );
122117 margin-top : 20px ;
123118}
124119
125120.error-details pre {
126- background-color : # f4f4f4 ;
121+ background-color : # 262626 ;
127122 padding : 12px ;
128123 border-radius : 6px ;
129124 font-family : 'Courier New' , monospace;
130125 font-size : 1rem ;
131126 line-height : 1.5 ;
132127 overflow-x : auto;
128+ color : # f8f8f2 ;
133129}
134130
135131.error-details p {
@@ -148,10 +144,10 @@ form div:nth-child(2) {
148144 font-weight : bold;
149145 text-decoration : none;
150146 padding : 10px ;
151- background-color : # f0f0f0 ;
147+ background-color : # 222 ;
152148 border-radius : 6px ;
153149}
154150
155151.back-link : hover {
156- background-color : # ddd ;
152+ background-color : # 333 ;
157153}
0 commit comments