:root {
  --base: #191724;
  --text: #e0def4;
  --wght: 400;
  --grad: 75;
  color-scheme: light;
}

:root:has(.theme-toggle input:checked) {
  --base: #faf4ed;
  --text: #575279;
  color-scheme: dark;
}

* {
  transition: background-color 500ms;
}

@property --wght {
  syntax: "<number>";
  inherits: true;
  initial-value: 400;
}
@property --i {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --grad {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@font-face {
  font-family: "Roboto Flex";
  src: url("public/Roboto.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("public/Montserrat.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
body {
  padding: 0;
  margin: 0;
  font-family: "Montserrat";
  text-align: center;
  background-color: 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");
  }
}
.icon-color {
  fill: var(--text);
  color: var(--text);
  filter: brightness(100%);
  transition: filter ease-out 250ms;
}

.icon-color:hover {
  filter: brightness(150%);
}

.morph-path {
  animation: morph ease-out 250ms forwards;
}

.morph-back-path {
  animation: morph-back ease-out 250ms forwards;
}

a {
  text-decoration: none;
  color: inherit;
}

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

nav .left {
  font-variation-settings: "wght" var(--wght), "wdth" var(--grad);
  transition: --wght 300ms ease, --grad 300ms ease;
}

nav .left:hover {
  --wght: 700;
  --grad: 100;
  cursor: pointer;
}

nav .right {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
}

@keyframes weight-wave {
  0%, 50%, 100% {
    --wght: 300;
  }
  25% {
    --wght: 900;
  }
}
nav {
  margin: auto;
  align-self: center;
  padding: 0 50px;
  max-width: 700px;
  position: sticky;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  top: 0;
  z-index: 100;
}

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

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

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

nav label input {
  opacity: 0;
}

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

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

.container span {
  font-variation-settings: "wght" var(--wght);
  font-size: 30px;
  animation: weight-wave 2s ease-out infinite;
  animation-delay: calc(var(--i) * 50ms);
}

.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 0;
  padding: 0;
}

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

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

/* ///////////////////////// 404 page ///////////////////// */
body,
main {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body main.error {
  background-color: #faf4ed;
  color: #575279;
}

@media (prefers-color-scheme: dark) {
  body main.error {
    background-color: #191724;
    color: #e0def4;
  }
}
@property --wdth {
  syntax: "<number>";
  inherits: true;
  initial-value: 10;
}
@property --weight {
  syntax: "<number>";
  inherits: true;
  initial-value: 900;
}
@property --opsz {
  syntax: "<number>";
  inherits: true;
  initial-value: 20;
}
main.error * {
  font-family: "Roboto Flex";
  font-variation-settings: "wght" var(--weight), "wdth" var(--wdth), "opsz" var(--opsz);
}

.zero {
  animation: animate-zero 10s cubic-bezier(0.85, 0, 0.15, 1) infinite;
}

.fourOfour {
  animation: scroll 10s linear infinite;
  display: inline-block;
}

@keyframes scroll {
  to {
    transform: translateX(-100%);
  }
}
@keyframes animate-zero {
  15%, 50% {
    --weight: 200;
    --wdth: 75;
    --opsz: 120;
  }
  65%, 100%, 0% {
    --weight: 1000;
    --wdth: 150;
    --opsz: 155;
  }
}
.four {
  animation: animate-four 10s cubic-bezier(0.85, 0, 0.15, 1) infinite;
}

@keyframes animate-four {
  65%, 100%, 0% {
    --weight: 400;
    --wdth: 75;
    --opsz: 120;
  }
  15%, 50% {
    --weight: 1000;
    --wdth: 500;
    --opsz: 155;
  }
}
.not-found {
  animation: not-found 10s cubic-bezier(0.85, 0, 0.15, 1) infinite;
  font-size: 30px;
}

@keyframes not-found {
  65%, 100%, 0% {
    --weight: 300;
    --wdth: 50;
    --opsz: 144;
    letter-spacing: 20px;
  }
  15%, 50% {
    --weight: 1000;
    --wdth: 200;
    --opsz: 155;
    letter-spacing: 2px;
  }
}
main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
  align-items: center;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.big {
  font-size: 250px;
}

@media screen and (max-width: 768px) {
  .big {
    font-size: 175px;
  }
  .hideOnSmall {
    display: none;
  }
}