:root {
  --color-1: #51b172;
  --color-2: #efd705;
  --color-3: #f5812e;
  --color-4: #f55643;
  --color-5: #f66665;
  --color-6: #6d64a7;
  --color-7: #688dd3;
  --color-8: #78b3db;
  --color-9: #0b7895;
  --color-link: deeppink;

  background-color: light-dark(#f7f7f7, #242424);
  color: light-dark(#000, #fff);
  color-scheme: light dark;
  font-family: Arial, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important; /* 1 */
    animation-duration: 1ms !important; /* 1 */
    animation-iteration-count: 1 !important; /* 1 */
    background-attachment: initial !important; /* 2 */
    scroll-behavior: auto !important; /* 3 */
    transition-delay: 0s !important; /* 4 */
    transition-duration: 0s !important; /* 4 */
  }

  @view-transition {
    navigation: none !important;
  }
}

.body {
  display: grid;
  grid-template-rows: 1fr auto;
  margin: 0;
  min-height: 100vh;
}

.heading--1 {
  color: var(--color-1);
}
.heading--2 {
  color: var(--color-2);
}
.heading--3 {
  color: var(--color-3);
}
.heading--4 {
  color: var(--color-4);
}
.heading--5 {
  color: var(--color-5);
}
.heading--6 {
  color: var(--color-6);
}
.heading--7 {
  color: var(--color-7);
}
.heading--8 {
  color: var(--color-8);
}
.heading--9 {
  color: var(--color-9);
}
.heading--0 {
  color: var(--color-link);
}

.hero_title {
  font-size: 8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
  margin: 0;
  position: relative;
  text-align: center;
}

.morph-container {
  position: relative;
}

.morph {
  animation: morph 12s infinite ease-in-out;
  filter: contrast(25) blur(1px);
  position: absolute;

  &:nth-last-child(3) {
    animation-delay: -4s;
  }
  &:nth-last-child(2) {
    animation-delay: -8s;
  }
  &:nth-last-child(1) {
    animation-delay: -12s;
  }
}

@keyframes morph {
  0%, 5%, 100% { filter: blur(0px); opacity: 1; }
  20%, 80% { filter: blur(1em); opacity: 0; }
}

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

.content {
  position: relative;

  .image {
    max-width: 320px;
  }

  .emoji {
    font-size: 4rem;
    position: absolute;
    top: 50%;
  }
}

.footer-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  list-style: none;
  padding: 0 20px;
}
.footer-list a {
  color: inherit;
  display: flex;
  gap: 6px;
  text-underline-offset: 4px;
}
.footer-list a svg {
  fill: currentcolor;
  height: 22px;
  width: 22px;
}
.footer-list a:hover,
.footer-list a:focus-visible {
  color: var(--color-link);
}