1:root,
  2:root.light {
  3    --bgColor: #EEEEEE;
  4    --fgColor: #41474E;
  5    --metaColor: #D26878;
  6    --headColor: #;
  7    --linkColor: #5690AF;
  8    --hovColor: #22453F;
  9    --bgSelect: #FFFAE1;
 10    --bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
 11    --red: #D26878;
 12    --dimRed: #623039;
 13    --orange: #e08f67;
 14    --dimOrange: #926048;
 15    --yellow: #FFFAE1;
 16    --dimYellow: #D5C5A1;
 17    --green: #56AFA0;
 18    --dimGreen: #22453F;
 19    --blue: #5690AF;
 20    --dimBlue: #223844;
 21    --purple: #9271D6;
 22    --dimPurple: #47356C;
 23    --grey: #CBCDCD;
 24    --dimGrey: #646868
 25}
 26
 27:root.dark {
 28    --bgColor: #222529;
 29    --fgColor: #D6D6D6;
 30    --metaColor: #78B6AD;
 31    --headColor: #;
 32    --linkColor: #DBD5BC;
 33    --hovColor: #E2AEA2;
 34    --bgSelect: #464949;
 35    --bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
 36    --red: #CD909B;
 37    --dimRed: #684249;
 38    --orange: #E2AEA2;
 39    --dimOrange: #704941;
 40    --yellow: #DBD5BC;
 41    --dimYellow: #6F6847;
 42    --green: #78B6AD;
 43    --dimGreen: #3E615C;
 44    --blue: #87C9E5;
 45    --dimBlue: #38494F;
 46    --purple: #CEA7DE;
 47    --dimPurple: #5E406A;
 48    --grey: #CBCDCD;
 49    --dimGrey: #464949
 50}
 51
 52::-moz-selection {
 53    color: var(--bgColor);
 54    background: var(--metaColor)
 55}
 56
 57::selection {
 58    color: var(--bgColor);
 59    background: var(--metaColor)
 60}
 61
 62html {
 63    -webkit-box-sizing: border-box;
 64    box-sizing: border-box;
 65    font-size: 62.5%
 66}
 67
 68body {
 69    font-family: monospace;
 70    font-size: 1.6rem;
 71    line-height: 1.35;
 72    max-width: 64rem;
 73    margin: auto;
 74    padding: 1rem;
 75    overflow-wrap: break-word;
 76    background: var(--bgColor);
 77    color: var(--fgColor);
 78}
 79
 80h1 {
 81    font-size: 2.4rem;
 82    margin: 1rem 1rem 1.5rem 0;
 83    color: var(--bgColor);
 84    background-color: var(--metaColor);
 85    text-align: center;
 86}
 87
 88h1::before {
 89    color: var(--bgColor);
 90    content: '# '
 91}
 92
 93h2::before,
 94h3::before,
 95h4::before,
 96h5::before,
 97h6::before {
 98    color: var(--metaColor);
 99    content: '# '
100}
101
102a {
103    color: var(--linkColor);
104}
105
106a:focus,
107a:hover {
108    background-color: var(--linkColor);
109    color: var(--bgColor)
110}
111
112ul {
113    list-style: none;
114    margin-top: .5rem;
115    margin-bottom: .5rem;
116    line-height: 1.45
117}
118
119ul li::marker {
120    content: '» ';
121    color: var(--metaColor)
122}
123
124ul li:hover::marker {
125    content: '# ';
126    font-weight: 700;
127    color: var(--linkColor)
128}
129
130blockquote {
131    border-left: 5px solid var(--metaColor);
132    margin: 1rem;
133    padding: 0 0 0 1rem
134}
135
136textarea {
137    border: 2px dotted;
138    outline: 0;
139    resize: none;
140    overflow: auto;
141    background-color: var(--bgColor)
142}
143
144hr {
145    border: 1px dashed
146}
147
148img {
149    max-width: 90%;
150    height: auto;
151    margin: .2rem;
152    padding: .2rem;
153    border: dashed 2px var(--metaColor);
154    border-radius: 15px
155}
156
157pre {
158    color: var(--bgColor);
159    background-color: var(--fgColor);
160}
161
162p code,
163li code,
164div code {
165    color: var(--bgColor);
166    background-color: var(--fgColor);
167}
168
169iframe {
170    max-width: 90%;
171}
172
173table {
174    table-layout: fixed;
175    width: 100%;
176    border-collapse: collapse;
177    border: none;
178    margin-left: auto;
179    margin-right: auto;
180    margin-bottom: 1rem;
181    line-height: 1.1
182}
183
184thead th:first-child {
185    width: 20%
186}
187
188th {
189    font-weight: 400
190}
191
192td,
193th {
194    padding: .5rem;
195    border: dashed 1px var(--metaColor)
196}
197
198footer {
199    font-size: 1.4rem;
200    clear: both;
201    color: var(--footColor)
202}
203
204footer,
205td,
206th {
207    text-align: left
208}
209
210.metaData,
211.themeButton,
212hr,
213textarea {
214    color: var(--metaColor)
215}
216
217.navBar {
218    margin: .5rem;
219    margin-bottom: 1rem;
220    display: flex;
221    flex-direction: row;
222    gap: .4rem;
223    flex-wrap: wrap;
224    justify-content: flex-end;
225    align-items: center;
226    align-content: flex-end
227}
228
229.themeButton {
230    cursor: pointer;
231    border: none;
232    font-size: 1.8rem;
233    background-color: transparent
234}
235
236.dark .themeButton.dark,
237.themeButton.light {
238    display: none
239}
240
241.dark .themeButton.light {
242    display: block
243}
244
245.tagsData {
246    display: flex;
247    flex-direction: column;
248    flex-wrap: wrap;
249    justify-content: flex-end;
250    align-items: flex-start;
251    align-content: flex-end
252}
253
254.footnote-definition {
255    margin: 0 0 0 2rem;
256}
257.footnote-definition-label {
258    color: var(--metaColor);
259}
260.footnote-definition p {
261    display: inline;
262    padding: 0 0 0 1rem;
263}
264
265.footContainer,
266.footRight {
267    display: flex;
268    align-content: center
269}
270
271.footContainer {
272    flex-direction: row;
273    flex-wrap: wrap;
274    justify-content: space-between;
275    align-items: flex-start
276}
277
278.footRight {
279    flex-direction: column;
280    flex-wrap: wrap;
281    justify-content: center;
282    align-items: center
283}
284
285.noStyle {
286    padding: 0;
287    margin: 0;
288    border: none;
289    border-radius: 0
290}
291
292.textCenter {
293    text-align: center;
294}
295
296.floatRight {
297    float: right
298}
299
300.floatLeft {
301    float: left
302}
303
304#statuscafe {
305    border: 2px dashed var(--metaColor);
306    border-radius: 10px;
307    margin-bottom: 2rem;
308    padding: 1.4rem;
309}
310
311#statuscafe-content {
312    margin-left: 1rem
313}
314
315#statuscafe:focus,
316#statuscafe:hover {
317    transform: scale(1.05);
318    -webkit-transition: .1s ease-in;
319    -moz-transition: .1s ease-in;
320    -o-transition: .1s ease-in;
321    background: var(--bgSelect)
322}
323
324.tag {
325    margin-left: 5px;
326    margin-right: 5px;
327}