:root {
  color-scheme: light;
  --base: light-dark(#191724, #faf4ed);
  --text: light-dark(#e0def4, #575279);
}

:root:has(.theme-toggle input:checked) {
  color-scheme: dark;
}

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  text-align: center;
  background: var(--base);
  color: var(--text);
}

@keyframes morph {
  0% {
    d: path("M 480 840 Q 454.833 840 430.958 837.097 Q 407.083 834.194 384.5 828.389 Q 361.917 822.583 340.625 813.875 Q 319.333 805.167 299.333 793.556 Q 279.333 781.944 260.625 767.431 Q 241.917 752.917 224.5 735.5 Q 203.6 714.6 186.88 691.84 Q 170.16 669.08 157.62 644.46 Q 145.08 619.84 136.72 593.36 Q 128.36 566.88 124.18 538.54 Q 120 510.2 120 480 Q 120 445.5 125.625 413.281 Q 131.25 381.063 142.5 351.125 Q 153.75 321.188 170.625 293.531 Q 187.5 265.875 210 240.5 Q 232.5 215.125 258.125 195.031 Q 283.75 174.938 312.5 160.125 Q 341.25 145.313 373.125 135.781 Q 405 126.25 440 122 Q 453 120 463 125.5 Q 473 131 479 140 Q 485 149 485.5 161 Q 486 173 478 184 Q 461 210 452.5 239 Q 444 268 444 300 Q 444 390 507 453 Q 570 516 660 516 Q 691 516 721.5 507 Q 752 498 776 482 Q 787 475 798.5 475.5 Q 810 476 819 481 Q 829 486 834.5 496 Q 840 506 838 520 Q 834.5 554.5 825.406 586.063 Q 816.313 617.625 801.625 646.25 Q 786.938 674.875 766.656 700.563 Q 746.375 726.25 720.5 749 Q 686 779.333 647.778 799.556 Q 609.556 819.778 567.611 829.889 Q 525.667 840 480 840 Q 480 840 480 840");
  }
  100% {
    d: path("M 480 900 Q 465 900 450.5 894 Q 436 888 424 877 Q 385 838.5 346 800 Q 346 800 346 800 Q 293 800 240 800 Q 207 800 183.5 776.5 Q 160 753 160 720 Q 160 667 160 614 Q 121.5 575 83 536 Q 72 524 66 509.5 Q 60 495 60 480 Q 60 465 66 450.5 Q 72 436 83 424 Q 121.5 385 160 346 Q 160 293 160 240 Q 160 207 183.5 183.5 Q 207 160 240 160 Q 293 160 346 160 Q 385 121.5 424 83 Q 436 72 450.5 66 Q 465 60 480 60 Q 495 60 509.5 66 Q 524 72 536 83 Q 575 121.5 614 160 Q 667 160 720 160 Q 753 160 776.5 183.5 Q 800 207 800 240 Q 800 293 800 346 Q 838.5 385 877 424 Q 888 436 894 450.5 Q 900 465 900 480 Q 900 495 894 509.5 Q 888 524 877 536 Q 838.5 575 800 614 Q 800 667 800 720 Q 800 753 776.5 776.5 Q 753 800 720 800 Q 667 800 614 800 Q 575 838.5 536 877 Q 524 888 509.5 894 Q 495 900 480 900");
  }
}
@keyframes morph-back {
  0% {
    d: path("M 480 900 Q 465 900 450.5 894 Q 436 888 424 877 Q 385 838.5 346 800 Q 346 800 346 800 Q 293 800 240 800 Q 207 800 183.5 776.5 Q 160 753 160 720 Q 160 667 160 614 Q 121.5 575 83 536 Q 72 524 66 509.5 Q 60 495 60 480 Q 60 465 66 450.5 Q 72 436 83 424 Q 121.5 385 160 346 Q 160 293 160 240 Q 160 207 183.5 183.5 Q 207 160 240 160 Q 293 160 346 160 Q 365.5 140.75 385 121.5 Q 404.5 102.25 424 83 Q 436 72 450.5 66 Q 465 60 480 60 Q 495 60 509.5 66 Q 524 72 536 83 Q 575 121.5 614 160 Q 667 160 720 160 Q 736.5 160 750.625 165.875 Q 764.75 171.75 776.5 183.5 Q 800 207 800 240 Q 800 293 800 346 Q 838.5 385 877 424 Q 888 436 894 450.5 Q 900 465 900 480 Q 900 495 894 509.5 Q 888 524 877 536 Q 838.5 575 800 614 Q 800 667 800 720 Q 800 753 776.5 776.5 Q 753 800 720 800 Q 667 800 614 800 Q 575 838.5 536 877 Q 524 888 509.5 894 Q 495 900 480 900");
  }
  100% {
    d: path("M 480 840 Q 454.833 840 430.958 837.097 Q 407.083 834.194 384.5 828.389 Q 361.917 822.583 340.625 813.875 Q 319.333 805.167 299.333 793.556 Q 279.333 781.944 260.625 767.431 Q 241.917 752.917 224.5 735.5 Q 203.6 714.6 186.88 691.84 Q 170.16 669.08 157.62 644.46 Q 145.08 619.84 136.72 593.36 Q 128.36 566.88 124.18 538.54 Q 120 510.2 120 480 Q 120 462.75 121.406 446.07 Q 122.813 429.391 125.625 413.281 Q 131.25 381.063 142.5 351.125 Q 153.75 321.188 170.625 293.531 Q 187.5 265.875 210 240.5 Q 232.5 215.125 258.125 195.031 Q 283.75 174.938 312.5 160.125 Q 341.25 145.313 373.125 135.781 Q 405 126.25 440 122 Q 453 120 463 125.5 Q 473 131 479 140 Q 485 149 485.5 161 Q 486 173 478 184 Q 461 210 452.5 239 Q 444 268 444 300 Q 444 390 507 453 Q 570 516 660 516 Q 691 516 721.5 507 Q 752 498 776 482 Q 787 475 798.5 475.5 Q 810 476 819 481 Q 829 486 834.5 496 Q 840 506 838 520 Q 834.5 554.5 825.406 586.063 Q 816.313 617.625 801.625 646.25 Q 786.938 674.875 766.656 700.563 Q 756.516 713.406 744.977 725.516 Q 733.438 737.625 720.5 749 Q 686 779.333 647.778 799.556 Q 609.556 819.778 567.611 829.889 Q 525.667 840 480 840 Q 480 840 480 840");
  }
}
.morph-path {
  animation: morph ease-out 250ms forwards;
  fill: var(--text);
}

.morph-back-path {
  animation: morph-back ease-out 250ms forwards;
  fill: var(--text);
}

nav img {
  width: 24px;
  height: 24px;
}

nav {
  position: sticky;
  display: flex;
  justify-content: end;
  align-items: center;
  height: 50px;
  top: 0;
  z-index: 100;
}

nav button {
  background: none;
  border: none;
}

nav label {
  display: flex;
  align-items: center;
}

nav label input,
nav label svg {
  position: absolute;
  width: 24px;
  height: 24px;
}

nav label input {
  opacity: 0;
}

main {
  position: absolute;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  white-space: pre;
}

.dots {
  animation: dots infinite 1s;
}

@keyframes dots {
  0% {
    content: ".  ";
  }
  25% {
    content: ".. ";
  }
  50% {
    content: "...";
  }
  75% {
    content: "   ";
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  margin: 0 auto;
  padding: 2rem;
}

p,
button {
  margin: var(--size-6);
}

body > picture,
button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin: 2rem;
}