├── .gitignore
├── .vscode
    └── settings.json
├── assets
    ├── inter.woff2
    ├── me-big.webp
    ├── output.css
    └── sprite.svg
├── index.html
├── input.css
├── package.json
├── pnpm-lock.yaml
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "files.associations": {
3 |     "*.css": "tailwindcss"
4 |   }
5 | }


--------------------------------------------------------------------------------
/assets/inter.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/curso-tailwind-abril-2025/bd20449dac5457468146213ebb3b0b1c774cf9ae/assets/inter.woff2


--------------------------------------------------------------------------------
/assets/me-big.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/curso-tailwind-abril-2025/bd20449dac5457468146213ebb3b0b1c774cf9ae/assets/me-big.webp


--------------------------------------------------------------------------------
/assets/output.css:
--------------------------------------------------------------------------------
   1 | /*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
   2 | @layer properties;
   3 | @layer theme, base, components, utilities;
   4 | @layer theme {
   5 |   :root, :host {
   6 |     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
   7 |       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   8 |     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
   9 |       "Courier New", monospace;
  10 |     --color-orange-300: oklch(83.7% 0.128 66.29);
  11 |     --color-yellow-300: oklch(90.5% 0.182 98.111);
  12 |     --color-cyan-500: oklch(71.5% 0.143 215.221);
  13 |     --color-cyan-700: oklch(52% 0.105 223.128);
  14 |     --color-cyan-900: oklch(39.8% 0.07 227.392);
  15 |     --color-sky-400: oklch(74.6% 0.16 232.661);
  16 |     --color-sky-500: oklch(68.5% 0.169 237.323);
  17 |     --color-sky-950: oklch(29.3% 0.066 243.157);
  18 |     --color-purple-100: oklch(94.6% 0.033 307.174);
  19 |     --color-purple-600: oklch(55.8% 0.288 302.321);
  20 |     --color-pink-600: oklch(59.2% 0.249 0.584);
  21 |     --color-gray-800: oklch(27.8% 0.033 256.848);
  22 |     --color-zinc-900: oklch(21% 0.006 285.885);
  23 |     --color-black: #000;
  24 |     --color-white: #fff;
  25 |     --spacing: 0.25rem;
  26 |     --container-xl: 36rem;
  27 |     --text-xs: 0.75rem;
  28 |     --text-xs--line-height: calc(1 / 0.75);
  29 |     --text-sm: 0.875rem;
  30 |     --text-sm--line-height: calc(1.25 / 0.875);
  31 |     --text-xl: 1.25rem;
  32 |     --text-xl--line-height: calc(1.75 / 1.25);
  33 |     --text-2xl: 1.5rem;
  34 |     --text-2xl--line-height: calc(2 / 1.5);
  35 |     --text-3xl: 1.875rem;
  36 |     --text-3xl--line-height: calc(2.25 / 1.875);
  37 |     --font-weight-bold: 700;
  38 |     --font-weight-extrabold: 800;
  39 |     --leading-tight: 1.25;
  40 |     --radius-xl: 0.75rem;
  41 |     --radius-3xl: 1.5rem;
  42 |     --default-transition-duration: 150ms;
  43 |     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  44 |     --default-font-family: var(--font-sans);
  45 |     --default-mono-font-family: var(--font-mono);
  46 |     --color-midu-lol: #f8dbff;
  47 |     --color-html: #E44D26;
  48 |     --font-display: 'Inter', system-ui, sans-serif;
  49 |   }
  50 | }
  51 | @layer base {
  52 |   *, ::after, ::before, ::backdrop, ::file-selector-button {
  53 |     box-sizing: border-box;
  54 |     margin: 0;
  55 |     padding: 0;
  56 |     border: 0 solid;
  57 |   }
  58 |   html, :host {
  59 |     line-height: 1.5;
  60 |     -webkit-text-size-adjust: 100%;
  61 |     tab-size: 4;
  62 |     font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  63 |     font-feature-settings: var(--default-font-feature-settings, normal);
  64 |     font-variation-settings: var(--default-font-variation-settings, normal);
  65 |     -webkit-tap-highlight-color: transparent;
  66 |   }
  67 |   hr {
  68 |     height: 0;
  69 |     color: inherit;
  70 |     border-top-width: 1px;
  71 |   }
  72 |   abbr:where([title]) {
  73 |     -webkit-text-decoration: underline dotted;
  74 |     text-decoration: underline dotted;
  75 |   }
  76 |   h1, h2, h3, h4, h5, h6 {
  77 |     font-size: inherit;
  78 |     font-weight: inherit;
  79 |   }
  80 |   a {
  81 |     color: inherit;
  82 |     -webkit-text-decoration: inherit;
  83 |     text-decoration: inherit;
  84 |   }
  85 |   b, strong {
  86 |     font-weight: bolder;
  87 |   }
  88 |   code, kbd, samp, pre {
  89 |     font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  90 |     font-feature-settings: var(--default-mono-font-feature-settings, normal);
  91 |     font-variation-settings: var(--default-mono-font-variation-settings, normal);
  92 |     font-size: 1em;
  93 |   }
  94 |   small {
  95 |     font-size: 80%;
  96 |   }
  97 |   sub, sup {
  98 |     font-size: 75%;
  99 |     line-height: 0;
 100 |     position: relative;
 101 |     vertical-align: baseline;
 102 |   }
 103 |   sub {
 104 |     bottom: -0.25em;
 105 |   }
 106 |   sup {
 107 |     top: -0.5em;
 108 |   }
 109 |   table {
 110 |     text-indent: 0;
 111 |     border-color: inherit;
 112 |     border-collapse: collapse;
 113 |   }
 114 |   :-moz-focusring {
 115 |     outline: auto;
 116 |   }
 117 |   progress {
 118 |     vertical-align: baseline;
 119 |   }
 120 |   summary {
 121 |     display: list-item;
 122 |   }
 123 |   ol, ul, menu {
 124 |     list-style: none;
 125 |   }
 126 |   img, svg, video, canvas, audio, iframe, embed, object {
 127 |     display: block;
 128 |     vertical-align: middle;
 129 |   }
 130 |   img, video {
 131 |     max-width: 100%;
 132 |     height: auto;
 133 |   }
 134 |   button, input, select, optgroup, textarea, ::file-selector-button {
 135 |     font: inherit;
 136 |     font-feature-settings: inherit;
 137 |     font-variation-settings: inherit;
 138 |     letter-spacing: inherit;
 139 |     color: inherit;
 140 |     border-radius: 0;
 141 |     background-color: transparent;
 142 |     opacity: 1;
 143 |   }
 144 |   :where(select:is([multiple], [size])) optgroup {
 145 |     font-weight: bolder;
 146 |   }
 147 |   :where(select:is([multiple], [size])) optgroup option {
 148 |     padding-inline-start: 20px;
 149 |   }
 150 |   ::file-selector-button {
 151 |     margin-inline-end: 4px;
 152 |   }
 153 |   ::placeholder {
 154 |     opacity: 1;
 155 |   }
 156 |   @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
 157 |     ::placeholder {
 158 |       color: currentcolor;
 159 |       @supports (color: color-mix(in lab, red, red)) {
 160 |         color: color-mix(in oklab, currentcolor 50%, transparent);
 161 |       }
 162 |     }
 163 |   }
 164 |   textarea {
 165 |     resize: vertical;
 166 |   }
 167 |   ::-webkit-search-decoration {
 168 |     -webkit-appearance: none;
 169 |   }
 170 |   ::-webkit-date-and-time-value {
 171 |     min-height: 1lh;
 172 |     text-align: inherit;
 173 |   }
 174 |   ::-webkit-datetime-edit {
 175 |     display: inline-flex;
 176 |   }
 177 |   ::-webkit-datetime-edit-fields-wrapper {
 178 |     padding: 0;
 179 |   }
 180 |   ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
 181 |     padding-block: 0;
 182 |   }
 183 |   :-moz-ui-invalid {
 184 |     box-shadow: none;
 185 |   }
 186 |   button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
 187 |     appearance: button;
 188 |   }
 189 |   ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
 190 |     height: auto;
 191 |   }
 192 |   [hidden]:where(:not([hidden="until-found"])) {
 193 |     display: none !important;
 194 |   }
 195 | }
 196 | @layer utilities {
 197 |   .absolute {
 198 |     position: absolute;
 199 |   }
 200 |   .relative {
 201 |     position: relative;
 202 |   }
 203 |   .top-2 {
 204 |     top: calc(var(--spacing) * 2);
 205 |   }
 206 |   .-right-4 {
 207 |     right: calc(var(--spacing) * -4);
 208 |   }
 209 |   .-bottom-4 {
 210 |     bottom: calc(var(--spacing) * -4);
 211 |   }
 212 |   .bottom-2 {
 213 |     bottom: calc(var(--spacing) * 2);
 214 |   }
 215 |   .left-4 {
 216 |     left: calc(var(--spacing) * 4);
 217 |   }
 218 |   .z-10 {
 219 |     z-index: 10;
 220 |   }
 221 |   .col-span-1 {
 222 |     grid-column: span 1 / span 1;
 223 |   }
 224 |   .col-span-2 {
 225 |     grid-column: span 2 / span 2;
 226 |   }
 227 |   .mx-auto {
 228 |     margin-inline: auto;
 229 |   }
 230 |   .-mt-4 {
 231 |     margin-top: calc(var(--spacing) * -4);
 232 |   }
 233 |   .mt-1 {
 234 |     margin-top: calc(var(--spacing) * 1);
 235 |   }
 236 |   .mt-4 {
 237 |     margin-top: calc(var(--spacing) * 4);
 238 |   }
 239 |   .mb-8 {
 240 |     margin-bottom: calc(var(--spacing) * 8);
 241 |   }
 242 |   .ml-1 {
 243 |     margin-left: calc(var(--spacing) * 1);
 244 |   }
 245 |   .flex {
 246 |     display: flex;
 247 |   }
 248 |   .grid {
 249 |     display: grid;
 250 |   }
 251 |   .inline {
 252 |     display: inline;
 253 |   }
 254 |   .size-28 {
 255 |     width: calc(var(--spacing) * 28);
 256 |     height: calc(var(--spacing) * 28);
 257 |   }
 258 |   .h-5 {
 259 |     height: calc(var(--spacing) * 5);
 260 |   }
 261 |   .h-\[50vh\] {
 262 |     height: 50vh;
 263 |   }
 264 |   .min-h-\[180px\] {
 265 |     min-height: 180px;
 266 |   }
 267 |   .min-h-dvh {
 268 |     min-height: 100dvh;
 269 |   }
 270 |   .w-5 {
 271 |     width: calc(var(--spacing) * 5);
 272 |   }
 273 |   .w-full {
 274 |     width: 100%;
 275 |   }
 276 |   .max-w-xl {
 277 |     max-width: var(--container-xl);
 278 |   }
 279 |   .-rotate-6 {
 280 |     rotate: calc(6deg * -1);
 281 |   }
 282 |   .transform {
 283 |     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
 284 |   }
 285 |   .animate-pulse-fade-in {
 286 |     animation: pulse-fade-in 0.6s ease-out both;
 287 |   }
 288 |   .animate-slide-up-fade {
 289 |     animation: slide-up-fade 0.6s ease-out both;
 290 |   }
 291 |   .cursor-crosshair {
 292 |     cursor: crosshair;
 293 |   }
 294 |   .grid-cols-3 {
 295 |     grid-template-columns: repeat(3, minmax(0, 1fr));
 296 |   }
 297 |   .grid-rows-2 {
 298 |     grid-template-rows: repeat(2, minmax(0, 1fr));
 299 |   }
 300 |   .flex-col {
 301 |     flex-direction: column;
 302 |   }
 303 |   .items-center {
 304 |     align-items: center;
 305 |   }
 306 |   .items-start {
 307 |     align-items: flex-start;
 308 |   }
 309 |   .justify-center {
 310 |     justify-content: center;
 311 |   }
 312 |   .gap-2 {
 313 |     gap: calc(var(--spacing) * 2);
 314 |   }
 315 |   .overflow-hidden {
 316 |     overflow: hidden;
 317 |   }
 318 |   .rounded-3xl {
 319 |     border-radius: var(--radius-3xl);
 320 |   }
 321 |   .rounded-full {
 322 |     border-radius: calc(infinity * 1px);
 323 |   }
 324 |   .rounded-xl {
 325 |     border-radius: var(--radius-xl);
 326 |   }
 327 |   .border {
 328 |     border-style: var(--tw-border-style);
 329 |     border-width: 1px;
 330 |   }
 331 |   .border-\[\#215732\] {
 332 |     border-color: #215732;
 333 |   }
 334 |   .border-\[\#663399\] {
 335 |     border-color: #663399;
 336 |   }
 337 |   .border-cyan-900 {
 338 |     border-color: var(--color-cyan-900);
 339 |   }
 340 |   .border-html {
 341 |     border-color: var(--color-html);
 342 |   }
 343 |   .border-sky-500\/50 {
 344 |     border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 50%, transparent);
 345 |     @supports (color: color-mix(in lab, red, red)) {
 346 |       border-color: color-mix(in oklab, var(--color-sky-500) 50%, transparent);
 347 |     }
 348 |   }
 349 |   .bg-black {
 350 |     background-color: var(--color-black);
 351 |   }
 352 |   .bg-black\/65 {
 353 |     background-color: color-mix(in srgb, #000 65%, transparent);
 354 |     @supports (color: color-mix(in lab, red, red)) {
 355 |       background-color: color-mix(in oklab, var(--color-black) 65%, transparent);
 356 |     }
 357 |   }
 358 |   .bg-purple-100 {
 359 |     background-color: var(--color-purple-100);
 360 |   }
 361 |   .bg-white {
 362 |     background-color: var(--color-white);
 363 |   }
 364 |   .bg-zinc-900 {
 365 |     background-color: var(--color-zinc-900);
 366 |   }
 367 |   .bg-gradient-to-b {
 368 |     --tw-gradient-position: to bottom in oklab;
 369 |     background-image: linear-gradient(var(--tw-gradient-stops));
 370 |   }
 371 |   .bg-gradient-to-br {
 372 |     --tw-gradient-position: to bottom right in oklab;
 373 |     background-image: linear-gradient(var(--tw-gradient-stops));
 374 |   }
 375 |   .bg-gradient-to-tr {
 376 |     --tw-gradient-position: to top right in oklab;
 377 |     background-image: linear-gradient(var(--tw-gradient-stops));
 378 |   }
 379 |   .from-\[\#215732\] {
 380 |     --tw-gradient-from: #215732;
 381 |     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 382 |   }
 383 |   .from-\[\#663399\] {
 384 |     --tw-gradient-from: #663399;
 385 |     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 386 |   }
 387 |   .from-black {
 388 |     --tw-gradient-from: var(--color-black);
 389 |     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 390 |   }
 391 |   .from-cyan-900 {
 392 |     --tw-gradient-from: var(--color-cyan-900);
 393 |     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 394 |   }
 395 |   .from-html {
 396 |     --tw-gradient-from: var(--color-html);
 397 |     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 398 |   }
 399 |   .from-yellow-300 {
 400 |     --tw-gradient-from: var(--color-yellow-300);
 401 |     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 402 |   }
 403 |   .via-\[\#3C873A\] {
 404 |     --tw-gradient-via: #3C873A;
 405 |     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
 406 |     --tw-gradient-stops: var(--tw-gradient-via-stops);
 407 |   }
 408 |   .via-\[\#8e44ad\] {
 409 |     --tw-gradient-via: #8e44ad;
 410 |     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
 411 |     --tw-gradient-stops: var(--tw-gradient-via-stops);
 412 |   }
 413 |   .via-cyan-700 {
 414 |     --tw-gradient-via: var(--color-cyan-700);
 415 |     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
 416 |     --tw-gradient-stops: var(--tw-gradient-via-stops);
 417 |   }
 418 |   .via-orange-300 {
 419 |     --tw-gradient-via: var(--color-orange-300);
 420 |     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
 421 |     --tw-gradient-stops: var(--tw-gradient-via-stops);
 422 |   }
 423 |   .via-pink-600 {
 424 |     --tw-gradient-via: var(--color-pink-600);
 425 |     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
 426 |     --tw-gradient-stops: var(--tw-gradient-via-stops);
 427 |   }
 428 |   .via-sky-950 {
 429 |     --tw-gradient-via: var(--color-sky-950);
 430 |     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
 431 |     --tw-gradient-stops: var(--tw-gradient-via-stops);
 432 |   }
 433 |   .to-\[\#8CC84B\] {
 434 |     --tw-gradient-to: #8CC84B;
 435 |     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 436 |   }
 437 |   .to-cyan-500 {
 438 |     --tw-gradient-to: var(--color-cyan-500);
 439 |     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 440 |   }
 441 |   .to-gray-800 {
 442 |     --tw-gradient-to: var(--color-gray-800);
 443 |     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 444 |   }
 445 |   .to-purple-600 {
 446 |     --tw-gradient-to: var(--color-purple-600);
 447 |     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 448 |   }
 449 |   .to-white {
 450 |     --tw-gradient-to: var(--color-white);
 451 |     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 452 |   }
 453 |   .mask-radial-from-45\% {
 454 |     mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
 455 |     mask-composite: intersect;
 456 |     --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
 457 |     --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
 458 |     --tw-mask-radial-from-position: 45%;
 459 |   }
 460 |   .mask-radial-to-80\% {
 461 |     mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
 462 |     mask-composite: intersect;
 463 |     --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
 464 |     --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
 465 |     --tw-mask-radial-to-position: 80%;
 466 |   }
 467 |   .mask-radial-at-center {
 468 |     --tw-mask-radial-position: center;
 469 |   }
 470 |   .object-cover {
 471 |     object-fit: cover;
 472 |   }
 473 |   .p-7 {
 474 |     padding: calc(var(--spacing) * 7);
 475 |   }
 476 |   .px-1 {
 477 |     padding-inline: calc(var(--spacing) * 1);
 478 |   }
 479 |   .px-3 {
 480 |     padding-inline: calc(var(--spacing) * 3);
 481 |   }
 482 |   .px-4 {
 483 |     padding-inline: calc(var(--spacing) * 4);
 484 |   }
 485 |   .py-0\.5 {
 486 |     padding-block: calc(var(--spacing) * 0.5);
 487 |   }
 488 |   .py-1 {
 489 |     padding-block: calc(var(--spacing) * 1);
 490 |   }
 491 |   .pt-4 {
 492 |     padding-top: calc(var(--spacing) * 4);
 493 |   }
 494 |   .pb-16 {
 495 |     padding-bottom: calc(var(--spacing) * 16);
 496 |   }
 497 |   .text-center {
 498 |     text-align: center;
 499 |   }
 500 |   .font-display {
 501 |     font-family: var(--font-display);
 502 |   }
 503 |   .font-mono {
 504 |     font-family: var(--font-mono);
 505 |   }
 506 |   .text-2xl {
 507 |     font-size: var(--text-2xl);
 508 |     line-height: var(--tw-leading, var(--text-2xl--line-height));
 509 |   }
 510 |   .text-3xl {
 511 |     font-size: var(--text-3xl);
 512 |     line-height: var(--tw-leading, var(--text-3xl--line-height));
 513 |   }
 514 |   .text-sm {
 515 |     font-size: var(--text-sm);
 516 |     line-height: var(--tw-leading, var(--text-sm--line-height));
 517 |   }
 518 |   .text-xl {
 519 |     font-size: var(--text-xl);
 520 |     line-height: var(--tw-leading, var(--text-xl--line-height));
 521 |   }
 522 |   .text-xs {
 523 |     font-size: var(--text-xs);
 524 |     line-height: var(--tw-leading, var(--text-xs--line-height));
 525 |   }
 526 |   .leading-tight {
 527 |     --tw-leading: var(--leading-tight);
 528 |     line-height: var(--leading-tight);
 529 |   }
 530 |   .font-bold {
 531 |     --tw-font-weight: var(--font-weight-bold);
 532 |     font-weight: var(--font-weight-bold);
 533 |   }
 534 |   .font-extrabold {
 535 |     --tw-font-weight: var(--font-weight-extrabold);
 536 |     font-weight: var(--font-weight-extrabold);
 537 |   }
 538 |   .text-balance {
 539 |     text-wrap: balance;
 540 |   }
 541 |   .text-midu-lol {
 542 |     color: var(--color-midu-lol);
 543 |   }
 544 |   .text-sky-400 {
 545 |     color: var(--color-sky-400);
 546 |   }
 547 |   .text-white {
 548 |     color: var(--color-white);
 549 |   }
 550 |   .shadow-sm {
 551 |     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
 552 |     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 553 |   }
 554 |   .transition {
 555 |     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
 556 |     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
 557 |     transition-duration: var(--tw-duration, var(--default-transition-duration));
 558 |   }
 559 |   .transition-transform {
 560 |     transition-property: transform, translate, scale, rotate;
 561 |     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
 562 |     transition-duration: var(--tw-duration, var(--default-transition-duration));
 563 |   }
 564 |   .animate-delay-100 {
 565 |     animation-delay: 100ms;
 566 |   }
 567 |   .animate-delay-200 {
 568 |     animation-delay: 200ms;
 569 |   }
 570 |   .animate-delay-300 {
 571 |     animation-delay: 300ms;
 572 |   }
 573 |   .animate-delay-400 {
 574 |     animation-delay: 400ms;
 575 |   }
 576 |   .animate-delay-500 {
 577 |     animation-delay: 500ms;
 578 |   }
 579 |   .group-hover\:-translate-y-1 {
 580 |     &:is(:where(.group):hover *) {
 581 |       @media (hover: hover) {
 582 |         --tw-translate-y: calc(var(--spacing) * -1);
 583 |         translate: var(--tw-translate-x) var(--tw-translate-y);
 584 |       }
 585 |     }
 586 |   }
 587 |   .group-hover\:scale-125 {
 588 |     &:is(:where(.group):hover *) {
 589 |       @media (hover: hover) {
 590 |         --tw-scale-x: 125%;
 591 |         --tw-scale-y: 125%;
 592 |         --tw-scale-z: 125%;
 593 |         scale: var(--tw-scale-x) var(--tw-scale-y);
 594 |       }
 595 |     }
 596 |   }
 597 |   .group-hover\:-rotate-12 {
 598 |     &:is(:where(.group):hover *) {
 599 |       @media (hover: hover) {
 600 |         rotate: calc(12deg * -1);
 601 |       }
 602 |     }
 603 |   }
 604 |   .hover\:scale-105 {
 605 |     &:hover {
 606 |       @media (hover: hover) {
 607 |         --tw-scale-x: 105%;
 608 |         --tw-scale-y: 105%;
 609 |         --tw-scale-z: 105%;
 610 |         scale: var(--tw-scale-x) var(--tw-scale-y);
 611 |       }
 612 |     }
 613 |   }
 614 |   .hover\:contrast-125 {
 615 |     &:hover {
 616 |       @media (hover: hover) {
 617 |         --tw-contrast: contrast(125%);
 618 |         filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
 619 |       }
 620 |     }
 621 |   }
 622 | }
 623 | @font-face {
 624 |   font-family: 'Inter';
 625 |   src: url('/assets/inter.woff2') format('woff2');
 626 |   font-style: normal;
 627 |   font-weight: 100 700;
 628 |   font-display: swap;
 629 | }
 630 | .social-button {
 631 |   display: flex;
 632 |   width: calc(var(--spacing) * 10);
 633 |   height: calc(var(--spacing) * 10);
 634 |   align-items: center;
 635 |   justify-content: center;
 636 |   border-radius: calc(infinity * 1px);
 637 |   padding: calc(var(--spacing) * 2);
 638 |   transition-property: transform, translate, scale, rotate;
 639 |   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
 640 |   transition-duration: var(--tw-duration, var(--default-transition-duration));
 641 |   &:hover {
 642 |     @media (hover: hover) {
 643 |       --tw-scale-x: 110%;
 644 |       --tw-scale-y: 110%;
 645 |       --tw-scale-z: 110%;
 646 |       scale: var(--tw-scale-x) var(--tw-scale-y);
 647 |     }
 648 |   }
 649 |   @media (width >= 350px) {
 650 |     width: calc(var(--spacing) * 12);
 651 |     height: calc(var(--spacing) * 12);
 652 |   }
 653 | }
 654 | @property --tw-rotate-x {
 655 |   syntax: "*";
 656 |   inherits: false;
 657 | }
 658 | @property --tw-rotate-y {
 659 |   syntax: "*";
 660 |   inherits: false;
 661 | }
 662 | @property --tw-rotate-z {
 663 |   syntax: "*";
 664 |   inherits: false;
 665 | }
 666 | @property --tw-skew-x {
 667 |   syntax: "*";
 668 |   inherits: false;
 669 | }
 670 | @property --tw-skew-y {
 671 |   syntax: "*";
 672 |   inherits: false;
 673 | }
 674 | @property --tw-border-style {
 675 |   syntax: "*";
 676 |   inherits: false;
 677 |   initial-value: solid;
 678 | }
 679 | @property --tw-gradient-position {
 680 |   syntax: "*";
 681 |   inherits: false;
 682 | }
 683 | @property --tw-gradient-from {
 684 |   syntax: "<color>";
 685 |   inherits: false;
 686 |   initial-value: #0000;
 687 | }
 688 | @property --tw-gradient-via {
 689 |   syntax: "<color>";
 690 |   inherits: false;
 691 |   initial-value: #0000;
 692 | }
 693 | @property --tw-gradient-to {
 694 |   syntax: "<color>";
 695 |   inherits: false;
 696 |   initial-value: #0000;
 697 | }
 698 | @property --tw-gradient-stops {
 699 |   syntax: "*";
 700 |   inherits: false;
 701 | }
 702 | @property --tw-gradient-via-stops {
 703 |   syntax: "*";
 704 |   inherits: false;
 705 | }
 706 | @property --tw-gradient-from-position {
 707 |   syntax: "<length-percentage>";
 708 |   inherits: false;
 709 |   initial-value: 0%;
 710 | }
 711 | @property --tw-gradient-via-position {
 712 |   syntax: "<length-percentage>";
 713 |   inherits: false;
 714 |   initial-value: 50%;
 715 | }
 716 | @property --tw-gradient-to-position {
 717 |   syntax: "<length-percentage>";
 718 |   inherits: false;
 719 |   initial-value: 100%;
 720 | }
 721 | @property --tw-mask-linear {
 722 |   syntax: "*";
 723 |   inherits: false;
 724 |   initial-value: linear-gradient(#fff, #fff);
 725 | }
 726 | @property --tw-mask-radial {
 727 |   syntax: "*";
 728 |   inherits: false;
 729 |   initial-value: linear-gradient(#fff, #fff);
 730 | }
 731 | @property --tw-mask-conic {
 732 |   syntax: "*";
 733 |   inherits: false;
 734 |   initial-value: linear-gradient(#fff, #fff);
 735 | }
 736 | @property --tw-mask-radial-from-position {
 737 |   syntax: "*";
 738 |   inherits: false;
 739 |   initial-value: 0%;
 740 | }
 741 | @property --tw-mask-radial-to-position {
 742 |   syntax: "*";
 743 |   inherits: false;
 744 |   initial-value: 100%;
 745 | }
 746 | @property --tw-mask-radial-from-color {
 747 |   syntax: "*";
 748 |   inherits: false;
 749 |   initial-value: black;
 750 | }
 751 | @property --tw-mask-radial-to-color {
 752 |   syntax: "*";
 753 |   inherits: false;
 754 |   initial-value: transparent;
 755 | }
 756 | @property --tw-mask-radial-shape {
 757 |   syntax: "*";
 758 |   inherits: false;
 759 |   initial-value: ellipse;
 760 | }
 761 | @property --tw-mask-radial-size {
 762 |   syntax: "*";
 763 |   inherits: false;
 764 |   initial-value: farthest-corner;
 765 | }
 766 | @property --tw-mask-radial-position {
 767 |   syntax: "*";
 768 |   inherits: false;
 769 |   initial-value: center;
 770 | }
 771 | @property --tw-leading {
 772 |   syntax: "*";
 773 |   inherits: false;
 774 | }
 775 | @property --tw-font-weight {
 776 |   syntax: "*";
 777 |   inherits: false;
 778 | }
 779 | @property --tw-shadow {
 780 |   syntax: "*";
 781 |   inherits: false;
 782 |   initial-value: 0 0 #0000;
 783 | }
 784 | @property --tw-shadow-color {
 785 |   syntax: "*";
 786 |   inherits: false;
 787 | }
 788 | @property --tw-shadow-alpha {
 789 |   syntax: "<percentage>";
 790 |   inherits: false;
 791 |   initial-value: 100%;
 792 | }
 793 | @property --tw-inset-shadow {
 794 |   syntax: "*";
 795 |   inherits: false;
 796 |   initial-value: 0 0 #0000;
 797 | }
 798 | @property --tw-inset-shadow-color {
 799 |   syntax: "*";
 800 |   inherits: false;
 801 | }
 802 | @property --tw-inset-shadow-alpha {
 803 |   syntax: "<percentage>";
 804 |   inherits: false;
 805 |   initial-value: 100%;
 806 | }
 807 | @property --tw-ring-color {
 808 |   syntax: "*";
 809 |   inherits: false;
 810 | }
 811 | @property --tw-ring-shadow {
 812 |   syntax: "*";
 813 |   inherits: false;
 814 |   initial-value: 0 0 #0000;
 815 | }
 816 | @property --tw-inset-ring-color {
 817 |   syntax: "*";
 818 |   inherits: false;
 819 | }
 820 | @property --tw-inset-ring-shadow {
 821 |   syntax: "*";
 822 |   inherits: false;
 823 |   initial-value: 0 0 #0000;
 824 | }
 825 | @property --tw-ring-inset {
 826 |   syntax: "*";
 827 |   inherits: false;
 828 | }
 829 | @property --tw-ring-offset-width {
 830 |   syntax: "<length>";
 831 |   inherits: false;
 832 |   initial-value: 0px;
 833 | }
 834 | @property --tw-ring-offset-color {
 835 |   syntax: "*";
 836 |   inherits: false;
 837 |   initial-value: #fff;
 838 | }
 839 | @property --tw-ring-offset-shadow {
 840 |   syntax: "*";
 841 |   inherits: false;
 842 |   initial-value: 0 0 #0000;
 843 | }
 844 | @property --tw-translate-x {
 845 |   syntax: "*";
 846 |   inherits: false;
 847 |   initial-value: 0;
 848 | }
 849 | @property --tw-translate-y {
 850 |   syntax: "*";
 851 |   inherits: false;
 852 |   initial-value: 0;
 853 | }
 854 | @property --tw-translate-z {
 855 |   syntax: "*";
 856 |   inherits: false;
 857 |   initial-value: 0;
 858 | }
 859 | @property --tw-scale-x {
 860 |   syntax: "*";
 861 |   inherits: false;
 862 |   initial-value: 1;
 863 | }
 864 | @property --tw-scale-y {
 865 |   syntax: "*";
 866 |   inherits: false;
 867 |   initial-value: 1;
 868 | }
 869 | @property --tw-scale-z {
 870 |   syntax: "*";
 871 |   inherits: false;
 872 |   initial-value: 1;
 873 | }
 874 | @property --tw-blur {
 875 |   syntax: "*";
 876 |   inherits: false;
 877 | }
 878 | @property --tw-brightness {
 879 |   syntax: "*";
 880 |   inherits: false;
 881 | }
 882 | @property --tw-contrast {
 883 |   syntax: "*";
 884 |   inherits: false;
 885 | }
 886 | @property --tw-grayscale {
 887 |   syntax: "*";
 888 |   inherits: false;
 889 | }
 890 | @property --tw-hue-rotate {
 891 |   syntax: "*";
 892 |   inherits: false;
 893 | }
 894 | @property --tw-invert {
 895 |   syntax: "*";
 896 |   inherits: false;
 897 | }
 898 | @property --tw-opacity {
 899 |   syntax: "*";
 900 |   inherits: false;
 901 | }
 902 | @property --tw-saturate {
 903 |   syntax: "*";
 904 |   inherits: false;
 905 | }
 906 | @property --tw-sepia {
 907 |   syntax: "*";
 908 |   inherits: false;
 909 | }
 910 | @property --tw-drop-shadow {
 911 |   syntax: "*";
 912 |   inherits: false;
 913 | }
 914 | @property --tw-drop-shadow-color {
 915 |   syntax: "*";
 916 |   inherits: false;
 917 | }
 918 | @property --tw-drop-shadow-alpha {
 919 |   syntax: "<percentage>";
 920 |   inherits: false;
 921 |   initial-value: 100%;
 922 | }
 923 | @property --tw-drop-shadow-size {
 924 |   syntax: "*";
 925 |   inherits: false;
 926 | }
 927 | @keyframes slide-up-fade {
 928 |   0% {
 929 |     opacity: 0;
 930 |     transform: translateY(50px);
 931 |   }
 932 |   100% {
 933 |     opacity: 1;
 934 |     transform: translateY(0);
 935 |   }
 936 | }
 937 | @keyframes pulse-fade-in {
 938 |   0% {
 939 |     transform: scale(0.9);
 940 |     opacity: 0;
 941 |   }
 942 |   50% {
 943 |     transform: scale(1.05);
 944 |     opacity: 0.5;
 945 |   }
 946 |   100% {
 947 |     transform: scale(1);
 948 |     opacity: 1;
 949 |   }
 950 | }
 951 | @layer properties {
 952 |   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
 953 |     *, ::before, ::after, ::backdrop {
 954 |       --tw-rotate-x: initial;
 955 |       --tw-rotate-y: initial;
 956 |       --tw-rotate-z: initial;
 957 |       --tw-skew-x: initial;
 958 |       --tw-skew-y: initial;
 959 |       --tw-border-style: solid;
 960 |       --tw-gradient-position: initial;
 961 |       --tw-gradient-from: #0000;
 962 |       --tw-gradient-via: #0000;
 963 |       --tw-gradient-to: #0000;
 964 |       --tw-gradient-stops: initial;
 965 |       --tw-gradient-via-stops: initial;
 966 |       --tw-gradient-from-position: 0%;
 967 |       --tw-gradient-via-position: 50%;
 968 |       --tw-gradient-to-position: 100%;
 969 |       --tw-mask-linear: linear-gradient(#fff, #fff);
 970 |       --tw-mask-radial: linear-gradient(#fff, #fff);
 971 |       --tw-mask-conic: linear-gradient(#fff, #fff);
 972 |       --tw-mask-radial-from-position: 0%;
 973 |       --tw-mask-radial-to-position: 100%;
 974 |       --tw-mask-radial-from-color: black;
 975 |       --tw-mask-radial-to-color: transparent;
 976 |       --tw-mask-radial-shape: ellipse;
 977 |       --tw-mask-radial-size: farthest-corner;
 978 |       --tw-mask-radial-position: center;
 979 |       --tw-leading: initial;
 980 |       --tw-font-weight: initial;
 981 |       --tw-shadow: 0 0 #0000;
 982 |       --tw-shadow-color: initial;
 983 |       --tw-shadow-alpha: 100%;
 984 |       --tw-inset-shadow: 0 0 #0000;
 985 |       --tw-inset-shadow-color: initial;
 986 |       --tw-inset-shadow-alpha: 100%;
 987 |       --tw-ring-color: initial;
 988 |       --tw-ring-shadow: 0 0 #0000;
 989 |       --tw-inset-ring-color: initial;
 990 |       --tw-inset-ring-shadow: 0 0 #0000;
 991 |       --tw-ring-inset: initial;
 992 |       --tw-ring-offset-width: 0px;
 993 |       --tw-ring-offset-color: #fff;
 994 |       --tw-ring-offset-shadow: 0 0 #0000;
 995 |       --tw-translate-x: 0;
 996 |       --tw-translate-y: 0;
 997 |       --tw-translate-z: 0;
 998 |       --tw-scale-x: 1;
 999 |       --tw-scale-y: 1;
1000 |       --tw-scale-z: 1;
1001 |       --tw-blur: initial;
1002 |       --tw-brightness: initial;
1003 |       --tw-contrast: initial;
1004 |       --tw-grayscale: initial;
1005 |       --tw-hue-rotate: initial;
1006 |       --tw-invert: initial;
1007 |       --tw-opacity: initial;
1008 |       --tw-saturate: initial;
1009 |       --tw-sepia: initial;
1010 |       --tw-drop-shadow: initial;
1011 |       --tw-drop-shadow-color: initial;
1012 |       --tw-drop-shadow-alpha: 100%;
1013 |       --tw-drop-shadow-size: initial;
1014 |     }
1015 |   }
1016 | }
1017 | 


--------------------------------------------------------------------------------
/assets/sprite.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
 2 |   <!-- React Icon -->
 3 |   <symbol id="react" viewBox="0 0 569 512">
 4 |     <g fill="none" fill-rule="evenodd">
 5 |       <g transform="translate(-227, -256)" fill="#58C4DC" fill-rule="nonzero">
 6 |         <g transform="translate(227, 256)">
 7 |           <path d="M285.5,201 C255.400481,201 231,225.400481 231,255.5 C231,285.599519 255.400481,310 285.5,310 C315.599519,310 340,285.599519 340,255.5 C340,225.400481 315.599519,201 285.5,201" id="Path"></path>
 8 |           <path d="M568.959856,255.99437 C568.959856,213.207656 529.337802,175.68144 466.251623,150.985214 C467.094645,145.423543 467.85738,139.922107 468.399323,134.521063 C474.621631,73.0415145 459.808523,28.6686204 426.709856,9.5541429 C389.677085,-11.8291748 337.36955,3.69129898 284.479928,46.0162134 C231.590306,3.69129898 179.282771,-11.8291748 142.25,9.5541429 C109.151333,28.6686204 94.3382249,73.0415145 100.560533,134.521063 C101.102476,139.922107 101.845139,145.443621 102.708233,151.02537 C97.4493791,153.033193 92.2908847,155.161486 87.3331099,157.39017 C31.0111824,182.708821 0,217.765415 0,255.99437 C0,298.781084 39.6220545,336.307301 102.708233,361.003527 C101.845139,366.565197 101.102476,372.066633 100.560533,377.467678 C94.3382249,438.947226 109.151333,483.32012 142.25,502.434597 C153.629683,508.887578 166.52439,512.186771 179.603923,511.991836 C210.956328,511.991836 247.567589,495.487529 284.479928,465.972527 C321.372196,495.487529 358.003528,511.991836 389.396077,511.991836 C402.475265,512.183856 415.36922,508.884856 426.75,502.434597 C459.848667,483.32012 474.661775,438.947226 468.439467,377.467678 C467.897524,372.066633 467.134789,366.565197 466.291767,361.003527 C529.377946,336.347457 569,298.761006 569,255.99437 M389.155214,27.1025182 C397.565154,26.899606 405.877839,28.9368502 413.241569,33.0055186 C436.223966,46.2772304 446.540955,82.2775015 441.522965,131.770345 C441.181741,135.143488 440.780302,138.556788 440.298575,141.990165 C414.066922,134.08804 387.205771,128.452154 360.010724,125.144528 C343.525021,103.224055 325.192524,82.7564475 305.214266,63.9661533 C336.586743,39.7116483 366.032313,27.1025182 389.135142,27.1025182 M378.356498,310.205598 C368.204912,327.830733 357.150626,344.919965 345.237759,361.405091 C325.045049,363.479997 304.758818,364.51205 284.459856,364.497299 C264.167589,364.51136 243.888075,363.479308 223.702025,361.405091 C211.820914,344.919381 200.80007,327.83006 190.683646,310.205598 C180.532593,292.629285 171.306974,274.534187 163.044553,255.99437 C171.306974,237.454554 180.532593,219.359455 190.683646,201.783142 C200.784121,184.229367 211.770999,167.201087 223.601665,150.764353 C243.824636,148.63809 264.145559,147.579168 284.479928,147.591877 C304.772146,147.579725 325.051559,148.611772 345.237759,150.68404 C357.109048,167.14607 368.136094,184.201112 378.27621,201.783142 C388.419418,219.363718 397.644825,237.458403 405.915303,255.99437 C397.644825,274.530337 388.419418,292.625022 378.27621,310.205598 M419.724813,290.127366 C426.09516,307.503536 431.324985,325.277083 435.380944,343.334682 C417.779633,348.823635 399.836793,353.149774 381.668372,356.285142 C388.573127,345.871232 395.263781,335.035679 401.740334,323.778483 C408.143291,312.655143 414.144807,301.431411 419.805101,290.207679 M246.363271,390.377981 C258.848032,391.140954 271.593728,391.582675 284.5,391.582675 C297.406272,391.582675 310.232256,391.140954 322.737089,390.377981 C310.880643,404.583418 298.10766,417.997563 284.5,430.534446 C270.921643,417.999548 258.18192,404.585125 246.363271,390.377981 Z M187.311556,356.244986 C169.137286,353.123646 151.187726,348.810918 133.578912,343.334682 C137.618549,325.305649 142.828222,307.559058 149.174827,290.207679 C154.754833,301.431411 160.736278,312.655143 167.239594,323.778483 C173.74291,334.901824 180.467017,345.864539 187.311556,356.285142 M149.174827,221.760984 C142.850954,204.473938 137.654787,186.794745 133.619056,168.834762 C151.18418,163.352378 169.085653,159.013101 187.211197,155.844146 C180.346585,166.224592 173.622478,176.986525 167.139234,188.210257 C160.65599,199.433989 154.734761,210.517173 149.074467,221.760984 M322.616657,121.590681 C310.131896,120.827708 297.3862,120.385987 284.379568,120.385987 C271.479987,120.385987 258.767744,120.787552 246.242839,121.590681 C258.061488,107.383537 270.801211,93.9691137 284.379568,81.4342157 C297.99241,93.9658277 310.765727,107.380324 322.616657,121.590681 Z M401.70019,188.210257 C395.196875,176.939676 388.472767,166.09743 381.527868,155.68352 C399.744224,158.819049 417.734224,163.151949 435.380944,168.654058 C431.331963,186.680673 426.122466,204.426664 419.785029,221.781062 C414.205023,210.55733 408.203506,199.333598 401.720262,188.230335 M127.517179,131.790423 C122.438973,82.3176579 132.816178,46.2973086 155.778503,33.0255968 C163.144699,28.9632474 171.455651,26.9264282 179.864858,27.1225964 C202.967687,27.1225964 232.413257,39.7317265 263.785734,63.9862316 C243.794133,82.7898734 225.448298,103.270812 208.949132,125.204763 C181.761691,128.528025 154.90355,134.14313 128.661281,141.990165 C128.199626,138.556788 127.778115,135.163566 127.456963,131.790423 M98.4529773,182.106474 C101.54406,180.767925 104.695358,179.429376 107.906872,178.090828 C114.220532,204.735668 122.781793,230.7969 133.498624,255.99437 C122.761529,281.241316 114.193296,307.357063 107.8868,334.058539 C56.7434387,313.076786 27.0971497,284.003505 27.0971497,255.99437 C27.0971497,229.450947 53.1907013,202.526037 98.4529773,182.106474 Z M155.778503,478.963143 C132.816178,465.691432 122.438973,429.671082 127.517179,380.198317 C127.838331,376.825174 128.259842,373.431953 128.721497,369.978497 C154.953686,377.878517 181.814655,383.514365 209.009348,386.824134 C225.500295,408.752719 243.832321,429.233234 263.805806,448.042665 C220.069,481.834331 180.105722,492.97775 155.838719,478.963143 M441.502893,380.198317 C446.520883,429.691161 436.203894,465.691432 413.221497,478.963143 C388.974566,493.017906 348.991216,481.834331 305.274481,448.042665 C325.241364,429.232737 343.566681,408.752215 360.050868,386.824134 C387.245915,383.516508 414.107066,377.880622 440.338719,369.978497 C440.820446,373.431953 441.221885,376.825174 441.563109,380.198317 M461.193488,334.018382 C454.869166,307.332523 446.294494,281.231049 435.561592,255.99437 C446.289797,230.744081 454.857778,204.629101 461.173416,177.930202 C512.216417,198.911955 541.942994,227.985236 541.942994,255.99437 C541.942994,284.003505 512.296705,313.076786 461.153344,334.058539" id="Shape"></path>
 9 |         </g>
10 |       </g>
11 |     </g>
12 |   </symbol>
13 |   <!-- Node Icon -->
14 |   <symbol id="node" viewBox="0 0 256 292">
15 |     <defs>
16 |       <linearGradient id="a" x1="68.188%" x2="27.823%" y1="17.487%" y2="89.755%"><stop offset="0%" stop-color="#41873F"/><stop offset="32.88%" stop-color="#418B3D"/><stop offset="63.52%" stop-color="#419637"/><stop offset="93.19%" stop-color="#3FA92D"/><stop offset="100%" stop-color="#3FAE2A"/></linearGradient>
17 |       <linearGradient id="c" x1="43.277%" x2="159.245%" y1="55.169%" y2="-18.306%"><stop offset="13.76%" stop-color="#41873F"/><stop offset="40.32%" stop-color="#54A044"/><stop offset="71.36%" stop-color="#66B848"/><stop offset="90.81%" stop-color="#6CC04A"/></linearGradient>
18 |       <linearGradient id="f" x1="-4.389%" x2="101.499%" y1="49.997%" y2="49.997%"><stop offset="9.192%" stop-color="#6CC04A"/><stop offset="28.64%" stop-color="#66B848"/><stop offset="59.68%" stop-color="#54A044"/><stop offset="86.24%" stop-color="#41873F"/></linearGradient>
19 |       <path id="b" d="M134.923 1.832c-4.344-2.443-9.502-2.443-13.846 0L6.787 67.801C2.443 70.244 0 74.859 0 79.745v132.208c0 4.887 2.715 9.502 6.787 11.945l114.29 65.968c4.344 2.444 9.502 2.444 13.846 0l114.29-65.968c4.344-2.443 6.787-7.058 6.787-11.945V79.745c0-4.886-2.715-9.501-6.787-11.944L134.923 1.832Z"/>
20 |       <path id="e" d="M134.923 1.832c-4.344-2.443-9.502-2.443-13.846 0L6.787 67.801C2.443 70.244 0 74.859 0 79.745v132.208c0 4.887 2.715 9.502 6.787 11.945l114.29 65.968c4.344 2.444 9.502 2.444 13.846 0l114.29-65.968c4.344-2.443 6.787-7.058 6.787-11.945V79.745c0-4.886-2.715-9.501-6.787-11.944L134.923 1.832Z"/>
21 |     </defs>
22 |     <path fill="url(#a)" d="M134.923 1.832c-4.344-2.443-9.502-2.443-13.846 0L6.787 67.801C2.443 70.244 0 74.859 0 79.745v132.208c0 4.887 2.715 9.502 6.787 11.945l114.29 65.968c4.344 2.444 9.502 2.444 13.846 0l114.29-65.968c4.344-2.443 6.787-7.058 6.787-11.945V79.745c0-4.886-2.715-9.501-6.787-11.944L134.923 1.832Z"/>
23 |     <mask id="d" fill="#fff"><use xlink:href="#b"/></mask>
24 |     <path fill="url(#c)" d="M249.485 67.8 134.65 1.833c-1.086-.542-2.443-1.085-3.529-1.357L2.443 220.912c1.086 1.357 2.444 2.443 3.8 3.258l114.834 65.968c3.258 1.9 7.059 2.443 10.588 1.357L252.47 70.515c-.815-1.086-1.9-1.9-2.986-2.714Z" mask="url(#d)"/>
25 |     <mask id="g" fill="#fff"><use xlink:href="#e"/></mask>
26 |     <path fill="url(#f)" d="M249.756 223.898c3.258-1.9 5.701-5.158 6.787-8.687L130.579.204c-3.258-.543-6.787-.272-9.773 1.628L6.786 67.53l122.979 224.238c1.628-.272 3.529-.815 5.158-1.63l114.833-66.239Z" mask="url(#g)"/>
27 |   </symbol>
28 |   <!-- TypeScript Icon -->
29 |   <symbol id="typescript" viewBox="0 0 256 256">
30 |     <rect width="256" height="256" rx="20" fill="#3178C6"/>
31 |     <path d="M150.518 200.475v27.62c4.492 2.302 9.805 4.028 15.938 5.179 6.133 1.151 12.597 1.726 19.393 1.726 6.622 0 12.914-.633 18.874-1.899 5.96-1.266 11.187-3.352 15.678-6.257 4.492-2.906 8.048-6.704 10.669-11.394 2.62-4.689 3.93-10.486 3.93-17.391 0-5.006-.749-9.394-2.246-13.163a30.748 30.748 0 0 0-6.479-10.055c-2.821-2.935-6.205-5.567-10.149-7.898-3.945-2.33-8.394-4.531-13.347-6.602-3.628-1.497-6.881-2.949-9.761-4.359-2.879-1.41-5.327-2.848-7.342-4.316-2.016-1.467-3.571-3.021-4.665-4.661-1.094-1.64-1.641-3.495-1.641-5.567 0-1.899.489-3.61 1.468-5.135s2.362-2.834 4.147-3.927c1.785-1.094 3.973-1.942 6.565-2.547 2.591-.604 5.471-.906 8.638-.906 2.304 0 4.737.173 7.299.518 2.563.345 5.14.877 7.732 1.597a53.669 53.669 0 0 1 7.558 2.719 41.7 41.7 0 0 1 6.781 3.797v-25.807c-4.204-1.611-8.797-2.805-13.778-3.582-4.981-.777-10.697-1.165-17.147-1.165-6.565 0-12.784.705-18.658 2.115-5.874 1.409-11.043 3.61-15.506 6.602-4.463 2.993-7.99 6.805-10.582 11.437-2.591 4.632-3.887 10.17-3.887 16.615 0 8.228 2.375 15.248 7.127 21.06 4.751 5.811 11.963 10.731 21.638 14.759a291.458 291.458 0 0 1 10.625 4.575c3.283 1.496 6.119 3.049 8.509 4.66 2.39 1.611 4.276 3.366 5.658 5.265 1.382 1.899 2.073 4.057 2.073 6.474a9.901 9.901 0 0 1-1.296 4.963c-.863 1.524-2.174 2.848-3.93 3.97-1.756 1.122-3.945 1.999-6.565 2.632-2.62.633-5.687.95-9.2.95-5.989 0-11.92-1.05-17.794-3.151-5.875-2.1-11.317-5.25-16.327-9.451Zm-46.036-68.733H140V109H41v22.742h35.345V233h28.137V131.742Z" fill="#FFF"/>
32 |   </symbol>
33 | 
34 |   <symbol id="html" viewBox="0 0 452 520">
35 |     <path fill="#e34f26" d="M41 460L0 0h451l-41 460-185 52" />
36 |     <path fill="#ef652a" d="M226 472l149-41 35-394H226" />
37 |     <path fill="#ecedee" d="M226 208h-75l-5-58h80V94H84l15 171h127zm0 147l-64-17-4-45h-56l7 89 117 32z"/>
38 |     <path fill="#fff" d="M226 265h69l-7 73-62 17v59l115-32 16-174H226zm0-171v56h136l5-56z"/>
39 |   </symbol>
40 |   
41 |   <!-- CSS Icon -->
42 |   <symbol id="css" viewBox="0 0 1000 1000">
43 |     <path fill="#639" d="M0 0h840a160 160 0 0 1 160 160v680a160 160 0 0 1-160 160H160A160 160 0 0 1 0 840V0Z"/>
44 |     <path fill="#fff" d="M816.54 919.9c-32.39 0-57.16-9.42-74.5-28.35-17.15-19.03-26.08-46.18-26.88-81.64h69.8c.4 31.36 11.42 47.08 33.08 47.08 11.04 0 18.86-3.5 23.37-10.42 4.41-6.9 6.72-17.93 6.72-33.05 0-12.02-3.01-22.04-8.83-29.95a73.2 73.2 0 0 0-29.48-21.14L783.95 750c-23.06-11.02-39.81-24.04-50.14-39.27-10.03-15.13-15.04-36.36-15.04-63.5 0-30.36 8.83-55 26.37-73.94 18.05-18.93 42.62-28.34 74-28.34 30.3 0 53.76 9.31 70.3 27.84 16.85 18.64 25.67 45.28 26.38 80.14h-67.19c.4-11.4-1.9-22.72-6.72-33.06-3.8-7.6-11.23-11.41-22.26-11.41-19.65 0-29.48 11.71-29.48 35.05 0 11.83 2.4 21.04 7.22 28.05A65.18 65.18 0 0 0 822.76 689l24.77 10.92c25.57 11.72 44.02 26.05 55.35 43.38 11.43 17.23 17.05 40.27 17.05 69.12 0 34.56-9.03 61.1-27.38 79.63-18.25 18.53-43.62 27.85-76 27.85Zm-225.42 0c-32.4 0-57.16-9.42-74.51-28.35-17.15-19.03-26.07-46.18-26.87-81.64h69.79c.4 31.36 11.43 47.08 33.1 47.08 11.02 0 18.84-3.5 23.25-10.42 4.52-6.9 6.72-17.93 6.72-33.05 0-12.02-2.9-22.04-8.72-29.95a73.2 73.2 0 0 0-29.48-21.14L558.53 750c-23.07-11.02-39.81-24.04-50.14-39.27-10.03-15.13-15.04-36.36-15.04-63.5 0-30.36 8.82-55 26.37-73.94 18.05-18.93 42.62-28.34 74-28.34 30.29 0 53.75 9.31 70.2 27.84 17.05 18.64 25.77 45.28 26.47 80.14h-67.18c.4-11.4-1.9-22.72-6.72-33.06-3.81-7.6-11.23-11.41-22.26-11.41-19.66 0-29.49 11.71-29.49 35.05 0 11.83 2.41 21.04 7.22 28.05A65.18 65.18 0 0 0 597.33 689l24.77 10.92c25.57 11.72 44.02 26.05 55.36 43.38 11.33 17.23 17.04 40.27 17.04 69.12 0 34.56-9.12 61.1-27.37 79.63-18.25 18.53-43.62 27.85-76.01 27.85Zm-234.75 0c-31.7 0-56.86-8.62-75.51-25.85-18.65-17.12-27.88-42.87-27.88-76.93V648.83c0-33.85 9.83-59.5 29.48-77.13 19.96-17.43 46.13-26.24 78.52-26.24 31.39 0 56.15 9.01 74.5 26.84 18.56 17.93 27.88 44.58 27.88 80.14v13.32h-73.9v-12.92c0-13.72-3.01-23.84-8.83-30.45a26.46 26.46 0 0 0-21.66-10.32c-12.03 0-20.55 4.1-25.37 12.42a79.04 79.04 0 0 0-6.72 36.66v146.26c0 30.55 10.74 46.08 32.1 46.38 10.02 0 17.54-3.61 22.76-10.82a51.74 51.74 0 0 0 7.72-30.46V801.6h73.9v11.42c0 23.74-4.61 43.57-13.94 59.4a88.8 88.8 0 0 1-38.2 35.66 121.46 121.46 0 0 1-54.85 11.82Z"/>
45 |   </symbol>
46 |   <!-- Instagram Icon -->
47 |   <symbol id="instagram" viewBox="0 0 256 256">
48 |     <path fill="#fff" d="M128 23.064c34.177 0 38.225.13 51.722.745 12.48.57 19.258 2.655 23.769 4.408 5.974 2.322 10.238 5.096 14.717 9.575 4.48 4.479 7.253 8.743 9.575 14.717 1.753 4.511 3.838 11.289 4.408 23.768.615 13.498.745 17.546.745 51.723 0 34.178-.13 38.226-.745 51.723-.57 12.48-2.655 19.257-4.408 23.768-2.322 5.974-5.096 10.239-9.575 14.718-4.479 4.479-8.743 7.253-14.717 9.574-4.511 1.753-11.289 3.839-23.769 4.408-13.495.616-17.543.746-51.722.746-34.18 0-38.228-.13-51.723-.746-12.48-.57-19.257-2.655-23.768-4.408-5.974-2.321-10.239-5.095-14.718-9.574-4.479-4.48-7.253-8.744-9.574-14.718-1.753-4.51-3.839-11.288-4.408-23.768-.616-13.497-.746-17.545-.746-51.723 0-34.177.13-38.225.746-51.722.57-12.48 2.655-19.258 4.408-23.769 2.321-5.974 5.095-10.238 9.574-14.717 4.48-4.48 8.744-7.253 14.718-9.575 4.51-1.753 11.289-3.838 23.768-4.408 13.497-.615 17.545-.745 51.723-.745M128 0C93.237 0 88.878.147 75.226.77c-13.625.622-22.93 2.786-31.071 5.95-8.418 3.271-15.556 7.648-22.672 14.764C14.367 28.6 9.991 35.738 6.72 44.155 3.555 52.297 1.392 61.602.77 75.226.147 88.878 0 93.237 0 128c0 34.763.147 39.122.77 52.774.622 13.625 2.785 22.93 5.95 31.071 3.27 8.417 7.647 15.556 14.763 22.672 7.116 7.116 14.254 11.492 22.672 14.763 8.142 3.165 17.446 5.328 31.07 5.95 13.653.623 18.012.77 52.775.77s39.122-.147 52.774-.77c13.624-.622 22.929-2.785 31.07-5.95 8.418-3.27 15.556-7.647 22.672-14.763 7.116-7.116 11.493-14.254 14.764-22.672 3.164-8.142 5.328-17.446 5.95-31.07.623-13.653.77-18.012.77-52.775s-.147-39.122-.77-52.774c-.622-13.624-2.786-22.929-5.95-31.07-3.271-8.418-7.648-15.556-14.764-22.672C227.4 14.368 220.262 9.99 211.845 6.72c-8.142-3.164-17.447-5.328-31.071-5.95C167.122.147 162.763 0 128 0Zm0 62.27C91.698 62.27 62.27 91.7 62.27 128c0 36.302 29.428 65.73 65.73 65.73 36.301 0 65.73-29.428 65.73-65.73 0-36.301-29.429-65.73-65.73-65.73Zm0 108.397c-23.564 0-42.667-19.103-42.667-42.667S104.436 85.333 128 85.333s42.667 19.103 42.667 42.667-19.103 42.667-42.667 42.667Zm83.686-110.994c0 8.484-6.876 15.36-15.36 15.36-8.483 0-15.36-6.876-15.36-15.36 0-8.483 6.877-15.36 15.36-15.36 8.484 0 15.36 6.877 15.36 15.36Z"/>
49 |   </symbol>
50 |   <!-- X (Twitter) Icon -->
51 |   <symbol id="x" viewBox="0 0 1200 1227">
52 |     <path fill="#fff" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/>
53 |   </symbol>
54 |   <!-- YouTube Icon -->
55 |   <symbol id="youtube" viewBox="0 0 256 180">
56 |     <path d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z" fill="red"/>
57 |     <path fill="#FFF" d="m102.421 128.06 66.328-38.418-66.328-38.418z"/>
58 |   </symbol>
59 |   <!-- LinkedIn Icon -->
60 |   <symbol id="linkedin" viewBox="0 0 256 256">
61 |     <path d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453" fill="#0A66C2"/>
62 |   </symbol>
63 |   <!-- GitHub Icon -->
64 |   <symbol id="github" viewBox="0 0 1024 1024">
65 |     <path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#fff"/>
66 |   </symbol>
67 |   <!-- Strava Icon -->
68 |   <symbol id="strava" width="512" height="512" style="enable-background:new 0 0 512 512"><path d="M226.172 26.001 90.149 288.345h80.141l55.882-104.309 55.433 104.309h79.511z" style="fill:#f50"/><path d="m361.116 288.345-39.441 79.241-40.07-79.241h-60.734l100.804 197.654 100.176-197.654z" style="fill:#ffaf8a"/></symbol>
69 |   <!-- Twitch Icon -->
70 |   <symbol id="twitch" viewBox="0 0 2400 2800">
71 |     <path fill="#fff" d="m2200 1300-400 400h-400l-350 350v-350H600V200h1600z"/>
72 |     <g fill="#9146ff">
73 |       <path d="M500 0 0 500v1800h600v500l500-500h400l900-900V0H500zm1700 1300-400 400h-400l-350 350v-350H600V200h1600v1100z"/>
74 |       <path d="M1700 550h200v600h-200zm-550 0h200v600h-200z"/>
75 |     </g>
76 |   </symbol>
77 |   <!-- Verified Icon -->
78 |   <symbol id="verified" viewBox="0 0 20 20">
79 |     <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707a1 1 0 00-1.414-1.414L9 11.172l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
80 |   </symbol>
81 | </svg>
82 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>midu.links - Enlaces de midudev y cursos</title>
  8 |   <link rel="stylesheet" href="./assets/output.css">
  9 | </head>
 10 | 
 11 | <body class="max-w-xl mx-auto
 12 |   min-h-dvh
 13 |   bg-gradient-to-b from-black via-sky-950 to-gray-800
 14 | 
 15 | ">
 16 |   <header class="text-white">
 17 |     <img alt="midudev sonriendo" src="./assets/me-big.webp"
 18 |       class="h-[50vh] object-cover mask-radial-at-center mask-radial-from-45% mask-radial-to-80% animate-pulse-fade-in">
 19 | 
 20 |     <header class="flex flex-col justify-center items-center mb-8 -mt-4">
 21 |       <span class="
 22 |         text-sky-400 text-xl
 23 |         font-mono px-3 py-1
 24 |         border border-sky-500/50 rounded-full flex items-center justify-center shadow-sm
 25 |         bg-black/65
 26 |         cursor-crosshair
 27 |         z-10
 28 |       ">
 29 |         @midudev
 30 |         <svg class="ml-1 w-5 h-5 text-sky-400 inline" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
 31 |           <path fill-rule="evenodd"
 32 |             d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707a1 1 0 00-1.414-1.414L9 11.172l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
 33 |             clip-rule="evenodd" />
 34 |         </svg>
 35 |       </span>
 36 | 
 37 |       <h1 class="text-3xl font-extrabold leading-tight mt-1 font-display">
 38 |         Miguel Ángel Durán
 39 |       </h1>
 40 |     </header>
 41 | 
 42 |     <section class="flex gap-2 justify-center">
 43 |       <a class="bg-purple-100 social-button animate-slide-up-fade" href="https://twitch.tv/midudev" target="_blank"
 44 |         aria-label="Twitch" title="Ir a Twitch de @midudev">
 45 |         <svg width="28" height="28">
 46 |           <use xlink:href="./assets/sprite.svg#twitch" />
 47 |         </svg>
 48 |       </a>
 49 | 
 50 |       <a class="bg-zinc-900 social-button animate-slide-up-fade animate-delay-100" href="https://github.com/midudev"
 51 |         target="_blank" aria-label="GitHub" title="Ir a GitHub de @midudev">
 52 |         <svg width="28" height="28">
 53 |           <use xlink:href="./assets/sprite.svg#github" />
 54 |         </svg>
 55 |       </a>
 56 | 
 57 |       <!-- Instagram -->
 58 |       <a class="social-button animate-slide-up-fade animate-delay-200 bg-gradient-to-tr from-yellow-300 via-pink-600 to-purple-600"
 59 |         href="https://instagram.com/midudev" target="_blank" aria-label="Instagram" title="Ir a Instagram de @midudev">
 60 |         <svg width="28" height="28">
 61 |           <use xlink:href="./assets/sprite.svg#instagram" />
 62 |         </svg>
 63 |       </a>
 64 | 
 65 |       <!-- YouTube -->
 66 |       <a class="bg-white social-button animate-slide-up-fade animate-delay-300" href="https://youtube.com/midudev"
 67 |         target="_blank" aria-label="YouTube" title="Ir a YouTube de @midudev">
 68 |         <svg width="28" height="28">
 69 |           <use xlink:href="./assets/sprite.svg#youtube" />
 70 |         </svg>
 71 |       </a>
 72 | 
 73 |       <!-- X (Twitter) -->
 74 |       <a class="bg-black social-button animate-slide-up-fade animate-delay-400" href="https://x.com/midudev"
 75 |         target="_blank" aria-label="X" title="Ir a X de @midudev">
 76 |         <svg width="28" height="28">
 77 |           <use xlink:href="./assets/sprite.svg#x" />
 78 |         </svg>
 79 |       </a>
 80 | 
 81 |       <!-- LinkedIn -->
 82 |       <a class="bg-white social-button animate-slide-up-fade animate-delay-500" href="https://linkedin.com/in/midudev"
 83 |         target="_blank" aria-label="LinkedIn" title="Ir a LinkedIn de @midudev">
 84 |         <svg width="28" height="28">
 85 |           <use xlink:href="./assets/sprite.svg#linkedin" />
 86 |         </svg>
 87 |       </a>
 88 |     </section>
 89 | 
 90 |     <p class="text-midu-lol text-center mt-4 text-sm px-4 text-balance">
 91 |       Divulgador de programación, streamer y creador de contenido. Enseñando JavaScript, React, Node.js de forma
 92 |       divertida
 93 |     </p>
 94 | 
 95 |     <main class="pt-4 px-4 pb-16">
 96 |       <div class="grid grid-cols-3 grid-rows-2 gap-2 w-full">
 97 |         <a href="https://cursoreact.dev" class="
 98 |           relative rounded-3xl overflow-hidden
 99 |           bg-gradient-to-br from-cyan-900 via-cyan-700 to-cyan-500
100 |           border border-cyan-900
101 |           flex flex-col items-start
102 |           hover:scale-105 hover:contrast-125
103 |           transition
104 |           group
105 |           col-span-2 p-7 min-h-[180px]
106 |         ">
107 |           <span
108 |             class="absolute bottom-2 left-4 font-bold text-2xl group-hover:-translate-y-1 transition-transform">React.js</span>
109 | 
110 |           <svg
111 |             class="absolute -right-4 -bottom-4 -rotate-6 size-28 group-hover:-rotate-12 group-hover:scale-125 transition-transform"
112 |             width="100" height="100">
113 |             <use xlink:href="./assets/sprite.svg#react" />
114 |           </svg>
115 | 
116 |           <span class="absolute top-2 left-4 text-xs border rounded-xl px-1 py-0.5">Curso de +14 clases</span>
117 |         </a>
118 | 
119 |         <a href="https://midu.link/html" class="
120 |           relative rounded-3xl overflow-hidden
121 |           bg-gradient-to-br from-html via-orange-300 to-white
122 |           border border-html
123 |           flex flex-col items-start
124 |           hover:scale-105 hover:contrast-125
125 |           transition
126 |           group
127 |           col-span-1 p-7 min-h-[180px]
128 |         ">
129 |           <span
130 |             class="absolute bottom-2 left-4 font-bold text-2xl group-hover:-translate-y-1 transition-transform">HTML</span>
131 | 
132 |           <svg
133 |             class="absolute -right-4 -bottom-4 -rotate-6 size-28 group-hover:-rotate-12 group-hover:scale-125 transition-transform"
134 |             width="100" height="100">
135 |             <use xlink:href="./assets/sprite.svg#html" />
136 |           </svg>
137 | 
138 |           <span class="absolute top-2 left-4 text-xs border rounded-xl px-1 py-0.5">Para principiantes</span>
139 |         </a>
140 | 
141 |         <a href="https://midu.link/html" class="
142 |           relative rounded-3xl overflow-hidden
143 |           bg-gradient-to-br from-[#663399] via-[#8e44ad] to-white
144 |           border border-[#663399]
145 |           flex flex-col items-start
146 |           hover:scale-105 hover:contrast-125
147 |           transition
148 |           group
149 |           col-span-1 p-7 min-h-[180px]
150 |         ">
151 |           <span
152 |             class="absolute bottom-2 left-4 font-bold text-2xl group-hover:-translate-y-1 transition-transform">CSS</span>
153 | 
154 |           <svg
155 |             class="absolute -right-4 -bottom-4 -rotate-6 size-28 group-hover:-rotate-12 group-hover:scale-125 transition-transform"
156 |             width="100" height="100">
157 |             <use xlink:href="./assets/sprite.svg#css" />
158 |           </svg>
159 | 
160 |           <span class="absolute top-2 left-4 text-xs border rounded-xl px-1 py-0.5">Para principiantes</span>
161 |         </a>
162 | 
163 |         <a href="https://cursoreact.dev" class="
164 |           relative rounded-3xl overflow-hidden
165 |           bg-gradient-to-br from-[#215732] via-[#3C873A] to-[#8CC84B]
166 |           border border-[#215732]
167 |           flex flex-col items-start
168 |           hover:scale-105 hover:contrast-125
169 |           transition
170 |           group
171 |           col-span-2 p-7 min-h-[180px]
172 |         ">
173 |           <span
174 |             class="absolute bottom-2 left-4 font-bold text-2xl group-hover:-translate-y-1 transition-transform">Node.js</span>
175 | 
176 |           <svg
177 |             class="absolute -right-4 -bottom-4 -rotate-6 size-28 group-hover:-rotate-12 group-hover:scale-125 transition-transform"
178 |             width="100" height="100">
179 |             <use xlink:href="./assets/sprite.svg#node" />
180 |           </svg>
181 | 
182 |           <span class="absolute top-2 left-4 text-xs border rounded-xl px-1 py-0.5">Curso de +14 clases</span>
183 |         </a>
184 |       </div>
185 |     </main>
186 | 
187 |   </header>
188 | 
189 | </body>
190 | 
191 | </html>


--------------------------------------------------------------------------------
/input.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | @plugin "@midudev/tailwind-animations";
 3 | 
 4 | @font-face {
 5 |   font-family: 'Inter';
 6 |   src: url('/assets/inter.woff2') format('woff2');
 7 |   font-style: normal;
 8 |   font-weight: 100 700;
 9 |   font-display: swap;
10 | }
11 | 
12 | @theme {
13 |   /* Colores */
14 |   --color-primary: #09f;
15 |   --color-primary-light: #ceecff;
16 |   --color-primary-dark: rgb(0, 22, 83);
17 |   --color-midu-lol: #f8dbff;
18 |   --color-midu-lol-light: #ceecff;
19 | 
20 |   --color-html: #E44D26;
21 | 
22 |   /* Fuentes */
23 |   --font-display: 'Inter', system-ui, sans-serif;
24 |   
25 |   /* Breakpoints */
26 |   --breakpoint-xs: 350px;
27 | }
28 | 
29 | .social-button {
30 |   @apply p-2 size-10 xs:size-12 flex items-center justify-center rounded-full hover:scale-110 transition-transform;
31 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "midu-links",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build:styles": "pnpx @tailwindcss/cli -i ./input.css -o ./assets/output.css --watch"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "packageManager": "pnpm@10.8.0",
13 |   "dependencies": {
14 |     "@midudev/tailwind-animations": "^0.2.0",
15 |     "@tailwindcss/cli": "^4.1.5",
16 |     "tailwindcss": "^4.1.5"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/pnpm-lock.yaml:
--------------------------------------------------------------------------------
  1 | lockfileVersion: '9.0'
  2 | 
  3 | settings:
  4 |   autoInstallPeers: true
  5 |   excludeLinksFromLockfile: false
  6 | 
  7 | importers:
  8 | 
  9 |   .:
 10 |     dependencies:
 11 |       '@midudev/tailwind-animations':
 12 |         specifier: ^0.2.0
 13 |         version: 0.2.0(tailwindcss@4.1.5)
 14 |       '@tailwindcss/cli':
 15 |         specifier: ^4.1.5
 16 |         version: 4.1.5
 17 |       tailwindcss:
 18 |         specifier: ^4.1.5
 19 |         version: 4.1.5
 20 | 
 21 | packages:
 22 | 
 23 |   '@midudev/tailwind-animations@0.2.0':
 24 |     resolution: {integrity: sha512-4mktb060dA7SZz0LjMfhBT30HWPmQENwF4AJC7/etESWohe4pukST0ohC2yAePS5GNinhY3MXmZZ8//2ywafOQ==}
 25 |     peerDependencies:
 26 |       tailwindcss: ^3.0.0 || ^4.0.0
 27 | 
 28 |   '@parcel/watcher-android-arm64@2.5.1':
 29 |     resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
 30 |     engines: {node: '>= 10.0.0'}
 31 |     cpu: [arm64]
 32 |     os: [android]
 33 | 
 34 |   '@parcel/watcher-darwin-arm64@2.5.1':
 35 |     resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
 36 |     engines: {node: '>= 10.0.0'}
 37 |     cpu: [arm64]
 38 |     os: [darwin]
 39 | 
 40 |   '@parcel/watcher-darwin-x64@2.5.1':
 41 |     resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
 42 |     engines: {node: '>= 10.0.0'}
 43 |     cpu: [x64]
 44 |     os: [darwin]
 45 | 
 46 |   '@parcel/watcher-freebsd-x64@2.5.1':
 47 |     resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
 48 |     engines: {node: '>= 10.0.0'}
 49 |     cpu: [x64]
 50 |     os: [freebsd]
 51 | 
 52 |   '@parcel/watcher-linux-arm-glibc@2.5.1':
 53 |     resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
 54 |     engines: {node: '>= 10.0.0'}
 55 |     cpu: [arm]
 56 |     os: [linux]
 57 | 
 58 |   '@parcel/watcher-linux-arm-musl@2.5.1':
 59 |     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
 60 |     engines: {node: '>= 10.0.0'}
 61 |     cpu: [arm]
 62 |     os: [linux]
 63 | 
 64 |   '@parcel/watcher-linux-arm64-glibc@2.5.1':
 65 |     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
 66 |     engines: {node: '>= 10.0.0'}
 67 |     cpu: [arm64]
 68 |     os: [linux]
 69 | 
 70 |   '@parcel/watcher-linux-arm64-musl@2.5.1':
 71 |     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
 72 |     engines: {node: '>= 10.0.0'}
 73 |     cpu: [arm64]
 74 |     os: [linux]
 75 | 
 76 |   '@parcel/watcher-linux-x64-glibc@2.5.1':
 77 |     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
 78 |     engines: {node: '>= 10.0.0'}
 79 |     cpu: [x64]
 80 |     os: [linux]
 81 | 
 82 |   '@parcel/watcher-linux-x64-musl@2.5.1':
 83 |     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
 84 |     engines: {node: '>= 10.0.0'}
 85 |     cpu: [x64]
 86 |     os: [linux]
 87 | 
 88 |   '@parcel/watcher-win32-arm64@2.5.1':
 89 |     resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
 90 |     engines: {node: '>= 10.0.0'}
 91 |     cpu: [arm64]
 92 |     os: [win32]
 93 | 
 94 |   '@parcel/watcher-win32-ia32@2.5.1':
 95 |     resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
 96 |     engines: {node: '>= 10.0.0'}
 97 |     cpu: [ia32]
 98 |     os: [win32]
 99 | 
100 |   '@parcel/watcher-win32-x64@2.5.1':
101 |     resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
102 |     engines: {node: '>= 10.0.0'}
103 |     cpu: [x64]
104 |     os: [win32]
105 | 
106 |   '@parcel/watcher@2.5.1':
107 |     resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
108 |     engines: {node: '>= 10.0.0'}
109 | 
110 |   '@tailwindcss/cli@4.1.5':
111 |     resolution: {integrity: sha512-Kr567rDwDjY1VUnfqh5/+DCpRf4B8lPs5O9flP4kri7n4AM2aubrIxGSh5GN8s+awUKw/U4+6kNlEnZbBNfUeg==}
112 |     hasBin: true
113 | 
114 |   '@tailwindcss/node@4.1.5':
115 |     resolution: {integrity: sha512-CBhSWo0vLnWhXIvpD0qsPephiaUYfHUX3U9anwDaHZAeuGpTiB3XmsxPAN6qX7bFhipyGBqOa1QYQVVhkOUGxg==}
116 | 
117 |   '@tailwindcss/oxide-android-arm64@4.1.5':
118 |     resolution: {integrity: sha512-LVvM0GirXHED02j7hSECm8l9GGJ1RfgpWCW+DRn5TvSaxVsv28gRtoL4aWKGnXqwvI3zu1GABeDNDVZeDPOQrw==}
119 |     engines: {node: '>= 10'}
120 |     cpu: [arm64]
121 |     os: [android]
122 | 
123 |   '@tailwindcss/oxide-darwin-arm64@4.1.5':
124 |     resolution: {integrity: sha512-//TfCA3pNrgnw4rRJOqavW7XUk8gsg9ddi8cwcsWXp99tzdBAZW0WXrD8wDyNbqjW316Pk2hiN/NJx/KWHl8oA==}
125 |     engines: {node: '>= 10'}
126 |     cpu: [arm64]
127 |     os: [darwin]
128 | 
129 |   '@tailwindcss/oxide-darwin-x64@4.1.5':
130 |     resolution: {integrity: sha512-XQorp3Q6/WzRd9OalgHgaqgEbjP3qjHrlSUb5k1EuS1Z9NE9+BbzSORraO+ecW432cbCN7RVGGL/lSnHxcd+7Q==}
131 |     engines: {node: '>= 10'}
132 |     cpu: [x64]
133 |     os: [darwin]
134 | 
135 |   '@tailwindcss/oxide-freebsd-x64@4.1.5':
136 |     resolution: {integrity: sha512-bPrLWbxo8gAo97ZmrCbOdtlz/Dkuy8NK97aFbVpkJ2nJ2Jo/rsCbu0TlGx8joCuA3q6vMWTSn01JY46iwG+clg==}
137 |     engines: {node: '>= 10'}
138 |     cpu: [x64]
139 |     os: [freebsd]
140 | 
141 |   '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.5':
142 |     resolution: {integrity: sha512-1gtQJY9JzMAhgAfvd/ZaVOjh/Ju/nCoAsvOVJenWZfs05wb8zq+GOTnZALWGqKIYEtyNpCzvMk+ocGpxwdvaVg==}
143 |     engines: {node: '>= 10'}
144 |     cpu: [arm]
145 |     os: [linux]
146 | 
147 |   '@tailwindcss/oxide-linux-arm64-gnu@4.1.5':
148 |     resolution: {integrity: sha512-dtlaHU2v7MtdxBXoqhxwsWjav7oim7Whc6S9wq/i/uUMTWAzq/gijq1InSgn2yTnh43kR+SFvcSyEF0GCNu1PQ==}
149 |     engines: {node: '>= 10'}
150 |     cpu: [arm64]
151 |     os: [linux]
152 | 
153 |   '@tailwindcss/oxide-linux-arm64-musl@4.1.5':
154 |     resolution: {integrity: sha512-fg0F6nAeYcJ3CriqDT1iVrqALMwD37+sLzXs8Rjy8Z1ZHshJoYceodfyUwGJEsQoTyWbliFNRs2wMQNXtT7MVA==}
155 |     engines: {node: '>= 10'}
156 |     cpu: [arm64]
157 |     os: [linux]
158 | 
159 |   '@tailwindcss/oxide-linux-x64-gnu@4.1.5':
160 |     resolution: {integrity: sha512-SO+F2YEIAHa1AITwc8oPwMOWhgorPzzcbhWEb+4oLi953h45FklDmM8dPSZ7hNHpIk9p/SCZKUYn35t5fjGtHA==}
161 |     engines: {node: '>= 10'}
162 |     cpu: [x64]
163 |     os: [linux]
164 | 
165 |   '@tailwindcss/oxide-linux-x64-musl@4.1.5':
166 |     resolution: {integrity: sha512-6UbBBplywkk/R+PqqioskUeXfKcBht3KU7juTi1UszJLx0KPXUo10v2Ok04iBJIaDPkIFkUOVboXms5Yxvaz+g==}
167 |     engines: {node: '>= 10'}
168 |     cpu: [x64]
169 |     os: [linux]
170 | 
171 |   '@tailwindcss/oxide-wasm32-wasi@4.1.5':
172 |     resolution: {integrity: sha512-hwALf2K9FHuiXTPqmo1KeOb83fTRNbe9r/Ixv9ZNQ/R24yw8Ge1HOWDDgTdtzntIaIUJG5dfXCf4g9AD4RiyhQ==}
173 |     engines: {node: '>=14.0.0'}
174 |     cpu: [wasm32]
175 |     bundledDependencies:
176 |       - '@napi-rs/wasm-runtime'
177 |       - '@emnapi/core'
178 |       - '@emnapi/runtime'
179 |       - '@tybys/wasm-util'
180 |       - '@emnapi/wasi-threads'
181 |       - tslib
182 | 
183 |   '@tailwindcss/oxide-win32-arm64-msvc@4.1.5':
184 |     resolution: {integrity: sha512-oDKncffWzaovJbkuR7/OTNFRJQVdiw/n8HnzaCItrNQUeQgjy7oUiYpsm9HUBgpmvmDpSSbGaCa2Evzvk3eFmA==}
185 |     engines: {node: '>= 10'}
186 |     cpu: [arm64]
187 |     os: [win32]
188 | 
189 |   '@tailwindcss/oxide-win32-x64-msvc@4.1.5':
190 |     resolution: {integrity: sha512-WiR4dtyrFdbb+ov0LK+7XsFOsG+0xs0PKZKkt41KDn9jYpO7baE3bXiudPVkTqUEwNfiglCygQHl2jklvSBi7Q==}
191 |     engines: {node: '>= 10'}
192 |     cpu: [x64]
193 |     os: [win32]
194 | 
195 |   '@tailwindcss/oxide@4.1.5':
196 |     resolution: {integrity: sha512-1n4br1znquEvyW/QuqMKQZlBen+jxAbvyduU87RS8R3tUSvByAkcaMTkJepNIrTlYhD+U25K4iiCIxE6BGdRYA==}
197 |     engines: {node: '>= 10'}
198 | 
199 |   braces@3.0.3:
200 |     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
201 |     engines: {node: '>=8'}
202 | 
203 |   detect-libc@1.0.3:
204 |     resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
205 |     engines: {node: '>=0.10'}
206 |     hasBin: true
207 | 
208 |   detect-libc@2.0.4:
209 |     resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
210 |     engines: {node: '>=8'}
211 | 
212 |   enhanced-resolve@5.18.1:
213 |     resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
214 |     engines: {node: '>=10.13.0'}
215 | 
216 |   fill-range@7.1.1:
217 |     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
218 |     engines: {node: '>=8'}
219 | 
220 |   graceful-fs@4.2.11:
221 |     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
222 | 
223 |   is-extglob@2.1.1:
224 |     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
225 |     engines: {node: '>=0.10.0'}
226 | 
227 |   is-glob@4.0.3:
228 |     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
229 |     engines: {node: '>=0.10.0'}
230 | 
231 |   is-number@7.0.0:
232 |     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
233 |     engines: {node: '>=0.12.0'}
234 | 
235 |   jiti@2.4.2:
236 |     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
237 |     hasBin: true
238 | 
239 |   lightningcss-darwin-arm64@1.29.2:
240 |     resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
241 |     engines: {node: '>= 12.0.0'}
242 |     cpu: [arm64]
243 |     os: [darwin]
244 | 
245 |   lightningcss-darwin-x64@1.29.2:
246 |     resolution: {integrity: sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==}
247 |     engines: {node: '>= 12.0.0'}
248 |     cpu: [x64]
249 |     os: [darwin]
250 | 
251 |   lightningcss-freebsd-x64@1.29.2:
252 |     resolution: {integrity: sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==}
253 |     engines: {node: '>= 12.0.0'}
254 |     cpu: [x64]
255 |     os: [freebsd]
256 | 
257 |   lightningcss-linux-arm-gnueabihf@1.29.2:
258 |     resolution: {integrity: sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==}
259 |     engines: {node: '>= 12.0.0'}
260 |     cpu: [arm]
261 |     os: [linux]
262 | 
263 |   lightningcss-linux-arm64-gnu@1.29.2:
264 |     resolution: {integrity: sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==}
265 |     engines: {node: '>= 12.0.0'}
266 |     cpu: [arm64]
267 |     os: [linux]
268 | 
269 |   lightningcss-linux-arm64-musl@1.29.2:
270 |     resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
271 |     engines: {node: '>= 12.0.0'}
272 |     cpu: [arm64]
273 |     os: [linux]
274 | 
275 |   lightningcss-linux-x64-gnu@1.29.2:
276 |     resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
277 |     engines: {node: '>= 12.0.0'}
278 |     cpu: [x64]
279 |     os: [linux]
280 | 
281 |   lightningcss-linux-x64-musl@1.29.2:
282 |     resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
283 |     engines: {node: '>= 12.0.0'}
284 |     cpu: [x64]
285 |     os: [linux]
286 | 
287 |   lightningcss-win32-arm64-msvc@1.29.2:
288 |     resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
289 |     engines: {node: '>= 12.0.0'}
290 |     cpu: [arm64]
291 |     os: [win32]
292 | 
293 |   lightningcss-win32-x64-msvc@1.29.2:
294 |     resolution: {integrity: sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==}
295 |     engines: {node: '>= 12.0.0'}
296 |     cpu: [x64]
297 |     os: [win32]
298 | 
299 |   lightningcss@1.29.2:
300 |     resolution: {integrity: sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==}
301 |     engines: {node: '>= 12.0.0'}
302 | 
303 |   micromatch@4.0.8:
304 |     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
305 |     engines: {node: '>=8.6'}
306 | 
307 |   mri@1.2.0:
308 |     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
309 |     engines: {node: '>=4'}
310 | 
311 |   node-addon-api@7.1.1:
312 |     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
313 | 
314 |   picocolors@1.1.1:
315 |     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
316 | 
317 |   picomatch@2.3.1:
318 |     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
319 |     engines: {node: '>=8.6'}
320 | 
321 |   tailwindcss@4.1.5:
322 |     resolution: {integrity: sha512-nYtSPfWGDiWgCkwQG/m+aX83XCwf62sBgg3bIlNiiOcggnS1x3uVRDAuyelBFL+vJdOPPCGElxv9DjHJjRHiVA==}
323 | 
324 |   tapable@2.2.1:
325 |     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
326 |     engines: {node: '>=6'}
327 | 
328 |   to-regex-range@5.0.1:
329 |     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
330 |     engines: {node: '>=8.0'}
331 | 
332 | snapshots:
333 | 
334 |   '@midudev/tailwind-animations@0.2.0(tailwindcss@4.1.5)':
335 |     dependencies:
336 |       tailwindcss: 4.1.5
337 | 
338 |   '@parcel/watcher-android-arm64@2.5.1':
339 |     optional: true
340 | 
341 |   '@parcel/watcher-darwin-arm64@2.5.1':
342 |     optional: true
343 | 
344 |   '@parcel/watcher-darwin-x64@2.5.1':
345 |     optional: true
346 | 
347 |   '@parcel/watcher-freebsd-x64@2.5.1':
348 |     optional: true
349 | 
350 |   '@parcel/watcher-linux-arm-glibc@2.5.1':
351 |     optional: true
352 | 
353 |   '@parcel/watcher-linux-arm-musl@2.5.1':
354 |     optional: true
355 | 
356 |   '@parcel/watcher-linux-arm64-glibc@2.5.1':
357 |     optional: true
358 | 
359 |   '@parcel/watcher-linux-arm64-musl@2.5.1':
360 |     optional: true
361 | 
362 |   '@parcel/watcher-linux-x64-glibc@2.5.1':
363 |     optional: true
364 | 
365 |   '@parcel/watcher-linux-x64-musl@2.5.1':
366 |     optional: true
367 | 
368 |   '@parcel/watcher-win32-arm64@2.5.1':
369 |     optional: true
370 | 
371 |   '@parcel/watcher-win32-ia32@2.5.1':
372 |     optional: true
373 | 
374 |   '@parcel/watcher-win32-x64@2.5.1':
375 |     optional: true
376 | 
377 |   '@parcel/watcher@2.5.1':
378 |     dependencies:
379 |       detect-libc: 1.0.3
380 |       is-glob: 4.0.3
381 |       micromatch: 4.0.8
382 |       node-addon-api: 7.1.1
383 |     optionalDependencies:
384 |       '@parcel/watcher-android-arm64': 2.5.1
385 |       '@parcel/watcher-darwin-arm64': 2.5.1
386 |       '@parcel/watcher-darwin-x64': 2.5.1
387 |       '@parcel/watcher-freebsd-x64': 2.5.1
388 |       '@parcel/watcher-linux-arm-glibc': 2.5.1
389 |       '@parcel/watcher-linux-arm-musl': 2.5.1
390 |       '@parcel/watcher-linux-arm64-glibc': 2.5.1
391 |       '@parcel/watcher-linux-arm64-musl': 2.5.1
392 |       '@parcel/watcher-linux-x64-glibc': 2.5.1
393 |       '@parcel/watcher-linux-x64-musl': 2.5.1
394 |       '@parcel/watcher-win32-arm64': 2.5.1
395 |       '@parcel/watcher-win32-ia32': 2.5.1
396 |       '@parcel/watcher-win32-x64': 2.5.1
397 | 
398 |   '@tailwindcss/cli@4.1.5':
399 |     dependencies:
400 |       '@parcel/watcher': 2.5.1
401 |       '@tailwindcss/node': 4.1.5
402 |       '@tailwindcss/oxide': 4.1.5
403 |       enhanced-resolve: 5.18.1
404 |       mri: 1.2.0
405 |       picocolors: 1.1.1
406 |       tailwindcss: 4.1.5
407 | 
408 |   '@tailwindcss/node@4.1.5':
409 |     dependencies:
410 |       enhanced-resolve: 5.18.1
411 |       jiti: 2.4.2
412 |       lightningcss: 1.29.2
413 |       tailwindcss: 4.1.5
414 | 
415 |   '@tailwindcss/oxide-android-arm64@4.1.5':
416 |     optional: true
417 | 
418 |   '@tailwindcss/oxide-darwin-arm64@4.1.5':
419 |     optional: true
420 | 
421 |   '@tailwindcss/oxide-darwin-x64@4.1.5':
422 |     optional: true
423 | 
424 |   '@tailwindcss/oxide-freebsd-x64@4.1.5':
425 |     optional: true
426 | 
427 |   '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.5':
428 |     optional: true
429 | 
430 |   '@tailwindcss/oxide-linux-arm64-gnu@4.1.5':
431 |     optional: true
432 | 
433 |   '@tailwindcss/oxide-linux-arm64-musl@4.1.5':
434 |     optional: true
435 | 
436 |   '@tailwindcss/oxide-linux-x64-gnu@4.1.5':
437 |     optional: true
438 | 
439 |   '@tailwindcss/oxide-linux-x64-musl@4.1.5':
440 |     optional: true
441 | 
442 |   '@tailwindcss/oxide-wasm32-wasi@4.1.5':
443 |     optional: true
444 | 
445 |   '@tailwindcss/oxide-win32-arm64-msvc@4.1.5':
446 |     optional: true
447 | 
448 |   '@tailwindcss/oxide-win32-x64-msvc@4.1.5':
449 |     optional: true
450 | 
451 |   '@tailwindcss/oxide@4.1.5':
452 |     optionalDependencies:
453 |       '@tailwindcss/oxide-android-arm64': 4.1.5
454 |       '@tailwindcss/oxide-darwin-arm64': 4.1.5
455 |       '@tailwindcss/oxide-darwin-x64': 4.1.5
456 |       '@tailwindcss/oxide-freebsd-x64': 4.1.5
457 |       '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.5
458 |       '@tailwindcss/oxide-linux-arm64-gnu': 4.1.5
459 |       '@tailwindcss/oxide-linux-arm64-musl': 4.1.5
460 |       '@tailwindcss/oxide-linux-x64-gnu': 4.1.5
461 |       '@tailwindcss/oxide-linux-x64-musl': 4.1.5
462 |       '@tailwindcss/oxide-wasm32-wasi': 4.1.5
463 |       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.5
464 |       '@tailwindcss/oxide-win32-x64-msvc': 4.1.5
465 | 
466 |   braces@3.0.3:
467 |     dependencies:
468 |       fill-range: 7.1.1
469 | 
470 |   detect-libc@1.0.3: {}
471 | 
472 |   detect-libc@2.0.4: {}
473 | 
474 |   enhanced-resolve@5.18.1:
475 |     dependencies:
476 |       graceful-fs: 4.2.11
477 |       tapable: 2.2.1
478 | 
479 |   fill-range@7.1.1:
480 |     dependencies:
481 |       to-regex-range: 5.0.1
482 | 
483 |   graceful-fs@4.2.11: {}
484 | 
485 |   is-extglob@2.1.1: {}
486 | 
487 |   is-glob@4.0.3:
488 |     dependencies:
489 |       is-extglob: 2.1.1
490 | 
491 |   is-number@7.0.0: {}
492 | 
493 |   jiti@2.4.2: {}
494 | 
495 |   lightningcss-darwin-arm64@1.29.2:
496 |     optional: true
497 | 
498 |   lightningcss-darwin-x64@1.29.2:
499 |     optional: true
500 | 
501 |   lightningcss-freebsd-x64@1.29.2:
502 |     optional: true
503 | 
504 |   lightningcss-linux-arm-gnueabihf@1.29.2:
505 |     optional: true
506 | 
507 |   lightningcss-linux-arm64-gnu@1.29.2:
508 |     optional: true
509 | 
510 |   lightningcss-linux-arm64-musl@1.29.2:
511 |     optional: true
512 | 
513 |   lightningcss-linux-x64-gnu@1.29.2:
514 |     optional: true
515 | 
516 |   lightningcss-linux-x64-musl@1.29.2:
517 |     optional: true
518 | 
519 |   lightningcss-win32-arm64-msvc@1.29.2:
520 |     optional: true
521 | 
522 |   lightningcss-win32-x64-msvc@1.29.2:
523 |     optional: true
524 | 
525 |   lightningcss@1.29.2:
526 |     dependencies:
527 |       detect-libc: 2.0.4
528 |     optionalDependencies:
529 |       lightningcss-darwin-arm64: 1.29.2
530 |       lightningcss-darwin-x64: 1.29.2
531 |       lightningcss-freebsd-x64: 1.29.2
532 |       lightningcss-linux-arm-gnueabihf: 1.29.2
533 |       lightningcss-linux-arm64-gnu: 1.29.2
534 |       lightningcss-linux-arm64-musl: 1.29.2
535 |       lightningcss-linux-x64-gnu: 1.29.2
536 |       lightningcss-linux-x64-musl: 1.29.2
537 |       lightningcss-win32-arm64-msvc: 1.29.2
538 |       lightningcss-win32-x64-msvc: 1.29.2
539 | 
540 |   micromatch@4.0.8:
541 |     dependencies:
542 |       braces: 3.0.3
543 |       picomatch: 2.3.1
544 | 
545 |   mri@1.2.0: {}
546 | 
547 |   node-addon-api@7.1.1: {}
548 | 
549 |   picocolors@1.1.1: {}
550 | 
551 |   picomatch@2.3.1: {}
552 | 
553 |   tailwindcss@4.1.5: {}
554 | 
555 |   tapable@2.2.1: {}
556 | 
557 |   to-regex-range@5.0.1:
558 |     dependencies:
559 |       is-number: 7.0.0
560 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/curso-tailwind-abril-2025/bd20449dac5457468146213ebb3b0b1c774cf9ae/tailwind.config.js


--------------------------------------------------------------------------------