this repo has no description
1html {
2 font-size: 100%;
3 background-color: black;
4}
5body {
6 font-family: "Nunito Sans", sans-serif;
7 font-weight: 400;
8 line-height: 1.75;
9 margin: 0;
10 max-width: 55rem;
11}
12p {
13 margin-bottom: 1rem;
14}
15div {
16 color: #d4d4d4;
17}
18
19a:link {
20 text-decoration: none;
21 text-decoration-thickness: 1px;
22 text-underline-offset: 0.15rem;
23 text-decoration-style: dotted;
24}
25a {
26 color: #7ec699;
27}
28
29ul,
30ol {
31 padding-left: 1.5rem;
32}
33
34blockquote {
35 color: #d4d4d4;
36 border-left: 2px dotted #666;
37 margin-left: 0.5rem;
38 padding-left: 1.5rem;
39 margin-bottom: 2rem;
40}
41
42h1,
43h2,
44h3,
45h4,
46h5 {
47 margin: 3rem 0 1.38rem;
48 font-family: "Rubik", sans-serif;
49 font-weight: 500;
50 line-height: 1.3;
51 text-transform: capitalize;
52}
53h1 {
54 font-weight: 700;
55 text-transform: uppercase;
56 margin-top: 0;
57 letter-spacing: 1px;
58}
59h2 {
60 margin-top: 5rem;
61 padding-top: 2rem;
62 border-top: 2px dotted #666;
63}
64h3 {
65 margin-top: 3rem;
66}
67
68h1 {
69 font-size: 4.209rem;
70}
71h2 {
72 font-size: 3.157rem;
73}
74h3 {
75 font-size: 2.369rem;
76}
77h4 {
78 font-size: 1.777rem;
79}
80h5 {
81 font-size: 1.333rem;
82}
83small,
84.text_small {
85 font-size: 0.75rem;
86}
87
88header > div,
89footer > div {
90 padding: 2rem 2rem;
91 display: flex;
92 align-items: center;
93 gap: 1rem;
94 text-transform: uppercase;
95 font-weight: 600;
96 line-height: 2;
97 font-size: 0.875rem;
98 max-width: 35rem;
99 margin: 0 auto;
100}
101header a,
102footer a {
103 color: #cc99cd;
104 text-decoration: none;
105 max-height: 1.75rem;
106}
107header img,
108footer img {
109 height: 1.75rem;
110 -webkit-filter: invert(1);
111 filter: invert(1);
112 padding-right: 0.5rem;
113}
114footer {
115 margin-bottom: 6rem;
116}
117
118main {
119 max-width: 35rem;
120 margin: 0 auto;
121 background-color: black;
122}
123
124a:hover {
125 opacity: 0.8;
126}
127
128#output {
129 display: flex;
130 flex-direction: column;
131 gap: 0.5em;
132 margin: 0.8em 0;
133 box-sizing: border-box;
134}
135
136pre {
137 overflow-x: auto;
138}
139code,
140pre,
141code[class*="language-"],
142pre[class*="language-"] {
143 font-family: "Fira Code", Monaco, Menlo, Consolas, "Courier New", monospace;
144 position: relative;
145 font-size: 0.8rem;
146}
147pre[class*="language-"] {
148 padding: 0.5em 0.5em;
149 margin: 0em;
150 z-index: 2;
151}
152code,
153pre > code {
154 font-size: 0.8rem;
155 line-height: 1.42;
156 -webkit-text-size-adjust: 100%;
157}
158pre > code {
159 font-size: 0.8rem;
160 margin-left: 2.5%;
161 display: block;
162}
163
164:not(pre) > code[class*="language-"], pre[class*="language-"] {
165 background: #2d2d2d;
166 border-radius: 5px 5px 0px 0px;
167}
168pre[class*="language-"] + pre[class*="language-"].result {
169 background-color: #202020;
170 position: relative;
171 opacity: 0.9;
172 border-radius: 0px 0px 5px 5px;
173}
174
175pre[class*="language-"].result {
176 z-index: 1;
177}
178input[type="text"], textarea {
179 background-color: #2d2d2d;
180 outline: none;
181 color: #ccc;
182}
183
184#prompt-string {
185 font-family: "Nunito Sans", sans-serif;
186 font-weight: bold;
187 display: inline-block;
188 padding-right: 0.4em;
189}
190
191#input {
192 font-family: "Fira Code", Monaco, Menlo, Consolas, "Courier New", monospace;
193 background-color: #2d2d2d;
194 color: #d4d4d4;
195 border: none;
196 padding: 0.5em 1em;
197 border-radius: 5px 0px 0px 5px;
198 transition: background-color 200ms;
199 width: 20em;
200}
201
202#submit-input {
203 font-family: "Nunito Sans", sans-serif;
204 background-color: #3a3a3a;
205 color: #c0c0c0;
206 border: none;
207 padding: 0.5em 1.2em;
208 font-weight: bold;
209 border-radius: 0px 5px 5px 0px;
210 transition: background-color 200ms;
211}
212#submit-input:hover {
213 cursor: pointer;
214 background-color: #434343;
215}
216#submit-input:active {
217 background-color: #3a3a3a;
218}
219
220#clear-local-storage {
221 font-family: "Nunito Sans", sans-serif;
222 background-color: #2d2d2d;
223 color: #c0c0c0;
224 border: none;
225 padding: 0.5em 1.2em;
226 font-weight: bold;
227 border-radius: 5px;
228 transition: background-color 200ms;
229}
230#clear-local-storage:hover {
231 cursor: pointer;
232 background-color: #434343;
233}