PageSourceSearch

https://kkovacs.eu/software-architect/

html kkovacs.eu collected 2026-10-02 04:39:10 UTC 51,645 bytes, 1,789 lines download raw bytes

1
2
3
4
5
6
7
8<!doctype html>
9<html
10  lang="en"
11  dir="ltr"
12  class="scroll-smooth"
13  data-default-appearance="light"
14  data-auto-appearance="false"
15><head>
16  <meta charset="utf-8" />
17  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
18  <meta name="theme-color" content="rgb(255,255,255)" />
19  
20  <title>Software Architect &middot; Kristof Kovacs ✈️</title>
21    <meta name="title" content="Software Architect &middot; Kristof Kovacs ✈️" />
22  
23  
24  
25  
26  
27  
27<script
28    type="text/javascript"
29    src="/js/appearance.min.74ad8406faea02f3e186ba5126249aaeed9073629e04b05037b903396b188724.js"
30    integrity="sha256-dK2EBvrqAvPhhrpRJiSaru2Qc2KeBLBQN7kDOWsYhyQ="
31  ></script>
31
32  
33  
34  
35  
36  
37  
38  
39    
40  
41  
42  <link
43    type="text/css"
44    rel="stylesheet"
45    href="/css/main.bundle.min.266f0ca824b6f54df2a77c96bed80b3bcfe5f8ecc034a2546c4626bd718872e4.css"
46    integrity="sha256-Jm8MqCS29U3yp3yWvtgLO8/l&#43;OzANKJUbEYmvXGIcuQ="
47  />
48  
49  
50  
51  
52  
53  
54  
55  <meta
56    name="description"
57    content="
58      
59        Let&#39;s say you need custom software developed. A sophisticated web application, an interface between two systems, a high performance backend, or something similar.
60Which computer language is the best fit? Go, PHP, Java or something else? What architecture?
61What database to use, MySQL, Oracle or PostgreSQL?
62Or should it use one of the shiny new NoSQL databases? But which one, Cassandra, Hadoop, Redis, Riak or MongoDB, and why?
63On the front-end, which JavaScript framework?
64      
65    "
66  />
67  
68  
69  
70  <link rel="canonical" href="https://kkovacs.eu/software-architect/" />
71  
72  
73    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
74    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
75    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
76    <link rel="manifest" href="/site.webmanifest" />
77  
78  
79  
80    <meta name="google-site-verification" content="googlec8e8bfb88125f3de" />
81  
82  
83  
84  
85  
86  
87  <meta property="og:title" content="Software Architect" />
88<meta property="og:description" content="Let&#39;s say you need custom software developed. A sophisticated web application, an interface between two systems, a high performance backend, or something similar.
89Which computer language is the best fit? Go, PHP, Java or something else? What architecture?
90What database to use, MySQL, Oracle or PostgreSQL?
91Or should it use one of the shiny new NoSQL databases? But which one, Cassandra, Hadoop, Redis, Riak or MongoDB, and why?
92On the front-end, which JavaScript framework?" />
93<meta property="og:type" content="article" />
94<meta property="og:url" content="https://kkovacs.eu/software-architect/" /><meta property="article:section" content="pages" />
95
96
97
98
99  <meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Software Architect"/>
100<meta name="twitter:description" content="Let&#39;s say you need custom software developed. A sophisticated web application, an interface between two systems, a high performance backend, or something similar.
101Which computer language is the best fit? Go, PHP, Java or something else? What architecture?
102What database to use, MySQL, Oracle or PostgreSQL?
103Or should it use one of the shiny new NoSQL databases? But which one, Cassandra, Hadoop, Redis, Riak or MongoDB, and why?
104On the front-end, which JavaScript framework?"/>
105
106  
107  
107<script type="application/ld+json">
108  {
109    "@context": "https://schema.org",
110    "@type": "Article",
111    "articleSection": "",
112    "name": "Software Architect",
113    "headline": "Software Architect",
114    
115    "abstract": "Let\u0027s say you need custom software developed. A sophisticated web application, an interface between two systems, a high performance backend, or something similar.\nWhich computer language is the best fit? Go, PHP, Java or something else? What architecture?\nWhat database to use, MySQL, Oracle or PostgreSQL?\nOr should it use one of the shiny new NoSQL databases? But which one, Cassandra, Hadoop, Redis, Riak or MongoDB, and why?\nOn the front-end, which JavaScript framework?",
116    "inLanguage": "en",
117    "url" : "https:\/\/kkovacs.eu\/software-architect\/",
118    "author" : {
119      "@type": "Person",
120      "name": "Kristof Kovacs"
121    },
122    
123    
124    
125    
126    
127    
128    
129    
130    "mainEntityOfPage": "true",
131    "wordCount": "363"
132  }
133  </script>
133
134
135
136  
137  <meta name="author" content="Kristof Kovacs" />
138  
139    
140      <link href="https://twitter.com/kkovacs" rel="me" />
141    
142      <link href="https://www.linkedin.com/in/kkovacs" rel="me" />
vendor: 99 bytes, lines 142-158
142
143    
144  
145  
146  
147
148
149
150
151
152
153  
154  
155  
156  
157  
158<script async src="https://www.googletagmanager.com/gtag/js?id=
158G-3RM7N9V3RT
vendor: 12 bytes, line 158
158"></script>
159<script>
160var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
161var doNotTrack = (dnt == "1" || dnt == "yes");
162if (!doNotTrack) {
163	
vendor: 130 bytes, lines 163-166
163window.dataLayer = window.dataLayer || [];
164	function gtag(){dataLayer.push(arguments);}
165	gtag('js', new Date());
166	gtag('config', '
166G-3RM7N9V3RT
vendor: 30 bytes, line 166
166', { 'anonymize_ip': true });
167}
168</script>
168
169
170
171
172  
173  
174</head>
175<body
176    class="m-auto flex h-screen max-w-7xl flex-col bg-neutral px-6 text-lg leading-7 text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral"
177  >
178    <div id="the-top" class="absolute flex self-center">
179      <a
180        class="-translate-y-8 rounded-b-lg bg-primary-200 px-3 py-1 text-sm focus:translate-y-0 dark:bg-neutral-600"
181        href="#main-content"
182        ><span class="pe-2 font-bold text-primary-600 dark:text-primary-400">&darr;</span
183        >Skip to main content</a
184      >
185    </div>
186    
187    
188      <header class="py-6 font-semibold text-neutral-900 print:hidden sm:py-10 dark:text-neutral">
189  <nav class="flex items-start justify-between sm:items-center">
190    
191    <div class="flex flex-row items-center">
192      
193  <a
194    class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
195    rel="me"
196    href="/"
197    >Kristof Kovacs ✈️</a
198  >
199
200    </div>
201    
202    
203      <ul class="flex list-none flex-col text-end sm:flex-row">
204        
205          
206            
207            <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5">
208              
209                <a
210                  href="/software-architect/"
211                  title=""
212                  
213                  ><span
214                      class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
215                      >Software Architect</span
216                    >
217                  </a
218                >
219              
220            </li>
221          
222            
223            <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5">
224              
225                <a
226                  href="/resume/"
227                  title=""
228                  
229                  ><span
230                      class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
231                      >CV</span
232                    >
233                  </a
234                >
235              
236            </li>
237          
238            
239            <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5">
240              
241                <a
242                  href="/tags/devops/"
243                  title=""
244                  
245                  ><span
246                      class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
247                      >DevOps</span
248                    >
249                  </a
250                >
251              
252            </li>
253          
254            
255            <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5">
256              
257                <a
258                  href="/tags/management/"
259                  title=""
260                  
261                  ><span
262                      class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
263                      >Management</span
264                    >
265                  </a
266                >
267              
268            </li>
269          
270          
271        
272      </ul>
273    
274  </nav>
275</header>
276
277    
278    <div class="relative flex grow flex-col">
279      <main id="main-content" class="grow">
280        
281  <article>
282    <header class="max-w-prose">
283      
284      <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
285        Software Architect
286      </h1>
287      <div class="mb-8 lg:mb-0 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
288        
289
290
291
292
293
294  
295  
296
297
298
299  
300
301  
302  
303
304  
305
306  
307
308  
309
310  
311
312
313  <div class="flex flex-row flex-wrap items-center">
314    
315    
316
317    
318    
319  </div>
320
321  
322  
323    <div class="my-1 flex flex-wrap text-xs leading-relaxed text-neutral-500 dark:text-neutral-400">
324      
325        
326      
327        
328      
329    </div>
330  
331
332
333      </div>
334      
335    </header>
336    <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
337
338      <div class="contents lg:block lg:order-2" id="kkauthor">
339        <div class="contents lg:flex lg:flex-col lg:sticky lg:top-10">
340          <div class="order-last px-0 lg:max-w-sm lg:ps-4">
341            <div class="">
342              <div class="not-prose">
343                
344  <div class="flex">
345    
346    
347    
348      
349      
350        
351        
352
353
354
355
356
357
358
359
360  
361    <picture
362      class="!mb-0 !mt-0 me-4 w-24 h-auto rounded-full"
363      
364    >
365      
366      
367      
368      
369      <img
370        width="2161"
371        height="2161"
372        class="!mb-0 !mt-0 me-4 w-24 h-auto rounded-full"
373        alt="Kristof Kovacs"
374        loading="lazy" decoding="async"
375        
376          src="/avatar_huc7b21cf2dae24e75fb55a3f51f3ef2c5_489509_660x0_resize_box_3.png"
377          srcset="/avatar_huc7b21cf2dae24e75fb55a3f51f3ef2c5_489509_330x0_resize_box_3.png 330w,/avatar_huc7b21cf2dae24e75fb55a3f51f3ef2c5_489509_660x0_resize_box_3.png 660w
378          
379            ,/avatar_huc7b21cf2dae24e75fb55a3f51f3ef2c5_489509_1024x0_resize_box_3.png 1024w
380          
381          
382            ,/avatar_huc7b21cf2dae24e75fb55a3f51f3ef2c5_489509_1320x0_resize_box_3.png 1320w
383          "
384          sizes="100vw"
385        
386      />
387    </picture>
388  
389
390
391      
392    
393    <div class="place-self-center">
394      
395        <div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">
396          Author
397        </div>
398        <div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
399          Kristof Kovacs
400        </div>
401      
402      
403        <div class="text-sm text-neutral-700 dark:text-neutral-400">Software Architect &amp; DevOps Consultant</div>
404      
405      <div class="text-2xl sm:text-lg">
406  <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
407    
408      
409        <a
410          class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400"
411          style="will-change:transform;"
412          href="https://twitter.com/kkovacs"
413          target="_blank"
414          aria-label="Twitter"
415          rel="me noopener noreferrer"
416          ><span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
417</span></a
418        >
419      
420    
421      
422        <a
423          class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400"
424          style="will-change:transform;"
425          href="https://www.linkedin.com/in/kkovacs"
426          target="_blank"
427          aria-label="Linkedin"
428          rel="me noopener noreferrer"
429          ><span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
430</span></a
431        >
432      
433    
434  </div>
435
436</div>
437    </div>
438  </div>
439
440
441              </div>
442              <div class="text-sm text-neutral-700 dark:text-neutral-400">
443                <p>Hello, I’m Kristof, a human being like you, and an easy to work with, friendly guy.
444                <p>I've been a programmer, a consultant, CIO in startups, head of software development in government, and built two software companies.
445                <p>Some days I’m coding Golang in the guts of a system and other days I'm wearing a suit to help clients with their DevOps practices.
446              </div>
447            </div>
448          </div>
449
450      
451
452        </div>
453      </div>
454
455      <div class="min-w-0 min-h-0 max-w-prose grow lg:order-1 main" id="kkcontent">
456        <p>Let's say you need custom software developed. A <strong>sophisticated web
457application</strong>, an <strong>interface</strong> between two systems, a <strong>high
458performance</strong> backend, or something similar.</p>
459<p><strong>Which computer language</strong> is the best fit? Go, PHP, Java or something else?
460What <strong>architecture</strong>?</p>
461<p>What <strong>database</strong> to use, MySQL, Oracle or PostgreSQL?</p>
462<p>Or should it use one of the shiny new <strong>NoSQL</strong> databases?  But which one, Cassandra, Hadoop, Redis, Riak or MongoDB, and why?</p>
463<p>On the front-end, which <strong>JavaScript framework</strong>? Vue, Angular, maybe Livewire?</p>
464<p><strong>Web-hosting</strong> per month can cost anywhere between $5 and $20000, surely there must be more to it than simple overpricing?</p>
465<p>What is even the difference between <strong>Docker</strong>, <strong>Docker Swarm</strong>, <strong>Kubernetes</strong> and serverless? Would <strong>Azure</strong> or <strong>GCP</strong> be cheaper than <strong>AWS</strong>?</p>
466<p>Can we just buy two physical servers instead?
467Or can it be made to run on a $40/month VM?</p>
468<p><strong>How much data</strong> will we store and how much will that cost? Are there any <strong>cheaper options</strong>, and what are the drawbacks?</p>
469<p>Does it need a <strong>queue</strong>? RabbitMQ, Redis-queue, beanstalkd, or something else?</p>
470<p>As for a <strong>load-balancer</strong>, should it be Nginx, HAproxy, Caddy2, Traefik? Why?</p>
471<p>What about <strong>test and development</strong> environments, how many do we need? (Is it even a fixed number?)</p>
472<p>How should we <strong>deploy</strong>? Once in a blue moon in a big &quot;dog &amp; pony show&quot; <em>(hello, army!)</em> manually <em>(do we have a deploy manual?)</em>,
473or on each feature merge with <strong>continous integration</strong> and <strong>automated testing</strong>, or something in between?</p>
474<p>If auto-deploy, is it via <strong>Docker</strong> build, <strong>Ansible</strong>, or custom scripts?</p>
475<p><strong>On the business side</strong>, what are the <strong>most important features</strong>, and how those overlap with <strong>what can be implemented quickly</strong>?</p>
476<p>Should we <strong>hire our own developers</strong>, or contract it out?</p>
477<p>Should you start with a <a href="/rapid-prototyping/">minimum viable product</a>?</p>
478<p>And you probably want to avoid a developer <strong>accidentally crippling</strong> your
479enterprise by building in a component with a <a href="/businessmens-guide-to-open-source-licenses/">business-unfriendly
480license</a>.</p>
481<p>If <strong>some of the above</strong> sounds like something you want to talk about, <strong>feel
482free to drop me a line</strong> below. I love getting messages!</p>
483<p>To <strong>learn more</strong> about me, check out my <a href="/resume/">résumé</a>, a list of 
484      
485    <a href="/posts/">articles</a> I've written, some of my <a href="/open-source-contributions/">open source</a> contributions, and a high-level overview of <a href="/software-development-team/">our team's services</a>.</p>
486
487      </div>
488    </section>
489    <footer class="max-w-prose pt-8 print:hidden">
490      
491
492      
493
494      
495        
496          <div class="pt-3">
497            <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
498            <div class="pt-3">
499              
500<style>
501:root {
502  --tw-screen-sm: 640px;
503  --tw-screen-md: 768px;
504  --tw-screen-lg: 1024px;
505  --tw-screen-xl: 1280px;
506  --tw-screen-2xl: 1536px;
507  --tw-color-inherit: inherit;
508  --tw-color-current: currentColor;
509  --tw-color-transparent: transparent;
510  --tw-color-black: 0 0 0;
511  --tw-color-white: 255 255 255;
512  --tw-color-slate-50: 248 250 252;
513  --tw-color-slate-100: 241 245 249;
514  --tw-color-slate-200: 226 232 240;
515  --tw-color-slate-300: 203 213 225;
516  --tw-color-slate-400: 148 163 184;
517  --tw-color-slate-500: 100 116 139;
518  --tw-color-slate-600: 71 85 105;
519  --tw-color-slate-700: 51 65 85;
520  --tw-color-slate-800: 30 41 59;
521  --tw-color-slate-900: 15 23 42;
522  --tw-color-slate-950: 2 6 23;
523  --tw-color-gray-50: 249 250 251;
524  --tw-color-gray-100: 243 244 246;
525  --tw-color-gray-200: 229 231 235;
526  --tw-color-gray-300: 209 213 219;
527  --tw-color-gray-400: 156 163 175;
528  --tw-color-gray-500: 107 114 128;
529  --tw-color-gray-600: 75 85 99;
530  --tw-color-gray-700: 55 65 81;
531  --tw-color-gray-800: 31 41 55;
532  --tw-color-gray-900: 17 24 39;
533  --tw-color-gray-950: 3 7 18;
534  --tw-color-zinc-50: 250 250 250;
535  --tw-color-zinc-100: 244 244 245;
536  --tw-color-zinc-200: 228 228 231;
537  --tw-color-zinc-300: 212 212 216;
538  --tw-color-zinc-400: 161 161 170;
539  --tw-color-zinc-500: 113 113 122;
540  --tw-color-zinc-600: 82 82 91;
541  --tw-color-zinc-700: 63 63 70;
542  --tw-color-zinc-800: 39 39 42;
543  --tw-color-zinc-900: 24 24 27;
544  --tw-color-zinc-950: 9 9 11;
545  --tw-color-neutral-50: 250 250 250;
546  --tw-color-neutral-100: 245 245 245;
547  --tw-color-neutral-200: 229 229 229;
548  --tw-color-neutral-300: 212 212 212;
549  --tw-color-neutral-400: 163 163 163;
550  --tw-color-neutral-500: 115 115 115;
551  --tw-color-neutral-600: 82 82 82;
552  --tw-color-neutral-700: 64 64 64;
553  --tw-color-neutral-800: 38 38 38;
554  --tw-color-neutral-900: 23 23 23;
555  --tw-color-neutral-950: 10 10 10;
556  --tw-color-stone-50: 250 250 249;
557  --tw-color-stone-100: 245 245 244;
558  --tw-color-stone-200: 231 229 228;
559  --tw-color-stone-300: 214 211 209;
560  --tw-color-stone-400: 168 162 158;
561  --tw-color-stone-500: 120 113 108;
562  --tw-color-stone-600: 87 83 78;
563  --tw-color-stone-700: 68 64 60;
564  --tw-color-stone-800: 41 37 36;
565  --tw-color-stone-900: 28 25 23;
566  --tw-color-stone-950: 12 10 9;
567  --tw-color-red-50: 254 242 242;
568  --tw-color-red-100: 254 226 226;
569  --tw-color-red-200: 254 202 202;
570  --tw-color-red-300: 252 165 165;
571  --tw-color-red-400: 248 113 113;
572  --tw-color-red-500: 239 68 68;
573  --tw-color-red-600: 220 38 38;
574  --tw-color-red-700: 185 28 28;
575  --tw-color-red-800: 153 27 27;
576  --tw-color-red-900: 127 29 29;
577  --tw-color-red-950: 69 10 10;
578  --tw-color-orange-50: 255 247 237;
579  --tw-color-orange-100: 255 237 213;
580  --tw-color-orange-200: 254 215 170;
581  --tw-color-orange-300: 253 186 116;
582  --tw-color-orange-400: 251 146 60;
583  --tw-color-orange-500: 249 115 22;
584  --tw-color-orange-600: 234 88 12;
585  --tw-color-orange-700: 194 65 12;
586  --tw-color-orange-800: 154 52 18;
587  --tw-color-orange-900: 124 45 18;
588  --tw-color-orange-950: 67 20 7;
589  --tw-color-amber-50: 255 251 235;
590  --tw-color-amber-100: 254 243 199;
591  --tw-color-amber-200: 253 230 138;
592  --tw-color-amber-300: 252 211 77;
593  --tw-color-amber-400: 251 191 36;
594  --tw-color-amber-500: 245 158 11;
595  --tw-color-amber-600: 217 119 6;
596  --tw-color-amber-700: 180 83 9;
597  --tw-color-amber-800: 146 64 14;
598  --tw-color-amber-900: 120 53 15;
599  --tw-color-amber-950: 69 26 3;
600  --tw-color-yellow-50: 254 252 232;
601  --tw-color-yellow-100: 254 249 195;
602  --tw-color-yellow-200: 254 240 138;
603  --tw-color-yellow-300: 253 224 71;
604  --tw-color-yellow-400: 250 204 21;
605  --tw-color-yellow-500: 234 179 8;
606  --tw-color-yellow-600: 202 138 4;
607  --tw-color-yellow-700: 161 98 7;
608  --tw-color-yellow-800: 133 77 14;
609  --tw-color-yellow-900: 113 63 18;
610  --tw-color-yellow-950: 66 32 6;
611  --tw-color-lime-50: 247 254 231;
612  --tw-color-lime-100: 236 252 203;
613  --tw-color-lime-200: 217 249 157;
614  --tw-color-lime-300: 190 242 100;
615  --tw-color-lime-400: 163 230 53;
616  --tw-color-lime-500: 132 204 22;
617  --tw-color-lime-600: 101 163 13;
618  --tw-color-lime-700: 77 124 15;
619  --tw-color-lime-800: 63 98 18;
620  --tw-color-lime-900: 54 83 20;
621  --tw-color-lime-950: 26 46 5;
622  --tw-color-green-50: 240 253 244;
623  --tw-color-green-100: 220 252 231;
624  --tw-color-green-200: 187 247 208;
625  --tw-color-green-300: 134 239 172;
626  --tw-color-green-400: 74 222 128;
627  --tw-color-green-500: 34 197 94;
628  --tw-color-green-600: 22 163 74;
629  --tw-color-green-700: 21 128 61;
630  --tw-color-green-800: 22 101 52;
631  --tw-color-green-900: 20 83 45;
632  --tw-color-green-950: 5 46 22;
633  --tw-color-emerald-50: 236 253 245;
634  --tw-color-emerald-100: 209 250 229;
635  --tw-color-emerald-200: 167 243 208;
636  --tw-color-emerald-300: 110 231 183;
637  --tw-color-emerald-400: 52 211 153;
638  --tw-color-emerald-500: 16 185 129;
639  --tw-color-emerald-600: 5 150 105;
640  --tw-color-emerald-700: 4 120 87;
641  --tw-color-emerald-800: 6 95 70;
642  --tw-color-emerald-900: 6 78 59;
643  --tw-color-emerald-950: 2 44 34;
644  --tw-color-teal-50: 240 253 250;
645  --tw-color-teal-100: 204 251 241;
646  --tw-color-teal-200: 153 246 228;
647  --tw-color-teal-300: 94 234 212;
648  --tw-color-teal-400: 45 212 191;
649  --tw-color-teal-500: 20 184 166;
650  --tw-color-teal-600: 13 148 136;
651  --tw-color-teal-700: 15 118 110;
652  --tw-color-teal-800: 17 94 89;
653  --tw-color-teal-900: 19 78 74;
654  --tw-color-teal-950: 4 47 46;
655  --tw-color-cyan-50: 236 254 255;
656  --tw-color-cyan-100: 207 250 254;
657  --tw-color-cyan-200: 165 243 252;
658  --tw-color-cyan-300: 103 232 249;
659  --tw-color-cyan-400: 34 211 238;
660  --tw-color-cyan-500: 6 182 212;
661  --tw-color-cyan-600: 8 145 178;
662  --tw-color-cyan-700: 14 116 144;
663  --tw-color-cyan-800: 21 94 117;
664  --tw-color-cyan-900: 22 78 99;
665  --tw-color-cyan-950: 8 51 68;
666  --tw-color-sky-50: 240 249 255;
667  --tw-color-sky-100: 224 242 254;
668  --tw-color-sky-200: 186 230 253;
669  --tw-color-sky-300: 125 211 252;
670  --tw-color-sky-400: 56 189 248;
671  --tw-color-sky-500: 14 165 233;
672  --tw-color-sky-600: 2 132 199;
673  --tw-color-sky-700: 3 105 161;
674  --tw-color-sky-800: 7 89 133;
675  --tw-color-sky-900: 12 74 110;
676  --tw-color-sky-950: 8 47 73;
677  --tw-color-blue-50: 239 246 255;
678  --tw-color-blue-100: 219 234 254;
679  --tw-color-blue-200: 191 219 254;
680  --tw-color-blue-300: 147 197 253;
681  --tw-color-blue-400: 96 165 250;
682  --tw-color-blue-500: 59 130 246;
683  --tw-color-blue-600: 37 99 235;
684  --tw-color-blue-700: 29 78 216;
685  --tw-color-blue-800: 30 64 175;
686  --tw-color-blue-900: 30 58 138;
687  --tw-color-blue-950: 23 37 84;
688  --tw-color-indigo-50: 238 242 255;
689  --tw-color-indigo-100: 224 231 255;
690  --tw-color-indigo-200: 199 210 254;
691  --tw-color-indigo-300: 165 180 252;
692  --tw-color-indigo-400: 129 140 248;
693  --tw-color-indigo-500: 99 102 241;
694  --tw-color-indigo-600: 79 70 229;
695  --tw-color-indigo-700: 67 56 202;
696  --tw-color-indigo-800: 55 48 163;
697  --tw-color-indigo-900: 49 46 129;
698  --tw-color-indigo-950: 30 27 75;
699  --tw-color-violet-50: 245 243 255;
700  --tw-color-violet-100: 237 233 254;
701  --tw-color-violet-200: 221 214 254;
702  --tw-color-violet-300: 196 181 253;
703  --tw-color-violet-400: 167 139 250;
704  --tw-color-violet-500: 139 92 246;
705  --tw-color-violet-600: 124 58 237;
706  --tw-color-violet-700: 109 40 217;
707  --tw-color-violet-800: 91 33 182;
708  --tw-color-violet-900: 76 29 149;
709  --tw-color-violet-950: 46 16 101;
710  --tw-color-purple-50: 250 245 255;
711  --tw-color-purple-100: 243 232 255;
712  --tw-color-purple-200: 233 213 255;
713  --tw-color-purple-300: 216 180 254;
714  --tw-color-purple-400: 192 132 252;
715  --tw-color-purple-500: 168 85 247;
716  --tw-color-purple-600: 147 51 234;
717  --tw-color-purple-700: 126 34 206;
718  --tw-color-purple-800: 107 33 168;
719  --tw-color-purple-900: 88 28 135;
720  --tw-color-purple-950: 59 7 100;
721  --tw-color-fuchsia-50: 253 244 255;
722  --tw-color-fuchsia-100: 250 232 255;
723  --tw-color-fuchsia-200: 245 208 254;
724  --tw-color-fuchsia-300: 240 171 252;
725  --tw-color-fuchsia-400: 232 121 249;
726  --tw-color-fuchsia-500: 217 70 239;
727  --tw-color-fuchsia-600: 192 38 211;
728  --tw-color-fuchsia-700: 162 28 175;
729  --tw-color-fuchsia-800: 134 25 143;
730  --tw-color-fuchsia-900: 112 26 117;
731  --tw-color-fuchsia-950: 74 4 78;
732  --tw-color-pink-50: 253 242 248;
733  --tw-color-pink-100: 252 231 243;
734  --tw-color-pink-200: 251 207 232;
735  --tw-color-pink-300: 249 168 212;
736  --tw-color-pink-400: 244 114 182;
737  --tw-color-pink-500: 236 72 153;
738  --tw-color-pink-600: 219 39 119;
739  --tw-color-pink-700: 190 24 93;
740  --tw-color-pink-800: 157 23 77;
741  --tw-color-pink-900: 131 24 67;
742  --tw-color-pink-950: 80 7 36;
743  --tw-color-rose-50: 255 241 242;
744  --tw-color-rose-100: 255 228 230;
745  --tw-color-rose-200: 254 205 211;
746  --tw-color-rose-300: 253 164 175;
747  --tw-color-rose-400: 251 113 133;
748  --tw-color-rose-500: 244 63 94;
749  --tw-color-rose-600: 225 29 72;
750  --tw-color-rose-700: 190 18 60;
751  --tw-color-rose-800: 159 18 57;
752  --tw-color-rose-900: 136 19 55;
753  --tw-color-rose-950: 76 5 25;
754  --tw-color-primary-50: 239 246 255;
755  --tw-color-primary-100: 219 234 254;
756  --tw-color-primary-200: 191 219 254;
757  --tw-color-primary-300: 147 197 253;
758  --tw-color-primary-400: 96 165 250;
759  --tw-color-primary-500: 59 130 246;
760  --tw-color-primary-600: 37 99 235;
761  --tw-color-primary-700: 29 78 216;
762  --tw-color-primary-800: 30 64 175;
763  --tw-color-primary-900: 30 58 138;
764  --tw-color-primary: 48 86 211;
765  --tw-size-0: 0px;
766  --tw-size-1: 0.25rem;
767  --tw-size-2: 0.5rem;
768  --tw-size-3: 0.75rem;
769  --tw-size-4: 1rem;
770  --tw-size-5: 1.25rem;
771  --tw-size-6: 1.5rem;
772  --tw-size-7: 1.75rem;
773  --tw-size-8: 2rem;
774  --tw-size-9: 2.25rem;
775  --tw-size-10: 2.5rem;
776  --tw-size-11: 2.75rem;
777  --tw-size-12: 3rem;
778  --tw-size-14: 3.5rem;
779  --tw-size-16: 4rem;
780  --tw-size-20: 5rem;
781  --tw-size-24: 6rem;
782  --tw-size-28: 7rem;
783  --tw-size-32: 8rem;
784  --tw-size-36: 9rem;
785  --tw-size-40: 10rem;
786  --tw-size-44: 11rem;
787  --tw-size-48: 12rem;
788  --tw-size-52: 13rem;
789  --tw-size-56: 14rem;
790  --tw-size-60: 15rem;
791  --tw-size-64: 16rem;
792  --tw-size-72: 18rem;
793  --tw-size-80: 20rem;
794  --tw-size-96: 24rem;
795  --tw-size-px: 1px;
796  --tw-size-0_5: 0.125rem;
797  --tw-size-1_5: 0.375rem;
798  --tw-size-2_5: 0.625rem;
799  --tw-size-3_5: 0.875rem;
800  --tw-width-1: 1;
801  --tw-width-2: 2;
802  --tw-width-3: 3;
803  --tw-width-4: 4;
804  --tw-width-5: 5;
805  --tw-width-6: 6;
806  --tw-width-7: 7;
807  --tw-width-8: 8;
808  --tw-width-9: 9;
809  --tw-width-10: 10;
810  --tw-width-11: 11;
811  --tw-width-12: 12;
812  --tw-width-auto: auto;
813  --tw-width-3xs: 16rem;
814  --tw-width-2xs: 18rem;
815  --tw-width-xs: 20rem;
816  --tw-width-sm: 24rem;
817  --tw-width-md: 28rem;
818  --tw-width-lg: 32rem;
819  --tw-width-xl: 36rem;
820  --tw-width-2xl: 42rem;
821  --tw-width-3xl: 48rem;
822  --tw-width-4xl: 56rem;
823  --tw-width-5xl: 64rem;
824  --tw-width-6xl: 72rem;
825  --tw-width-7xl: 80rem;
826  --tw-width-prose: 65ch;
827  --tw-font-family-sans: ui-sans-serif, system-ui, -apple-system,
828    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
829    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
830    "Noto Color Emoji";
831  --tw-font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times,
832    serif;
833  --tw-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
834    "Liberation Mono", "Courier New", monospace;
835  --tw-font-size-xs: 0.75rem;
836  --tw-font-size-sm: 0.875rem;
837  --tw-font-size-base: 1rem;
838  --tw-font-size-lg: 1.125rem;
839  --tw-font-size-xl: 1.25rem;
840  --tw-font-size-2xl: 1.5rem;
841  --tw-font-size-3xl: 1.875rem;
842  --tw-font-size-4xl: 2.25rem;
843  --tw-font-size-5xl: 3rem;
844  --tw-font-size-6xl: 3.75rem;
845  --tw-font-size-7xl: 4.5rem;
846  --tw-font-size-8xl: 6rem;
847  --tw-font-size-9xl: 8rem;
848  --tw-font-weight-thin: 100;
849  --tw-font-weight-extralight: 200;
850  --tw-font-weight-light: 300;
851  --tw-font-weight-normal: 400;
852  --tw-font-weight-medium: 500;
853  --tw-font-weight-semibold: 600;
854  --tw-font-weight-bold: 700;
855  --tw-font-weight-extrabold: 800;
856  --tw-font-weight-black: 900;
857  --tw-line-height-3: 0.75rem;
858  --tw-line-height-4: 1rem;
859  --tw-line-height-5: 1.25rem;
860  --tw-line-height-6: 1.5rem;
861  --tw-line-height-7: 1.75rem;
862  --tw-line-height-8: 2rem;
863  --tw-line-height-9: 2.25rem;
864  --tw-line-height-10: 2.5rem;
865  --tw-line-height-none: 1;
866  --tw-line-height-tight: 1.25;
867  --tw-line-height-snug: 1.375;
868  --tw-line-height-normal: 1.5;
869  --tw-line-height-relaxed: 1.625;
870  --tw-line-height-loose: 2;
871  --tw-border-radius-none: 0px;
872  --tw-border-radius-sm: 0.125rem;
873  --tw-border-radius-default: 0.25rem;
874  --tw-border-radius-md: 0.375rem;
875  --tw-border-radius-lg: 0.5rem;
876  --tw-border-radius-xl: 0.75rem;
877  --tw-border-radius-2xl: 1rem;
878  --tw-border-radius-3xl: 1.5rem;
879  --tw-border-radius-full: 9999px;
880}
881
882@layer tailwind-reset {
883     
884
885  *,
886  ::before,
887  ::after {
888    box-sizing: border-box;  
889    border-width: 0;  
890    border-style: solid;  
891    border-color: rgb(var(--tw-color-gray-200) / 1);  
892  }
893
894  ::before,
895  ::after {
896    --tw-content: "";
897  }
898
899   
900
901  html {
902    line-height: 1.5;  
903    -webkit-text-size-adjust: 100%;  
904    -moz-tab-size: 4;  
905    -o-tab-size: 4;
906    tab-size: 4;  
907    font-family: var(--tw-font-family-sans);  
908    font-feature-settings: normal;  
909    font-variation-settings: normal;  
910  }
911
912   
913
914  body {
915    margin: 0;  
916    line-height: inherit;  
917  }
918
919   
920
921  hr {
922    height: 0;  
923    color: inherit;  
924    border-top-width: 1px;  
925  }
926
927   
928
929  abbr:where([title]) {
930    -webkit-text-decoration: underline dotted;
931    text-decoration: underline dotted;
932  }
933
934   
935
936  h1,
937  h2,
938  h3,
939  h4,
940  h5,
941  h6 {
942    font-size: inherit;
943    font-weight: inherit;
944  }
945
946   
947
948  a {
949    color: inherit;
950    text-decoration: inherit;
951  }
952
953   
954
955  b,
956  strong {
957    font-weight: bolder;
958  }
959
960   
961
962  code,
963  kbd,
964  samp,
965  pre {
966    font-family: var(--tw-font-family-mono);  
967    font-size: 1em;  
968  }
969
970   
971
972  small {
973    font-size: 80%;
974  }
975
976   
977
978  sub,
979  sup {
980    font-size: 75%;
981    line-height: 0;
982    position: relative;
983    vertical-align: baseline;
984  }
985
986  sub {
987    bottom: -0.25em;
988  }
989
990  sup {
991    top: -0.5em;
992  }
993
994   
995
996  table {
997    text-indent: 0;  
998    border-color: inherit;  
999    border-collapse: collapse;  
1000  }
1001
1002   
1003
1004  button,
1005  input,
1006  optgroup,
1007  select,
1008  textarea {
1009    font-family: inherit;  
1010    font-feature-settings: inherit;  
1011    font-variation-settings: inherit;  
1012    font-size: 100%;  
1013    font-weight: inherit;  
1014    line-height: inherit;  
1015    color: inherit;  
1016    margin: 0;  
1017    padding: 0;  
1018  }
1019
1020   
1021
1022  button,
1023  select {
1024    text-transform: none;
1025  }
1026
1027   
1028
1029  button,
1030  [type="button"],
1031  [type="reset"],
1032  [type="submit"] {
1033    -webkit-appearance: button;  
1034    background-color: transparent;  
1035    background-image: none;  
1036  }
1037
1038   
1039
1040  :-moz-focusring {
1041    outline: auto;
1042  }
1043
1044   
1045
1046  :-moz-ui-invalid {
1047    box-shadow: none;
1048  }
1049
1050   
1051
1052  progress {
1053    vertical-align: baseline;
1054  }
1055
1056   
1057
1058  ::-webkit-inner-spin-button,
1059  ::-webkit-outer-spin-button {
1060    height: auto;
1061  }
1062
1063   
1064
1065  [type="search"] {
1066    -webkit-appearance: textfield;  
1067    outline-offset: -2px;  
1068  }
1069
1070   
1071
1072  ::-webkit-search-decoration {
1073    -webkit-appearance: none;
1074  }
1075
1076   
1077
1078  ::-webkit-file-upload-button {
1079    -webkit-appearance: button;  
1080    font: inherit;  
1081  }
1082
1083   
1084
1085  summary {
1086    display: list-item;
1087  }
1088
1089   
1090
1091  blockquote,
1092  dl,
1093  dd,
1094  h1,
1095  h2,
1096  h3,
1097  h4,
1098  h5,
1099  h6,
1100  hr,
1101  figure,
1102  p,
1103  pre {
1104    margin: 0;
1105  }
1106
1107  fieldset {
1108    margin: 0;
1109    padding: 0;
1110  }
1111
1112  legend {
1113    padding: 0;
1114  }
1115
1116  ol,
1117  ul,
1118  menu {
1119    list-style: none;
1120    margin: 0;
1121    padding: 0;
1122  }
1123
1124   
1125  dialog {
1126    padding: 0;
1127  }
1128
1129   
1130
1131  textarea {
1132    resize: vertical;
1133  }
1134
1135   
1136
1137  input::-moz-placeholder,
1138  textarea::-moz-placeholder {
1139    opacity: 1;  
1140    color: rgb(var(--tw-color-gray-400) / 1);  
1141  }
1142
1143  input::placeholder,
1144  textarea::placeholder {
1145    opacity: 1;  
1146    color: rgb(var(--tw-color-gray-400) / 1);  
1147  }
1148
1149   
1150
1151  button,
1152  [role="button"] {
1153    cursor: pointer;
1154  }
1155
1156   
1157  :disabled {
1158    cursor: default;
1159  }
1160
1161   
1162
1163  img,
1164  svg,
1165  video,
1166  canvas,
1167  audio,
1168  iframe,
1169  embed,
1170  object {
1171    display: block;  
1172    vertical-align: middle;  
1173  }
1174
1175   
1176
1177  img,
1178  video {
1179    max-width: 100%;
1180    height: auto;
1181  }
1182
1183   
1184  [hidden] {
1185    display: none;
1186  }
1187  *,
1188  ::before,
1189  ::after {
1190    --tw-border-spacing-x: 0;
1191    --tw-border-spacing-y: 0;
1192    --tw-translate-x: 0;
1193    --tw-translate-y: 0;
1194    --tw-rotate: 0;
1195    --tw-skew-x: 0;
1196    --tw-skew-y: 0;
1197    --tw-scale-x: 1;
1198    --tw-scale-y: 1;
1199    --tw-pan-x: ;
1200    --tw-pan-y: ;
1201    --tw-pinch-zoom: ;
1202    --tw-scroll-snap-strictness: proximity;
1203    --tw-gradient-from-position: ;
1204    --tw-gradient-via-position: ;
1205    --tw-gradient-to-position: ;
1206    --tw-ordinal: ;
1207    --tw-slashed-zero: ;
1208    --tw-numeric-figure: ;
1209    --tw-numeric-spacing: ;
1210    --tw-numeric-fraction: ;
1211    --tw-ring-inset: ;
1212    --tw-ring-offset-width: 0px;
1213    --tw-ring-offset-color: #fff;
1214    --tw-ring-color: rgb(147 197 253 / 0.5);
1215    --tw-ring-offset-shadow: 0 0 #0000;
1216    --tw-ring-shadow: 0 0 #0000;
1217    --tw-shadow: 0 0 #0000;
1218    --tw-shadow-colored: 0 0 #0000;
1219    --tw-blur: ;
1220    --tw-brightness: ;
1221    --tw-contrast: ;
1222    --tw-grayscale: ;
1223    --tw-hue-rotate: ;
1224    --tw-invert: ;
1225    --tw-saturate: ;
1226    --tw-sepia: ;
1227    --tw-drop-shadow: ;
1228    --tw-backdrop-blur: ;
1229    --tw-backdrop-brightness: ;
1230    --tw-backdrop-contrast: ;
1231    --tw-backdrop-grayscale: ;
1232    --tw-backdrop-hue-rotate: ;
1233    --tw-backdrop-invert: ;
1234    --tw-backdrop-opacity: ;
1235    --tw-backdrop-saturate: ;
1236    --tw-backdrop-sepia: ;
1237  }
1238  ::-webkit-backdrop {
1239    --tw-border-spacing-x: 0;
1240    --tw-border-spacing-y: 0;
1241    --tw-translate-x: 0;
1242    --tw-translate-y: 0;
1243    --tw-rotate: 0;
1244    --tw-skew-x: 0;
1245    --tw-skew-y: 0;
1246    --tw-scale-x: 1;
1247    --tw-scale-y: 1;
1248    --tw-pan-x: ;
1249    --tw-pan-y: ;
1250    --tw-pinch-zoom: ;
1251    --tw-scroll-snap-strictness: proximity;
1252    --tw-gradient-from-position: ;
1253    --tw-gradient-via-position: ;
1254    --tw-gradient-to-position: ;
1255    --tw-ordinal: ;
1256    --tw-slashed-zero: ;
1257    --tw-numeric-figure: ;
1258    --tw-numeric-spacing: ;
1259    --tw-numeric-fraction: ;
1260    --tw-ring-inset: ;
1261    --tw-ring-offset-width: 0px;
1262    --tw-ring-offset-color: #fff;
1263    --tw-ring-color: rgb(147 197 253 / 0.5);
1264    --tw-ring-offset-shadow: 0 0 #0000;
1265    --tw-ring-shadow: 0 0 #0000;
1266    --tw-shadow: 0 0 #0000;
1267    --tw-shadow-colored: 0 0 #0000;
1268    --tw-blur: ;
1269    --tw-brightness: ;
1270    --tw-contrast: ;
1271    --tw-grayscale: ;
1272    --tw-hue-rotate: ;
1273    --tw-invert: ;
1274    --tw-saturate: ;
1275    --tw-sepia: ;
1276    --tw-drop-shadow: ;
1277    --tw-backdrop-blur: ;
1278    --tw-backdrop-brightness: ;
1279    --tw-backdrop-contrast: ;
1280    --tw-backdrop-grayscale: ;
1281    --tw-backdrop-hue-rotate: ;
1282    --tw-backdrop-invert: ;
1283    --tw-backdrop-opacity: ;
1284    --tw-backdrop-saturate: ;
1285    --tw-backdrop-sepia: ;
1286  }
1287  ::backdrop {
1288    --tw-border-spacing-x: 0;
1289    --tw-border-spacing-y: 0;
1290    --tw-translate-x: 0;
1291    --tw-translate-y: 0;
1292    --tw-rotate: 0;
1293    --tw-skew-x: 0;
1294    --tw-skew-y: 0;
1295    --tw-scale-x: 1;
1296    --tw-scale-y: 1;
1297    --tw-pan-x: ;
1298    --tw-pan-y: ;
1299    --tw-pinch-zoom: ;
1300    --tw-scroll-snap-strictness: proximity;
1301    --tw-gradient-from-position: ;
1302    --tw-gradient-via-position: ;
1303    --tw-gradient-to-position: ;
1304    --tw-ordinal: ;
1305    --tw-slashed-zero: ;
1306    --tw-numeric-figure: ;
1307    --tw-numeric-spacing: ;
1308    --tw-numeric-fraction: ;
1309    --tw-ring-inset: ;
1310    --tw-ring-offset-width: 0px;
1311    --tw-ring-offset-color: #fff;
1312    --tw-ring-color: rgb(147 197 253 / 0.5);
1313    --tw-ring-offset-shadow: 0 0 #0000;
1314    --tw-ring-shadow: 0 0 #0000;
1315    --tw-shadow: 0 0 #0000;
1316    --tw-shadow-colored: 0 0 #0000;
1317    --tw-blur: ;
1318    --tw-brightness: ;
1319    --tw-contrast: ;
1320    --tw-grayscale: ;
1321    --tw-hue-rotate: ;
1322    --tw-invert: ;
1323    --tw-saturate: ;
1324    --tw-sepia: ;
1325    --tw-drop-shadow: ;
1326    --tw-backdrop-blur: ;
1327    --tw-backdrop-brightness: ;
1328    --tw-backdrop-contrast: ;
1329    --tw-backdrop-grayscale: ;
1330    --tw-backdrop-hue-rotate: ;
1331    --tw-backdrop-invert: ;
1332    --tw-backdrop-opacity: ;
1333    --tw-backdrop-saturate: ;
1334    --tw-backdrop-sepia: ;
1335  }
1336}
1337
1338section.my-contact {
1339  --tw-bg-opacity: 1;
1340  background-color: rgb(var(--tw-color-white) / var(--tw-bg-opacity));
1341}
1342
1343:is(.dark section.my-contact) {
1344  --tw-bg-opacity: 1;
1345  background-color: rgb(var(--tw-color-gray-900) / var(--tw-bg-opacity));
1346}
1347
1348section.my-contact > div {
1349  padding-top: var(--tw-size-8);
1350  padding-bottom: var(--tw-size-8);
1351}
1352
1353@media (min-width: 1024px) {
1354  section.my-contact > div {
1355    padding-top: var(--tw-size-16);
1356    padding-bottom: var(--tw-size-16);
1357  }
1358}
1359
1360section.my-contact > div {
1361  padding-left: var(--tw-size-4);
1362  padding-right: var(--tw-size-4);
1363  margin-left: auto;
1364  margin-right: auto;
1365  max-width: var(--tw-screen-md);
1366}
1367
1368section.my-contact > div > h2 {
1369  margin-bottom: var(--tw-size-4);
1370  font-size: var(--tw-font-size-4xl);
1371  line-height: var(--tw-line-height-10);
1372  letter-spacing: -0.025em;
1373  font-weight: var(--tw-font-weight-extrabold);
1374  text-align: center;
1375  --tw-text-opacity: 1;
1376  color: rgb(var(--tw-color-gray-900) / var(--tw-text-opacity));
1377}
1378
1379:is(.dark section.my-contact > div > h2) {
1380  --tw-text-opacity: 1;
1381  color: rgb(var(--tw-color-white) / var(--tw-text-opacity));
1382}
1383
1384section.my-contact > div > p {
1385  margin-bottom: var(--tw-size-8);
1386}
1387
1388@media (min-width: 1024px) {
1389  section.my-contact > div > p {
1390    margin-bottom: var(--tw-size-16);
1391  }
1392}
1393
1394section.my-contact > div > p {
1395  font-weight: var(--tw-font-weight-light);
1396  text-align: center;
1397  --tw-text-opacity: 1;
1398  color: rgb(var(--tw-color-gray-500) / var(--tw-text-opacity));
1399}
1400
1401:is(.dark section.my-contact > div > p) {
1402  --tw-text-opacity: 1;
1403  color: rgb(var(--tw-color-gray-400) / var(--tw-text-opacity));
1404}
1405
1406@media (min-width: 640px) {
1407  section.my-contact > div > p {
1408    font-size: var(--tw-font-size-xl);
1409    line-height: var(--tw-line-height-7);
1410  }
1411}
1412
1413section.my-contact > div > form > :not([hidden]) ~ :not([hidden]) {
1414  --tw-space-y-reverse: 0;
1415  margin-top: calc(var(--tw-size-8) * calc(1 - var(--tw-space-y-reverse)));
1416  margin-bottom: calc(var(--tw-size-8) * var(--tw-space-y-reverse));
1417}
1418
1419section.my-contact > div > form > div > label.my-contact__unique5 {
1420  display: block;
1421  margin-bottom: var(--tw-size-2);
1422  font-size: var(--tw-font-size-sm);
1423  line-height: var(--tw-line-height-5);
1424  font-weight: var(--tw-font-weight-medium);
1425  --tw-text-opacity: 1;
1426  color: rgb(var(--tw-color-gray-900) / var(--tw-text-opacity));
1427}
1428
1429:is(.dark section.my-contact > div > form > div > label.my-contact__unique5) {
1430  --tw-text-opacity: 1;
1431  color: rgb(var(--tw-color-gray-300) / var(--tw-text-opacity));
1432}
1433
1434section.my-contact > div > form > div > input.my-contact__unique1 {
1435  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1436  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1437  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
1438    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1439  --tw-bg-opacity: 1;
1440  background-color: rgb(var(--tw-color-gray-50) / var(--tw-bg-opacity));
1441  border-width: 1px;
1442  --tw-border-opacity: 1;
1443  border-color: rgb(var(--tw-color-gray-300) / var(--tw-border-opacity));
1444  --tw-text-opacity: 1;
1445  color: rgb(var(--tw-color-gray-900) / var(--tw-text-opacity));
1446  font-size: var(--tw-font-size-sm);
1447  line-height: var(--tw-line-height-5);
1448  border-radius: var(--tw-border-radius-lg);
1449}
1450
1451section.my-contact > div > form > div > input.my-contact__unique1:focus {
1452  --tw-ring-opacity: 1;
1453  --tw-ring-color: rgb(var(--tw-color-primary-500) / var(--tw-ring-opacity));
1454  --tw-border-opacity: 1;
1455  border-color: rgb(var(--tw-color-primary-500) / var(--tw-border-opacity));
1456}
1457
1458section.my-contact > div > form > div > input.my-contact__unique1 {
1459  display: block;
1460  width: 100%;
1461  padding: var(--tw-size-2_5);
1462}
1463
1464:is(.dark section.my-contact > div > form > div > input.my-contact__unique1) {
1465  --tw-bg-opacity: 1;
1466  background-color: rgb(var(--tw-color-gray-700) / var(--tw-bg-opacity));
1467  --tw-border-opacity: 1;
1468  border-color: rgb(var(--tw-color-gray-600) / var(--tw-border-opacity));
1469}
1470
1471:is(.dark
1472    section.my-contact
1473    > div
1474    > form
1475    > div
1476    > input.my-contact__unique1)::-moz-placeholder {
1477  --tw-placeholder-opacity: 1;
1478  color: rgb(var(--tw-color-gray-400) / var(--tw-placeholder-opacity));
1479}
1480
1481:is(.dark
1482    section.my-contact
1483    > div
1484    > form
1485    > div
1486    > input.my-contact__unique1)::placeholder {
1487  --tw-placeholder-opacity: 1;
1488  color: rgb(var(--tw-color-gray-400) / var(--tw-placeholder-opacity));
1489}
1490
1491:is(.dark section.my-contact > div > form > div > input.my-contact__unique1) {
1492  --tw-text-opacity: 1;
1493  color: rgb(var(--tw-color-white) / var(--tw-text-opacity));
1494}
1495
1496:is(.dark
1497    section.my-contact
1498    > div
1499    > form
1500    > div
1501    > input.my-contact__unique1:focus) {
1502  --tw-ring-opacity: 1;
1503  --tw-ring-color: rgb(var(--tw-color-primary-500) / var(--tw-ring-opacity));
1504  --tw-border-opacity: 1;
1505  border-color: rgb(var(--tw-color-primary-500) / var(--tw-border-opacity));
1506}
1507
1508:is(.dark section.my-contact > div > form > div > input.my-contact__unique1) {
1509   
1510}
1511
1512section.my-contact > div > form > div > input.my-contact__unique2 {
1513  display: block;
1514  padding: var(--tw-size-3);
1515  width: 100%;
1516  font-size: var(--tw-font-size-sm);
1517  line-height: var(--tw-line-height-5);
1518  --tw-text-opacity: 1;
1519  color: rgb(var(--tw-color-gray-900) / var(--tw-text-opacity));
1520  --tw-bg-opacity: 1;
1521  background-color: rgb(var(--tw-color-gray-50) / var(--tw-bg-opacity));
1522  border-radius: var(--tw-border-radius-lg);
1523  border-width: 1px;
1524  --tw-border-opacity: 1;
1525  border-color: rgb(var(--tw-color-gray-300) / var(--tw-border-opacity));
1526  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1527  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1528  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
1529    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1530}
1531
1532section.my-contact > div > form > div > input.my-contact__unique2:focus {
1533  --tw-ring-opacity: 1;
1534  --tw-ring-color: rgb(var(--tw-color-primary-500) / var(--tw-ring-opacity));
1535  --tw-border-opacity: 1;
1536  border-color: rgb(var(--tw-color-primary-500) / var(--tw-border-opacity));
1537}
1538
1539:is(.dark section.my-contact > div > form > div > input.my-contact__unique2) {
1540  --tw-bg-opacity: 1;
1541  background-color: rgb(var(--tw-color-gray-700) / var(--tw-bg-opacity));
1542  --tw-border-opacity: 1;
1543  border-color: rgb(var(--tw-color-gray-600) / var(--tw-border-opacity));
1544}
1545
1546:is(.dark
1547    section.my-contact
1548    > div
1549    > form
1550    > div
1551    > input.my-contact__unique2)::-moz-placeholder {
1552  --tw-placeholder-opacity: 1;
1553  color: rgb(var(--tw-color-gray-400) / var(--tw-placeholder-opacity));
1554}
1555
1556:is(.dark
1557    section.my-contact
1558    > div
1559    > form
1560    > div
1561    > input.my-contact__unique2)::placeholder {
1562  --tw-placeholder-opacity: 1;
1563  color: rgb(var(--tw-color-gray-400) / var(--tw-placeholder-opacity));
1564}
1565
1566:is(.dark section.my-contact > div > form > div > input.my-contact__unique2) {
1567  --tw-text-opacity: 1;
1568  color: rgb(var(--tw-color-white) / var(--tw-text-opacity));
1569}
1570
1571:is(.dark
1572    section.my-contact
1573    > div
1574    > form
1575    > div
1576    > input.my-contact__unique2:focus) {
1577  --tw-ring-opacity: 1;
1578  --tw-ring-color: rgb(var(--tw-color-primary-500) / var(--tw-ring-opacity));
1579  --tw-border-opacity: 1;
1580  border-color: rgb(var(--tw-color-primary-500) / var(--tw-border-opacity));
1581}
1582
1583:is(.dark section.my-contact > div > form > div > input.my-contact__unique2) {
1584   
1585}
1586
1587@media (min-width: 640px) {
1588  section.my-contact > div > form > div.my-contact__unique4 {
1589    grid-column: span 2 / span 2;
1590  }
1591}
1592
1593section.my-contact > div > form > div > label.my-contact__unique6 {
1594  display: block;
1595  margin-bottom: var(--tw-size-2);
1596  font-size: var(--tw-font-size-sm);
1597  line-height: var(--tw-line-height-5);
1598  font-weight: var(--tw-font-weight-medium);
1599  --tw-text-opacity: 1;
1600  color: rgb(var(--tw-color-gray-900) / var(--tw-text-opacity));
1601}
1602
1603:is(.dark section.my-contact > div > form > div > label.my-contact__unique6) {
1604  --tw-text-opacity: 1;
1605  color: rgb(var(--tw-color-gray-400) / var(--tw-text-opacity));
1606}
1607
1608section.my-contact > div > form > div > textarea {
1609  display: block;
1610  padding: var(--tw-size-2_5);
1611  width: 100%;
1612  font-size: var(--tw-font-size-sm);
1613  line-height: var(--tw-line-height-5);
1614  --tw-text-opacity: 1;
1615  color: rgb(var(--tw-color-gray-900) / var(--tw-text-opacity));
1616  --tw-bg-opacity: 1;
1617  background-color: rgb(var(--tw-color-gray-50) / var(--tw-bg-opacity));
1618  border-radius: var(--tw-border-radius-lg);
1619  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1620  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1621  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
1622    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1623  border-width: 1px;
1624  --tw-border-opacity: 1;
1625  border-color: rgb(var(--tw-color-gray-300) / var(--tw-border-opacity));
1626}
1627
1628section.my-contact > div > form > div > textarea:focus {
1629  --tw-ring-opacity: 1;
1630  --tw-ring-color: rgb(var(--tw-color-primary-500) / var(--tw-ring-opacity));
1631  --tw-border-opacity: 1;
1632  border-color: rgb(var(--tw-color-primary-500) / var(--tw-border-opacity));
1633}
1634
1635:is(.dark section.my-contact > div > form > div > textarea) {
1636  --tw-bg-opacity: 1;
1637  background-color: rgb(var(--tw-color-gray-700) / var(--tw-bg-opacity));
1638  --tw-border-opacity: 1;
1639  border-color: rgb(var(--tw-color-gray-600) / var(--tw-border-opacity));
1640}
1641
1642:is(.dark section.my-contact > div > form > div > textarea)::-moz-placeholder {
1643  --tw-placeholder-opacity: 1;
1644  color: rgb(var(--tw-color-gray-400) / var(--tw-placeholder-opacity));
1645}
1646
1647:is(.dark section.my-contact > div > form > div > textarea)::placeholder {
1648  --tw-placeholder-opacity: 1;
1649  color: rgb(var(--tw-color-gray-400) / var(--tw-placeholder-opacity));
1650}
1651
1652:is(.dark section.my-contact > div > form > div > textarea) {
1653  --tw-text-opacity: 1;
1654  color: rgb(var(--tw-color-white) / var(--tw-text-opacity));
1655}
1656
1657:is(.dark section.my-contact > div > form > div > textarea:focus) {
1658  --tw-ring-opacity: 1;
1659  --tw-ring-color: rgb(var(--tw-color-primary-500) / var(--tw-ring-opacity));
1660  --tw-border-opacity: 1;
1661  border-color: rgb(var(--tw-color-primary-500) / var(--tw-border-opacity));
1662}
1663
1664section.my-contact > div > form > button {
1665  padding-top: var(--tw-size-3);
1666  padding-bottom: var(--tw-size-3);
1667  padding-left: var(--tw-size-5);
1668  padding-right: var(--tw-size-5);
1669  font-size: var(--tw-font-size-sm);
1670  line-height: var(--tw-line-height-5);
1671  font-weight: var(--tw-font-weight-medium);
1672  text-align: center;
1673  --tw-text-opacity: 1;
1674  color: rgb(var(--tw-color-white) / var(--tw-text-opacity));
1675  border-radius: var(--tw-border-radius-lg);
1676  --tw-bg-opacity: 1;
1677  background-color: rgb(var(--tw-color-primary-700) / var(--tw-bg-opacity));
1678}
1679
1680@media (min-width: 640px) {
1681  section.my-contact > div > form > button {
1682    width: -webkit-fit-content;
1683    width: -moz-fit-content;
1684    width: fit-content;
1685  }
1686}
1687
1688section.my-contact > div > form > button:hover {
1689  --tw-bg-opacity: 1;
1690  background-color: rgb(var(--tw-color-primary-800) / var(--tw-bg-opacity));
1691}
1692
1693section.my-contact > div > form > button:focus {
1694  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
1695    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1696  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
1697    calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1698  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
1699    var(--tw-shadow, 0 0 #0000);
1700  outline: 2px solid transparent;
1701  outline-offset: 2px;
1702  --tw-ring-opacity: 1;
1703  --tw-ring-color: rgb(var(--tw-color-primary-300) / var(--tw-ring-opacity));
1704}
1705
1706:is(.dark section.my-contact > div > form > button) {
1707  --tw-bg-opacity: 1;
1708  background-color: rgb(var(--tw-color-primary-600) / var(--tw-bg-opacity));
1709}
1710
1711:is(.dark section.my-contact > div > form > button:hover) {
1712  --tw-bg-opacity: 1;
1713  background-color: rgb(var(--tw-color-primary-700) / var(--tw-bg-opacity));
1714}
1715
1716:is(.dark section.my-contact > div > form > button:focus) {
1717  --tw-ring-opacity: 1;
1718  --tw-ring-color: rgb(var(--tw-color-primary-800) / var(--tw-ring-opacity));
1719}
1720</style>
1721
1722<section class="my-contact">
1723  <div>
1724      <p>Questions? Comments? Insults?<br/>
1725      Feel free to drop me a line below, I love getting messages!</p>
1726      <form action="https://formsubmit.co/ada1dfc46bcebd712b78e02efbcc3dd3" method="POST" target="_blank">
1727          <div class="my-contact__unique3">
1728              <label for="text" class="my-contact__unique5">Your name:</label>
1729              <input name="name" type="text" id="name" placeholder="Your name here" required="" class="my-contact__unique1">
1730          </div>
1731          <div class="my-contact__unique3">
1732              <label for="email" class="my-contact__unique5">Your email (so I can reply. Always kept confidential, of course.)</label>
1733              <input name="email" type="email" id="email" class="my-contact__unique2" placeholder="[email protected]" required="">
1734          </div>
1735          <div class="my-contact__unique4">
1736              <label for="message" class="my-contact__unique6">Message:</label>
1737              <textarea name="message" id="message" rows="6" placeholder="">Dear Kristof, can you tell me more about...</textarea>
1738          </div>
1739          <button type="submit">Send message</button>
1740      </form>
1741  </div>
1742</section>
1743
1744            </div>
1745          </div>
1746        
1747      
1748    </footer>
1749  </article>
1750
1751        
1752      </main><footer class="py-10 print:hidden">
1753  
1754  
1755  <div class="flex items-center justify-between">
1756    <div>
1757      
1758      
1759        <p class="text-sm text-neutral-500 dark:text-neutral-400">
1760            &copy;
1761            2026
1762            Kristof Kovacs
1763        </p>
1764      
1765      
1766      
1767        <p class="text-xs text-neutral-500 dark:text-neutral-400">
1768          
1769          
1770          Powered by <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
1771            href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a> &amp; <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="https://github.com/jpanther/congo" target="_blank" rel="noopener noreferrer">Congo</a>
1772        </p>
1773      
1774    </div>
1775    <div class="flex flex-row items-center">
1776      
1777      
1778      
1779      
1780    </div>
1781  </div>
1782  
1783  
1784</footer>
1785
1786    </div>
1787  
1787<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"48712f749e9f4ad3ba9b0e4683ad0b97","r":1,"spa":2}' crossorigin="anonymous"></script>
1787
1788</body>
1789</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.